設計指南——布局
「布局」是指頁面內容的尺寸、間距及位置。有效的布局對於幫助使用者快速找到他們想要的內容至關重要，並可以在結構外觀上令使用者感到舒服。
什麼是布局？
「布局」是指頁面內容的尺寸、間距及位置。有效的布局對於幫助使用者快速找到他們想要的內容至關重要，並可以在結構外觀上令使用者感到舒服。
如何設計有效的布局？
1. 具有清晰的視覺層次。布局應當讓頁面各元素之間的關係和重要性一目了然。你可以通過適當使用下列屬性來實現視覺層次：
·焦點：指使用者首先關注的區域。形式上被賦予焦點屬性的ui元素一定要表達重要的內容。
·視覺流：指使用者關注區域的順序。可以根據任務邏輯和使用者的瀏覽習慣來設計恰當的視覺流。好的視覺流應該清晰、合理、順暢、自然。
·關聯：在邏輯上相關的ui元素應具有清晰的視覺關係。
錯誤：
邏輯上相關的ui元素在空間上被分隔，且沒有明顯的視覺關聯。
·對齊：使頁面工整，資訊呈現有序，便於使用者掃視。
錯誤：
沒有對齊影響了頁面效果且不便於使用者掃視。不要因為功能需要和對極限情況的顧慮而輕易犧牲掉頁面的視覺展現。
·強調：可以根據ui元素間的相對重要程度進行強調。
2.針對使用者的閱讀模式來設計布局。
·大部分人的閱讀習慣是從左向右，至上而下。
·閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在於理解，後者在於定位。
·瀏覽**時，使用者不會沉浸在ui本身，而是沉浸在他們的目標任務中，因此掃視是最常使用的閱讀模式。使用者只在確信必要時才仔細閱讀大量文字。
·針對掃視的布局設計可以適當強調主要的ui元素，弱化次要的。包括：
1)將主ui元素放在掃視路徑上。
2)避免將重要資訊放在左下角或者頁面底端或者需要滾動很多的控制項上。
3)考慮使用漸進展開方式來隱藏次要的ui元素。
4)將任務相關的重要資訊要直接表現在控制項上。使用者更傾向於關注互動控制項上的標籤，而不是輔助型的靜態文字。
錯誤：
使用者必須閱讀輔助型文字後才能明確「確定」按鈕的作用。
正確：
直接將按鈕的作用描述作為控制項標籤，便於使用者理解。
5）不要展示大段文字，去除不必要的文字。多文字時格式化展示。
注：常規模式也存在例外。眼動議實驗指出，真實使用者的行為很沒有規律。此模式的目的在於幫助你做出更好的決定，而不是精準的描述使用者行為。
3.合理利用頁面空間。
·保持頁面的視覺平衡。避免擁擠和對空間的浪費。
·確保關鍵資料沒有被截斷，除非資料特別長。
錯誤：
有效空間沒有被充分利用，從而導致多條關鍵資料被截斷。
·控制項的尺寸和間距恰當，沒有不必要的滾動。乙個任務盡量在一屏內完成。
·實際情況中，我們使用者的頁面空間要小於螢幕解析度，它會因各種因素而壓縮，如：非全屏操作（彈出視窗和對比瀏覽），瀏覽器本身及各種輔助欄對螢幕的占用等，設計中要考慮這些情況。
4.不要讓布局本身成為突出的ui元素，保持視覺簡潔（visual simplicity）。
·減少內容和展現上的巢狀層級。
·減少控制項不同尺寸的數量，例如，在介面上只使用一兩種按鈕寬度。
·採用輕量級的分組和分割方式，可以用布局本身和分隔符代替分組框。
·使用盡量少的對齊線。
5.選擇與頁面型別相匹配的版式。在設計之初，應充分考慮頁面承載的內容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成使用者的閱讀困擾，降低任務的完成效率。
標準和規範：
1.柵格化：
·我們所說的柵格化是指在網頁設計工作中對柵格系統的建立和應用。網頁柵格系統**於平面柵格系統，它以規則的網格陣列來指導和規範網頁中的版面布局以及資訊分布。
·柵格化可以使資訊呈現工整簡潔、美觀易讀，降低頁面開發和運維成本。它結構變化相對靈活，擴充套件性強。
2.以8px為橫向柵格單位：
·以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數，包括和版塊寬度，這樣可以在一定程度上加快頁面（特別是對於j-peg）的渲染速度（基於計算機內部二進位制的運算機制）。其在擴充套件和相容性上也有一定優勢。
·在阿里巴巴中文站中，布局間距的最小單位為8px，布局區塊採用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現的柵格系統：
32px:適用於市場、社群等相關頁面
24px:適用於旺鋪相關頁面
3.頁面定寬：
自適應可以根據瀏覽器顯示情況自動調整頁面寬度，但是因為使用者水平方向的聚焦範圍有限，所以當頁面過寬時，使用者的瀏覽和操作成本會增加；而當頁面過窄時（如使用者同時開啟兩個瀏覽器對比檢視商品搜尋結果），自適應則會導致布局變形和內容錯亂。給頁面規定寬度可以避免這些問題。
在綜合考慮當下主流解析度情況、瀏覽器外觀對顯示空間的占用、人機工程學中對水平視角和聚焦範圍的規定以及8px單位等多種因素後，我們認為 960px是乙個相對更加合理的頁面寬度。在阿里巴巴中文**中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。
設計指南 布局
設計指南 布局 布局 是指頁面內容的尺寸 間距及位置。有效的布局對於幫助使用者快速找到他們想要的內容至關重要，並可以在結構外觀上令使用者感到舒服。什麼是布局？布局 是指頁面內容的尺寸 間距及位置。有效的布局對於幫助使用者快速找到他們想要的內容至關重要，並可以在結構外觀上令使用者感到舒服。如何設計有效...
CSS設計指南 5章 頁面布局
5.1 布局的基本概念 多欄布局有三種基本實現方案 固定寬度 流動 彈性 固定寬度 固定寬度布局的大小不會隨使用者調整瀏覽器視窗大小變化，一般是900到1100畫素寬度。其中960畫素是最常見的，因為這個寬度適合所有現代瀏覽器。960 grid 流動布局 流動布局的大小會隨使用者調整瀏覽器視窗大小而...
FLASH高速PCB布局佈線設計指南
志博pcb 2019年1月18日 目前flash主要有兩種nor flash和nadn flash 目前flash主要有兩種nor flash和nadn flash。nor flash的讀取和我們常見的sdram的讀取是一樣，使用者可以直接執行裝載在nor flash裡面的 這樣可以減少sram的容...