ICON图标设计优漫动游

  ICON承载了App大部分功能的引导入口，是交互设计中是相当重要的一环。  
ICON图标设计  
  ICON有一种象征意义或隐喻性，并在日常生活中经常遇到。icon代表了一些行动、事、人、真实的、虚拟的视觉符号。  
  ICON不仅是图标这么简单，它承载了文字的含义，将文字图形化，而让人使用最少的时间来理解这个按钮的含义，ICON是审美与功能完美融合的元素。  
  一、ICON设计原则  
  1，意义明确  
  这个很容易理解，当你要做一套icon时，它首先要有自己明确的含义：  
  这个放在那里？  
  这个是干什么的？  
  这个想要传达什么含义？  
  能否让用户一眼就能看出来表达的含义，这是评判icon好坏的第一标准。  
  2，简洁  
  含义表达清楚了，接下来就是icon的表达形式，因为面积小，所以过于复杂会带有一些不必要的麻烦，比如看不清内容，含义模糊，这就要求设计师在去除冗余的细节的同时，保证icon目的和功能性，并且整体风格要和整体的视觉协调统一。  
  3，可用性  
  可以通过查找性测试和预测性测试来得到icon的可用性。  
  查找性测试：被访者需要按照任务点击图标，后台需要计算被访者在不伴随文本标签的同时，找到正确图标的操作时间，首次点击的正确率。  
  预测性测试：需要被访者推断这个图标所代表的功能，并推测点击后会发生什么。  
  4，一致性  
  当满足以上几条原则后，最后需要注意的就是所有icon的一致性，比如颜色，线条粗细，感情特征，开口等等…  
  只有保持最终的一致性，你的设计才是完整的。  
  二、ICON设计规则  
  1，基本型  
  画icon和插画一样都是由最基本的形状慢慢组装来的，界面上所有的icon都可以近似成一个基本形状，比如各个方向的长方形、圆、三角形、正方形等。  
  2，图标的大小  
  图标的大小不只是物理上的大小统一，眼睛在很多情况下都是欺骗你的，眼见未必为实。  
  比如两个物理大小相同的形状，一个圆和一个正方形。正方形总是看起来会大一些，因为填补了更多的空间。  
  所以我们需要把正方形缩小一点，才会让视觉看起来大小相同。  
  3，栅格  
  一般绘制会调出网格系统，我们为了保持图标的一致性，需要设定一些辅助的尺寸来保证视觉大小统一性  
  4，角度  
  大多数情况下，是使用45度角，或者他的倍数。  
  5，线的粗细  
  一般来说用2px或者2的倍数，必要的情况下可以用3px。  
  不要介入过多的粗细，因为会破坏一套图标的统一性和凝聚力，并且不太建议用太细的线条，除非你刻意做线性风格图标。  
  6，尺寸  
  没有太大限制，现在2424和4848是目前比较标准icon尺寸。  
  7，工具  
  工具方面推荐使用ai绘制，因为在圆角和形状切割方面有着较大的优势，sketch的简洁方便也是个不错的选择，但是在转为svg格式的时候会产生许多不必要的东西，如多余的图层、纯颜色层、蒙版等等。  
  三、ICON设计细节  
  1，拼接处断线  
  2，复杂处平衡  
  3，避免中心断线  
  4，一笔画完  
  当然如果实在不能一笔也别勉强，设计图标的时候需要考虑到使用场景及规则，所有的视觉风格应该有相关联的点，比如线条的粗细，圆角的统一，断点的统一等。  
  总结：  
  最后，功能图标和桌面上的应用图标不是一回事，比如应用图标非常需要设计师打造一枚个性十足的icon，来引起用户的注意。  
  而页面的功能icon往往是相对安静的存在，哪怕没有了也是没关系，比如抖音的底部工具栏是用文字来代替图标。