[譯文] 8pt柵格系統 - 1. 設計入門

介紹

此文意在幫助設計師快速而統一地完成界面布局。尤其對尺寸固定的移動界面有幫助，但對響應式web設計也有幫助。

與一般的設計指南相比，此文更適合一邊實踐一邊閱讀。

代碼>原型

設計軟體和原型工具讓你創造界面看起來最好的樣子。但是對於數碼產品，原型的目的是向老闆和開發者進行清晰的方案溝通。最終只有開發者的代碼，能夠讓這個方案成為產品。

現在，幾乎你在設計工具上做的所有東西都可以用代碼創造出來，但是總有些因素讓設計方案很難實施（可能是可用性、載入時間、展示效果等）。

不論如何，最重要的是你的設計能通過代碼在用戶的設備上運行。所以應該優先考慮在使用Sketch和Photoshop時，儘可能縮短思考方案與編程之間的時間。請注意，這裡的所有東西都是以1倍解析度設計的。因為其它倍數的解析度可以很容易地從1倍解析度計算獲得。

例如，如果想要從2倍解析度轉化到3倍解析度（假設線條的粗細是偶數），你需要將設計稿縮小到原來的50%（來獲得1倍解析度），然後再擴大到300%。

1倍解析度設計則能夠很容易地被放大到任何倍數。

可以在各個解析度分別添加圖標等細節，但是這種做法並不常見。大部分情況下，為了速度和方便，在1倍解析度工作是最理想的。

使用像素柵格

你創建的每個界面元素都應該對齊像素柵格。這個概念一般被稱為像素擬合，它確保所有元素在用戶設備上顯示清晰明確。

文本在這方面是個例外，為了能夠清晰閱讀需要一些反鋸齒效果來讓形狀有一定模糊度。所以不要擔心文字的每個點都對其到柵格上。

文本元素

像文本這樣的段落元素幾乎永遠都是界面中最重要的部分，但是像文字尺寸和行高這些東西卻不像其它元素一樣，能夠在保持縱向節奏和可讀性的情況下，輕易地遵從界面柵格。

使用基線確定文字底部是提高縱向統一性的好方法。通過排布每行文本的基線，可以很容易地讓所有的界面元素處於和諧的縱向節奏中。

我喜歡將我的8pt界面柵格和4pt基線柵格合併使用。這種配對保持了數學上的簡單清晰，又提供了足夠的選擇餘地來適應多種文字風格。

大部分平台（Android、IOS等）的設計指南有基礎原則，但如果設計師從默認字體開始打破一些東西，能夠獲得更加獨特的結果。所以可以在排布文本時做一些處理，然後將之做外排布其它元素的基礎。

到此入門結束，下半部分才是重點

轉發此文請註明來源和作者，並告知本人