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)配色和设计是有一定的方法论,而不是依据自己的主观审美
在这里插入图片描述
在这里插入图片描述

扫描二维码关注公众号,回复: 4328906 查看本文章

猜你喜欢

转载自blog.csdn.net/lemon_SIR/article/details/84702480
今日推荐