序言

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

你們尚不需要去研究網站和網頁的基礎程式碼，而只需考察不同的網頁，思考其中應該包括哪些要素，並思考一些關鍵性的問題，如一致性、可用性和可訪問性。

主頁

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

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

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

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

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

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

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

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

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

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

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

導向

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

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

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

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

要想建立出成功的網站導向欄，一個最關鍵的方面是“一致性”。

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

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

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

頁面的頂部標題部分(橫跨頁面頂部)可以不僅僅包含網站標識，還可以包含或附加上主導向欄。此外，加上搜尋框也並不少見，這可以讓訪客直接搜尋網站的內容和資訊，而不用通過使用功能表和連結來導向。你應該在你的網站的每個頁面，都包括所有或大部分這些通用元素。

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

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

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

上下文關係非常重要

每個頁面，儘管包含所有這些通用元素，本身還是應該是獨一無二的。一個好的網頁應該有效地履行一個或少數幾個專門的功能。

相關內容

要製作出非常優秀的網頁，一個關鍵因素就是既要將內容分割，又要讓他們彼此相關。各項內容既必須分別放置在各個不同的頁面（這些頁面具有各不相同的URL位址），又必須有邏輯性地前後聯繫（在網站內和頁面內都是如此），這樣才能便於被找到。

以樂隊將舉行的演唱會資訊為例，儘管可以在每個頁面上都放置一個“將舉行的演唱會”功能，但還是應當將該項資訊放在一個獨立的頁面中。一個簡單的， 連結到“巡演日期”頁面的“下一場演唱會”功能，也可以有效地宣傳該項資訊，而不用處處都複製資訊內容（這樣可能把訪客和搜尋引擎都搞糊塗）。

標題

下一次你們讀報時，請仔細看看報紙的內容和版式設計。特別注意有一些報導篇幅更長，配有突出顯示的字體和圖片，標題也更醒目。這樣做的目的是，如果你時間很緊而只想瞭解重大新聞的話，就可以立即發現哪些是重大新聞。

這一原則同樣適用於網頁。一個頁面內每部分的內容都應有一個標題，以顯示這部分內容在頁面內的相對重要性（這部分內容是從屬於上一部分呢，還是是與之同等重要？）

舉例來說，在本篇文章的這個部分有兩個段落標題“相關內容”和“標題”，它們都位於“上下文關係”這個大標題之下，顯示它們都是從屬於大標題之下的小標題。

可用性

可用性是指一個網站能被訪客以可以預期到的合理方式所使用。

設想一下以下幾種情況：在你上一個新聞門戶網站閱讀一篇新聞時，在閱讀前必須要在該網站註冊；在你在網上預訂飛機票或火車票時，還需要花兩分鐘通過 電話向訂票人員解釋你的行程；在你輸入一個郵件位址或信用卡號碼時，網站只是告訴你輸入格式錯誤；搜尋發送回的結果中沒有有用的條目，或是一個網站在其首 頁沒有一個搜尋工具。

以上都是網站可用性不好的例子，這源於沒有考慮網站訪客的需要。而在你構建和設計網站時，如果把網站訪客的需要放在中心位置，就很有可能建立出令訪客滿意的好網站。

建立可用性好的網站並不是一件容易的事，這方面的很多知識都只能得之於經驗。你可以記下其他網站可用性不好的地方，以避免重蹈覆轍。測試網站可用性最好的辦法還是觀察訪客的實際使用體驗。一旦你建立好一個網站，請從以下多個方面觀察訪客的使用體驗：

•訪客能找到他們尋找的網頁嗎?

•對訪客輸入的搜尋主題詞，搜尋工具給出了正確的結果嗎?

•圖像/音頻/視頻能在訪客使用的瀏覽器中正常運行嗎？

•訪客是否有對可用性不滿意的地方？

•訪客感到滿意和高興的地方又在哪里？

專業公司對由其承擔進行的網站可用性測試會收取很高的費用，但你可以選擇非正式的測試方式，如讓你的朋友和家人告訴你他們使用你建立的網站的體驗，這樣也可以讓你很好地瞭解到一些你尚未注意到的網站存在的問題。這就是所謂當局者迷，旁觀者清的道理。

可訪問性

對網站可訪問性最常見的誤解就是僅將其理解為“讓盲人能訪問網站”，其實可訪問性是一個對更多的人都有影響的問題。

“輔助技術”這一術語用於描述任何幫助人們與其使用的電腦更為有效地互動的輔助設備或硬體。你們可能馬上會想到供盲人使用的螢幕閱讀器，或是供無 法使用滑鼠或鍵盤的人使用的語音輸入設備。但是眼鏡呢？其實對近視的人來說，所戴的眼鏡也是一種“輔助技術”，但是他們中絕大部分人不會認為自己是殘疾 人。

意識到很多使用互聯網訪客可能面臨的問題，對製作出好的網頁是非常重要的。不要想當然地就做出很多假定，如網站訪客就一定有滑鼠，就一定可以看到你使用的圖像，就都安裝了Flash播放器等。

在考慮網站的可訪問性時，除要考慮那些需要使用“輔助技術”的人外，還要考慮其他一些人如用手機上網的訪客。現在的手機還不能很好地支持 Flash（即使有Flash功能），例如蘋果公司的iPhone 就不具有支持Flash的功能（也許以後也不會有），雖然在其他方面用iPhone瀏覽網頁的效果和在蘋果電腦上用桌面版本的Safari瀏覽器瀏覽網 頁的效果差不多（Opera手機瀏覽器也不支持Flash）。一些新技術如Opeara Mini手機瀏覽器，可以為上網的低電量手機重寫網頁，使網頁體積變得更小，對絕大部分訪客來說，網頁中的圖像在手機瀏覽器中也會被顯示得小得多，這意味 著訪客可能無法獲取網頁中任何依賴于微妙的細節的內容。

在我們這個樂隊網站的例子中，你應該意識到如果使用了很多圖像（樂隊照片），則必須描述圖像的內容。如果你在頁面中使用了Flash音樂播放器，以 讓人們可以聽到樂隊的歌曲，你同時也應該建立直接指向歌曲的連結，以讓那些未安裝Flash播放器的人也可以以他們選擇的方式聽到這些歌曲。

總結

在本篇文章中，我講述了你們在開始實際創作網頁時，需要牢記的一些重要概念，以使網頁具有更好的可用性，能為更多的人訪問，並能更為順暢地運行。在以後的課程中，我們將詳細講述所有這些在本文中已提到的重要概念。

轉貼來源：知識共和國

http://www.piece2ec.com.tw/news.asp?ID=1854

參考文獻：

1.蔡東峻、李奇勳、駱德治 (2001), 品牌延伸與品牌聯盟對消費者品牌轉換意願之影響─以市內電話和國際電話為例, 國家科學委員會研究彙刊：人文及社會科學, 11(4), 345-355.

2.劉仲矩、陳昱如 (2006), 影響網路購物忠誠因素性別差異之比較研究, 電子商務研究, 4(4), 429-450.

3.鄭政宗，李世昌，林國賢 (2008), 大陸民眾來台旅遊態度與動機研究－以廣州市為例, 休閒暨觀光產業研究, 3(2), 22-46.