ICON设计是UI设计中非常重要的一个环节,它能够帮助我们美化画面,传递情绪,快速导航,而且不受语言限制,那今天就来给大家分享下ICON的设计干货。
首先图标可以分为3大类:功能性图标 , 应用图标 , 创意图标。
功能性图标
应用图标
创意图标
今天主要分享最常用的功能性图标,功能性图标强调: 功能表达 , 工整 , 有序 , 规范。我把它分为了三部分来展开。
第一部分 基础造型
1. 结构准确 作为设计专业的你,这一点应该不用多说,首先比例,透视,不能出问题。
2. 造型简练我们做ICON的时候最好按尺寸来做,或者做完以后缩到最小形式,看一下是否清晰, 千万不要画的太复杂,因为大部分功能图标的大小在20到40像素左右,如果很复杂,看起来就像个线团,会降低识别度。
3. 有辨识度这个非常重要,首先得让用户能看得懂,其次不能让阅读产生歧义。教大家几个方法,我们可以通过查找资料来寻找辨识度高的ICON,来参考它形状和轮廓。
参考实物,通过布尔运算来简化,抓住物体的特点来设计,表达最基本的物体特征。
ICON画完以后,做下可用性测试 ,脱离页面,脱离文字,看能否看出它代表的是什么意思,是否有对下个界面的预见性。
4. 重心要稳
大家看一下上面这两个播放ICON。是不是第二个播放ICON,看起来更舒服一些?但其实第一个才是中心点对齐的,如果是这种情况,我们一定要保证视觉看上去要稳才行。
再来看下 下面的这个组合的图标。组合图标,主次图形比例最好保证,2比1左右的比例。
5. 精致饱满我们可以在图标下面画一个方块,来看一下隐形区域,看一下留白是否过多,留白多了,不饱满,太饱满了就不透气,导致紧张,运用好留白,需要长期的积累经验,多看多练,时间久了找到那个微妙的平衡点。
再来看下,下面这两个心形,你们觉得哪个更好看?
第一个看起来更舒服吧,第一个是用布尔运算绘制的,第二个是用钢笔工具绘制的,使用 “规则图形”进行加减组合,ICON看起来更精致更专业。
第二部分 基本规范
1. 布局我们基于24*24的画板举例,我们做ICON的时候尽量在20*20的区域里做,有些ICON看起来小,就适当给它放大处理下,留出来的4像素区域,就是给特殊ICON准备的,但是绝对不能超出画板范围。
2. 清晰度清晰度这个事情,在分辨率高的屏幕上还好,但是在分辨率低的屏幕上,看起来就会虚的不行,所以为了我们的设计,无论在什么样的屏幕上都清晰可见,我们必须要对齐像素,确保X轴和Y轴坐标为整数,千万不能带小数点。
3. 圆角范围一般我们在做圆角ICON的时候,有明显的图形交界处不需要做圆角,图形内部也尽量不要做圆角,不然会导致ICON看起来不简练。
如果是线形ICON,首先,线的粗细要统一,其次,线的端点是直的,就要都统一成直的,端点是圆的就要都统一成圆的。
4. 安全网格当我们做一整套ICON的时候,会发现,方形的ICON比圆形ICON,视觉上看起来更大些,所以如果我们做18像素方形ICON的时候,圆形ICON就要做到20像素,视觉上看起来才统一。
图中的4个图,就是我们做ICON时候用的安全网格。用这个网格做出的一整套ICON,看起来大小会比较统一。
5. 切图切图时要注意的是,有些可点击的ICON是需要留热区的,不然触摸区域太小了,会导致体验很差。
切图的名称也需要注意下,命名一般都用英文,或者是拼音,功能+名称+状态,比如视频号中的喜欢,心形ICON,我们可以写成shipinhao_like_normal,注意横杠要用下划线。
最后还有个最重要的事情,如果ICON切的不是矢量图( PDF或者是SVG ),验收的时候一定要注意有没有虚边,尤其是安卓手机,开发们用的控件不同,会导致你的切图发生变化。一但有虚边,品质瞬间下降。验收一定要仔细。
第三部分 风格定位
ICON的风格要根据产品风格定义,我们可以通过形状和颜色来定义ICON的风格,形状上从圆角大小,线条的粗细,造型轮廓,表达ICON的性格。颜色上,是否需要颜色辅助,用什么颜色符合产品风格。
举个例子,比如我们做一个针对儿童的产品,那我们的ICON就要设计的可爱些,友好些,我们可以把ICON做的更圆融,运用圆角和圆形端点,突出的部分尽量做的短小,颜色丰富,在做一些小动效,赋予ICON情绪。
到这里功能性图标的基础知识就分享完了,接下来,简单的带过下应用图标和创意图标设计。
首先,应用图标更偏向logo设计,风格有线性图标 ,文字设计图标, 局部提取图标,图形图标, 折叠图形图标 ,渐变图标等等。
下图是应用图标的尺寸
创意图标大部分用于404,占位符,引导等,更注重设计内涵, 故事性 ,和原创精神。
风格也有很多种,2.5D风,MAB风,炫酷的,拟物的等,更注重视觉表现,光影,质感,氛围等。
最后,不管做什么设计,多看,多练,对设计有了一定的敏感度,就不需要去记那些死板的的理论了。当你还是初级的时候你需要学习别人的方法论,当你有经验了,你就有属于自己的一套方法论了。
今天的分享就到这里喽~
关注“小新的芝士绘本”祝大家天天开心~