UI设计的精髓在于给页面构建一个稳定的网格结构。如果你直接把颜色和排版堆在一起,很难做出既好看又好用的界面。一旦有了网格,漂亮和好操作的效果自然就出来了。一致的间距不仅能让大家少扯皮,还能让项目推进得更快。 咱们先把“pt”这东西弄明白。pt(点)是和屏幕分辨率直接挂钩的单位。以前1倍屏下1pt等于1px,现在2X、3X屏幕出来了,ppi翻了好几倍,设计稿要被放大渲染。为了让东西在不同密度的屏幕上都看着顺眼,咱们得提前做“弹性”规划。 用偶数做间距会更省心。屏幕尺寸和像素密度一直在涨,偶数网格更容易被2、3、4整除,缩放的时候不会出现小数点的问题,对齐误差能肉眼可见地减少。所以8pt就成了最扛打的那个数字。 把8的倍数变成自己的肌肉记忆。边距先定个8pt,然后依次推16、24、32、40、48这些数。按钮、卡片、图标的尺寸也是一样,能被8整除的就用这个数。 图标也得“住”进8pt网格里。把图标放进容器里,容器宽度设成8的倍数,不管图标多小都不会偏离视线中心。这样在不同设备上看起来就更统一了。 字体的排布也有讲究。把基线网格定在4pt上,行高用4、8、12这些4的倍数。再加上8pt网格的辅助,文字区域就会像节拍器一样整齐。如果发现字号太大被推远了,直接换成4pt基线就能细腻控制。 END