issue 14: 图标设计的要点

发表于 2018-09-08   |   分类于 设计课程

笔记部分

  1. 一致性强

    1. 细节构成一致:图标细节包含线条粗细、圆角大小、不透明度、倾斜角度、断线长度及接头样式(平头/圆头)、视觉大小等。视觉大小是指虽然实际大小不一致,但是视觉大小是一样的。同样尺寸的圆和矩形,矩形看起来会更大,所以要适当调小偏矩形的图标尺寸,使他们视觉大小一致。
    2. 元素一致:在图标中反复使用同一种元素能直观体现出他们一致性来,这样做的好处是能具有很强的辨识度,令人印象深刻,用户很快就能记住这些图标,加强了品牌建设。
  2. 易于拓展:功能图标有时甚至可以直接当作应用图标或者 logo 来使用,同时还可以通过点线面动效变化做下拉加载动画,这是单个图标的扩展。同时随着业务和功能的变化,在产品发展过程中很可能需要扩展图标库,这就要求我们在最初设计图标时应定义好视觉特征和延展规则,让图标易于在原有设计的基础上进行扩展,使得设计可延续。
  3. 图标尺寸:在移动端 iOS 规范中 2 倍图下最适合人点击的区域大小为 48*48 px, iOS 功能图标尺寸为 48 加或减 4 的倍数;安卓 android 功能图标尺寸为 48 加或减 8 的倍数。
  4. 图标网格图标网格 图标网格
  5. 形状构成:所有的图标都建议使用基础图形进行组合,运用布尔运算绘制,以保持图标整体的合理性,尽量不要使用钢笔工具勾勒(除非是细节点),钢笔绘制随心所欲不严谨,美感大打折扣。
  6. 图标细节

    1. 倾斜角度:设定一个角度规范值所有元素按倍数改变角度常用角度 15%、30%、45%、60”等会比较清晰。
    2. 像素对齐:图标的线条一定要紧贴像素网格,不然边缘会虚化模糊;形状描边对齐方式通常用内部对齐方式(不会改变图形尺寸),居中对齐会出现模糊,外部对齐会改变图标大小;

思考

  1. 短期来说,还是以用 iconFont 为主

发表新评论

© 2019 Powered by Typecho & Theme 豫ICP备15027577号