不可忽視的網(wǎng)頁設(shè)計細(xì)節(jié)之一--對齊

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

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

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

關(guān)于Web設(shè)計中的對齊，你是如何做決策的？

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

圖1

同時還要注意信息架構(gòu)（IA），包括整體概念模型、設(shè)計計劃、架構(gòu)及組織方式。該過程可以描繪出網(wǎng)站的層級結(jié)構(gòu)、核心導(dǎo)航、標(biāo)準(zhǔn)、規(guī)范、分類標(biāo)簽、可用性，用頁面線框圖、站點設(shè)計圖解、原型圖來代替詳細(xì)的設(shè)計模式。圖2展示了一個簡單網(wǎng)站的信息架構(gòu)概念模型，它提供了開發(fā)流的起點，最終對主要元素進行對齊設(shè)置，以滿足動態(tài)網(wǎng)站模型。

圖2

利用對齊，如何創(chuàng)建引人注目的網(wǎng)站？

對齊原則帶來了條理，而條理體現(xiàn)了協(xié)調(diào)，所有的元素平衡合理地安排在Web頁面中。以有序的方式組織頁面元素，從而構(gòu)建成功的產(chǎn)品并健康的發(fā)展。

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

圖3

注意，Logo、左側(cè)欄、內(nèi)容區(qū)、右側(cè)欄及頁腳部分的文字均為左對齊，導(dǎo)航及Banner圖區(qū)域為居中對齊。

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

網(wǎng)格系統(tǒng)

一些網(wǎng)格系統(tǒng)及模版可以指導(dǎo)我們布局Web設(shè)計元素。下文列舉了兩個此類系統(tǒng)，你可以修改其中各種設(shè)置，如列、排版，并以CSS和HTML格式進行保存，從而快速提供原型，或整合入現(xiàn)存的開發(fā)環(huán)境中。

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

圖4

960 Grid由Web設(shè)計師Nathan Smith設(shè)計，也就是之前圖趣給大家講的網(wǎng)頁設(shè)計的柵格化系統(tǒng)。它提供了一個系統(tǒng)，通過常用維度來分割寬為960px的頁面來流程化Web開發(fā)。它提供了兩種選擇：12列和16列，每一種選擇即可單獨使用也可混合使用。12列網(wǎng)格將寬均衡地分割成12列（每列寬為60px），而16列網(wǎng)格則分割為16列（每列寬40px），每列左右兩側(cè)具有10px的間隙，各網(wǎng)格最外側(cè)均留出20px的空白。

圖5

響應(yīng)式對齊

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