《網(wǎng)頁(yè)設(shè)計(jì)綜合指南》是針對(duì)網(wǎng)站建設(shè)專(zhuān)業(yè)指導(dǎo)性技術(shù)文章，可以應(yīng)用于全國(guó)任何一個(gè)城市，沒(méi)有地域限制、沒(méi)有文化限制、沒(méi)有技術(shù)限制，以突破思維性思維設(shè)計(jì)最好的截面、建設(shè)最好的網(wǎng)站。本期為《網(wǎng)頁(yè)設(shè)計(jì)綜合指南》(一)的主題為網(wǎng)頁(yè)設(shè)計(jì)之設(shè)計(jì)用戶(hù)體驗(yàn)地圖，主要講述的是網(wǎng)站設(shè)計(jì)的信息架構(gòu)，幫助用戶(hù)瀏覽分析一組復(fù)雜的信息，通過(guò)結(jié)構(gòu)層次創(chuàng)建一個(gè)符合用戶(hù)的層次結(jié)構(gòu)，良好的內(nèi)容和直觀的導(dǎo)航可以幫助用戶(hù)快速獲取有用信息，比如《網(wǎng)頁(yè)設(shè)計(jì)綜合指南》的導(dǎo)航如下：

一、網(wǎng)頁(yè)設(shè)計(jì)之設(shè)計(jì)用戶(hù)體驗(yàn)地圖

1.1 信息架構(gòu)

1.2 全局導(dǎo)航

1.3 鏈接和導(dǎo)航選項(xiàng)

1.4 瀏覽器的返回鍵

1.5 面包屑式導(dǎo)航

1.6 搜索

二、頁(yè)面設(shè)計(jì)

三、網(wǎng)頁(yè)設(shè)計(jì)之移動(dòng)端適配

四、網(wǎng)頁(yè)設(shè)計(jì)之無(wú)障礙設(shè)計(jì)

五、網(wǎng)頁(yè)設(shè)計(jì)之測(cè)試

六、網(wǎng)頁(yè)設(shè)計(jì)之開(kāi)發(fā)交接

七、網(wǎng)頁(yè)設(shè)計(jì)之總結(jié)

一、網(wǎng)頁(yè)設(shè)計(jì)之設(shè)計(jì)用戶(hù)體驗(yàn)地圖

1.1 信息架構(gòu)

人們經(jīng)常將網(wǎng)站上的內(nèi)容列表作為“信息架構(gòu)”。不對(duì)， 雖然它是信息架構(gòu)的一部分，但它們只是其中的一個(gè)方面。

信息架構(gòu)是以一種清晰和合乎邏輯的方式組織信息。信息架構(gòu)有一個(gè)明確的目的：幫助用戶(hù)瀏覽一組復(fù)雜的信息。好的信息架構(gòu)會(huì)創(chuàng)建一個(gè)符合用戶(hù)期望的層次結(jié)構(gòu)。但良好的內(nèi)容層級(jí)和直觀的導(dǎo)航并不容易，需要通過(guò)用戶(hù)研究和測(cè)試才能實(shí)現(xiàn)。

有很多方法可以研究用戶(hù)需求。通常情況下，信息架構(gòu)師會(huì)采用用戶(hù)訪談或卡片分類(lèi)的方式來(lái)獲知用戶(hù)的期望，或者找出潛在用戶(hù)是如何進(jìn)行信息分類(lèi)。信息架構(gòu)師還需要了解可用性測(cè)試的結(jié)果，以便查看是否能夠高效導(dǎo)航。

卡片分類(lèi)是一種簡(jiǎn)單的方法，可以根據(jù)用戶(hù)信息找出內(nèi)容分類(lèi)的好方式。信息架構(gòu)師喜歡卡片分類(lèi)的原因之一就是能清晰地得到架構(gòu)模式。(Image credit: FosterMilo)

對(duì)用戶(hù)訪談的結(jié)果進(jìn)行分類(lèi)，然后檢驗(yàn)卡片分類(lèi)是否滿(mǎn)足用戶(hù)的心理模型。UX還會(huì)使用“Tree Testing”的方法來(lái)檢驗(yàn)它的作用。信息架構(gòu)要在設(shè)計(jì)具體頁(yè)面之前完成。

Tree Testing是一種確定用戶(hù)是否能夠通過(guò)所提議的信息結(jié)構(gòu)解決需求的可靠方法。(Image credit: Nielsen Norman Group)

1.2 全局導(dǎo)航

導(dǎo)航是可用性的基石。如果用戶(hù)在網(wǎng)站迷失了方向，那你的網(wǎng)站內(nèi)容有多好也無(wú)用。因此網(wǎng)站的導(dǎo)航應(yīng)該遵循幾個(gè)原則：

簡(jiǎn)單的導(dǎo)航。導(dǎo)航應(yīng)該讓用戶(hù)以最少點(diǎn)擊的方式來(lái)訪問(wèn)期望內(nèi)容。

清晰。不應(yīng)該讓用戶(hù)猜測(cè)導(dǎo)航選項(xiàng)的意義；每個(gè)導(dǎo)航選項(xiàng)都應(yīng)該是明確的。

一致性：導(dǎo)航系統(tǒng)對(duì)網(wǎng)站上的所有頁(yè)面都應(yīng)該是一致的。

在設(shè)計(jì)導(dǎo)航時(shí)需要考慮的一些事情：

根據(jù)用戶(hù)的需求選擇導(dǎo)航模式。導(dǎo)航應(yīng)該滿(mǎn)足大多數(shù)用戶(hù)的大多數(shù)需求。若目標(biāo)群體期望與網(wǎng)站進(jìn)行某種類(lèi)型的互動(dòng)，那么就滿(mǎn)足他們的期望。例如，如果大多數(shù)用戶(hù)不熟悉圖標(biāo)的含義，請(qǐng)避免使用漢堡菜單導(dǎo)航。

設(shè)置優(yōu)先的導(dǎo)航選項(xiàng)。對(duì)導(dǎo)航選項(xiàng)進(jìn)行優(yōu)先排序的一種簡(jiǎn)單方法——將不同的優(yōu)先級(jí)選項(xiàng)分配給用戶(hù)測(cè)試，然后將高優(yōu)先級(jí)和頻繁使用的路徑在導(dǎo)航中突出。

導(dǎo)航要一直可見(jiàn)。正如Jakob Nielsen說(shuō)，見(jiàn)到什么比記得什么更容易。通過(guò)讓所有重要的導(dǎo)航選項(xiàng)可見(jiàn)，可以最小化用戶(hù)的記憶作用。最重要的導(dǎo)航選項(xiàng)應(yīng)該隨時(shí)可見(jiàn)可用，而不只是當(dāng)我們期望用戶(hù)使用它們時(shí)才可見(jiàn)。

顯示當(dāng)前位置?！拔以谀睦?？“這是一個(gè)基本問(wèn)題，用戶(hù)需要一個(gè)答案，以便有效地導(dǎo)航。不顯示當(dāng)前位置是許多網(wǎng)站常見(jiàn)的問(wèn)題。

1.3 鏈接和導(dǎo)航選項(xiàng)

鏈接和導(dǎo)航選項(xiàng)是導(dǎo)航過(guò)程中的關(guān)鍵因素，直接影響用戶(hù)的體驗(yàn)。遵循這些交互元素的規(guī)則：

認(rèn)識(shí)內(nèi)部和外部鏈接的區(qū)別。用戶(hù)期望內(nèi)部和外部鏈接有不同的行為。所有內(nèi)部鏈接應(yīng)該在同一個(gè)標(biāo)簽頁(yè)中打開(kāi)（這樣，用戶(hù)就可以使用“后退”按鈕）。如果想在新標(biāo)簽頁(yè)中打開(kāi)外部鏈接，則應(yīng)在打開(kāi)之前告知用戶(hù)，比如添加一段文本到鏈接文本中，顯示“（在新標(biāo)簽頁(yè)中打開(kāi)）”。

更改訪問(wèn)鏈接的顏色。當(dāng)已訪問(wèn)的鏈接不改變顏色時(shí)，用戶(hù)可能無(wú)意中重新訪問(wèn)同一頁(yè)面。讓用戶(hù)知道哪些鏈接已訪問(wèn)過(guò)，避免無(wú)意中重新訪問(wèn)。

檢查所有鏈接。點(diǎn)擊鏈接后獲得一個(gè)錯(cuò)誤頁(yè)面，會(huì)損害用戶(hù)體驗(yàn)。當(dāng)訪問(wèn)者正在搜索內(nèi)容，他們希望每個(gè)鏈接都應(yīng)該時(shí)準(zhǔn)確有效，而不是404頁(yè)面或他們不希望看到的頁(yè)面。

1.4 瀏覽器的返回鍵

“后退”按鈕可能是瀏覽器中使用率第二高的按鍵（在輸入地址之后）。確?！昂笸恕卑粹o按用戶(hù)期望運(yùn)行。當(dāng)用戶(hù)訪問(wèn)頁(yè)面上的鏈接，然后單擊“后退”按鈕時(shí)，他們希望返回到原始頁(yè)面上的退出位置。避免點(diǎn)擊“后退”將用戶(hù)帶到原始頁(yè)面的頂部，而不是在頁(yè)面關(guān)閉的地方。如此一來(lái)，用戶(hù)需要滾動(dòng)他們已經(jīng)看過(guò)的內(nèi)容，用戶(hù)會(huì)因?yàn)闆](méi)有合適的“返回位置”功能而感到失望。

1.5 面包屑式

面包屑式導(dǎo)航是一組上下文鏈接，可以輔助網(wǎng)站導(dǎo)航。這是一個(gè)次要導(dǎo)航方案，通常顯示用戶(hù)在網(wǎng)站上的位置。

雖然這個(gè)元素不需要很多解釋?zhuān)袔准轮档靡惶幔?/p>

不要用來(lái)作為主要導(dǎo)航方案。主導(dǎo)航應(yīng)該導(dǎo)航選項(xiàng)引導(dǎo)用戶(hù)，而面包屑是用戶(hù)引導(dǎo)導(dǎo)航選項(xiàng)。將面包屑導(dǎo)航作為主要方法，而不是輔助的功能，通常會(huì)是一個(gè)失敗的導(dǎo)航。

使用箭頭作為分隔符，而不是斜杠（/）。為了清晰分開(kāi)每一層，推薦（>）或（→），因?yàn)檫@些符號(hào)的指向能輔助用戶(hù)理解。斜杠（/）不建議作為電子商務(wù)網(wǎng)站的分隔符。如果您打算使用它，請(qǐng)確保產(chǎn)品類(lèi)別將不會(huì)采用斜線：

對(duì)于上面的類(lèi)別，面包屑導(dǎo)航區(qū)分不同的層級(jí)是比較難的。

1.6 搜索

有些用戶(hù)來(lái)到一個(gè)網(wǎng)站尋找某個(gè)特定的內(nèi)容。他們不會(huì)想使用導(dǎo)航選項(xiàng)。他們希望在搜索框中輸入文本，提交他們的搜索請(qǐng)求，然后找到他們要找的頁(yè)面內(nèi)容。

在設(shè)計(jì)搜索框時(shí)要考慮到這些基本規(guī)則：

把搜索框放在用戶(hù)期望找到它的地方。下面的圖表是基于A. Dawn Shaikh和Keisi Lenz研究。根據(jù)對(duì)142名參與者的調(diào)查，搜索框的用戶(hù)預(yù)期位置。研究發(fā)現(xiàn)，最便捷的位置是網(wǎng)頁(yè)的左上角或右上角。用戶(hù)使用F形瀏覽模式，可以很容易地找到搜索框。

在內(nèi)容豐富的網(wǎng)站上，搜索框一定要醒目。如果搜索是網(wǎng)站的一個(gè)重要功能，那么就突出顯示它，因?yàn)樗芙档陀脩?hù)發(fā)現(xiàn)的難度。

輸入框的大小要合適。搜索框輸入?yún)^(qū)域太短是設(shè)計(jì)中常見(jiàn)的錯(cuò)誤。當(dāng)然，用戶(hù)可以在短字段中輸入一個(gè)長(zhǎng)查詢(xún)，但只有部分文本可見(jiàn)，可用性不好，因?yàn)闊o(wú)法立即看到整個(gè)查詢(xún)。事實(shí)上，當(dāng)搜索框太短時(shí)，用戶(hù)被迫使用短的、不精確的查詢(xún)。Nielsen Norman Group建議 27字符長(zhǎng)度，這能覆蓋90%的查詢(xún)。

將搜索框加到每個(gè)頁(yè)面。在每個(gè)頁(yè)面上顯示搜索框，因?yàn)椴还苡脩?hù)處在網(wǎng)站上的哪個(gè)頁(yè)面，當(dāng)他們不能導(dǎo)航到正在尋找的內(nèi)容，他們會(huì)嘗試使用搜索。

名稱(chēng)欄目：《網(wǎng)頁(yè)設(shè)計(jì)綜合指南》(一):網(wǎng)頁(yè)設(shè)計(jì)之設(shè)計(jì)用戶(hù)體驗(yàn)地圖
分享路徑：http://chinadenli.net/news/138728.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有用戶(hù)體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)