金刚区线上示例

image.png image.png
image.png image.png

金刚区图标尺寸：90px 上下浮动
水槽间距：40px
图文间距：24px
图标占比：黄金分割比

设计准则

  • 表意准确（基于现实）
  • 造型简洁
  • 统一度高

设计方法

image.png
image.png
image.png

配色分析

色彩情绪

image.png

色环配色法

image.png
image.png

改版前后对比（饱和度、明度调整在同一水平线）：
image.png

细节处理

微立体

不要让图标过于扁平。

微渐变

图标的底色不要过于单一。
image.png
对于一套图标来说，不要调整渐变的跨度，只需要调整色相。

微投影（弥散投影）

image.png
image.png

趣味性设计（大众点评）

风格定位

确定产品定位的关键词：
image.png

绘制实例

根据关键词在图库中检索对应的图片，找到最合适的图片并进行分析：
image.png
通过三段式上色的方法确定图标的底色：
image.png

FFA062
#FFOE7F
案例实操
#B600D5

上色过程中，三个颜色的位置不是等分的，需要有高光设置：
image.png
绘制图标时，先提取轮廓：
image.png
确定图标的内部比例：
image.png
布尔运算获取图标的各个部件元素：
image.png
在根据之前获取的图标底色对图标进行上色后，继续打磨细节：
image.png
总结：
image.png

Tab 栏图标设计

image.pngimage.png

线性图标（1）

image.png
image.png

线性图标（2）

image.png

线性图标（3）

image.png

平面图标

image.png

绘制实例（闲鱼）

image.png

  • Tab 栏高度：98 px
  • 图标大小：48 px
  • 文字行高：20 px
  • 选中填色：品牌色

色块填充技巧

常见的填充方式：

  • 点缀填充
    • 占比 30%
  • 错位填充
    • 占比 80%
  • 完全填充
    • 占比 100%

无论采用什么填充方式，必须保证视觉的统一性。
image.png

爱彼迎线性图标

image.png

图标可用性分析

凸显性

image.png image.png

  • 金刚区内部可以根据业务需求的侧重点继续进行分区
  • 功能的使用频次直接决定了图标的位置
  • 好的金刚区设计可以帮助用户快速进行选择

    预见性

好的设计就是所见即所得。

  • 有效的突变辨识度
  • 相辅相成的品牌感
  • 下一界面的预见性

    色彩情绪

    image.png

    色彩链接

    业务确定色彩

    image.png

    邻近色

    image.png

    可用性测试

    任务性测试

  1. 设计细节自查（设计统一、呼吸感、色彩情绪、业务联系）
  2. 辨识度测试（90% 以上能够根据辅助文字理解图标的意义）
  3. 对比色任务测试（无障碍设计、在 5 秒内能够察觉两个图标颜色区别）

总结

image.png