一個好的網頁應包含哪些要素

你們尚不需求去研討網站和網頁的基礎代碼，而只需調查不同的網頁，考慮其間應該包含哪些要素，并考慮一些關鍵性的問題，如一致性、可用性和可拜訪性。本篇文章的目錄如下：

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

主頁

許多人傾向于以為“讓咱們從多數用戶首要拜訪的頁面－主頁開始，這契合邏輯吧？”

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

這種“將一切想得到的東西都放在上面”的主頁，或許合適那些大型網站。

還有一個普遍的誤解便是，主頁必定是拜訪網站的人所看到的第一個頁面。

但是更或許呈現的狀況是，網站拜訪者是根據查找成果來拜訪網站的。

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

…越來越多的讀者都是經過查找引擎和其他網站上的鏈接來拜訪咱們網站的，而不再是直接拜訪NYTimes.com。以這種間接方法拜訪網站的讀者， 就無法拜訪那些需求付費才能看到的文章，他們與那些直接拜訪網站的忠實用戶比較，樂意付出訂閱費的或許性就要小一些。取消對拜訪舊內容的收費，是一個讓用 戶能夠拜訪更多的網頁并進步網站廣告收入的時機。

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

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

雖然許多人都企圖在主頁上放置過多的內容，但實踐上更好的做法是把主頁用作杰出顯現網站其他網頁的內容及導向拜訪這些網頁的一個頁面。將主頁和網站 其他頁面相同處理，并賦予它一個確認的目的(即顯現更新，提供一個網站概觀，讓拜訪者繼續拜訪其他頁面，等等)。主頁還需求有指向其他頁 面的導航欄，并顯現網站的品牌。

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

導航

怎么對一個網站進行導航，是網站規劃中最關鍵的要素之一（乃至或許是最關鍵的）。你應當確認網站的主要欄目頁，并在主導航欄中顯現。

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

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

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

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

絕大多數網站都有一些標示一切權的品牌圖畫、網站標識或標頭。

頁面的頂部標題部分(橫跨頁面頂部)能夠不僅僅包含網站標識，還能夠包含或附加上主導航欄。此外，加上查找框也并不罕見，這能夠讓用戶直接查找網站的內容和信息，而不用經過運用菜單和鏈接來導航。你應該在你的網站的每個頁面，都包含一切或大部分這些通用元素。

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

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

每個頁面，雖然包含一切這些通用元素，自身仍是應該是絕無僅有的。一個好的網頁應該有效地履行一個或少量幾個專門的功用。

相關內容：

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

標題：

下一次你們讀報時，請仔細看看報紙的內容和版式規劃。特別留意有一些報道篇幅更長，配有杰出顯現的字體和圖片，標題也更醒目。這樣做的目的是，假如你時刻很緊而只想了解重大新聞的話，就能夠立即發現哪些是重大新聞。

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

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

可用性

可用性是指一個網站能被用戶以能夠預期到的合理方法所運用。

設想一下以下幾種狀況：在你上一個新聞門戶網站閱覽一篇新聞時，在閱覽前有必要要在該網站注冊；在你在網上預訂飛機票或火車票時，還需求花兩分鐘經過 電話向訂票人員解釋你的行程；在你輸入一個郵件地址或信用卡號碼時，網站只是告知你輸入格式過錯；查找發送回的成果中沒有有用的條目，或是一個網站在其首 頁沒有一個查找東西。

以上都是網站可用性欠好的例子，這源于沒有考慮網站用戶的需求。而在你構建和規劃網站時，假如把網站用戶的需求放在中心方位，就很有或許創立出令用戶滿意的好網站。

創立可用性好的網站并不是一件容易的事，這方面的許多常識都只能得之于經驗。你能夠記下其他網站可用性欠好的當地，以避免重蹈覆轍。測驗網站可用性最好的辦法仍是調查用戶的實踐運用體會。一旦你創立好一個網站，請從以下多個方面調查用戶的運用體會：

用戶能找到他們尋覓的網頁嗎? 
對用戶輸入的查找主題詞，查找東西給出了正確的成果嗎? 
圖畫/音頻/視頻能在用戶運用的閱讀器中正常運行嗎？ 
用戶是否有對可用性不滿意的當地？ 
用戶感到滿意和快樂的當地又在哪里？ 
專業公司對由其承當進行的網站可用性測驗會收取很高的費用，但你能夠挑選非正式的測驗方法，如讓你的朋友和家人告知你他們運用你創立的網站的體會，這樣也能夠讓你很好地了解到一些你尚未留意到的網站存在的問題。這便是所謂當局者迷，旁觀者清的道理。

可拜訪性

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

“輔佐技術”這一術語用于描繪任何幫助人們與其運用的核算機更為有效地互動的輔佐設備或硬件。你們或許馬上會想到供瞎子運用的屏幕閱覽器，或是供無 法運用鼠標或鍵盤的人運用的語音輸入設備。但是眼鏡呢？其實對近視的人來說，所戴的眼鏡也是一種“輔佐技術”，但是他們中絕大部分人不會以為自己是殘疾 人。

意識到許多運用互聯網用戶或許面臨的問題，對制作出好的網頁是非常重要的。不要想當然地就做出許多假定，如網站用戶就必定有鼠標，就必定能夠看到你運用的圖畫，就都裝置了Flash播放器等。

在考慮網站的可拜訪性時，除要考慮那些需求運用“輔佐技術”的人外，還要考慮其他一些人如用手機上網的用戶?，F在的手機還不能很好地支撐 Flash（即使有Flash功用）。一些新技術如Opeara Mini手機閱讀器，能夠為上網的低電量手機重寫網頁，使網頁體積變得更小，對絕大部分用戶來說，網頁中的圖畫在手機閱讀器中也會被顯現得小得多，這意味 著用戶或許無法獲取網頁中任何依賴于微妙的細節的內容。

總結

在本篇文章中，我敘述了你們在開始實踐創造網頁時，需求緊記的一些重要概念，以使網頁具有更好的可用性，能為更多的人拜訪，并能更為順利地運行。在以后的課程中，咱們將詳細敘述一切這些在本文中已說到的重要概念。

練習題

在做本篇文章所附的練習題時，你只需上網閱讀一些你最喜愛的網站，試著以從本篇文章中學到的常識檢視這些網站，并回答以下這些問題： 
這些網站具有一致的頁面頂端部分、頁腳部分和導航欄嗎？ 
調查你在網站各頁面閱讀時，導航是怎么改變的。 
留意去發現網站是否有讓你感到不便運用或讓你迷惑的當地，假如有，請提出你的解決辦法。 
假如或許的話，請封閉你運用的閱讀器支撐圖畫顯現或支撐JavaScript的功用，或是運用手機上網拜訪一個網站，與你運用核算機拜訪同一網站的體會做一個比較。 
作者簡介

Mark Norman Francis 早在萬維網誕生前，就在從事互聯網范疇的工作了，一向繼續到現在?，F在他是全球最大網站Yahoo! 的前端規劃師，負責制定Web開發的最佳習慣、代碼標準和質量標準。

在參加Yahoo!前，他先后在Formula One Management（F-1管理公司）、Purple Interactive （紫色互動公司）、倫敦城市大學從事過多種工作，包含Web開發、后端CGI編程和體系架構等。