有一些網頁設計新手會認為，在設計網頁的時候最重要的應該是如何添加一些具有吸引力的內容，所以他們只把大量的精力放在內容的設計上。在我看來，內容質量的好壞確實是能夠決定你瀏覽量多少的關鍵因素，但事實上，頁面的排版也是一門非常大的學問。俗話說“紅花還需綠葉襯”，其實我覺得兩者之間沒有輕重之分，是相得益彰的關系。沒有綠葉的陪襯，又怎能顯出紅花的嬌貴呢？一個好的網站設計，不僅要求質量好的內容，還必須有整潔幹凈的頁面排版，才能真正地達到良好的用戶體驗。

網頁設計排版VS平面設計排版

網頁設計中的排版和平面設計的排版有著很多相似，但又有很多不同。我認為平面設計排版是網頁設計排版的基礎，在一些文字、圖片的排版方面，它們遵循的原則基本是相同的。但是，網頁設計排版又會涉及交互性的功能還有動態的效果。所以排版的時候不僅要考慮文字圖片等的靜態效果，還要考慮一些動態的視覺效果。所以，這麽多種元素要呈現在固定大小的頁面上，要考慮的情況自然就比平面設計多得多。那麽下面我們討論一下一些在網頁設計排版中設計師們註意的一些元素。

1.文字

雖然有時候可能一個頁面的文字沒有幾個，但你可千萬別小瞧文字的作用。字體的選擇，字體的大小、間距以及多種字體如何自然地搭配都是決定你設計的關鍵因素。在同一個頁面有限的文字區域內你所用到的字體樣式絕對不止一種，甚至會有三四種，這是為了打破單一字體給用戶帶來的單調感。字體的搭配是將兩種或更多字體通過合理的排版達到最佳效果的過程。對於很多初學者來說，他們覺得選擇只用選擇漂亮字體就夠了，事實上，選擇漂亮的字體並不難，如何讓它們完美地搭配在一起，相得益彰，這才是應該好好下功夫的地方。

2.圖片

圖片可以說是一個網站的核心了，許多設計師都會把大量的精力放在圖片設計上，因為很多用戶在瀏覽網頁的時候停留的時間不會太久，更不會花太多時間閱讀你的內容。這個時候，一張好看的圖片就能夠快速有效地抓住用戶的眼球。大家所熟知的蘋果公司官網大部分都是這樣的套路，直接將產品的圖片呈現在大家面前，沒有過多的贅述，反而會讓用戶覺得簡潔明了。

3.交互

交互設計在網頁設計中有著相當好的勢頭，那麽在設計交互的時候，必定會涉及到許多的頁面、組件。由於這麽多的組件元素要排列在同一個頁面上，要考慮的情況也就多了許多。在做交互設計之前，你必須站在用戶的角度考慮，菜單導航應該在哪個地方最清晰可見？組件應該通過什麽樣的方式展現用戶才會覺得方便？組件和組件之間要怎樣排布才會不影響用戶的視覺效果？這就要求網頁設計師有一個流暢的原型設計過程，通過借助一些原型設計工具（Axure，Mockplus, Justinmind等）來設計出合理、帶來良好用戶體驗的交互設計。

4.視頻和動畫

如果一個網頁只有文字和圖片這樣靜態的元素，難免少了一些生氣。現如今，視頻和動畫的制作成本很低，網絡傳播性強，與社交媒體網站的兼容性好，甚至在一定程度上，視頻和動畫傳播的有效信息比文本還要多。於是，在網頁設計排版中，視頻和動畫也會被設計師們加入其中。但要註意的是，視頻或者和動畫設計在同一個版面上不能出現太多，最好一到兩處就可以，否則會讓用戶感到眼花繚亂，甚至它們會喧賓奪主，導致顧客找不到你產品的重點。

說了這麽多理論，我想給大家舉三個具有代表性的優秀網頁版面設計案例：

1.Webydo

Webydo本身就是一個幫助網站設計自由職業者和代理機構的網站，它擁有內置的CMS和托管，可以更快地創建網站並開展業務。我覺得它們的網頁設計非常有趣，它們直接將整個頁面模擬為我們常見的設計工具頁面，明確地傳達出了網站主題，也能夠準確地吸引目標客戶。

2.CALEO

CALEO是一部獨立的男性出版物，它們的官網頁面是很多設計師在實際設計中都會參考的，像這樣的時尚網站，大多都會選擇用許多圖片作為重點，但他們很好地解決如何將它們合理排版，不會造成雜亂的視覺效果，圖片之間一定的間距和圖片尺寸的大小都有一定的合理規劃。

3.Foreign Policy

我個人非常中意這個網頁設計的原因是它將手繪風格完美地融入了頁面設計中，小清新的配色和一目了然的導航菜單排版也是他的亮點之處。此外他們在許多細微的地方都運用了動態效果，讓你在瀏覽時處處都有小驚喜。

小結：

所謂最好的設計，就是在整個網頁中，你的設計渾然一體，沒有突兀的地方，也沒有不恰當的結合。成功的排版可以讓頁面的邏輯性更加明確，讓用戶產生良好的體驗，成功地將用戶引導到他們需要的信息上。雖然說設計師最主要的工作是把頁面做的漂亮從而創造良好的視覺效果，但是也要關註網頁的可操作性。

網頁設計排版中哪些元素最重要？