填充图标设计大法，码了……
填充图标的运用场景
填充图标在APP界面中较为常见，一般作为很多功能分类，或者是功能入口【金刚区】这块使用的是最多的；
图片来自追波 Kuman
金刚区是一个页面中头部的重要位置、是页面的核心功能区域，表现形式为多行排列的宫格区；
刚区的部分是1排4-5个图标，共2排也就是8-10个图标。一行5个图标也是当下行业内的图标数量极限了。在多的话势必会显得很拥挤，而且图标的识别性会打折扣。
【内容补充部分/在详细笔记中稍后会补充完整】
3个设计小技巧
1/要符合预期
预期代表的是图标信息的传递性，也就是图标的可辨识性；图标的辨识性在图标设计当中永远是第一位的
图标形状应与相应的功能相联系，表达的含义一定要准确；
图标颜色应与相应的功能页面色彩呼应；
因此在图标设计中，我们首先考虑的一点，就是如何使用图形，来将这个图形所表达的含义表达清楚，快速传递相应的信息。技法只是一种实现手段，不能因炫技法，而违背逻辑，忽略体验。同时需要考虑图标色彩情感，得和行业属性相匹配；
2/要造型简约
对于大脑识别信息的速度来说，简单图标会比复杂图标识别速度更快一些。因此在填充图标设计中，如果不是为了追求某种特殊的效果，我们可以把造型设计的更简约一些即能保证图标的识别性，又能保证视觉美观。
3/要配色明快
另外考虑到图标会以群体分布，而且要突出重点功能，因此我们的颜色需要设计的相对明快。但是饱和度不宜过高，饱和度过高会显得图标不够精致，不够上档次。另外就是图标尽量不要超过5种色系，可以在色系上进行微调。
看看我怎么做的？
1/绘制好骨骼参考线，骨骼参考线很重要，能保证不同大小图标的视觉重量一致性；
2/根据图标属性填充相应的颜色（）（)，颜色饱和度不宜过高，但是也不能太灰；
3/对图标形状细节进行调整，也可以通过不透明度来拉开图标的层次感，这里的不透明度在50%~70%较为合适。
4/如果觉得颜色稍微有点灰，可以再最后阶段再对色值进行相应的调整，最后再修饰一下一下细节，或者可以加个投影作为装饰，最终得到图标效果。
原文链接：我们的设计日记
网友评论