文章详情

　　图标是UI设计中的点睛之笔，更是赋予了UI设计灵魂。很多小伙伴留言说不会做图标设计，所以今天AAA教育胡老师今天谈谈图标设计。
 

　　图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。相信一整套优质的图标对于设计质量的影响是非常巨大的，这考验着设计师的协作能力，以及对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。
 

　　尺寸
 

　　由于图形化用户界面的使用环境不同，导致图形用户界面在使用中的显示环境不同。因此，图形化用户界面的图标尺寸，也出现了不同。同时，随着显示技术的不断发展，图标对应 的显示尺寸越来越大，分辨率越来越高，这使得图标的细节，也不断地在进行改进中。并且跨平 台软件的图标大小或像素的数量，通常按照特定的技术规范进行设计 。一般的图标标准尺寸有3种，分别为24*24 像素、32*32像素和48*48像素。其中48*48较为常见。
 

　　图标设计，不同于其他的视觉设计。同一图标，由于其尺寸不同，展示效果和制作细节也不尽相同。因此，在不同显示系统下的图标，在图标设计时，都有其对应的图标效果。
 

　　高识别性原则
 

　　图标设计的目的，是通过符号化的图形传达 信息。因此，图标设计中高识别性原则就显得尤其重要。图标，是建立在虚拟世界和真实世界的一种隐喻或映射关系的桥梁。隐喻旨在“以一种更为明显，更为熟悉的观念符号来表示某种观念”，观念之间存在着类似性。
 

　　统一性原则
 

　　一个软件或程序的系统中，图标的设计风格 需要保持统一。因为统一的图标比单一零散的图标更具品质，更容易让用户理解和接受。(如下图美团APP)
 

　　简洁性与符号性原则
 

　　视觉图案的写实程度，与受众对 视觉图案的关注度，是成正比的。即越写实的图案，越容易引起受众的关注。因此，设计师在进行图标设计时，其设计的图标的视觉表现越是逼真，越是可以引起用户更多的注意，也可激发更多用户的使用兴趣。但是，形象写实逼真的图标设计，却也从另一个方面影响了图标信息的快速传达。
 

　　象征性的符号，在图标设计中也是常见的。符号图标能够更快地被用户所接受、记忆和识别。同时，符号图标所使用的图形文件小，便于硬件的支持和运算效率的提高。因此，在图标设计时，尽量不要使用过于复杂的图案。过多的图形和装饰效果，会降低图形的认知度，特别是在小尺寸图标中，由于图标尺寸偏小，导致视觉上的识别度降低。
 

　　文字应用原则
 

　　在图标设计中，除了图形设计之外，还有一 个重要的组成部分就是文字。简洁明快的文字标签和清晰准确的文字说明，能更好地提高图形化用户界面的工作效率 。在设置图标文字时，最好使用简单通俗的文字作为图标的说明文字。在图标文字的选择上，需要具备高度的概括性。同时，图标文字又需要有高度的信息传达性，能够充分体现其是对图标图案的一种解释和说明。
 

　　在图标文字的设计中，需要对文字属性和文字使用环境进行考虑。而文字的字体、尺寸和色彩等方面，也会对图标的整体视觉和运行效果产生影响。在文字字体的选择上，考虑图标字体的形态不宜复杂。文字的识别度差异，在通常情况下，中文字体应不小于14px，英文字体应不小于 12px。另外，应该尽量使用均匀的间距，使文字更为整齐清晰，易于辨体识。
 

　　图标的设计是 UI 设计中非常容易被忽略的环节，建立优秀的图形体系也不是一、二个设计人员的事，需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。本次图标的升级，仅仅是一个开始。我们会建议在调用图标时，考虑具体业务对于图形化寄予的期望，以及用户操作时的心智模型等因素，结合实际情况做调用和适当的二次设计。如果想学习更多的UI设计小技巧可以去AAA教育官网查看更多哦~