柵格系統(tǒng)

小屏幕上，一些桌面端無關(guān)大雅的間距不等問題會變得突出。

　　Lofter是網(wǎng)易一款精品優(yōu)雅的App，但其文章正文界面卻略有瑕疵：

　　可以看到段落右側(cè)與卡片的間距明顯大于左側(cè)。造成這個問題的原因是設(shè)計時對文本框的寬度與文字大小之間在關(guān)系考慮不周全，導(dǎo)致文字并不能完美地填充滿文本框。

　　上圖為iPhone5中此界面的放大效果并加上了輔助線，仔細(xì)觀察，去除黃色部分各20px的間距后，文本框?qū)挾仁?58px，而正文使用的字號是30px，所以行末留下18px的空余空間。如果字號定為31px，則剛好可以放下18個字后填滿558px像素的文本框。

　　當(dāng)然31px的字號在實際環(huán)境中可能并不是一個最合理的字號設(shè)定，因為它并不能被整除使用到@1x的iOS開發(fā)環(huán)境。在實際設(shè)計中，可以先設(shè)定一個柵格系統(tǒng)，以iPhone5為例，定義最小柵格為8x8px的話，得到如下一個柵格圖：

　　以8為基本單位，把所有字號、文本框?qū)挾仍O(shè)定為8的倍數(shù)，這樣我們就可以確保漢字始終保持對齊。