小图标的设计有哪些选择?

用户头像
西安/UI设计师/7年前/324浏览
小图标的设计有哪些选择?

APP设计除启动、登录、缺省页可以自由发挥。其他界面所用图标都有一定规则。一个APP用到图标的地方,有哪些呢?

金刚区图标:一般用在首页,尺寸和设计也可以有一定的发挥。尺寸一般在24〜64px。 

其他图标有:标签栏图标、分类图标、功能图标等等。尺寸一般在16px、24px、32px、48px。今天主要研究一下这些小图标的设计有哪些选择呢?


一. 单色面向图标

1. 异形图标:用的最多,它又分为圆润、直角等等。相对稳重和扎实。
2.几何背景型:界面元素过多时,用一种形状做背景,界面不会杂乱。或是界面过于单调,用多种色彩作背景点缀页面。
3. 几何外框型:一般用作统一界面元素,相对上面两种用的比较少。


二. 单色线向图标

线性图标是由线和点组成的,优点是轻巧简练,具有一定的想象空间,且不会对界面产生太大的视觉干扰。
1. 闭合线性图标:中规中矩的感受。
2. 断点线性图标:俏皮的感觉。


三. 多色面向图标

多色面向图标,用多种色彩表现图形使界面更丰富多彩的基础上,更能表现物体的层次。
1.扁平类:采用2〜3种纯色的搭配,相对单色更加活泼,辩识度更高。一般采用主色搭配相近色、互补色等等。
2. 微质感:带有些微质感,拟物化设计。一般用作物品分类等的设计。


四. 多色线性图标

多色线性图标:采用2〜3种颜色的线条组成,相比单色线条更活泼俏皮。


五. 多色线+面图标

更加吸引眼球,有种画重点的感觉。整体给人一种年轻化的感觉。

1. 扁平类:采用2〜3种颜色的搭配,有在线性图标的基础上增加面的点缀,还有面性图标的基础上增加线的轮廓。相比面相图标和线性图标更加明显。

2. 微质感:对微质感图标增加轮廓,漫画风的感觉,给人年轻、活泼的感觉。



总结


可以根据整个系统的风格和对用户的引导选用图标。如果有的地方突出内容就选择视觉干扰少的图标类型。有的地方过于单调,就选用吸引眼球的图标。保持一类图标的大小统一、风格一致、留白一致、简洁明了就好。
文中引用的图标来源于iconfont中,非自己原创,有侵权联系我删除。

1
举报
|
4
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D渐变流体抽象矢量UI背景图
UI 登录界面设计模板包
科技医疗透明柜UI界面设计
拟物风质感写实UI卡片合集源文件
高级感金属拟物 UI设计组件库
【新年UI图标】30个图标
UI界面 组件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
盲盒APP UI设计
户外旅行飞机情侣假日出行
【新年UI图标】会员icon
【新年UI图标】体育icon
手表表盘UI系列
【新年UI图标】秒杀icon
钱包ui模板
新能源APP应用UIKit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
智能家居中心 简约 UI设计组件库
【新年UI图标】汽车icon
高级表盘系列UI源文件
我的钱包-UI界面设计-app
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
你可能喜欢
相关收藏夹
大家都在看
登录注册