【图标】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
5Log in and synchronize recommended records
18Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share