UI设计课EDC研究所1期 Part 18/19 -金刚区图标细节

1. 图标特点

• 需求层级较高（是重点设计内容）
• 颜色较为丰富
• 以面性图标为主

2. 基础规范

（1）容易出现的问题

• 尺寸不合理
• 缺少呼吸感

（2）尺寸： 大多数图标的尺寸为：90px（可浮动）

（3）呼吸感

• 水槽间距：40px（图标区域到四周的留白）
• 图标与文字：40 x 0.618 = 24px （40为水槽间距）
• 内部呼吸感：90 x 0.618 = 56px
  

3. 图形分析制作

（1）容易出现的问题

• 形状凌乱，也就是图标的造型不同意
• 造型复杂，要简约一点
  

（2）制作过程

• 表意要准确：观察实物或照片，比如房子等，寻找共同点或轮廓点，从而提取图标
• 搜索类似：在图标库里寻找类似的
• 再设计：把图标设计优化
• 要点：造型简洁，但细节要丰富
  

4. 配色

（1）容易出现的问题

• 色彩单调乏味（可能是只用了品牌色）
• 丧失色彩情绪，也就是没有考虑颜色的心理作用
• 注意点：配色不能根据自己的主观，而是考虑用户的心理，同样也可以用这来说服别人

（2）颜色举列

• 红色：代表抢手、热度高。可用于租房等
• 蓝色：代表科技、冷静。可用于办公、写字楼等
• 绿色：代表安全、信任。可用于经纪人、业主加盟等

（3）配色技巧：色环配色

• 由主题色拓展到邻近色、互补色
• 注意点：要保证色调相同，也就是饱和度和明度
  

5.细节处理

（1）微渐变

• 渐变尽量在同一色系，体现自然
• 复用小技巧：在做好一个之后，仅需要调整色相，生成其他图标。就可以保持色调一致。
  
  （2）微投影
• 尽量用弥散投影，不用系统自带的
• 投影的颜色要与背景色类似，不能跨度太大
• 弥散投影技巧：复制缩小80% - 90% ，高斯模糊或羽化20% - 30%，下移
  
  

6.小结

（1）借鉴是指借鉴别人的手法或尺寸，而不是设计内容
（2）在尺寸设计这块，都使用0.618
（3）配色和设计是有一定的方法论，而不是依据自己的主观审美