前端設(shè)計(jì)師教你如何設(shè)計(jì)出優(yōu)秀的網(wǎng)頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上下文關(guān)系非常重要

每個(gè)頁面，盡管包含所有這些通用元素，本身還是應(yīng)該是獨(dú)一無二的。一個(gè)好的網(wǎng)頁應(yīng)該有效地履行一個(gè)或少數(shù)幾個(gè)專門的功能。

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

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

以樂隊(duì)將舉行的演唱會(huì)信息為例，盡管可以在每個(gè)頁面上都放置一個(gè)“將舉行的演唱會(huì)”模塊，但還是應(yīng)當(dāng)將該項(xiàng)信息放在一個(gè)獨(dú)立的頁面中。一個(gè)簡(jiǎn)單的， 鏈接到“巡演日期”頁面的“下一場(chǎng)演唱會(huì)”模塊，也可以有效地宣傳該項(xiàng)信息，而不用處處都復(fù)制信息內(nèi)容（這樣可能把用戶和搜索引擎都搞糊涂）。

標(biāo)題：

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

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

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

可用性

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

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

以上都是網(wǎng)站可用性不好的例子，這源于沒有考慮網(wǎng)站用戶的需要。而在你構(gòu)建和設(shè)計(jì)網(wǎng)站時(shí)，如果把網(wǎng)站用戶的需要放在中心位置，就很有可能創(chuàng)建出令用戶滿意的好網(wǎng)站。

創(chuàng)建可用性好的網(wǎng)站并不是一件容易的事，這方面的很多知識(shí)都只能得之于經(jīng)驗(yàn)。你可以記下其他網(wǎng)站可用性不好的地方，以避免重蹈覆轍。測(cè)試網(wǎng)站可用性最好的辦法還是觀察用戶的實(shí)際使用體驗(yàn)。一旦你創(chuàng)建好一個(gè)網(wǎng)站，請(qǐng)從以下多個(gè)方面觀察用戶的使用體驗(yàn)：

用戶能找到他們尋找的網(wǎng)頁嗎? 對(duì)用戶輸入的搜索主題詞，搜索工具給出了正確的結(jié)果嗎? 圖像/音頻/視頻能在用戶使用的瀏覽器中正常運(yùn)行嗎？ 用戶是否有對(duì)可用性不滿意的地方？ 用戶感到滿意和高興的地方又在哪里？ 專業(yè)公司對(duì)由其承擔(dān)進(jìn)行的網(wǎng)站可用性測(cè)試會(huì)收取很高的費(fèi)用，但你可以選擇非正式的測(cè)試方式，如讓你的朋友和家人告訴你他們使用你創(chuàng)建的網(wǎng)站的體驗(yàn)，這樣也可以讓你很好地了解到一些你尚未注意到的網(wǎng)站存在的問題。這就是所謂當(dāng)局者迷，旁觀者清的道理。

可訪問性

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

“輔助技術(shù)”這一術(shù)語用于描述任何幫助人們與其使用的計(jì)算機(jī)更為有效地互動(dòng)的輔助設(shè)備或硬件。你們可能馬上會(huì)想到供盲人使用的屏幕閱讀器，或是供無 法使用鼠標(biāo)或鍵盤的人使用的語音輸入設(shè)備。但是眼鏡呢？其實(shí)對(duì)近視的人來說，所戴的眼鏡也是一種“輔助技術(shù)”，但是他們中絕大部分人不會(huì)認(rèn)為自己是殘疾 人。

意識(shí)到很多使用互聯(lián)網(wǎng)用戶可能面臨的問題，對(duì)制作出好的網(wǎng)頁是非常重要的。不要想當(dāng)然地就做出很多假定，如網(wǎng)站用戶就一定有鼠標(biāo)，就一定可以看到你使用的圖像，就都安裝了Flash播放器等。

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

在我們這個(gè)樂隊(duì)網(wǎng)站的例子中，你應(yīng)該意識(shí)到如果使用了很多圖像（樂隊(duì)照片），則必須描述圖像的內(nèi)容。如果你在頁面中使用了Flash音樂播放器，以 讓人們可以聽到樂隊(duì)的歌曲，你同時(shí)也應(yīng)該創(chuàng)建直接指向歌曲的鏈接，以讓那些未安裝Flash播放器的人也可以以他們選擇的方式聽到這些歌曲。

總結(jié)

在本篇文章中，我講述了你們?cè)陂_始實(shí)際創(chuàng)作網(wǎng)頁時(shí)，需要牢記的一些重要概念，以使網(wǎng)頁具有更好的可用性，能為更多的人訪問，并能更為順暢地運(yùn)行。在以后的課程中，我們將詳細(xì)講述所有這些在本文中已提到的重要概念。

練習(xí)題

在做本篇文章所附的練習(xí)題時(shí)，你只需上網(wǎng)瀏覽一些你最喜愛的網(wǎng)站，試著以從本篇文章中學(xué)到的知識(shí)檢視這些網(wǎng)站，并回答以下這些問題： 這些網(wǎng)站具有一致的頁面頂端部分、頁腳部分和導(dǎo)航欄嗎？ 觀察你在網(wǎng)站各頁面瀏覽時(shí)，導(dǎo)航是如何變化的。 注意去發(fā)現(xiàn)網(wǎng)站是否有讓你感到不便使用或讓你迷惑的地方，如果有，請(qǐng)?zhí)岢瞿愕慕鉀Q辦法。 如果可能的話，請(qǐng)關(guān)閉你使用的瀏覽器支持圖像顯示或支持JavaScript的功能，或是使用手機(jī)上網(wǎng)訪問一個(gè)網(wǎng)站，與你使用計(jì)算機(jī)訪問同一網(wǎng)站的體驗(yàn)做一個(gè)比較。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁標(biāo)題：前端設(shè)計(jì)師教你如何設(shè)計(jì)出優(yōu)秀的網(wǎng)頁
分享路徑：http://www.bm7419.com/news1/318251.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、面包屑導(dǎo)航、App開發(fā)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)