第8章 網頁設計基礎

第8章

網頁設計基礎知識要點（1）熟悉常見的認知組織原則：圖形與背景、接近性、連續(xù)性、完整和閉合傾向、相似性、對稱性和簡化律（2）掌握4個基本設計原則：緊湊、對齊、重復、對比（3）掌握如何設計適合掃描的網頁（4）掌握如何設計網站導航（5）掌握設計頁面版式時需考慮的因素：頁面比例、網頁的分欄、版面率、圖版面積和跳躍率本章目標(1)認知時的組織原則格式塔（gestalt）理論：整體大于其各個部分之和。換句話說，人們把對象理解為一個完整單元，然后才意識到其各個組成部分。這種基本感知理論表明，人類的意識能夠組織、簡化和綜合自己看到的事物。我們正是這樣感知和理解身邊的事物的。假設整體性是人們感知事物是所追尋的一種方式，那么設計人員的主要目標就是建立統(tǒng)一性。1．格式塔理論概述(1)認知時的組織原則(1)認知時的組織原則由于現(xiàn)實世界非常復雜，人們在認知時采取了一些通用的策略，或者說組織原則，以便更好的認識這個世界。2．認知時的組織原則圖形與背景接近性連續(xù)性完整和閉合傾向相似性對稱性簡化律(1)認知時的組織原則在一個特定的場景中，有些對象突現(xiàn)出來形成圖形，有些對象退居到襯托地位而成為背景。一般說來，圖形與背景的區(qū)分度越大，圖形就越可突出而成為我們的知覺對象。圖形與背景例如，我們在寂靜中比較容易聽到清脆的鳥鳴，在綠葉中比較容易發(fā)現(xiàn)紅花，在一個靜態(tài)的天空中容易感知到飛翔的鳥兒。反之，圖形與背景的區(qū)分度越小，就越是難以把圖形與背景分開，例如生物界的擬態(tài)和軍事上的偽裝便是如此。(1)認知時的組織原則要使圖形成為知覺對象，不僅要具備突出的特點，而且應具有明確的輪廓、明暗度和統(tǒng)一性。需要指出的是，這些特征不是物理刺激物的特性，而是心理場的特性。一個物體，例如一塊冰，就物理意義而言，具有輪廓、硬度、高度，以及其他一些特性，但如果此物沒有成為注意的中心，它就不會成為圖形，而只能成為背景，從而在觀察者的心理場內缺乏輪廓、硬度、高度等。一旦它成為觀察者的注意中心，便又成為圖形，呈現(xiàn)輪廓、硬度、高度等等。(1)認知時的組織原則但是，有時圖形和背景是難以區(qū)分的，什么是圖形，什么是背景往往取決于我們觀察的角度。(1)認知時的組織原則某些距離較短或互相接近的部分，容易組成整體。接近性(1)認知時的組織原則連續(xù)性指對線條的一種知覺傾向，如圖所示，盡管線條受其他線條阻斷，卻仍像未阻斷或仍然連續(xù)著一樣為人們所經驗到。連續(xù)性(1)認知時的組織原則知覺印象會隨環(huán)境而呈現(xiàn)成最為完善的形式。彼此相屬的部分，容易組合成整體，反之，彼此不相屬的部分，則容易被隔離開來。把一種不連貫的有缺口的圖形盡可能在心理上使之趨合，這就是閉合傾向。完整和閉合傾向(1)認知時的組織原則完整和閉合傾向在所有感覺中都起作用，它為認知提供完善的定界、對稱和形式。例如，對于某些說話很快的人，雖然每句話的最后一部分都被“吃掉”了，但并不影響聽眾的理解，就是因為聽眾自動將其“封閉”了。(1)認知時的組織原則在認知時，相似的元素會被分為一組。例如，在下圖中，人們很容易將其認知為X組和O組，而不是按照“接近性”原則將其分為左右兩部分。相似性(1)認知時的組織原則對稱性是指具有對稱邊界的區(qū)域會被認知為完整的圖形，如圖所示。對稱性(1)認知時的組織原則簡化律是指人們傾向于用最簡單的方式來認知模糊的刺激。例如，在下圖中，中圖和右圖往往會被認知為與左圖一樣的立方體。簡化律（2）4個設計原則設計要素是標志、圖標、文本塊、圖片等的組合。設計要素必須合理組織起來，才能產生實際的含義。設計者把這些元素或形式進行組合時，一般要遵循一些基本的原則，以便符合人們的認識和審美習慣。1．設計原則01緊湊02對齊03重復04對比（2）4個設計原則緊湊原則指出：應將相關項目成組地擺放在一起，讓它們彼此靠近，以便相關的項目看起來更像是一個整體，而非一堆無關的東西。當幾個信息彼此相鄰時，它們就會成為一個視覺整體而非數(shù)個獨立的個體單元。在日常生活中也是如此，緊湊，往往意味著關聯(lián)。緊湊（2）4個設計原則緊湊原則指出：應將相關項目成組地擺放在一起，讓它們彼此靠近，以便相關的項目看起來更像是一個整體，而非一堆無關的東西。當幾個信息彼此相鄰時，它們就會成為一個視覺整體而非數(shù)個獨立的個體單元。在日常生活中也是如此，緊湊，往往意味著關聯(lián)。緊湊的概念并非意味著所有的信息都要相互靠近。它的基本含義是：邏輯意義上相關聯(lián)的元素，在視覺上也應該關聯(lián)。而其他單獨的元素或元素組則不應緊湊擺放。項目之間的緊湊或稀疏說明了它們之間相互的關系。緊湊（2）4個設計原則緊湊原則在網頁設計中的最基本應用就是將信息合理分組，從而使得網頁內容更容易被查找到。查看任何一個閱讀方便的網站，我們會發(fā)現(xiàn)其中的信息往往被分成了若干個合理的板塊。（2）4個設計原則使用緊湊原則時的一個技巧是：掃視整個頁面，并數(shù)一下頁面上的視覺單元，即視線停留的次數(shù)。如果頁面上的單元超過了三至五個（當然這取決于作品），那么某些單獨的元素可能可以被編排至一個更為緊湊的組以作為一個視覺單元。（2）4個設計原則不要因為有空間就把東西堆放在角落或者堆放在中間；避免在同一頁上放置過多的獨立單元；避免在各個元素之間使用等量的留白，除非每個組都是某個子集的一部分；避免出現(xiàn)讓人無法判斷其與周圍內容關系的大標題、子標題、圖片說明文字、圖形等，而應通過緊湊感建立元素間的關系。不要為那些不屬于同一組的元素創(chuàng)建聯(lián)系。也就是說，如果它們不相關，應將它們分離開來。應該避免的錯誤：（2）4個設計原則違背緊湊原則的網頁（2）4個設計原則對齊原則：頁面上不能隨意放置東西，每一個項目都應當與頁面上的其他各項目建立視覺上的聯(lián)系。在頁面上對齊之后，各元素會形成一個更具有凝聚力的單元。即便這些對齊的元素貌似相互分離的，但是實際上會存在一條不可見的線將它們連接在一起，從視覺和意識上給瀏覽者一個整體的感覺。對齊（2）4個設計原則如果在頁面上放置了多個元素，必須確保每一元素均與頁面上的其他元素存在視覺上的對齊效果如果有文本行水平地跨越了幾個元素，那么應將這幾個元素的基線對齊如果文本有多個單獨的塊，那么應將它們左對齊或者右對齊如果有多個圖形，那么需要參照頁面的其他圖形邊緣進行對齊（2）4個設計原則頁面元素的不對齊是導致文檔看起來不舒適的最大因素。人們喜歡觀看有次序的東西，有次序的東西給人一種平靜、安全的感覺。另外，這也有助于信息的溝通。在任何一幅設計良好的作品中，都可以為對齊的元素繪制對齊線，哪怕頁面中包含非常多的視覺分塊。（2）4個設計原則（2）4個設計原則在設計中，統(tǒng)一是一個重要的概念。想要讓頁面上所有的元素看上去統(tǒng)一、相關聯(lián)，就需要在分離的元素之間建立一些視覺聯(lián)系。即便是這些分離的元素在頁面上并不是靠得很近，但是通過它們本身的布局也可以給人以相連、相關，并與其他信息相統(tǒng)一的感覺。任意找到一個設計良好的網頁，無論看上去有多雜亂無章，我們都可以在其中找到里面的對齊點。（2）4個設計原則（2）4個設計原則使用對齊原則進行設計的一個簡單技巧就是使用柵格系統(tǒng)。通過讓頁面元素與柵格對齊，可以確保元素之間的對齊。如果要評價他人的網頁，可以延長每條可見或不可見的線條，看是否對齊。（2）4個設計原則應該避免的錯誤：PART1避免在頁面上使用多種對齊方式，除非有明確的理由。換句話說，不要將一部分文本居中，同時又將另一部分文本右對齊PART2盡力避免使用居中對齊方式，除非是有意要創(chuàng)建一種更為正式、穩(wěn)重的外觀（2）4個設計原則（2）4個設計原則重復原則：請在整個作品中重復設計某些部分。該重復元素可以是粗體字、水平線、特定的項目符號、顏色、設計元素、特定的格式以及空間關系等等——它可以是閱讀者能從視覺上感知的任何東西。實際上，我們在日常生活中已經見過很多重復原則的應用了。例如，一本書的標題、頁眉頁腳等都是重復的實例。重復（2）4個設計原則重復可以理解為“保持一致性”。重復可以讓信息更加條理化，可以為閱讀者提供指引，統(tǒng)一設計中各不相同的部分。即便是在單頁文檔上，重復元素也能創(chuàng)建出精細的連貫性，并將所有元素連成一個整體。如果正在創(chuàng)建的是多個單頁文檔，且同屬于一個綜合的整體，那么重復元素的使用就更加關鍵了。（2）4個設計原則重復賦予了作品專業(yè)感和權威感。重復可以讓閱讀者感受到有人在進行操控，因為重復很明顯是經過深思熟慮之后所做出的設計決定。重復的基本用途是為了統(tǒng)一并增加視覺吸引力。如果一個頁面看上去很有吸引力，那么閱讀者會更有興趣進行閱讀。實現(xiàn)站點統(tǒng)一的重要元素包括字體大小與樣式、頁面背景顏色、導航元素位置、超鏈接樣式和布局格式的一致性等。（2）4個設計原則（2）4個設計原則要避免：過多地重復某一元素，以免使人有厭煩之感或者喧賓奪主之感。應當注意對比的價值。（2）4個設計原則對比的基本目的是在構圖中引入視覺變化，增加總體視覺效果，同時能在不同的元素中構建起一個有組織的層級關系。對比可以在元素之間建立深度與張力，并可以產生戲劇效果和增加可讀性。建立簡單的對比非常容易。紙上或屏幕上的任何標記都會打破空白空間，從而產生對比。但是，要建立和諧、統(tǒng)一的設計，成功的設計師就要知道如何操縱對比，以便在不同情形中進行不同處理。對比（2）4個設計原則將兩個不同的元素放在一起就產生了對比。如果兩個元素只是稍有不同，那么就不存在對比和沖突。對比原則：如果兩個元素不是完全相似，那么請讓它們變得不同，真正的不同。在設計中，對比可以表示相反的兩個方面，如黑與白、厚與薄、大與小。簡單地說，設計中的對比就是視覺反差：對點、線、面或形、色、紋理、空間、質量、容量之類的設計要素，在一個構圖中進行不同處理。（2）4個設計原則可以通過很多種方式來實現(xiàn)對比：大、小字體之間的對比細線條和粗線條之間的對比冷色和暖色之間的對比平滑紋理和粗糙紋理之間的對比水平元素（諸如很長一行的文本）與垂直元素（諸如長而窄的一列文本）之間的對比寬間距的行與窄間距之間的對比小圖形與大圖形之間的對比在網頁設計時，建立適當?shù)膶Ρ仁菍崿F(xiàn)設計目標的重要手段。例如，在下面的網頁中，綜合應用了大小、顏色、動靜等對比手段，起到了想要的效果。（2）4個設計原則（2）4個設計原則（3）設計適于掃描的網頁在信息爆炸的今天，已經沒有人會去“閱讀”網頁了，幾乎所有人都是在“掃描”網頁。因此網頁設計者需要為掃描而設計，而不是為閱讀而設計。為掃描而設計需要遵循以下原則：1．設計適于掃描的網頁01在每個頁面上建立清楚的視覺層次02盡量利用習慣用法03把頁面劃分成明確定義的區(qū)域04最大限度降低干擾（3）設計適于掃描的網頁如果想讓頁面快速讓人理解，最好的方法就是讓頁面上所有內容的外觀都清清楚楚，而且能準確地表述頁面內容之間的關系。建立清楚的視覺層次哪些內容是相關的？哪些內容是其他內容的組成部分？換句話說，每個頁面都應該有清楚的視覺層次。（3）設計適于掃描的網頁一個視覺層次清楚的頁面有三個特點：越重要的部分越突出邏輯上相關的部分在視覺上也相關邏輯上的包含關系在視覺上應進行嵌套010203（3）設計適于掃描的網頁（3）設計適于掃描的網頁在我們閱讀報紙的時候，會發(fā)現(xiàn)每張報紙都用突出、分組和嵌套的方式為讀者提供關于報紙內容的有用信息。比如說，這張圖片和這個新聞內容是一起的，因為它們位于同一個標題的覆蓋范圍之下；而那條新聞的內容最重要，因為它采用了最大的標題，最寬的欄目，并占用頁面上最突出的位置。日久天長，這些東西都形成了慣例，成為我們生活中自然而然的一部分。使用習慣用法（3）設計適于掃描的網頁例如，在以下紙質報紙的版式中，我們可以很清楚地體會到各種視覺要素的組織原則。（3）設計適于掃描的網頁我們知道，了解報紙版面的布局和格式的不同用法能讓我們更快、更容易地掃描報紙，找到我們感興趣的新聞故事。還有，當我們在別的城市旅行時，我們知道所有報紙都是采用差不多的習慣用法，因此，了解這些習慣用法可以很容易地閱讀任何報紙。實際上，每一種出版媒體都在發(fā)展自己的習慣用法，并不斷改進這些用法，形成新的習慣用法。Web上已經有很多的習慣用法，大部分是從報紙和雜志中延續(xù)過來的，而新的習慣用法也在不斷涌現(xiàn)。（3）設計適于掃描的網頁（3）設計適于掃描的網頁所有的習慣用法都是從某個人靈光一現(xiàn)的想法開始的，如果這個想法相當不錯，其他站點就會效仿，最終，會有足夠多的人在足夠多的地方見到它，讓它變得不言而喻。這個采用過程需要時間，但是和其他事物一樣，放在因特網上，它會發(fā)展得非?？?。例如，現(xiàn)在很多人都很熟悉電子商務站點上的購物車及其使用方法，因此，設計師們可以放心地使用一個購物車圖標，而不必加上“購物車”的文字說明。（3）設計適于掃描的網頁關于Web上的習慣用法，有兩點非常重要：PART1它們非常有用。通常，習慣用法因為有用才會成為習慣用法。適當應用習慣用法會使用戶在網站之間的訪問更容易，不需要花費額外的努力來得到背后的工作原理。這樣保證了一種熟悉感，例如，在看到頁面左邊直達底部彩色背景區(qū)域上，有著網站分類清單的鏈接時，哪怕有時這種熟悉感也會讓你感覺到某種似曾相識的單調乏味。PART2設計師通常不愿意利用它們。和使用習慣用法相比，設計師們都面臨著很大的誘惑，想要打破習慣用法很大程度上是因為他們覺得網站是請他們來做一些嶄新的、與眾不同的設計，而不是使用那些原有的東西。（3）設計適于掃描的網頁如果不打算使用一種已有的Web習慣用法，設計者必須確認以下兩點：Part1這種方法同樣清楚，同樣的不言而喻，不需要多少學習代價——這樣就跟習慣用法一樣好了Part2帶來很大的價值，因此值得用戶付出一點努力來學習這種新方法。如果打算創(chuàng)新，那么必須理解準備換用的方法的價值，而很多設計師都低估了習慣用法提供的價值一般的建議是，在清楚自己有一個更好的想法（每個人都會叫好）時進行創(chuàng)新，否則請盡量利用習慣用法（3）設計適于掃描的網頁任何一個設計良好的網頁都應該能做到這一點：在網頁上四處掃視之后，瀏覽者應該能指著頁面上的不同區(qū)域說出：劃分明確的頁面區(qū)域“這是我在網站能進行的活動”“這是到今日頭條的鏈接”“這是這個公司銷售的產品”“這是他們正在向我們推銷的東西”“這是到網站其它部分的導航”（3）設計適于掃描的網頁把頁面劃分成明確的區(qū)域很重要，因為這可以讓用戶很快決定關注頁面的哪些區(qū)域，或者放心地跳過哪些區(qū)域。對網頁掃描所進行的幾項初始眼動研究表明，用戶很快就會確定頁面哪些部分包含有用的信息，然后對其他部分看都不看——就像他們根本不曾來過一樣。（3）設計適于掃描的網頁有一種污染最為常見，就是“眼花繚亂”。如果頁面上所有的內容都在大聲叫喊著希望得到瀏覽者的注意，那么效果可能適得其反。減輕視覺污染（3）設計適于掃描的網頁還有一類視覺污染就像日常生活中的背景噪音，雖然并沒有某個地方會造成過分的干擾，但是這些小噪音太多也會讓人覺得厭煩（4）設計導航導航系統(tǒng)實際上是我們日常生活中重要的一部分。不論是一個城市，還是一個建筑物，或者是一本雜志，都有自己的導航系統(tǒng)，有它們自己隨著時間發(fā)展起來的習慣用法，比如街頭指示牌、頁碼、章節(jié)標題等。這些習慣用法指出導航元素的外觀和位置，因此我們知道該尋找什么，以及在需要的時候如何找到。把導航元素放在標準的位置可以讓我們快速定位，而將它們的外觀標準化讓我們更容易把它們與別的東西區(qū)分開來。1．網頁導航慣例（4）設計導航例如，我們總是希望能在街角處找到街頭指示牌，而且希望它們是按照常規(guī)的指示牌那樣工作的。我們也想當然地認為建筑物的名字應該在前門的上方或旁邊；在超市里，我們希望能在商品通道的盡頭看見標志；在雜志上，我們知道前幾頁會有目錄，在頁邊的某個地方會有頁碼，它們看起來也會像目錄和頁碼的樣子。（4）設計導航網站上的導航形成了很多習慣用法（大部分來自已有的印刷品習慣用法）。在一個設計合理的網站中，可能包含以下導航元素：網站ID欄目實用工具“你在這里”指示器下一級欄目頁面名稱頁面導航小字體頁腳導航（4）設計導航術語“全局導航”是指出現(xiàn)在網站每個頁面上的一組導航元素。如果設計得當，全局導航應該始終傳達以下信息：“導航部分在這里，其中一些可能會根據(jù)您所處的位置有所變化，但它總會出現(xiàn)在這里，也會總是以同樣的方式為您服務?！弊寣Ш讲糠衷诿恳豁撘砸恢碌耐庥^出現(xiàn)在同樣的位置，會讓瀏覽者立即確定自己仍然在這個網站上。而且，讓導航在整個網站保持一致性也就意味著瀏覽者只需要了解它一次。2．全局導航（4）設計導航全局導航一般包括5個元素：站點ID、欄目、回主頁的方式、搜索的方式、實用工具。不同的網站可能需要不同，比如很多網站就不包括實用工具，而一些小網站則不提供搜索功能。（4）設計導航全局導航“每一頁都一樣”有以下兩個例外：PART1主頁和其他頁面不一樣，它要承擔一些不同的任務，所以主頁上可以不必使用全局導航。不過，主頁上使用與其他頁面一致的全局導航也是一種很常見的做法。PART2需要填寫表單的頁面，全局導航可能會成為不必要的干擾。例如，當用戶在一個電子商務站點付費時，設計者可能并不希望用戶去做除了填寫表單之外的任何事情。對表單頁面來說，只要站點ID、一個回到主頁的鏈接和任何有助于填寫表單的實用工具就可以了。主頁表單（4）設計導航網站的站點ID或標志（Logo）相當于建筑物的名字。在進入一家商場之前，用戶只需要在進來的路上看見它的名稱就可以了。一旦進入商場，我們就知道自己還待在里面，直到離開為止。但在Web上——在這里我們的移動方式主要是瞬移——我們需要在每個頁面上見到網站的名稱。3．站點標志（4）設計導航我們希望在頁面的上方見到站點ID——通常是在左上角，或者至少應靠近左上角。因為站點ID代表了整個網站，也就是說，它在當前站點結構中層次最高。（4）設計導航要讓站點ID出現(xiàn)在頁面可視層次的首要位置，可采取兩種方式：讓它成為本頁最顯眼的內容，或者讓它涵蓋頁面所有其他元素。除了位于我們希望它出現(xiàn)的位置之外，站點ID還要看起來像一個站點ID。也就是說，它應該像我們平常看到的商標標志或商場外部標志一樣：一種獨特的字體，一個可以識別的圖形，大小從按鈕到廣告牌不等。（4）設計導航主導航條是到達站點主要欄目的鏈接，也就是站點層次結構的最頂層。它通常位于站點頂部或者左端，偶爾也可能出現(xiàn)在右端。在很多情況下，主導航條中也可以直接包括二級導航，這種菜單式的二級導航在內容比較多的網站上用的很普遍。4．導航條（4）設計導航實用工具是到達網站中不屬于內容層次的重要元素的鏈接，它要么能幫助我們使用站點（例如幫助、站點地圖或購物車），要么提供網站發(fā)布者的信息（例如“關于我們”、“聯(lián)系我們”）。5．實用工具（4）設計導航對于不同類型的網站，實用工具也有所不同。對于公司網站或電子商務網站，它們可能包括任何以下內容：關于我們下載如何購物注冊檔案目錄招聘搜索結賬論壇我的××購物車公司信息常見問題新聞登錄聯(lián)系我們幫助訂單跟蹤站點地圖客戶服務主頁新聞稿店面位置討論板投資者的關系隱私聲明你的賬戶（4）設計導航實用工具一般都位于頁面的頂部區(qū)域，不同站點的實用工具可能大不相同。（4）設計導航全局導航中最重要的元素之一是把我們送回主頁的按鈕或鏈接。這使瀏覽者感到很安全，因為不論迷路到了何種地步，也都能重新開始，就像按一下“重啟”按鈕一樣。有一種慣用法，就是讓站點ID同時也作為一個回到主頁的按鈕。實際上，有經驗的上網者在看到站點ID時都會認為它應該帶我們返回首頁。也可以在主導航或實用工具中包含一個回到主頁的鏈接。6．返回主頁（4）設計導航由于搜索的巨大威力和喜歡搜索的用戶比喜歡瀏覽的用戶更多，因此除非站點規(guī)模非常小而且組織得很好，否則每個頁面都應該有一個搜索框或一個鏈接到搜索頁面的鏈接。而且，除非網站真的不太需要搜索，否則它應該是一個搜索框。記住，大多數(shù)用戶訪問一個新站點時，第一件事就是掃描頁面，看有沒有一個基本的搜索框。7．搜索功能（4）設計導航（4）設計導航無論是自駕車，還是在一個陌生的城市乘坐公共交通工具，路牌都是給我們指路的最重要元素。好的路牌都有以下特點：8．頁面名稱路牌標志很大當你在一個十字路口停下來時，能看清楚下一個十字路口的街牌標志。它們在適合的位置它們懸掛在你正在行駛的道路上方，所以你只要抬頭看一眼就可以了。頁面名稱就是Web上的路牌。和路牌一樣，如果一切順利，瀏覽者可能根本不會注意頁面名稱，但一旦覺得自己可能方向不對時，就需要毫不費勁地看到頁面名稱來確定方向。（4）設計導航關于頁面名稱，需要注意以下四點：每個頁面都需要一個名稱01和每個拐角都應該有一個路牌一樣，每個頁面應該有一個名稱。頁面名稱要出現(xiàn)在合適的位置在頁面的可視層次上，頁面名稱應該出現(xiàn)在涵蓋該頁內容的位置。02名稱要吸引人注目03需要結合位置、字體大小、顏色和留白體現(xiàn)出“這就是整個頁面的標題”。在大多數(shù)情況下，它應是該頁面最大的文字。名稱要和點擊的鏈接一致盡管幾乎沒有人注意到，但每個站點同訪問者有著隱含的約定：頁面的名稱將和我點擊并來到這里的鏈接相匹配。04（4）設計導航（4）設計導航要抵消網絡固有的空間迷失感，其中一種有效的導航方式就是告訴瀏覽者當前在什么位置，這和購物廣場或者公園地圖上的“你在這里”指示器作用一樣。9．當前位置標志（4）設計導航在網頁上，這可以用突出瀏覽者當前的位置來做到。不管是在頁面的導航條、列表還是菜單上，通過特殊的顯示方式可以快速告訴瀏覽者當前位置。（4）設計導航（4）設計導航實際上，在該網頁中還有另外一個告訴瀏覽者當前位置的導航元素——面包屑。和“你在這里”指示器一樣，面包屑也告訴了用戶當前的位置。有時候它們甚至會包含“你在這里”的字樣。如果設計得好，面包屑的優(yōu)越性是不言而喻的。一方面它們不會占用太多空間，另一方面，它們也提供了一種方便，一致的方式讓用戶可以做最常做的兩件事：回退一個層次，或者去主頁。10．面包屑（4）設計導航設計面包屑時應注意以下原則：把它們放在頁面頂端。使用“>”對層級進行分隔，因為它在視覺上暗示了沿著層級向前移動的動作。使用小字體，表明它是補充機制。使用了文字“你在這里”，讓沒有經驗的瀏覽者知道它是什么。將最后一個元素加粗。層級清單中的最后一個元素應該是當前頁面的名稱，將它加粗正好得到了應有的突出。（4）設計導航“后備箱”測試如果這個頁面設計良好，當你除去眼罩時，應該能毫不猶豫地回答出以下問題：11．網站導航測試這是什么網站？（站點ID）我在哪個網頁上？（網頁名稱）這個網站的主要欄目有哪些？（主導航）在這個層次上我有哪些選擇？（本頁導航）我在導航系統(tǒng)的什么位置？（“你在這里”指示器和面包屑）我怎么搜索？（搜索框）（4）設計導航（5）設計版式所謂頁面版式就是各種頁面元素如何布局，從而獲得需要的設計效果。01頁面比例02網頁的分欄03版面率05跳躍率04圖版面積（5）設計版式在設計頁面版式時，頁面分塊的比例是需要考慮的基本因素。1．頁面比例Part01黃金分割Part02對稱比（5）設計版式“黃金分割”是眾所周知的有關比例的概念，這個神奇的比例是“1:0.618”。這個數(shù)字在自然界和人們生活中到處可見：人們的肚臍是人體總長的黃金分割點，人的膝蓋是肚臍到腳跟的黃金分割點；大多數(shù)門窗的寬長之比也是0.618；金字塔、巴黎圣母院、埃菲爾鐵塔等著名建筑都有與0.618有關的數(shù)據(jù)；一些名畫、雕塑、攝影作品的主題，大多在畫面的0.618處。（5）設計版式黃金分割的簡化就是所謂的“三分法”原理。由于被黃金分割分成兩部分的線條，其