【图标】icon栅格与网格的制定

北京/UI设计师/3年前/1401浏览
【图标】icon栅格与网格的制定

用面积定义图标栅格真的靠谱吗?

定义网格

Ⅰ基础网格

并不是指像素网格,要考虑到缩小时,细节识别问题、最小间距来定义最小单元。

关键线也叫辅助线

指的是水平、垂直、45°的中心交叉线,根据需要还可以添加水平、垂直的黄金分割线等任何有用的线条作为关键线。

安全区

设置安全区保证图标尺寸的输出一致,也就是都是一个尺寸;图标的完整性,就是保证完整图标的输出。


定义栅格系统


(1)图标尺寸要求:

■ 不同尺寸采用不同栅格才能保证比例和大小一致性不变。

■ 作为视网膜屏幕界面设计4dp网格系统的一部分,使得图标镶嵌到系统中,除非特殊情况,一般图标尺寸按4dp的倍数增减才有效果,如12+4,12+8,16+4、……


(2)栅格的作用:

■ 栅格使得基础形状如正方形、长方形、圆、三角形相互对比看起来大小相同比例和谐(如长方形的长宽比);

■ 栅格是针对一组图标的统一,单个图标不需要栅格;


(3)栅格定义条件:

■ 以dp等单位的独立像素定义栅格,且视网膜屏幕下数值为偶数

■ 任何尺寸下,基础形状如正方形、长方形、圆的对称轴相同。

■ 长方形长与正方形的间距等于正方形与圆的间距,要求长方形的长短边和正方形的边间距差值相等

■ 因为人眼对比容易,精确难,所以依据圆与正方形面积相等计算得到的结果,除了并排对比,还要重叠对比增加参考,避免出现一会看圆与正方形大小一致,一会看又觉得不一致这样的纠结。

(4)圆、正方形、长方形栅格确定

遇奇进一取整,遇偶取整

首先排除差值和比例8:7:6,误差太大;

面积相等和比例9:8:7两者表现半径八两,因此采用面积或9:8:7和差值,确定区间后,再结合栅格定义条件得到最终的数据。所以算好不同尺寸区间的栅格形成表格,等需要时候用,做到又快又好,是最稳妥的方法。

(5)内三角确定

已知外接圆,√3≈1.732;内三角。

a=√3R;h=1.5 R。

(6)测试

测试非视网膜屏幕,如电脑屏幕下的11*11px图标绘制,栅格中的基础形状没有正方形。

(7)总结

软硬件技术不断进步,之后也许就不需要讲究太多像素的问题,对网格和栅格的定义也就更加宽松了。

没有教科书式的绝对标准,因此相同内容组成,理解、习惯不同,采用了不同的划分和叫法。

因为知识、认知、理解等方面的局限性,如果存在问题很期待指正,感谢。

5
Report
|
18
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in