第8章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

第8章

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