一個(gè)好的網(wǎng)頁(yè)應(yīng)包含哪些要素

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

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

主頁(yè)

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

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

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

還有一個(gè)普遍的誤解便是，主頁(yè)必定是拜訪網(wǎng)站的人所看到的第一個(gè)頁(yè)面。

但是更或許呈現(xiàn)的狀況是，網(wǎng)站拜訪者是根據(jù)查找成果來(lái)拜訪網(wǎng)站的。

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

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

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

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

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

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

導(dǎo)航

怎么對(duì)一個(gè)網(wǎng)站進(jìn)行導(dǎo)航，是網(wǎng)站規(guī)劃中最關(guān)鍵的要素之一（乃至或許是最關(guān)鍵的）。你應(yīng)當(dāng)確認(rèn)網(wǎng)站的主要欄目頁(yè)，并在主導(dǎo)航欄中顯現(xiàn)。

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

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

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

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

絕大多數(shù)網(wǎng)站都有一些標(biāo)示一切權(quán)的品牌圖畫(huà)、網(wǎng)站標(biāo)識(shí)或標(biāo)頭。

頁(yè)面的頂部標(biāo)題部分(橫跨頁(yè)面頂部)能夠不僅僅包含網(wǎng)站標(biāo)識(shí)，還能夠包含或附加上主導(dǎo)航欄。此外，加上查找框也并不罕見(jiàn)，這能夠讓用戶直接查找網(wǎng)站的內(nèi)容和信息，而不用經(jīng)過(guò)運(yùn)用菜單和鏈接來(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（運(yùn)用條款和條件）”、“Contact Us（聯(lián)絡(luò)咱們）”)的鏈接等。

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

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

相關(guān)內(nèi)容：

要制作出非常優(yōu)秀的網(wǎng)頁(yè)，一個(gè)關(guān)鍵要素便是既要將內(nèi)容分割，又要讓他們互相相關(guān)。各項(xiàng)內(nèi)容既有必要分別放置在各個(gè)不同的頁(yè)面（這些頁(yè)面具有各不相同的URL地址），又有必要有邏輯性地前后聯(lián)絡(luò)（在網(wǎng)站內(nèi)和頁(yè)面內(nèi)都是如此），這樣才能便于被找到。

標(biāo)題：

下一次你們讀報(bào)時(shí)，請(qǐng)仔細(xì)看看報(bào)紙的內(nèi)容和版式規(guī)劃。特別留意有一些報(bào)道篇幅更長(zhǎng)，配有杰出顯現(xiàn)的字體和圖片，標(biāo)題也更醒目。這樣做的目的是，假如你時(shí)刻很緊而只想了解重大新聞的話，就能夠立即發(fā)現(xiàn)哪些是重大新聞。

這一準(zhǔn)則相同適用于網(wǎng)頁(yè)。一個(gè)頁(yè)面內(nèi)每部分的內(nèi)容都應(yīng)有一個(gè)標(biāo)題，以顯現(xiàn)這部分內(nèi)容在頁(yè)面內(nèi)的相對(duì)重要性（這部分內(nèi)容是從屬于上一部分呢，仍是是與之同等重要？）

舉例來(lái)說(shuō)，在本篇文章的這個(gè)部分有兩個(gè)階段標(biāo)題“相關(guān)內(nèi)容”和“標(biāo)題”，它們都位于“上下文關(guān)系”這個(gè)大標(biāo)題之下，顯現(xiàn)它們都是從屬于大標(biāo)題之下的小標(biāo)題。

可用性

可用性是指一個(gè)網(wǎng)站能被用戶以能夠預(yù)期到的合理方法所運(yùn)用。

設(shè)想一下以下幾種狀況：在你上一個(gè)新聞門戶網(wǎng)站閱覽一篇新聞時(shí)，在閱覽前有必要要在該網(wǎng)站注冊(cè)；在你在網(wǎng)上預(yù)訂飛機(jī)票或火車票時(shí)，還需求花兩分鐘經(jīng)過(guò) 電話向訂票人員解釋你的行程；在你輸入一個(gè)郵件地址或信用卡號(hào)碼時(shí)，網(wǎng)站只是告知你輸入格式過(guò)錯(cuò)；查找發(fā)送回的成果中沒(méi)有有用的條目，或是一個(gè)網(wǎng)站在其首 頁(yè)沒(méi)有一個(gè)查找東西。

以上都是網(wǎng)站可用性欠好的例子，這源于沒(méi)有考慮網(wǎng)站用戶的需求。而在你構(gòu)建和規(guī)劃網(wǎng)站時(shí)，假如把網(wǎng)站用戶的需求放在中心方位，就很有或許創(chuàng)立出令用戶滿意的好網(wǎng)站。

創(chuàng)立可用性好的網(wǎng)站并不是一件容易的事，這方面的許多常識(shí)都只能得之于經(jīng)驗(yàn)。你能夠記下其他網(wǎng)站可用性欠好的當(dāng)?shù)兀�以避免重蹈覆轍。測(cè)驗(yàn)網(wǎng)站可用性最好的辦法仍是調(diào)查用戶的實(shí)踐運(yùn)用體會(huì)。一旦你創(chuàng)立好一個(gè)網(wǎng)站，請(qǐng)從以下多個(gè)方面調(diào)查用戶的運(yùn)用體會(huì)：

用戶能找到他們尋覓的網(wǎng)頁(yè)嗎? 
對(duì)用戶輸入的查找主題詞，查找東西給出了正確的成果嗎? 
圖畫(huà)/音頻/視頻能在用戶運(yùn)用的閱讀器中正常運(yùn)行嗎？ 
用戶是否有對(duì)可用性不滿意的當(dāng)?shù)兀?nbsp;
用戶感到滿意和快樂(lè)的當(dāng)?shù)赜衷谀睦铮?nbsp;
專業(yè)公司對(duì)由其承當(dāng)進(jìn)行的網(wǎng)站可用性測(cè)驗(yàn)會(huì)收取很高的費(fèi)用，但你能夠挑選非正式的測(cè)驗(yàn)方法，如讓你的朋友和家人告知你他們運(yùn)用你創(chuàng)立的網(wǎng)站的體會(huì)，這樣也能夠讓你很好地了解到一些你尚未留意到的網(wǎng)站存在的問(wèn)題。這便是所謂當(dāng)局者迷，旁觀者清的道理。

可拜訪性

對(duì)網(wǎng)站可拜訪性最常見(jiàn)的誤解便是僅將其理解為“讓瞎子能拜訪網(wǎng)站”，其實(shí)可拜訪性是一個(gè)對(duì)更多的人都有影響的問(wèn)題。

“輔佐技術(shù)”這一術(shù)語(yǔ)用于描繪任何幫助人們與其運(yùn)用的核算機(jī)更為有效地互動(dòng)的輔佐設(shè)備或硬件。你們或許馬上會(huì)想到供瞎子運(yùn)用的屏幕閱覽器，或是供無(wú) 法運(yùn)用鼠標(biāo)或鍵盤的人運(yùn)用的語(yǔ)音輸入設(shè)備。但是眼鏡呢？其實(shí)對(duì)近視的人來(lái)說(shuō)，所戴的眼鏡也是一種“輔佐技術(shù)”，但是他們中絕大部分人不會(huì)以為自己是殘疾 人。

意識(shí)到許多運(yùn)用互聯(lián)網(wǎng)用戶或許面臨的問(wèn)題，對(duì)制作出好的網(wǎng)頁(yè)是非常重要的。不要想當(dāng)然地就做出許多假定，如網(wǎng)站用戶就必定有鼠標(biāo)，就必定能夠看到你運(yùn)用的圖畫(huà)，就都裝置了Flash播放器等。

在考慮網(wǎng)站的可拜訪性時(shí)，除要考慮那些需求運(yùn)用“輔佐技術(shù)”的人外，還要考慮其他一些人如用手機(jī)上網(wǎng)的用戶�，F(xiàn)在的手機(jī)還不能很好地支撐 Flash（即使有Flash功用）。一些新技術(shù)如Opeara Mini手機(jī)閱讀器，能夠?yàn)樯暇W(wǎng)的低電量手機(jī)重寫網(wǎng)頁(yè)，使網(wǎng)頁(yè)體積變得更小，對(duì)絕大部分用戶來(lái)說(shuō)，網(wǎng)頁(yè)中的圖畫(huà)在手機(jī)閱讀器中也會(huì)被顯現(xiàn)得小得多，這意味 著用戶或許無(wú)法獲取網(wǎng)頁(yè)中任何依賴于微妙的細(xì)節(jié)的內(nèi)容。

總結(jié)

在本篇文章中，我敘述了你們?cè)陂_(kāi)始實(shí)踐創(chuàng)造網(wǎng)頁(yè)時(shí)，需求緊記的一些重要概念，以使網(wǎng)頁(yè)具有更好的可用性，能為更多的人拜訪，并能更為順利地運(yùn)行。在以后的課程中，咱們將詳細(xì)敘述一切這些在本文中已說(shuō)到的重要概念。

練習(xí)題

在做本篇文章所附的練習(xí)題時(shí)，你只需上網(wǎng)閱讀一些你最喜愛(ài)的網(wǎng)站，試著以從本篇文章中學(xué)到的常識(shí)檢視這些網(wǎng)站，并回答以下這些問(wèn)題： 
這些網(wǎng)站具有一致的頁(yè)面頂端部分、頁(yè)腳部分和導(dǎo)航欄嗎？ 
調(diào)查你在網(wǎng)站各頁(yè)面閱讀時(shí)，導(dǎo)航是怎么改變的。 
留意去發(fā)現(xiàn)網(wǎng)站是否有讓你感到不便運(yùn)用或讓你迷惑的當(dāng)?shù)�，假如有，�?qǐng)?zhí)岢瞿愕慕鉀Q辦法。 
假如或許的話，請(qǐng)封閉你運(yùn)用的閱讀器支撐圖畫(huà)顯現(xiàn)或支撐JavaScript的功用，或是運(yùn)用手機(jī)上網(wǎng)拜訪一個(gè)網(wǎng)站，與你運(yùn)用核算機(jī)拜訪同一網(wǎng)站的體會(huì)做一個(gè)比較。 
作者簡(jiǎn)介

Mark Norman Francis 早在萬(wàn)維網(wǎng)誕生前，就在從事互聯(lián)網(wǎng)范疇的工作了，一向繼續(xù)到現(xiàn)在�，F(xiàn)在他是全球最大網(wǎng)站Yahoo! 的前端規(guī)劃師，負(fù)責(zé)制定Web開(kāi)發(fā)的最佳習(xí)慣、代碼標(biāo)準(zhǔn)和質(zhì)量標(biāo)準(zhǔn)。

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