序言

在本篇文章中，我們將考察The Dung Beatles樂隊網站的內容，以了解好的Web站點和網頁需要包含些什么要素。

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

• 主頁
  • 對我們的網站來說，這意味著什么？
• 導航
• 網站上的其他一些通用元素
• 上下文關系非常重要
  • 相關內容
  • 標題
• 可用性
• 可訪問性
• 總結
• 練習題

主頁

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

這聽起來符合邏輯，但其實并不是這樣的。過分著重于主頁，是一個人們常犯的錯誤。網站的主頁常成為一個大雜燴，試圖概括網站的所有內容，無所不包。

讓我們看一個此類主頁的實例吧，那就是 MSN 網站的主頁（見圖1）。這個主頁羅列了過多的內容和鏈接，從旅游到電視，從交友約會到指導，從小配件到綠化產品的信息，十分龐雜，都試圖引起你的注意。

圖1：MSN網站的主頁—羅列的鏈接太多！

這種“將一切想得到的東西都放在上面”的主頁，可能適合那些大型網站，但如果我們這個樂隊網站的主頁也這樣的話，無疑是不恰當的，會流失很多本來可以吸引到的用戶。

還有一個普遍的誤解就是，主頁一定是訪問網站的人所看到的第一個頁面。如果這些網站訪問者已了解到樂隊的網址，或是從廣告傳單、招貼畫或是樂隊徽章上看到樂隊的網址，然后在瀏覽器中鍵入樂隊的網址，確實有可能首先看到的就是網站的首頁。

但是更可能出現的情況是，網站訪問者是基于搜索結果來訪問網站的。如果他們搜索樂隊的名稱，很可能（但不一定）看到的最靠前的搜索結果是樂隊網站的 主頁。不過在其他情況下，例如他們搜索“模仿Beatles樂隊的音樂會”，看到的第一個搜索結果可能是“巡演日期”網頁；再比如他們搜索“摩斯喬市的樂 隊”，看到的第一個搜索結果就可能是“關于TDB樂隊”網頁，這是因為該網頁提到了樂隊是來自摩斯喬市的，而主頁里就沒有提到這一點。

《紐約時報》的網站在一篇關于決定停止向訪問舊內容的用戶收費的文章中提到，他們網站的訪問者的行為已近發生改變，到底是什么樣的改變呢，文中寫道：

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

對我們的網站來說，這意味著什么？

這意味著你需要將內容進行分割，放在單個的網頁內。你應該思考網站的訪問者將如何找到他們真正在尋找的內容和信息，或者說，一旦他們開始在網站漫游，他們想訪問的下一個網頁是什么。

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

下面我們將更深入地學習這些內容。

導航

如何對一個網站進行導航，是網站設計中最關鍵的因素之一（甚至可能是最關鍵的）。你應當確定網站的主要欄目頁，并在主導航欄中顯示。

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

其實只要有從一個鏈接通向下一個頁面的明確路徑，顯示用戶正在通向最終要訪問的頁面的正常過程之中，用戶是會繼續深入訪問網站的。

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

要想創建出成功的網站導航欄，一個最關鍵的方面是“一致性”。看下面圖2所示的頁面，在頁面上方的導航欄中顯示了一些鏈接如指向“Home（主 頁）”, “Articles（文章）”, “Forums（論壇）”等頁面的鏈接。在dev.opera 這個站點的其他頁面，顯示的導航欄都是一樣的。導航指向顯示你目前在網站的哪個位置，并提供指向該欄目內具體內容的鏈接。舉例來說，點擊導航欄上的 “Articles（文章）”標簽，將帶你到“文章”欄目的主頁面，其中包含一些指向最近發表的文章的鏈接，以及一系列指向分欄目如 “Accessibility（可訪問性）”、“CSS” 、“Mobile（移動設備）”等的鏈接（見圖2）。

圖2: The dev.opera.com的導航欄在網站所有頁面內都保持了一致性。

網站上的其他一些通用元素

除導航欄外，通常還有其他一些通用元素要在網站的各個頁面內都顯示。

絕大多數網站都有一些標示所有權的品牌圖像、網站標識或標頭。例如，Yahoo!網站中幾乎每一個頁面，在其左上方都有一個網站標識，其中附加有你正在訪問的頁面所屬的大欄目的名稱，如“Travel（旅游）”、“Movies（電影）”、“Autos（汽車）”等等。

頁面的頂部標題部分(橫跨頁面頂部)可以不僅僅包含網站標識，還可以包含或附加上主導航欄。此外，加上搜索框也并不少見，這可以讓用戶直接搜索網站的內容和信息，而不用通過使用菜單和鏈接來導航。你應該在你的網站的每個頁面，都包括所有或大部分這些通用元素。

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

配色、頁面布局、圖形和圖標的使用、版面設置和圖像，創造出作為網站有機組成部分的一個網頁的整體形象，這里“一致性”是關鍵。讓網頁的外觀和布置 保持一致性，有助于保持網站的一體性，并創造出一種熟悉感。這樣你就知道你正在訪問的頁面與此前訪問的該網站的網頁是相互聯系的，都是網站的有機組成部 分，因為這些頁面呈現出的視覺形象就是相互聯系的。當你在設計網站時，應當牢記這點，不要讓網站內的各個頁面看起來就不一致。

在我們的TDB樂隊網站內，頁面的頂部標題部分將包括樂隊的標識和名稱，以強化訪問者對樂隊的認知度，讓他們在訪問各個頁面時，都意識到是在閱讀關 于樂隊的各種信息。頁腳部分將包括網站及網站內歌詞、圖片、試聽歌曲等的版權信息，以及指向“聯系我們”、“預訂演唱會門票”等頁面的鏈接。