UI設計中的8像素規則

無論是網站設計、雜誌排版，還是手機app界面，設計師們都會在網格上安排各個元素的排列。最近看到很多著名的設計博客都在推廣「8像素規則」，這是什麼，怎麼用，以及有什麼用呢？

以前一直困惑著我的問題

在公司的項目中，每次做完一個網站設計或者手機app的UI設計，看著開發後的成品總感覺在設計上欠缺了一些一致性。在設計過程中，我可以以一個專業設計師的眼光來調整頁面中的每個元素的排列，但是不能要求前端程序員跟我有著同樣的視角。每次追著前端工程師一點點改界面，「這個輸入框再往左一個像素，按鈕往右一個像素……」這樣的場景簡直是噩夢。我曾嘗試著做出一套設計樣式規範（style guide），來規定H1, H2, H3的字體樣式，輸入框、按鈕的大小及樣式等，期待能最大化地保證設計一致性，然而最終效果並不怎麼理想。

（圖片：Gal Shir。設計師和程序員工作時頭部運動軌跡完全不同)

直到我了解了「8像素規則」，發現它能完美地解決我的問題。

8像素規則

建立一個以8pt為單位的網格系統，利用8的倍數來規定頁面中元素(按鈕、輸入框、圖片等)的尺寸及各自間距的大小。即任何需要自定義的長、寬，marging和padding都應該是8的倍數。

從下面這個對比圖中可以看到，是否嚴格按照網格系統排列出來的成果有明顯的好壞差別。想呈現出專業的設計品質，就需要保證設計文件本身的一致性以及設計文件與前端開發後成品的一致性。

（運用8像素規則與不按照8像素規則排列的對比）

為什麼是用8?

首先，8是一個偶數。目前的電子設備屏幕尺寸多種多樣，視網膜屏幕技術讓屏幕的解析度越來越高，這些給設計師們增加了不少工作量。常見的UI設計流程是在矢量圖形軟體Sketch中用一倍的尺寸做出設計文件，然後再根據需要導出二倍、三倍等大小的文件用來自適應各種設備的屏幕。下圖是在Sketch中分別為iOS和Android系統導出軟體界面時的常用數據。

但為什麼用8而不是6或10呢？目前主流的屏幕尺寸大部分都是8的整數倍數。即使某些屏幕邊長像素不是8的倍數，在設計中仍然可以盡量做到自定義元素的長、寬、marging，以及padding都是8的倍數來維持設計的一致性。

（來源：http://W3Schools.com (2017/01) ）

好處是什麼？

• 對設計師而言：更高效，設計過程中節省了很多思考尺寸的時間。

• 對團隊而言：設計師和程序員之間更好溝通了，程序員往往用目測就可以估算出8的倍數，而不再需要每次都一一測量尺寸。

• 對用戶而言：品牌設計有了統一的呈現效果。

推薦閱讀：