今天给大家分享一些画图标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° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AIGC互联网产品设计实践
已累计诞生 700 位幸运星
发表评论 为下方 2 条评论点赞,解锁好运彩蛋