搞UI设计的都知道，网格才是界面的骨架，直接关系到效率能不能翻倍。别光顾着往上面堆颜色和排版，先把网格搭好了，好看又好用是迟早的事。就算有了统一的间距设计，也能把扯皮减少不少，项目周转速度也会快很多。 为啥大家都爱用8pt这个数字呢？先弄明白啥是pt吧。它是一种跟屏幕分辨率挂钩的单位，早期的屏幕1pt等于1像素，后来随着高倍屏幕出来，ppi翻倍了，设计稿要是不放大渲染就难看了。为了让元素在不同设备上看着顺眼，就得提前做弹性规划。 而且偶数间距更容易被2、3、4整除，不管怎么缩放都不会出现半点尴尬的错位现象。8pt就是个很抗打的公约数。 具体怎么用8pt网格呢？把边距定在8 pt，然后按16、24、32这样的偶数推下去就行。按钮、卡片、图标的尺寸能被8整除就用那个数，不行就找最近的替代。用软网格用眼睛量8 pt增量就行别锁死图层；硬网格会把元素钉死在栅格里，代码转UI的时候容易乱套。 连图标也得按规矩来。把图标丢进容器里，尺寸设成16×16、24×24、32×32这种8的倍数。这样不管设备多大屏幕分辨率多高，图标都不会偏航了。 文字排版这块也有讲究。把基线网格定在4 pt上，行高就用4、8、12这些4的倍数来凑。再叠上8pt网格看一下，文字区块就像节拍器一样整齐了。要是发现字号太大被推远了就换个4 pt基线试试。 END