序言

在本篇文章中，我們將考察The Dung Beatles樂(lè)隊(duì)網(wǎng)站的內(nèi)容，以了解好的Web站點(diǎn)和網(wǎng)頁(yè)需要包含些什么要素。

你們尚不需要去研究網(wǎng)站和網(wǎng)頁(yè)的基礎(chǔ)代碼，而只需考察不同的網(wǎng)頁(yè)，思考其中應(yīng)該包括哪些要素，并思考一些關(guān)鍵性的問(wèn)題，如一致性、可用性和可訪問(wèn)性。本篇文章的目錄如下：

• 主頁(yè)
  • 對(duì)我們的網(wǎng)站來(lái)說(shuō)，這意味著什么？
• 導(dǎo)航
• 網(wǎng)站上的其他一些通用元素
• 上下文關(guān)系非常重要
  • 相關(guān)內(nèi)容
  • 標(biāo)題
• 可用性
• 可訪問(wèn)性
• 總結(jié)
• 練習(xí)題

主頁(yè)

很多人傾向于認(rèn)為“讓我們從多數(shù)用戶首先訪問(wèn)的頁(yè)面－主頁(yè)開始，這符合邏輯吧？”

這聽起來(lái)符合邏輯，但其實(shí)并不是這樣的。過(guò)分著重于主頁(yè)，是一個(gè)人們常犯的錯(cuò)誤。網(wǎng)站的主頁(yè)常成為一個(gè)大雜燴，試圖概括網(wǎng)站的所有內(nèi)容，無(wú)所不包。

讓我們看一個(gè)此類主頁(yè)的實(shí)例吧，那就是 MSN 網(wǎng)站的主頁(yè)（見(jiàn)圖1）。這個(gè)主頁(yè)羅列了過(guò)多的內(nèi)容和鏈接，從旅游到電視，從交友約會(huì)到指導(dǎo)，從小配件到綠化產(chǎn)品的信息，十分龐雜，都試圖引起你的注意。

圖1：MSN網(wǎng)站的主頁(yè)—羅列的鏈接太多！

這種“將一切想得到的東西都放在上面”的主頁(yè)，可能適合那些大型網(wǎng)站，但如果我們這個(gè)樂(lè)隊(duì)網(wǎng)站的主頁(yè)也這樣的話，無(wú)疑是不恰當(dāng)?shù)�，�?huì)流失很多本來(lái)可以吸引到的用戶。

還有一個(gè)普遍的誤解就是，主頁(yè)一定是訪問(wèn)網(wǎng)站的人所看到的第一個(gè)頁(yè)面。如果這些網(wǎng)站訪問(wèn)者已了解到樂(lè)隊(duì)的網(wǎng)址，或是從廣告?zhèn)鲉�、招貼畫或是樂(lè)隊(duì)徽章上看到樂(lè)隊(duì)的網(wǎng)址，然后在瀏覽器中鍵入樂(lè)隊(duì)的網(wǎng)址，確實(shí)有可能首先看到的就是網(wǎng)站的首頁(yè)。

但是更可能出現(xiàn)的情況是，網(wǎng)站訪問(wèn)者是基于搜索結(jié)果來(lái)訪問(wèn)網(wǎng)站的。如果他們搜索樂(lè)隊(duì)的名稱，很可能（但不一定）看到的最靠前的搜索結(jié)果是樂(lè)隊(duì)網(wǎng)站的 主頁(yè)。不過(guò)在其他情況下，例如他們搜索“模仿Beatles樂(lè)隊(duì)的音樂(lè)會(huì)”，看到的第一個(gè)搜索結(jié)果可能是“巡演日期”網(wǎng)頁(yè)；再比如他們搜索“摩斯喬市的樂(lè) 隊(duì)”，看到的第一個(gè)搜索結(jié)果就可能是“關(guān)于TDB樂(lè)隊(duì)”網(wǎng)頁(yè)，這是因?yàn)樵摼W(wǎng)頁(yè)提到了樂(lè)隊(duì)是來(lái)自摩斯喬市的，而主頁(yè)里就沒(méi)有提到這一點(diǎn)。

《紐約時(shí)報(bào)》的網(wǎng)站在一篇關(guān)于決定停止向訪問(wèn)舊內(nèi)容的用戶收費(fèi)的文章中提到，他們網(wǎng)站的訪問(wèn)者的行為已近發(fā)生改變，到底是什么樣的改變呢，文中寫道：

…越來(lái)越多的讀者都是通過(guò)搜索引擎和其他網(wǎng)站上的鏈接來(lái)訪問(wèn)我們網(wǎng)站的，而不再是直接訪問(wèn)NYTimes.com。以這種間接方式訪問(wèn)網(wǎng)站的讀者， 就無(wú)法訪問(wèn)那些需要付費(fèi)才能看到的文章，他們與那些直接訪問(wèn)網(wǎng)站的忠實(shí)用戶相比，愿意支付訂閱費(fèi)的可能性就要小一些。取消對(duì)訪問(wèn)舊內(nèi)容的收費(fèi)，是一個(gè)讓用 戶可以訪問(wèn)更多的網(wǎng)頁(yè)并提高網(wǎng)站廣告收入的機(jī)會(huì)。

對(duì)我們的網(wǎng)站來(lái)說(shuō)，這意味著什么？

這意味著你需要將內(nèi)容進(jìn)行分割，放在單個(gè)的網(wǎng)頁(yè)內(nèi)。你應(yīng)該思考網(wǎng)站的訪問(wèn)者將如何找到他們真正在尋找的內(nèi)容和信息，或者說(shuō)，一旦他們開始在網(wǎng)站漫游，他們想訪問(wèn)的下一個(gè)網(wǎng)頁(yè)是什么。

盡管很多人都試圖在主頁(yè)上放置過(guò)多的內(nèi)容，但實(shí)際上更好的做法是把主頁(yè)用作突出顯示網(wǎng)站其他網(wǎng)頁(yè)的內(nèi)容及導(dǎo)向訪問(wèn)這些網(wǎng)頁(yè)的一個(gè)頁(yè)面。將主頁(yè)和網(wǎng)站 其他頁(yè)面一樣處理，并賦予它一個(gè)確定的目的(即顯示更新，提供一個(gè)網(wǎng)站概觀，僅簡(jiǎn)要介紹樂(lè)隊(duì)，讓訪問(wèn)者繼續(xù)訪問(wèn)其他頁(yè)面，等等)。主頁(yè)還需要有指向其他頁(yè) 面的導(dǎo)航欄，并顯示網(wǎng)站的品牌。

下面我們將更深入地學(xué)習(xí)這些內(nèi)容。

導(dǎo)航

如何對(duì)一個(gè)網(wǎng)站進(jìn)行導(dǎo)航，是網(wǎng)站設(shè)計(jì)中最關(guān)鍵的因素之一（甚至可能是最關(guān)鍵的）。你應(yīng)當(dāng)確定網(wǎng)站的主要欄目頁(yè)，并在主導(dǎo)航欄中顯示。

關(guān)于網(wǎng)站導(dǎo)航同樣存在一個(gè)普遍的錯(cuò)誤觀念（你們可能已聽說(shuō)過(guò)），那就是讓訪問(wèn)者在獲取信息時(shí)不要超過(guò)三次點(diǎn)擊。正是這種錯(cuò)誤觀念的廣泛傳播，使得一 些網(wǎng)站上出現(xiàn)最糟糕和最復(fù)雜的導(dǎo)航。作為實(shí)例，你們可以去看看很多購(gòu)物或價(jià)格比較網(wǎng)站，他們總是傾向于在頁(yè)面上放置盡可能多的鏈接，試圖使用戶在購(gòu)買什么 之前，盡量減少點(diǎn)擊次數(shù)，以免他們離開并去訪問(wèn)競(jìng)爭(zhēng)對(duì)手的網(wǎng)站。但這種做法導(dǎo)致的結(jié)果很可能就是：羅列的信息過(guò)多，反倒使用戶不能有效地獲取和使用這些信 息。太多的選擇和太少的選擇一樣都會(huì)讓人無(wú)所適從。

其實(shí)只要有從一個(gè)鏈接通向下一個(gè)頁(yè)面的明確路徑，顯示用戶正在通向最終要訪問(wèn)的頁(yè)面的正常過(guò)程之中，用戶是會(huì)繼續(xù)深入訪問(wèn)網(wǎng)站的。

基于上一篇文章中講述的信息架構(gòu)，TDB樂(lè)隊(duì)網(wǎng)站的主導(dǎo)航欄應(yīng)當(dāng)包括指向以下部分/頁(yè)面的鏈接，“Store（商店）”頁(yè)面、“About（關(guān)于我 們）”頁(yè)面、“Contact（與我們聯(lián)系）”頁(yè)面、“The Music（音樂(lè)）”頁(yè)面、“Band News（樂(lè)隊(duì)新聞）”頁(yè)面，以及一個(gè)“返回主頁(yè)”的鏈接，并不需要包含指向如“Tour Dates（巡演日期）”、“Lyrics（歌詞）”等頁(yè)面的鏈接。指向這些頁(yè)面的鏈接應(yīng)當(dāng)僅放在相應(yīng)的網(wǎng)頁(yè)內(nèi)，也就是說(shuō)，任何需要從某一個(gè)歌詞頁(yè)面直接 跳轉(zhuǎn)到“Tour Dates（巡演日期）”頁(yè)面的訪問(wèn)者，都將可以被導(dǎo)航到“Band News（樂(lè)隊(duì)新聞）”頁(yè)面，然后再鏈接到“Tour Dates（巡演日期）”頁(yè)面。

要想創(chuàng)建出成功的網(wǎng)站導(dǎo)航欄，一個(gè)最關(guān)鍵的方面是“一致性”�？聪旅鎴D2所示的頁(yè)面，在頁(yè)面上方的導(dǎo)航欄中顯示了一些鏈接如指向“Home（主 頁(yè)）”, “Articles（文章）”, “Forums（論壇）”等頁(yè)面的鏈接。在dev.opera 這個(gè)站點(diǎn)的其他頁(yè)面，顯示的導(dǎo)航欄都是一樣的。導(dǎo)航指向顯示你目前在網(wǎng)站的哪個(gè)位置，并提供指向該欄目?jī)?nèi)具體內(nèi)容的鏈接。舉例來(lái)說(shuō)，點(diǎn)擊導(dǎo)航欄上的 “Articles（文章）”標(biāo)簽，將帶你到“文章”欄目的主頁(yè)面，其中包含一些指向最近發(fā)表的文章的鏈接，以及一系列指向分欄目如 “Accessibility（可訪問(wèn)性）”、“CSS” 、“Mobile（移動(dòng)設(shè)備）”等的鏈接（見(jiàn)圖2）。

圖2: The dev.opera.com的導(dǎo)航欄在網(wǎng)站所有頁(yè)面內(nèi)都保持了一致性。

網(wǎng)站上的其他一些通用元素

除導(dǎo)航欄外，通常還有其他一些通用元素要在網(wǎng)站的各個(gè)頁(yè)面內(nèi)都顯示。

絕大多數(shù)網(wǎng)站都有一些標(biāo)示所有權(quán)的品牌圖像、網(wǎng)站標(biāo)識(shí)或標(biāo)頭。例如，Yahoo!網(wǎng)站中幾乎每一個(gè)頁(yè)面，在其左上方都有一個(gè)網(wǎng)站標(biāo)識(shí)，其中附加有你正在訪問(wèn)的頁(yè)面所屬的大欄目的名稱，如“Travel（旅游）”、“Movies（電影）”、“Autos（汽車）”等等。

頁(yè)面的頂部標(biāo)題部分(橫跨頁(yè)面頂部)可以不僅僅包含網(wǎng)站標(biāo)識(shí)，還可以包含或附加上主導(dǎo)航欄。此外，加上搜索框也并不少見(jiàn)，這可以讓用戶直接搜索網(wǎng)站的內(nèi)容和信息，而不用通過(guò)使用菜單和鏈接來(lái)導(dǎo)航。你應(yīng)該在你的網(wǎng)站的每個(gè)頁(yè)面，都包括所有或大部分這些通用元素。

頁(yè)腳部分(頁(yè)面最下端的部分)應(yīng)包含一些額外的信息，如版權(quán)聲明，以及指向有用的輔助頁(yè)面（如“About This Site（關(guān)于本網(wǎng)站）”、“Terms & Conditions（使用條款和條件）”、“Contact Us（聯(lián)系我們）”)的鏈接等。

配色、頁(yè)面布局、圖形和圖標(biāo)的使用、版面設(shè)置和圖像，創(chuàng)造出作為網(wǎng)站有機(jī)組成部分的一個(gè)網(wǎng)頁(yè)的整體形象，這里“一致性”是關(guān)鍵。讓網(wǎng)頁(yè)的外觀和布置 保持一致性，有助于保持網(wǎng)站的一體性，并創(chuàng)造出一種熟悉感。這樣你就知道你正在訪問(wèn)的頁(yè)面與此前訪問(wèn)的該網(wǎng)站的網(wǎng)頁(yè)是相互聯(lián)系的，都是網(wǎng)站的有機(jī)組成部 分，因?yàn)檫@些頁(yè)面呈現(xiàn)出的視覺(jué)形象就是相互聯(lián)系的。當(dāng)你在設(shè)計(jì)網(wǎng)站時(shí)，應(yīng)當(dāng)牢記這點(diǎn)，不要讓網(wǎng)站內(nèi)的各個(gè)頁(yè)面看起來(lái)就不一致。

在我們的TDB樂(lè)隊(duì)網(wǎng)站內(nèi)，頁(yè)面的頂部標(biāo)題部分將包括樂(lè)隊(duì)的標(biāo)識(shí)和名稱，以強(qiáng)化訪問(wèn)者對(duì)樂(lè)隊(duì)的認(rèn)知度，讓他們?cè)谠L問(wèn)各個(gè)頁(yè)面時(shí)，都意識(shí)到是在閱讀關(guān) 于樂(lè)隊(duì)的各種信息。頁(yè)腳部分將包括網(wǎng)站及網(wǎng)站內(nèi)歌詞、圖片、試聽歌曲等的版權(quán)信息，以及指向“聯(lián)系我們”、“預(yù)訂演唱會(huì)門票”等頁(yè)面的鏈接。