1網頁排版設計要點

字體的選擇，字體的大小、間距以及多種字體如何自然地搭配都是決定你設計的關鍵因素。下面介紹網頁排版設計要點，希望可以幫助到大家。

1.文字

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

2.圖片

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

3.交互

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

4.視頻和動畫

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

---

2網頁設計的版面配置重點

在確認過網站的架構及主要視覺風格之后，接下來就是要開始思考網頁設計的版面配置。網頁設計的版面配置 (也可以說版型規劃) 有幾項重點如下：

1. 運用視覺，強調重點

每一個網站，最重要的都是首頁;每一個首頁，最重要的就是最上方的部分，我們稱之為"Header" ，因為這個地方是每一位瀏覽者打開網頁后，第一眼所看到的畫面，所以它的設計及規劃自然是整個網站的首要重點。

Header 中通常會有大篇幅的橫幅，有的是圖片，有的是動畫，我們稱之為 "Banner" ，也就是俗稱的『網站主視覺』。隨著HTML5 及 CSS3 的日益普及，傳統的 Flash 動畫已經漸漸被取代，愈來愈多的網站使用大篇幅精致圖片來強調企業或品牌的重點。因為圖片并不像 Flash 動畫那樣需要較長的等待讀取時間。例如 Apple 的首頁，一打開就立刻看到非常大面積的橫幅，圖片寬度達到 980px ，讓瀏覽者一看就知道這是目前 Apple 正在主打的熱門商品。

所以，把整個企業或品牌的重點，運用大篇幅的精美圖片呈現在 Header 或 Banner 中，就是網頁設計版型配置的第一個重點。

2. 掌握架構，落實配置

每個網站都會有不同的需求，有些公司需要線上購物來販售商品，有些公司則需要電子相簿來呈現大量的商品照片，這就是為什么在網站開始設計之前，都要先做好網站架構規劃。

因此，在開始進行版面配置之前，設計師一定要全盤掌握網站的基本架構，了解這個網站會有哪些功能項目，如此一來，才能知道主選單 (Menu) 該放哪些項目?網頁主體 (Content) 該有左欄 (Left) 還是右欄 (Right) ?網頁底部 (Footer) 要不要有版權宣告或聯絡資訊?最新消息要顯示 5 則還是 10 則?首頁要有主打商品還是人氣商品?要放幾筆?廣告連結要放在左邊還是下面?要放幾則廣告?

掌握這些版面配置的重點后，設計師可以先在草稿上勾勒出版型的初稿，以方便接下來的其他版型設計處理。

3. 統一色彩，營造整體

一家公司的形象，最重要的就是 企業識別系統 (CIS) ，一個網站也是，最重要的就是色彩是否達到協調性與一致性。

選擇色彩，首要考量當然就是公司或品牌的主要顏色，例如 Facebook 的藍色，法拉利的紅色。除了主色系之外，也要謹慎選擇配色，決定色彩之后，不論瀏覽者切換到哪一個頁面，整個網站的風格都具有一致性，如此一來，網站除了能清楚的表達企業或品牌的精神之外，也能展現其獨特性，提高企業的識別度。

---

3網頁排版設計要點

4. 主次分明，簡潔有力

同樣是標題，重要性不同，文字大小就必須不同;同樣是圖片，重要性不同，圖片尺寸也就不同。

例如本周主打商品，就要用比較多的篇幅來介紹，文字大一些，圖片更精??美一些，其他的次要商品，就使用較小的文字及圖片，干凈整齊的排列即可。較重要的訊息，除了文字圖片大小有差異之外，也可以使用顏色來區別，例如在十筆文章標題中，可以把較重要的標題用紅色來表示，并且放在第一筆。除此之外，所有的文字及圖片，都要有適當的間距及留白，才能使畫面閱讀起來輕松不費力。

把最重要的 (也是您最優先想讓客戶知道的) 訊息凸顯出來，主次分明，排版整齊，就能達到成功的網頁設計版型規劃。

5. 善用圖片，吸引目光

一般人閱讀網頁的習慣，通常是由上到下，由左到右，但是當遇到圖片時，就會呈現跳躍式的閱讀，也就是說，人們會先看圖片，看到有興趣的，才會繼續看文字。所以，適當的在必要的地方放置圖片，才能更吸引住閱讀者的目光。

一張網頁中，如果都是文字，那閱讀起來肯定枯燥無味，但如果都是圖片，那內容又太過空洞，因此在產品列表中，有至少一張的圖片，搭配產品簡介文字，讓閱讀者可以迅速的瀏覽圖片，看到有興趣的產品時，就能再看看它的文字介紹，進而點進去查看產品的詳細內容。

因此，一個成功的網頁設計版型規劃，就是能夠達到圖文并茂、相互呼應的境界。

網頁UI設計師要了解的WEB排版技巧

1、讓頁面文字盡量統一

在網頁設計過程中個，首先文字部分盡量減少使用過多字體，重點部分可以標出或者展現出來，其他盡量統一。對弈文字的字體、顏色、大小、間距、行寬等要統一。重點部分可以做適當修改但是不建議太多，這樣讓頁面看著更整潔。

2、突出焦點

頁面中有重點部分，讓重點部分突出。非焦點部分可以做成統一樣式或者統一字體，這塊和上面說過的重點文字可以適當標出，其他內容統一類似。但是注意一點焦點不是彈出的對話框或廣告，是網頁的重點內容。

3、結合內容設計

網頁UI設計過程中一定要結合文章內容，讓網頁要展示的內容和網頁設計風格相符合。要處理好文字和圖像的關系讓讀者下意識地將圖片和文字連接起來。例如選擇一種與圖片相匹配的字體，務必要保證這種字體與圖片看起來相互融合而不是各自獨立。

4、首屏突出重點

用戶在打開網頁后先讓用戶了解這是什么或者作出吸引內容，不要看了不清楚網頁做的是什么。首屏相當于封面的作用，首屏的設計往往決定了用戶是否需要、是否繼續瀏覽。所以設計過程中要注意首屏的展示內容。

5、利用好對比

對比可以是顏色對比，可以是層次對比，可以是內容對比。對比可以讓頁面更突出重點，例如產品功能類對比、頁面顏色差異對比等等。

4頁面設計中的排版原則

四大原則：親密性、對齊、重復、對比

設計頁面最基本的就是排版布局了，如果你覺得自己設計的頁面總是哪里不對勁，為什么別人的頁面看起來那么舒服，也許這篇文章能解答你部分的疑惑。

UI設計中，除了我們強調的配色方案，字體，UI元素之外，還有一點是很重要的，那就是-設計布局的四大原則。(對齊，對比，親密性，重復)

一、對齊

對齊(Alignment)：任何東西都不能在頁面上隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯系。這樣能建立一種清晰、精巧而且清爽的外觀。

二、對比

對比(Contrast)：對比的基本思想是，要避免頁面上的元素太過相似。如果元素(字體、顏色、大小、線寬、形狀、空間等)不相同，那就干脆讓它們截然不同。要讓頁面引人注目，對比通常食最重要的一個因素，正是它能使讀者首先看這個頁面。

三、親密性

親密性(Proximity):彼此相關的項應當靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結構。

四、重復

重復(Repetition):讓設計中的視覺要素在整個作品中重復出現。可以重復顏色、形狀、材質、空間關系、線寬、字體、大小和圖片，等等。這樣一來，既能增加條理性，還可以加強統一性。