1、1/65,第8章 實用網(wǎng)頁設(shè)計,2/65,學(xué)習(xí)目標(biāo),設(shè)計適于掃描的網(wǎng)頁 設(shè)計導(dǎo)航 設(shè)計版式 設(shè)計首頁。,3/65,設(shè)計適于掃描的網(wǎng)頁,在信息爆炸的今天，已經(jīng)沒有人會去“閱讀”網(wǎng)頁了，幾乎所有人都是在“掃描”網(wǎng)頁。因此網(wǎng)頁設(shè)計者需要為掃描而設(shè)計，而不是為閱讀而設(shè)計。 為掃描而設(shè)計需要遵循以下原則： 在每個頁面上建立清楚的視覺層次 盡量利用習(xí)慣用法 把頁面劃分成明確定義的區(qū)域 最大限度降低干擾,4/65,設(shè)計適于掃描的網(wǎng)頁 建立清楚的視覺層次,如果想讓頁面快速讓人理解，最好的方法就是讓頁面上所有內(nèi)容的外觀都清清楚楚，而且能準(zhǔn)確地表述頁面內(nèi)容之間的關(guān)系，包括：哪些內(nèi)容是相關(guān)的，哪些內(nèi)容是其他內(nèi)容的組

2、成部分。換句話說，每個頁面都應(yīng)該有清楚的視覺層次。,5/65,設(shè)計適于掃描的網(wǎng)頁 建立清楚的視覺層次,一個視覺層次清楚的頁面有三個特點： （1）越重要的部分越突出。在圖 10.1 中，位于頁面中間的財經(jīng)新聞標(biāo)題就明顯與周圍內(nèi)容不同，因此更突出。 （2）邏輯上相關(guān)的部分在視覺上也相關(guān)。在圖 10.2 中，各種NBA數(shù)據(jù)都被很好的分了組，放在不同的框子里。 （3）邏輯上的包含關(guān)系在視覺上應(yīng)進行嵌套。例如，在圖 10.2 中，每個視覺分塊都隱含了相應(yīng)的包含關(guān)系，比如“得分”、“籃板”和“助攻”都在標(biāo)題“數(shù)據(jù)排名”之下，而標(biāo)題“分類查詢”也用清楚的色塊表達了包含關(guān)系。,6/65,設(shè)計適于掃描的網(wǎng)頁 使

3、用習(xí)慣用法,在我們閱讀報紙的時候，會發(fā)現(xiàn)每張報紙都用突出、分組和嵌套的方式為讀者提供關(guān)于報紙內(nèi)容的有用信息。比如說，這張圖片和這個新聞內(nèi)容是一起的，因為它們位于同一個標(biāo)題的覆蓋范圍之下；而那條新聞的內(nèi)容最重要，因為它采用了最大的標(biāo)題，最寬的欄 目，并占用頁面上最突出的位置。日久天長，這些東西都形成了慣例，成為我們生活中自然而然的一部分。 例如，圖 10.3 就是一個紙質(zhì)報紙的版式，我們可以很清楚地體會到各種視覺要素的組織原則。,7/65,設(shè)計適于掃描的網(wǎng)頁 使用習(xí)慣用法,我們知道，了解報紙版面的布局和格式的不同用法能讓我們更快、更容易地掃描報紙，找到我們感興趣的新聞故事。還有，當(dāng)我們在別的城市

4、旅行時，我們知道所有報紙都是采用差不多的習(xí)慣用法，因此，了解這些習(xí)慣用法可以很容易地閱讀任何報紙。 實際上，每一種出版媒體都在發(fā)展自己的習(xí)慣用法，并不斷改進這些用法，形成新的習(xí)慣用法。Web上已經(jīng)有很多的習(xí)慣用法，大部分是從報紙和雜志中延續(xù)過來的，而新的習(xí)慣用法也在不斷涌現(xiàn)。,8/65,設(shè)計適于掃描的網(wǎng)頁 使用習(xí)慣用法,比如說，圖 10.4 是在線版的“New York Times”，它的版式與圖 10.5 有多少區(qū)別？圖 10.5 是一個門戶網(wǎng)站，它又是怎么使用習(xí)慣用法的？,9/65,設(shè)計適于掃描的網(wǎng)頁 使用習(xí)慣用法,所有的習(xí)慣用法都是從某個人靈光一現(xiàn)的想法開始的，如果這個想法相當(dāng)不錯，其他

5、站點就會效仿，最終，會有足夠多的人在足夠多的地方見到它，讓它變得不言而喻。這個采用過程需要時間，但是和其他事物一樣，放在因特網(wǎng)上，它會發(fā)展得非?？臁＠?，現(xiàn)在很多人都很熟悉電子商務(wù)站點上的購物車及其使用方法，因此，設(shè)計師們可以放心地使用一個購物車圖標(biāo)，而不必加上“購物車”的文字說明。,10/65,設(shè)計適于掃描的網(wǎng)頁 使用習(xí)慣用法,關(guān)于Web 上的習(xí)慣用法，有兩點非常重要： 它們非常有用。通常，習(xí)慣用法因為有用才會成為習(xí)慣用法。適當(dāng)應(yīng)用習(xí)慣用法會使用戶在網(wǎng)站之間的訪問更容易，不需要花費額外的努力來得到背后的工作原理。這樣保證了一種熟悉感，例如，在看到頁面左邊直達底部彩色背景區(qū)域上，有著網(wǎng)站分類清

6、單的鏈接時，哪怕有時這種熟悉感也會讓你感覺到某種似曾相識的單調(diào)乏味。 設(shè)計師通常不愿意利用它們。和使用習(xí)慣用法相比，設(shè)計師們都面臨著很大的誘惑，想要打破習(xí)慣用法很大程度上是因為他們覺得網(wǎng)站是請他們來做一些嶄新的、與眾不同的設(shè)計，而不是使用那些原有的東西。,11/65,設(shè)計適于掃描的網(wǎng)頁 使用習(xí)慣用法,如果不打算使用一種已有的 Web 習(xí)慣用法，設(shè)計者必須確認(rèn)以下兩點： 這種方法同樣清楚，同樣的不言而喻，不需要多少學(xué)習(xí)代價這樣就跟習(xí)慣用法一樣好了。 帶來很大的價值，因此值得用戶付出一點努力來學(xué)習(xí)這種新方法。如果打算創(chuàng)新，那么必須理解準(zhǔn)備換用的方法的價值，而很多設(shè)計師都低估了習(xí)慣用法提供的價值。

7、一般的建議是，在清楚自己有一個更好的想法（每個人都會叫好）時進行創(chuàng)新，否則請盡量利用習(xí)慣用法。,12/65,設(shè)計適于掃描的網(wǎng)頁 劃分明確的頁面區(qū)域,任何一個設(shè)計良好的網(wǎng)頁都應(yīng)該能做到這一點：在網(wǎng)頁上四處掃視之后，瀏覽者應(yīng)該能指著頁面上的不同區(qū)域說出：“這是我在網(wǎng)站能進行的活動”，“這是到今日頭條的鏈接”，“這是這個公司銷售的產(chǎn)品”，“他們正在向我們推銷的東西”，“到網(wǎng)站其它部分的導(dǎo)航”，等。 把頁面劃分成明確的區(qū)域很重要，因為這可以讓用戶很快決定關(guān)注頁面的哪些區(qū)域，或者放心地跳過哪些區(qū)域。對網(wǎng)頁掃描所進行的幾項初始眼動研究表明，用戶很快就會確定頁面哪些部分包含有用的信息，然后對其他部分看都不看

8、就像他們根本不曾來過一樣。,13/65,設(shè)計適于掃描的網(wǎng)頁 劃分明確的頁面區(qū)域,例如，進入“淘寶網(wǎng)”（如圖 10.6 所示）以后，由于搜索框就清楚地顯示在頁面頂部，因此很多知道自己要買什么的用戶就直接輸入需要的產(chǎn)品進行搜索，然后進入類似圖 10.7 所示的頁面；同樣，由于我們對頁面區(qū)域劃分的理解，多數(shù)人會在1秒之內(nèi)忽略掉該頁面80%以上的內(nèi)容，而直接去拖拽滾動條，以期望找到自己需要的商品。,14/65,設(shè)計導(dǎo)航,網(wǎng)站導(dǎo)航的設(shè)計好壞是決定瀏覽者體驗的最主要因素之一，本節(jié)首先介紹網(wǎng)頁導(dǎo)航慣例，然后分別就每個導(dǎo)航元素進行解釋說明。,15/65,設(shè)計導(dǎo)航 網(wǎng)頁導(dǎo)航慣例,導(dǎo)航系統(tǒng)實際上是我們?nèi)粘Ｉ钪兄?/p>

9、要的一部分。不論是一個城市，還是一個建筑物，或者是一本雜志，都有自己的導(dǎo)航系統(tǒng)，有它們自己隨著時間發(fā)展起來的習(xí)慣用法，比如街頭指示牌、頁碼、章節(jié)標(biāo)題等。這些習(xí)慣用法指出導(dǎo)航元素的外觀和位置，因此我們知道該尋找什么，以及在需要的時候如何找到。 把導(dǎo)航元素放在標(biāo)準(zhǔn)的位置可以讓我們快速定位，而將它們的外觀標(biāo)準(zhǔn)化讓我們更容易把它們與別的東西區(qū)分開來。,16/65,設(shè)計導(dǎo)航 網(wǎng)頁導(dǎo)航慣例,例如，我們總是希望能在街角處找到街頭指示牌，而且希望它們是按照常規(guī)的指示牌那樣工作的，如圖 10.8 所示；我們也想當(dāng)然地認(rèn)為建筑物的名字應(yīng)該在前門的上方或旁邊；在超市里，我們希望能在商品通道的盡頭看見標(biāo)志；在雜志上，

10、我們知道前幾頁會有目錄，在頁邊的某個地方會有頁碼，它們看起來也會像目錄和頁碼的樣子。,17/65,設(shè)計導(dǎo)航 網(wǎng)頁導(dǎo)航慣例,網(wǎng)站上的導(dǎo)航形成了很多習(xí)慣用法（大部分來自已有的印刷品習(xí)慣用法）。在一個設(shè)計合理的網(wǎng)站中，可能包含以下導(dǎo)航元素： 網(wǎng)站ID 欄目 實用工具 “你在這里”指示器 下一級欄目 頁面名稱 頁面導(dǎo)航 小字體頁腳導(dǎo)航,18/65,設(shè)計導(dǎo)航 全局導(dǎo)航,網(wǎng)站設(shè)計師使用術(shù)語“全局導(dǎo)航”來描述出現(xiàn)在網(wǎng)站每個頁面上的一組導(dǎo)航元素。如果設(shè)計得當(dāng)，全局導(dǎo)航應(yīng)該始終傳達以下信息：“導(dǎo)航部分在這里，其中一些可能會根據(jù)您所處的位置有所變化，但它總會出現(xiàn)在這里，也會總是以同樣的方式為您服務(wù)?！?僅僅讓導(dǎo)航

11、部分在每一頁以一致的外觀出現(xiàn)在同樣的位置，會讓瀏覽者立即確定自己仍然在這個網(wǎng)站上。而且，讓導(dǎo)航在整個網(wǎng)站保持一致性也就意味著瀏覽者只需要了解它一次。,19/65,設(shè)計導(dǎo)航 全局導(dǎo)航,全局導(dǎo)航一般包括5個元素：站點ID、欄目、回主頁的方式、搜索的方式、實用工具，如圖 10.9 所示。當(dāng)然，不同的網(wǎng)站可能需要不同，比如很多網(wǎng)站就不包括實用工具，而一些小網(wǎng)站則不提供搜索功能。,20/65,設(shè)計導(dǎo)航 全局導(dǎo)航,需要說明的是，對于全局導(dǎo)航“每一頁都一樣”有以下兩個例外： 主頁。主頁和其他頁面不一樣，它要承擔(dān)一些不同的任務(wù)，所以主頁上可以不必使用全局導(dǎo)航。不過，主頁上使用與其他頁面一致的全局導(dǎo)航也是一種很

12、常見的做法。 表單。需要填寫表單的頁面，全局導(dǎo)航可能會成為不必要的干擾。例如，當(dāng)用戶在一個電子商務(wù)站點付費時，設(shè)計者可能并不希望用戶去做除了填寫表單之外的任何事情。對表單頁面來說，只要站點 ID 、一個回到主頁的鏈接和任何有助于填寫表單的實用工具就可以了。,21/65,設(shè)計導(dǎo)航 站點標(biāo)志,網(wǎng)站的站點ID 或標(biāo)志（Logo）相當(dāng)于建筑物的名字。在進入一家商場之前，用戶只需要在進來的路上看見它的名稱就可以了。一旦進入商場，我們就知道自己還待在里面，直到離開為止。但是在 Web 上在這里我們的移動方式主要是瞬移我們需要在每個頁面上見到網(wǎng)站的名稱。,22/65,設(shè)計導(dǎo)航 站點標(biāo)志,和我們希望在正門處見

13、到建筑的名字一樣，我們希望在頁面的上方見到站點ID通常是在左上角，或者至少應(yīng)靠近左上角。原因很簡單，因為站點ID代表了整個網(wǎng)站，也就是說，它在當(dāng)前站點結(jié)構(gòu)中層次最高，如圖 10.10 所示。,23/65,設(shè)計導(dǎo)航 站點標(biāo)志,要讓站點ID出現(xiàn)在頁面可視層次的首要位置，可采取兩種方式：讓它成為本頁最顯眼的內(nèi)容，或者讓它涵蓋頁面所有其他元素。 除了位于我們希望它出現(xiàn)的位置之外，站點ID還要看起來像一個站點ID。也就是說，它應(yīng)該像我們平?？吹降纳虡?biāo)標(biāo)志或商場外部標(biāo)志一樣：一種獨特的字體，一個可以識別的圖形，大小從按鈕到廣告牌不等。,24/65,設(shè)計導(dǎo)航 站點標(biāo)志,例如，在圖 10.6 中，淘寶網(wǎng)的站點

14、標(biāo)志（就是“淘寶網(wǎng)”三個大字）位于正中，而所有其他淘寶網(wǎng)頁面（如圖 10.7和圖10.11所示），站點標(biāo)志都是位于左上角。,25/65,設(shè)計導(dǎo)航 導(dǎo)航條,主導(dǎo)航條是到達站點主要欄目的鏈接，也就是站點層次結(jié)構(gòu)的最頂層。它通常位于站點頂部或者左端，偶爾也可能出現(xiàn)在右端。例如，圖 10.12 所示的網(wǎng)頁就是采用最常規(guī)的頂部主導(dǎo)航條。,26/65,設(shè)計導(dǎo)航 導(dǎo)航條,在很多情況下，主導(dǎo)航條中也可以直接包括二級導(dǎo)航，如圖 10.12 所示。這種菜單式的二級導(dǎo)航在內(nèi)容比較多的網(wǎng)站上用的很普遍。 當(dāng)然，二級導(dǎo)航或者更低級的導(dǎo)航也可以以其他方式出現(xiàn)。例如，在圖 10.13 中，二級導(dǎo)航在頁面的中間，同時采用菜單

15、的方式表示更低級的導(dǎo)航。,27/65,設(shè)計導(dǎo)航 實用工具,實用工具是到達網(wǎng)站中不屬于內(nèi)容層次的重要元素的鏈接，它要么能幫助我們使用站點（例如幫助、站點地圖或購物車），要么提供網(wǎng)站發(fā)布者的信息（例如“關(guān)于我們”、“聯(lián)系我們”）。,28/65,設(shè)計導(dǎo)航 實用工具,對于不同類型的網(wǎng)站，實用工具也有所不同。對于公司網(wǎng)站或電子商務(wù)網(wǎng)站，它們可能包括任何以下內(nèi)容： 關(guān)于我們 下載 如何購物 注冊 檔案 目錄 招聘 搜索 結(jié)賬 論壇 我的 購物車 公司信息 常見問題 新聞 登錄 聯(lián)系我們 幫助 訂單跟蹤 站點地圖 客戶服務(wù) 主頁 新聞稿 店面位置 討論板 投資者關(guān)系 隱私聲明 你的帳戶,29/65,設(shè)計導(dǎo)航

16、 實用工具,實用工具一般都位于頁面的頂部區(qū)域，不同站點的實用工具可能大不相同。例如，在圖 10.9 所示的大學(xué)網(wǎng)站上包括以下實用工具：“Directory（目錄）”、“Map（地圖）”和“Calendar（日歷）”，而在圖 10.14 所示的大學(xué)網(wǎng)站上，則包括了“書記信箱”、“校長信箱”等實用工具。,30/65,設(shè)計導(dǎo)航 返回主頁,全局導(dǎo)航中最重要的元素之一是把我們送回主頁的按鈕或鏈接。這使瀏覽者感到很安全，因為不論迷路到了何種地步，也都能重新開始，就像按一下“重啟”按鈕一樣。 有一種新興的習(xí)慣用法，就是讓站點ID同時也作為一個回到主頁的按鈕，這非常有用。很多站點都已經(jīng)這么做了，但還有大量的用

17、戶沒有意識到這一點。實際上，有經(jīng)驗的上網(wǎng)者在看到站點ID時都會認(rèn)為它應(yīng)該帶我們返回首頁。,31/65,設(shè)計導(dǎo)航 返回主頁,可以采用以下做法： 在主導(dǎo)航或?qū)嵱霉ぞ咧邪粋€回到主頁的鏈接。 在主頁之外的站點ID上加上“主頁”二樣，讓大家知道可以點擊它。,32/65,設(shè)計導(dǎo)航 搜索功能,由于搜索的巨大威力和喜歡搜索的用戶比喜歡瀏覽的用戶更多，因此除非站點規(guī)模非常小而且組織得很好，否則每個頁面都應(yīng)該有一個搜索框或一個鏈接到搜索頁面的鏈接。而且，除非你的網(wǎng)站真的不太需要搜索，否則它應(yīng)該是一個搜索框。 記住，大多數(shù)用戶訪問一個新站點時，第一件事就是掃描頁面，看有沒有一個基本的搜索框。,33/65,設(shè)計導(dǎo)

18、航 搜索功能,例如，圖 10.15 所示頁面在頁面1/3處提供了一個搜索課程的搜索功能。不過令人遺憾的是，該網(wǎng)站并沒有提供其他的搜索功能，也就是說，如果訪問者曾經(jīng)訪問過某個頁面并且只記得一個關(guān)鍵詞，下次回來想要重新找到那個頁面無異于大海撈針。,34/65,設(shè)計導(dǎo)航 頁面名稱,無論是自駕車，還是在一個陌生的城市乘坐公共交通工具，路牌都是給我們指路的最重要元素。好的路牌都有以下特點： 路牌標(biāo)志很大。當(dāng)你在一個十字路口停下來時，能看清楚下一個十字路口的街牌標(biāo)志。 它們在適合的位置。它們懸掛在你正在行駛的道路上方，所以你只要抬頭看一眼就可以了。,35/65,設(shè)計導(dǎo)航 頁面名稱,頁面名稱就是Web上的路

19、牌。和路牌一樣，如果一切順利，瀏覽者可能根本不會注意頁面名稱，但一旦覺得自己可能方向不對時，就需要毫不費勁地看到頁面名稱來確定方向。 關(guān)于頁面名稱，需要注意以下四點： 每個頁面都需要一個名稱。和每個拐角都應(yīng)該有一個路牌一樣，每個頁面應(yīng)該有一個名稱。 頁面名稱要出現(xiàn)在合適的位置。在頁面的可視層次上，頁面名稱應(yīng)該出現(xiàn)在涵蓋該頁內(nèi)容的位置。 名稱要吸引人注目。需要結(jié)合位置、字體大小、顏色和留白體現(xiàn)出“這就是整個頁面的標(biāo)題”。在大多數(shù)情況下，它應(yīng)是該頁面最大的文字。 名稱要和點擊的鏈接一致。盡管幾乎沒有人注意到，但每個站點同訪問者有著隱含的約定：頁面的名稱將和我點擊并來到這里的鏈接相匹配。,36/65

20、,設(shè)計導(dǎo)航 頁面名稱,例如，圖 10.16 就是一個設(shè)計良好的標(biāo)題（結(jié)合圖 10.15，會發(fā)現(xiàn)該頁面標(biāo)題與對應(yīng)的鏈接是完全一致的）。,37/65,設(shè)計導(dǎo)航 當(dāng)前位置標(biāo)志,要抵消網(wǎng)絡(luò)固有的空間迷失感，其中一種有效的導(dǎo)航方式就是告訴瀏覽者當(dāng)前在什么位置，這和購物廣場或者公園地圖上的“你在這里”指示器作用一樣（如圖 10.17 所示）。,38/65,設(shè)計導(dǎo)航 當(dāng)前位置標(biāo)志,在網(wǎng)頁上，這可以用突出瀏覽者當(dāng)前的位置來做到。不管是在頁面的導(dǎo)航條、列表還是菜單上，通過特殊的顯示方式可以快速告訴瀏覽者當(dāng)前位置。 例如，在圖 10.18 所示頁面中，標(biāo)簽導(dǎo)航可以讓人很清楚地知道當(dāng)前位置。,39/65,設(shè)計導(dǎo)航

21、當(dāng)前位置標(biāo)志,又例如，在圖 10.19 所示的頁面中，左邊導(dǎo)航列表中的“Computer Science”文字以黑體顯示，表示當(dāng)前處于相應(yīng)的頁面。,40/65,設(shè)計導(dǎo)航 面包屑,實際上，在圖 10.19 所示網(wǎng)頁中還有另外一個告訴瀏覽者當(dāng)前位置的導(dǎo)航元素面包屑，它在頁面上端1/4左右的位置處，文字為“Books New & Used Textbooks Computer Science”。 和“你在這里”指示器一樣，面包屑也告訴了用戶當(dāng)前的位置。有時候它們甚至?xí)澳阍谶@里”的字樣。,41/65,設(shè)計導(dǎo)航 面包屑,如果設(shè)計得好，面包屑的優(yōu)越性是不言而喻的。一方面它們不會占用太多空間，另一方面

22、，它們也提供了一種方便，一致的方式讓用戶可以做最常做的兩件事：回退一個層次，或者去主頁。設(shè)計面包屑時應(yīng)注意以下原則： 把它們放在頁面頂端。 使用“”對層級進行分隔，因為它在視覺上暗示了沿著層級向前移動的動作。 使用小字體，表明它是補充機制。 使用了文字“你在這里”，讓沒有經(jīng)驗的瀏覽者知道它是什么。 將最后一個元素加粗。層級清單中的最后一個元素應(yīng)該是當(dāng)前頁面的名稱，將它加粗正好得到了應(yīng)有的突出。,42/65,設(shè)計導(dǎo)航 面包屑,例如，圖 10.19 中的面包屑就是符合以上原則的，而圖 10.20 和圖 10.21 中的面包屑則有一些小問題。,43/65,設(shè)計導(dǎo)航 網(wǎng)站導(dǎo)航測試,最著名的網(wǎng)站導(dǎo)航測試

23、恐怕就是所謂的“后備箱”測試了：想象你被蒙上雙眼，鎖在車子的后備廂里。車開動一會兒以后，把你放在某個網(wǎng)站內(nèi)容的某個網(wǎng)頁上。如果這個頁面設(shè)計良好，當(dāng)你除去眼罩時，應(yīng)該能毫不猶豫地回答出以下問題：,44/65,設(shè)計導(dǎo)航 網(wǎng)站導(dǎo)航測試,這是什么網(wǎng)站？（站點ID） 我在哪個網(wǎng)頁上？（網(wǎng)頁名稱） 這個網(wǎng)站的主要欄目有哪些？（主導(dǎo)航） 在這個層次上我有哪些選擇？（本頁導(dǎo)航） 我在導(dǎo)航系統(tǒng)的什么位置？（“你在這里”指示器和面包屑） 我怎么搜索？（搜索框）,45/65,設(shè)計版式,所謂頁面版式就是各種頁面元素如何布局，從而獲得需要的設(shè)計效果。本節(jié)介紹設(shè)計頁面版式時需要注意的幾個方面： 頁面比例 網(wǎng)頁的分欄 版面

24、率 圖版面積 跳躍率,46/65,設(shè)計版式 頁面比例,在設(shè)計頁面版式時，頁面分塊的比例是需要考慮的基本因素。 黃金分割 對稱比,47/65,設(shè)計版式 頁面比例,“黃金分割”是眾所周知的有關(guān)比例的概念，這個神奇的比例是“1：0.618”。這個數(shù)字在自然界和人們生活中到處可見：人們的肚臍是人體總長的黃金分割點，人的膝蓋是肚臍到腳跟的黃金分割點；大多數(shù)門窗的寬長之比也是0.618；金字塔、巴黎圣母院、埃菲爾鐵塔等著名建筑都有與0.618有關(guān)的數(shù)據(jù)；一些名畫、雕塑、攝影作品的主題，大多在畫面的0.618處。,48/65,設(shè)計版式 頁面比例,黃金分割的簡化就是所謂的“三分法”原理。由于被黃金分割分成兩部

25、分的線條，其中一部分大概是另一部分的兩倍，因此將一個整體分成三等份是一種應(yīng)用黃金分割原理而不需要詳細(xì)計算的簡單方法。 在進行頁面版式設(shè)計時，可以在紙上繪制如圖 10.22 所示的三等分正方形，然后在每個小方形內(nèi)再三等分，從而得到一張柵格紙。在放置頁面元素時，應(yīng)將其邊緣與柵格線對齊，從而獲得合理的比例關(guān)系。,49/65,設(shè)計版式 頁面比例,實際上，設(shè)計良好的網(wǎng)頁大多遵循黃金分割原則。例如，在圖 10.23 所示的“中國雅虎首頁”中，左右欄的劃分就是大概2：1的比例。 又例如，在圖 10.24 所示的“阿里巴巴首頁”中，右側(cè)一列在頁面的2：1處，而左邊又有1：2的比例關(guān)系。,50/65,設(shè)計版式

26、頁面比例,對稱廣泛存在于自然界和我們的生活中。人在生理上、心理上都習(xí)慣喜歡這種和諧的美。對稱往往給人以莊嚴(yán)、穩(wěn)重、典雅之感。設(shè)計師們往往在絕對對稱的設(shè)計中加入一定的不對稱因素，或者在不對稱的設(shè)計中加入對稱的因素，集活潑與莊重于一體，從而給人們留下深刻的印象。,51/65,設(shè)計版式 頁面比例,例如，在圖 10.24 所示的阿里巴巴首頁中，中間一列就采用了對稱的比例，顯得非常整齊穩(wěn)重。 又例如，在圖 10.25 所示的網(wǎng)頁中，就結(jié)合了黃金分割比例和對稱比例，整個頁面顯得非常協(xié)調(diào)。,52/65,設(shè)計版式 網(wǎng)頁的分欄,網(wǎng)頁的分欄是劃分頁面區(qū)域最基本的手段，頁面的版式變化主要通過“欄”的變化來體現(xiàn)的。受

27、計算機顯示屏和網(wǎng)站瀏覽習(xí)慣的影響，網(wǎng)站的寬度相對固定，而高度是不固定的，因此網(wǎng)站“欄”的設(shè)計主要集中在豎欄的區(qū)分上。,53/65,設(shè)計版式 網(wǎng)頁的分欄,一欄板式 一欄版式是指網(wǎng)頁縱向只有一個豎欄的版面結(jié)構(gòu)。這種版式最簡單，用戶視覺流程就是從上到下，但如果頁面要同時傳達兩項以上內(nèi)容，這種版式就很難實現(xiàn)了。因此，單欄版式較多用在目的較為單一的頁面中，如圖 10.26 所示。,54/65,設(shè)計版式 網(wǎng)頁的分欄,二欄版式 二欄版式是指頁面縱向有兩個豎欄的版面結(jié)構(gòu)。由于其結(jié)構(gòu)簡單清晰，又能夠解決內(nèi)容并置的問題，在實際網(wǎng)站中應(yīng)用非常廣泛，如圖 10.27 和圖 10.28 所示。,55/65,設(shè)計版式 網(wǎng)頁的分欄,三欄版式 三欄的版式是指網(wǎng)站縱向有三個豎欄的版面結(jié)構(gòu)，其結(jié)構(gòu)相對復(fù)雜一些，但由于能夠同時呈現(xiàn)較多的內(nèi)容，因此是大網(wǎng)站最常用的結(jié)構(gòu)，如圖 10.29 所示。,56/65,設(shè)計版式 版面率,版面率是指頁面中文字的面積與版面總面積之比，它主要受文字、圖片和留白之間關(guān)系的影響。版面率低的網(wǎng)頁的給人高雅感，版面率高的網(wǎng)頁則信息量大、通俗性強。 版面率過低，會帶來空間的浪費；而版面率