图标基础知识整理

如题所述

第1个回答  2022-06-11
图标是具有高度概括性的、用于视觉信息传达的一种图形化符号,最早可以追溯到洞穴壁画。

图标可以分为广义和狭义两种,广义值得是所有现实中有明确指代含义的图形符号,狭义主要是指在计算机设备界面中的图像符号,有非常大的覆盖范围

图标大致可划分为四大种类

一般是指有明确功能、提示含义的图标,用与导航,分流等,但是不同页面的导航图标出于信息层级和运营的需 要,对于视觉风格的要求也不一样。

导航图标又可分为tabbar图标、金刚区图标、个人中心等功能性图标

Tab Bar图标常规表现为,线性、面性、线面结合等,但是也会有注重品牌、个性化或者运营活动 的,风格会与品牌贴近,或者与近期时事活动相关

金刚区图标的风格会比较多样化,通常来说视觉层级会更重,设计感更强,通常以多色渐变风格为主,音乐类APP会以单色线性风格强调品牌调性,部分电商也会直接以实物展示。

个人中心等页面的图标主要以装饰性和解释性为主,去掉图标也不会影响整体导航,图标设计风格通常也不会过于复杂,多以线性风格展示

以装饰和解释性说明为主,主要作用是让视觉整齐,观赏性更强,品牌、氛围感更强,一般用在说明性和解释性的界面,如运营活动、VIP权限等界面,视觉风格跟随页面的调性来

启动图标担任着品牌标识的功能,相当于产品的logo设计,需要融入品牌调性,并且由于使用场景的限制,也要求启动图标遵循设计规范,保证最小尺寸小的识别状态,大多数图标均以以下形式展示。

大部分的启动图标不会设计得过于复杂,也是由于过于复杂的图标会增加用户的认知成本,尤其是在互联网信息爆炸的时代,使用扁平化图标可以有效地减少用户的认知成本,并通过加强色彩感知等方式来占领用户心智。

活动运营图标是有时效性的,设计主题跟风格多与节日相关,主要是用来增加节日氛围,提升点击率等

设计风格并不是一成不变的,需要根据不同的场景以及用户人群使用不同风格的图标,如有运营活动,也需要根据运营做相关调性的风格

图标的设计风格大致可以分为以下几类

此处只列举了常见的设计形式,具体使用以及是否需要创新要看具体的使用场景

面性图标也可以分为无彩色、单色、多色、渐变色等,具体看使用场景

在一些小游戏或者H5活动中会常见这种设计风格

3d扁平风格进来也逐渐步入视线,随着运营需求提升和设计师技能进步,相信不久之后会越来越多的看到这种风格

在图标开始设计之前,要先对图标的规范有一个清晰的认识

图标的设计规范大致要遵循的几个规则

图标大部分情况下是作为导航和解释说明用的,所以表意明确是图标的基本功能,对于一些非常见类型的图标,在制作时要通过脑暴合理筛选关键词,然后开始设计,设计完成后还要进行一些简单测试,可以向同事征询意见,询问这个图标是不是可以表达相关意思,如果答案是否,应该问明原因,多设计几种方案,或者和同事们一起进行脑暴。

图标的一致性可以分为多种情况

在同一功能区的图标,需要保持设计风格的统一性,如果用线性图标,就全部是线性图标,如果是面性图标,就统一使用面性图标

在视觉设计中我们会遇到一些视错觉情况,以下列举常见的几种情况以及解决办法,保持视觉一致的方法并不是让图像的长宽一致,甚至图形的物理尺寸一致时,视觉重量感受也是不一样的。以下左图,矩形的视觉重量明显更大,也没有留白空间,通过模糊化的图形可以看到,三角型的视觉重量明显偏小,以下右图调整之后,可以看到视觉重量接近一致,不过视觉重量的判断需要设计师多观察,多尝试。

程序默认的中心对齐方式很多时候并不能在视觉上平衡,这时我们一般需要通过调整使其在视觉上平衡。此外如果一个图形其中一部分面积远大于另一部分,那么就会让这个图形的中心产生便宜,必须要往较小部分的方向移动才能产生平衡。

面性图标中,要考虑到正形和负形的比例,如下图,白色面积应在所有图形中保持一致

不统一的透视会造成空间的错乱感,在绘制图标时应考虑到从什么角度去观察图标

一些图标会添加亮点或者特点,在图标设计过程中需要保证图片整体的特点是一致的,如断线风格等

构图时也应该让图标整体保持一致,保证图标在整体的节奏和韵律上时一致的

像素对齐算是老生常谈,个人认为目前算是一种匠心精神或者对细节的极致追求,因为在一些项目中也会用到svg格式,或者图片在不同屏幕尺寸适配之后,切图尺寸不一定还能保持像素准确,但至少在设计稿上还是应该保持像素对齐

跟开发沟通最常沟通的就是标注和切图,为了方便开发使用,通常给出的切图是长宽相等的矩形切图,此外还需要为图标留出一定的出血空间,一方面保证切图的热区设置可以达到有效点击范围,另一方面可以预留出图标的调整空间。

使用栅格系统可以有效地解决上述问题,包括视觉重量的平衡,切图的出血等等,借助sketch的symbol功能还可以使排版更方便,使用蓝湖插件则课直接将symbol大小作为切图大小,切图更方便

随之越来越多的产品开始同质化,品牌也越来越被重视,通过在图标中融入品牌基因的方法来加强品牌认知

品牌基因提取的方法可以从两个方面进行

从logo中提取

从品牌气质中提取,通过提取品牌的气质来改变图标的个性

如网易严选图标,通过提取品牌气质来设计图标个性

综上所述整理出图标自查手册

1.功能明确

2.表意明确

3.一致性

4.品牌调性

文章参考:
1.《小身材,大影响!设计师应该知道的图标基础知识》( https://www.uisdc.com/small-icon-big-impact

2.《ICON设计教学.1 —— 图标设计详解》-超人的电话亭( https://www.ui.cn/detail/436051.html

3.《菜心·图标自检手册》-菜心( https://www.jianshu.com/p/67239eef3d43

声明:
图片和素材来自网络,侵删
相似回答