網(wǎng)站的界面與布局設(shè)計在用戶體驗中屬于架構(gòu)層的范疇，這一階段需注意視覺藝術(shù)和交互體驗的結(jié)合。它是在確定頁面信息功能之后對每個頁面內(nèi)的空間分割，包括對導航、按鈕、圖片、文字等內(nèi)容的設(shè)計。本文從網(wǎng)頁界面的布局原理切入，介紹界面布局類型、原型構(gòu)建的方法步驟。其目的在于幫助大家根據(jù)網(wǎng)站性質(zhì)特點來選擇適合的布局類型，通過對界面信息在頁面中形態(tài)、大小、位置、色彩關(guān)系的設(shè)計，大大提高用戶梳理接收信息的效率。
一、對稱與均衡
對稱與均衡是自然界中一切生物求得生存的穩(wěn)定形式。對稱的特點是穩(wěn)定、莊嚴、整齊、秩序、安寧、沉靜，但過多的對稱重復會使人覺得單調(diào)、呆板。從心理學角度來看，對稱滿足了人們生理和心理上對于平衡的要求，是網(wǎng)頁設(shè)計藝術(shù)中經(jīng)常采用的表現(xiàn)形式，具有重心穩(wěn)定和莊重整齊的美感。
均衡是在對稱的基礎(chǔ)上發(fā)展起來的，它沒有對稱的結(jié)構(gòu)，但有對稱式的重心。它是由形的對稱變?yōu)榱Φ膶ΨQ，體現(xiàn)了變化中的穩(wěn)定。均衡的網(wǎng)頁生動、活潑、富于變化，主要體現(xiàn)在兩方面，一是文字、圖像等要素在空間占用上的均勻分布；二是色彩的平衡，給人一種協(xié)調(diào)的感覺。
如to do 1ist官網(wǎng)（見圖1），該界面通過對比、留白和布局來打造令人難忘的均衡感，其設(shè)計每個功能特點都是一張配圖與一段文字，其中圖片所占比例大而文字較小且四處留白，這種差異會讓文字立刻吸引用戶的注意力。
圖1 to do list官網(wǎng)
二、重點與主次
根據(jù)視覺流程原理，采用容易掃視的方法安排整體版面，把重點內(nèi)容和功能放在醒目位置，會讓網(wǎng)頁更易被閱讀。針對國內(nèi)用戶從上往下、從左向右的視覺瀏覽習慣，我們常將網(wǎng)站公告以及一些關(guān)鍵要素如全局導航、局部導航以及一些常用的輔助導航（快捷入口)放在頁面頂部或中上部。對于擁有海量信息的網(wǎng)站，首頁盡量不要超過三屏，將目標用戶最感興趣的且與網(wǎng)站的營銷目標最符合的信息放在首頁首屏之內(nèi)，其他次要信息可通過合理分類在首頁提供輔助導航入口。
如Huys-nyc網(wǎng)站（見圖5.2)的界面重點就十分突出，歸結(jié)其原因就在于該網(wǎng)頁的全局導航一直固定在頁面下方，而局部導航被隱藏在左側(cè)的箭頭圖標中，這樣就為主屏重點的大圖信息留下大面積的展示空間。
圖2 Huys-nyc網(wǎng)站
三、變化與統(tǒng)一
變化與統(tǒng)一也稱對比與統(tǒng)一，是形式美的總法則，兩者的完美結(jié)合是網(wǎng)頁界面藝術(shù)表現(xiàn)的重要因素之一。變化是在強調(diào)某種因素的差異性而造成的視覺上的跳躍；統(tǒng)一則是在強調(diào)物質(zhì)和形式中種種因素間的一致性。變化與統(tǒng)一既相互對立又互相依存，舍去一方另一方就不復存在。只追求變化無統(tǒng)一的網(wǎng)頁給人一種無條理、雜亂之感，只有統(tǒng)一無變化的網(wǎng)頁給人一種呆板、無生氣之感，只有將兩者有機地結(jié)合起來才能形成既有區(qū)別又有內(nèi)在聯(lián)系的整體。
我們在設(shè)計網(wǎng)頁布局時，可以使簡單的造型產(chǎn)生豐富的變化，也可以將多樣的造型變得統(tǒng)一，而最能使網(wǎng)頁界面達到既統(tǒng)一又有變化的方法是控制版面構(gòu)成要素的數(shù)量，并豐富其組合形式。
著名Mac平臺設(shè)計軟件Sketch的官網(wǎng)（見圖5.3）的設(shè)計就是個很好的例子，設(shè)計元素單純、色調(diào)統(tǒng)一，深色和淺色被容納到一個統(tǒng)一的頁面設(shè)計中來。在第一屏中，你會注意到兩個按鈕，它們分別是深色的“免費試用”和淺色的“立刻購買”，兩個按鈕大小相當，并且處于同一個水平面上，“免費購買”的按鈕被設(shè)計成為深灰色按鈕，整體和深色背景幾乎融為一體，而使用淺藍色實底的“立刻購買”按鈕和背景構(gòu)成了鮮明的對比，相當?shù)娘@眼。當你打開頁面的時候，會一眼注意到購買按鈕，這就是通過大量的留白和合理的對比營造出來的視覺引導。
圖3 Sketch官網(wǎng)
如果你再接著瀏覽，你會發(fā)現(xiàn)頁腳（見圖5.4)也采用了相似的設(shè)計。Sketch希望你在輸入郵件地址之后盡快提交，所以提交按鈕布置得同輸入框非常近。值得注意的是，提交按鈕的色彩和首屏“立即購買”按鈕的色彩保持著一致，成功吸引用戶的注意力，有效引導大家去單擊。
圖4 Sketch官網(wǎng)頁腳
.jpg)
