文章內容

Web設計師應遵循的高效設計原則之三：對齊

發布時間: 2012/9/13 14:51:01

《寫給大家看的設計書》一書把復雜的設計原理凝煉為對比、重復、對齊和親密性四大設計原則。本系列文章將分別詳細闡述四個設計原則中的重點因素及輔助工具。本文為第三篇，講述對齊在網站設計中的重要作用及輔助工具。

　　主要針對酒店行業和聯邦政府進行Web開發的Ryan Boudreaux針對四大設計原則寫了一系列文章，本文為第三篇《Effective design principles for web designers: Alignment》的譯文，內容如下：

　　對齊是“Web設計者應遵循的高效設計原則”之三。

　　對齊

　　無論你是否意識到，對齊都是大部分Web設計中必不可缺少的部分;它作用于幕后，是一個隱藏設計元素。它起初可能只是一個PSD文件，也可能是設計模版中不可缺少的部分，是Web設計的主干。你的網站可能有一套布局(或網格)，作為主要的框架，以支持網站的外觀、體驗、導航、工具欄、頁眉、頁腳等。

　　作為高效設計原則，“對齊”可以幫助我們對“元素如何在頁面中布局”做出明確的決定。利用戰略層上的布局，可以設計出更強大、更吸引人的作品;利用網格系統，可以為每個元素的定位提供標準的指導。沒有對齊策略，我們就會隨意安放元素，與其他相似元素產生很小甚至不會產生聯系。沒有對齊，網站的外觀及體驗就會變得雜亂無章。

　　對齊策略已遠遠超越了對齊、浮動屬性及文本和圖片的對齊方式，它還包含其他的因素，比如用戶的交互、信息架構、網格及Web設計元素的組織。

　　關于Web設計中的對齊，你是如何做決策的?

　　最主要的考慮因素包括對典型用戶交互方式的分析，如眼動追蹤測試。針對“用戶如何瀏覽網頁”的多項研究已開展，內容包含眼睛是如何瀏覽頁面的，從開頭到結束的掃描路徑是什么，用戶如何決定跳轉到的位置及下次點擊位置等。Charles O’Connell在Usability.gov上發起的討論(如圖1)介紹了眼動追蹤測試的含義。從這些研究可以看出，它的要點之一是大部分用戶會沿著“F”形狀的“熱點圖”來掃描頁面內容，即從頂部開始(正如頭條往往比圖片更吸引眼球)，僅掃描幾個詞后，便沿頁面的左側掃描并尋找更多有吸引力的內容，并在幾秒內做出點擊動作。

　　圖1

　　同時還要注意信息架構(IA)，包括整體概念模型、設計計劃、架構及組織方式。該過程可以描繪出網站的層級結構、核心導航、標準、規范、分類標簽、可用性，用頁面線框圖、站點設計圖解、原型圖來代替詳細的設計模式。圖2展示了一個簡單網站的信息架構概念模型，它提供了開發流的起點，最終對主要元素進行對齊設置，以滿足動態網站模型。

　　圖2

　　利用對齊，如何創建引人注目的網站?

　　對齊原則帶來了條理，而條理體現了協調，所有的元素平衡合理地安排在Web頁面中。以有序的方式組織頁面元素，從而構建成功的產品并健康的發展。

　　圖3所示的簡單布局以左側頂部的Logo開始，頁眉和導航區域位于右側區域，并與之水平對齊;Banner圖位于導航的下方。左側欄與Logo位于一列，一直延伸到頁腳的上方。主內容區與Banner圖和頁眉左對齊。右側欄占據了剩余空間，與頁眉/導航及Banner圖的右邊緣垂直對齊。頁腳橫跨頁面的整個寬度。

　　圖3

　　注意，Logo、左側欄、內容區、右側欄及頁腳部分的文字均為左對齊，導航及Banner圖區域為居中對齊。

　　這僅僅是一個舉例，來說明如何清晰地布局網格系統中的頁面元素。

　　網格系統

　　一些網格系統及模版可以指導我們布局Web設計元素。下文列舉了兩個此類系統，你可以修改其中各種設置，如列、排版，并以CSS和HTML格式進行保存，從而快速提供原型，或整合入現存的開發環境中。

　　由Web開發者Rasmus Schultz提供的Grid Designer 是一個在線工具，它默認提供4列，寬分別為174px，總寬度為800px，其中每列間有20px的間隙，頁面兩側分別有22px的留白。在該案例中，默認的排版樣式為Veranda：段落內文字大小為10px，行高為1;標題采用默認字體，大小為16px，行高為2。如圖4。

　　圖4

　　960 Grid由Web設計師Nathan Smith設計，可供下載。它提供了一個系統，通過常用維度來分割寬為960px的頁面來流程化Web開發。它提供了兩種選擇：12列和16列，每一種選擇即可單獨使用也可混合使用。12列網格將寬均衡地分割成12列(每列寬為60px)，而16列網格則分割為16列(每列寬40px)，每列左右兩側具有10px的間隙，各網格最外側均留出20px的空白。

　　圖5

　　響應式對齊

　　針對響應式Web設計，W3C已推出了CSS彈性框布局模塊(CSS Flexible Box Layout Module)工作草案，簡稱“Flexbox”。Editors Draf于2012年8月13日進行了更新，它描述了CSS框模塊的規范，以優化用戶界面的設計。在強性布局模塊中，彈性容器中的子元素可被定位于任何位置，可“彈性”變換大小，即可以增大充滿未用空間，也可縮放以避免溢出，可很容易地對子元素進行水平和垂直對齊。這些框的嵌套(如水平中的垂直嵌套、垂直中的水平嵌套)可用來構建兩種維度的布局。圖5是來自Editors Draf的一個插圖。