进阶指南!设计师应该掌握的7个图标设计规范!

进阶指南!设计师应该掌握的7个图标设计规范!

评论有奖

收藏 3 点赞 19

今天给大家分享一些画图标icon应该注意的细节&规范,希望对大家有一点帮助。
1、栅格规范
栅格作为图表绘制的底层结构,是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。图标常见尺寸为16
*16;20*
20;24
*24;32*
32这四种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。TDesign 最终选择以16*16px 的尺寸作为图标绘制的统一栅格尺寸。
 
2、像素点对齐
由于屏幕像素的特性,非整数像素将会以灰度显示,那样将影响图标的清晰度以及整体的含义表达,所以在栅格内绘制时应尽量对齐像素点,最大程度上保证图标的清晰度。
 
3、画布
画布作为图标设计的实际操作区域起到了控制画面、限制大小、调整间距等作用。在 TDesign 图标的设计上实际画布应控制在栅格中心14*14px的区域,周围留有1px的出血。在一些特殊情况下如 icon 过长或者有突出的边角等,允许内容适当延展,以确保图标视觉重量上的统一( 超出部分建议为多边形的边角,并不宜超过 0.5px )
 
4、辅助线
辅助线有助于约束图标的大小以及一些线条的走向,在制作时应尽量根据辅助线进行绘制以保持各图标间视觉重量的统一。我们对栅格内的圆形、方形、斜线等路径进行了规范并生成了一套辅助线系统。在图标设计的过程中应根据设计对象的特性选取相应的辅助线来控制图形样式。
 
5、线条
绘制时建议使用1px宽度的笔画,这样以便在小尺寸的栅格内保证更多的样式可能性,在 16px 时为 1px, 24px 时等比加粗
 
6、长度为2的倍数
在处理长线线条的长度时建议使用 2 的倍数,这样更易进行对称处理。而短线上建议使用 3 个像素
 
7、角度
线条如需倾斜最好与栅格内 45° 辅助线相平行,或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度

七帅专栏作者

人气 12.4w 文章 11
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
进阶指南!设计师应该掌握的7个图标设计规范!
收藏 3干货满满
点赞 19
2025大广赛“超能”命题解读,助你拿国奖!
😘 立即查看 >
下一篇 2025大广赛“超能”命题解读,助你拿国奖!

优设官方微信群

  • 1AIGC自学交流群
  • 2个人IP运营交流群
  • 3优设私单群
  • 4优设同城搭子群
  • 5优设大学生交流群
  • 6优设设计师交流群

添加管理员 招财

微信号: 扫码添加
严格审核打造高质量交流群

发评论!每天赢奖品

点击 登录 后,在评论区留言,系统会随机派送奖品

2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们

本期奖品

发表评论 为下方 2 条评论点赞,解锁好运彩蛋

{{ moreBtnTxt }}
阅读相关文章
{{comTitle}} {{comSubtitle}}