如何設計有效的佈局？

該[指南]版權以及最終解釋權為作者阿里巴巴（中文站）用戶體驗設計部 李龍（李小帥）所有，轉載請註明出處。

標準和規範：
1.柵格化：

• 我們所說的柵格化是指在網頁設計工作中對柵格系統的建立和應用。網頁柵格系統來源於平面柵格系統，它以規則的網格陣列來指導和規範網頁中的版面佈局以及信息分佈。

• 柵格化可以使信息呈現工整簡潔、美觀易讀，降低頁面開發和運維成本。它結構變化相對靈活，擴展性強。

2.以8px為橫向柵格單位：

• 以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數，包括圖片和版塊寬度，這樣可以在一定程度上加快頁面（特別是對於J-PEG圖片）的渲染速度（基於計算機內部二進制的運算機制）。其在擴展和兼容性上也有一定優勢。

• 在阿里巴巴中文站中，佈局間距的最小單位為8px，佈局區塊採用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現的柵格系統：

        32px:適用於市場、社區等相關頁面
       
        24px:適用於旺鋪相關頁面
       

3.頁面定寬：

• 自適應可以根據瀏覽器顯示情況自動調整頁面寬度，但是因為用戶水平方向的聚焦範圍有限，所以當頁面過寬時，用戶的瀏覽和操作成本會增加；而當頁面 過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結果），自適應則會導致佈局變形和內容錯亂。給頁面規定寬度可以避免這些問題。

• 在綜合考慮當下主流分辨率情況、瀏覽器外觀對顯示空間的佔用、人機工程學中對水平視角和聚焦範圍的規定以及8px單位等多種因素後，我們認為 960px是一個相對更加合理的頁面寬度。在阿里巴巴中文網站中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。