現(xiàn)今，網(wǎng)站和web技術(shù)已經(jīng)不算是新興技術(shù)了，但是不得不承認(rèn)，在當(dāng)下的移動互聯(lián)網(wǎng)時代，web技術(shù)仍然算得上是新潮的技術(shù)之一，并且網(wǎng)站也是各企業(yè)商業(yè)價值中的重要一環(huán)。因此，規(guī)劃、設(shè)計具有優(yōu)秀用戶體驗的網(wǎng)站，仍然是我們的重要技能之一。

前戲：明確網(wǎng)站的業(yè)務(wù)模型

在開始正式地規(guī)劃網(wǎng)站之前，我們有必要了解網(wǎng)站的主要業(yè)務(wù)模型。盡管人們都更加愿意獲得免費的信息，但信息提供方（企業(yè)）還是希望能夠由此得到回報的。

要明白，大多數(shù)企業(yè)要想存活，就必須要掙錢。在為企業(yè)建設(shè)網(wǎng)站之前，我們要知道公司的業(yè)務(wù)模型是什么，如果不了解業(yè)務(wù)模型，就無法知道用戶哪些行為是有意義的，哪些行為是毫無價值的。

主流的業(yè)務(wù)模型包括：

• 市場/電子商務(wù)模型（比如B2B/B2C/C2C）；
• 廣告模型（需要很大的用戶訪問量）；
• 會員模型（增值服務(wù)）；
• 社區(qū)模型（收入來源輔助產(chǎn)品或服務(wù)的銷售）；
• 訂購模型（訂購服務(wù)）。

找準(zhǔn)了業(yè)務(wù)模型，我們就可以開始設(shè)計出支持業(yè)務(wù)需求的網(wǎng)站了。

一、明確目標(biāo)用戶

在開始網(wǎng)站設(shè)計之前，我們首先要問自己一個問題：“網(wǎng)站是為誰搭建的？”不是每個網(wǎng)站的設(shè)計者都能準(zhǔn)確有效地回答這個問題，有的人會說“網(wǎng)上的每一個人”，還有的會說“所有喜愛某類產(chǎn)品的人”、“所有愛看書的人”或者“所有喜歡美食的人”。

這些回答都不是準(zhǔn)確的回答，因為你無法從這些回答中得到精確的用戶角色。

我們可以采取如下工作方式，去明確目標(biāo)用戶：

1. 找到公司的市場/運營部門，市場/運營部門的人員或許對公司用戶的統(tǒng)計數(shù)據(jù)結(jié)果以及心理方面做過了大量的研究。
2. 咨詢公司負(fù)責(zé)人或高管，了解他們希望產(chǎn)品所面向的用戶，以及他們所認(rèn)為的具有價值的用戶行為。

在和各相關(guān)部門同事的談話中，并不只是收集用戶的統(tǒng)計信息，真正要做的是得到一些合適的行為信息來幫助我們更好的設(shè)計網(wǎng)站。

比如，我們了解到用戶的年齡較大，就要做出一些初步的設(shè)計決策。如：字體要放大、交互操作要盡量簡單、以及頁面上哪些元素更應(yīng)該突出等。

二、與目標(biāo)用戶交流

招募目標(biāo)用戶通常需要公司內(nèi)部其他部門的配合，比如客服部門，可以通過諸如電話邀約、郵件邀約等方式，如果目標(biāo)用戶是企業(yè)，則可以通過公司高層或市場部門，向企業(yè)致電或發(fā)送邀請函等方式，總之，盡量通過其他部門的協(xié)助完成用戶的邀約。

在訪談的過程中，我們要注意理解得到的反饋。比如，用戶可能會說“我希望按鈕大一些?！倍麄兊膶嶋H想法可能是“付款的過程太復(fù)雜了?！被蛘哂脩艨赡軙f“我希望這個的演顏色是紅色?！彼麄冋嬲囊馑伎赡苁恰耙械轿蚁胍臇|西太耗費時間?！?/p>

最佳的方式是：當(dāng)用戶在正常的環(huán)境中具體完成任務(wù)時實際地跟蹤用戶的行為。

所以，在訪談中，我們可以問一些諸如“你想做什么？”、“你希望得到什么”這樣的問題，而避免去問“你認(rèn)為這個按鈕應(yīng)該放在哪里？”這種問題。我們要把重點放在用戶完成任務(wù)時遇到的難題上。

三、創(chuàng)建用戶角色模型

角色模型可以幫助我們更深入地理解設(shè)計所針對的對象，以及怎樣才能真正滿足這個用戶的需求。當(dāng)然，也可以不去創(chuàng)建復(fù)雜的角色模型，只不過，如果能針對一個特定的“人”來進行設(shè)計，會讓我們的設(shè)計更加有效。

1. 總結(jié)用戶交流結(jié)果，把結(jié)果分發(fā)給各利益相關(guān)者或相關(guān)部門人員

在第二步中，我們會收集到一些信息?？赡芤呀?jīng)得到用戶的相關(guān)信息，比如：性別、地理位置、上網(wǎng)習(xí)慣、技術(shù)水平或是他們使用競品的方式。

我們了解到用戶當(dāng)前遇到的麻煩，也了解到哪些方面還算不錯等信息。

針對于收集到的信息，我們需要建立一份報告，這份報告可能會涉及以下信息：

• 用戶群體的技術(shù)程度；
• 年齡段，性別分布等；
• 用戶想要通過產(chǎn)品完成的任務(wù)過程；
• 用戶使用同類產(chǎn)品的使用模式；
• 用戶感興趣的競品；
• 常見問題；
• 用戶價值觀、文化背景等內(nèi)容。

這里需要注意的是：

• 要保證每個信息盡可能準(zhǔn)確，去除諸如“用戶希望….”這樣的信息；
• 信息要與我們的產(chǎn)品相關(guān)；
• 信息要針對網(wǎng)站整體成立，去除諸如“用戶無法找到付款按鈕”這類的信息，取而代之的是“我們有一類用戶，他們知道想購買什么，現(xiàn)在需要提供一種方法能加快購買流程”。

2. 與各相關(guān)部門人員召開會議，腦暴形成用戶角色

尋求各部門相關(guān)人員的協(xié)作，往往比單槍匹馬作戰(zhàn)更高效。

每一個部門都會對用戶有自己的理解，是男人還是女人？年齡段如何？住在哪里？如果大家不確定，可以參照上一步的報告文檔。

當(dāng)大家提出了大量用戶特征后，可以開始合并這些特征，并將其改進為角色，比如：女性+25~35+華北地區(qū)=來自北京的27歲女性，甚至還可以為她取一個名字。

3. 讓角色成為真正的人

為用戶角色增加一些具體的個性化內(nèi)容，比如：照片、姓名、職業(yè)、個人背景、職業(yè)、教育背景、目標(biāo)、愛好、最喜歡的網(wǎng)站、他的愿望等信息。確保用戶角色的真實是這一步的關(guān)鍵。

4. 為人物角色加入場景表達

通過創(chuàng)建場景，會使得人物更加豐滿，同時有助于我們完成網(wǎng)站交互系統(tǒng)的設(shè)計。場景，就是人物角色使用產(chǎn)品時的背景故事簡介。

比如：王強（人物角色名字）打開瀏覽器，從網(wǎng)站上看到了感興趣的電影介紹，首先他回選擇自己關(guān)心的電影類型，然后網(wǎng)站會推薦給他可能相看的電影；接下來，他會選擇真正感興趣的電影，并進行觀看。

四、繪制用戶路徑草圖

用戶路徑草圖可以幫助我們確定不同類型用戶會完成哪些類型的動作，由此我們可以決定需要為網(wǎng)站設(shè)計什么。通過畫出不同用戶的路徑，可以幫助我們查看是否有遺漏。舉一個例子：

比如，要建立一個小型電子商務(wù)網(wǎng)站的用戶路徑草圖，可以有這樣一個場景故事：買禮物的人瀏覽主頁，找到適合的禮物，買下禮物，寫下一張賀卡，寫上朋友的信息，付款。

起初的用戶路徑草圖如下：

接下來可以考慮，網(wǎng)站的用戶不只是送禮物的人，也會有給自己買禮物的用戶、不滿意的用戶、失業(yè)想要在線賣東西的用戶、其他渠道接收到廣告的用戶，我們可以繼續(xù)為這些用戶添加用戶路徑：

五、明確業(yè)務(wù)流程與任務(wù)流程

繪制了全用戶的全路徑草圖，現(xiàn)在就要拆解用戶的全部任務(wù)，明確交互中每一步的細(xì)節(jié)。

其實這一步，就是根據(jù)用戶的任務(wù)，完成各個任務(wù)/功能的流程圖設(shè)計，以及和網(wǎng)站后臺系統(tǒng)交互的業(yè)務(wù)流程圖設(shè)計。

關(guān)于功能流程與業(yè)務(wù)流程，網(wǎng)上已有不少文章做出詳述，本文不再詳細(xì)闡述。

六、網(wǎng)站的用戶體驗設(shè)計

本步驟不再敘述如何繪制網(wǎng)站的原型圖，這里要談的是在網(wǎng)站的設(shè)計中，值得注意的要點。

1. 網(wǎng)站上的一切要井井有條

網(wǎng)站中會含有豐富的信息，用戶來到我們的網(wǎng)站時為了查找信息或者完成任務(wù)或者二者兼有，作為網(wǎng)站的設(shè)計者，我們的任務(wù)就是用好的設(shè)計幫助用戶達到他們的目的。

（1）幫助確認(rèn)是否到達了正確的位置

來到網(wǎng)站，用戶希望知道這是不是他所需要的，也就是他是否達到了正確的位置。

用戶來到我們的網(wǎng)站時，首先看到的就是網(wǎng)站的組織方案。

組織方案有兩個作用：

1. 導(dǎo)向作用，會告訴用戶這是一個什么類型的網(wǎng)站；
2. 告訴用戶要做什么，它會向用戶展示“在這里你可以瀏覽/購買/閱讀/分享/查看/收聽的東西”。

因此，組織方案需要為用戶展示所有的產(chǎn)品范圍。比如，淘寶網(wǎng)站的分類導(dǎo)航：

（2）幫助用戶找到他們需要的東西

用戶知道他們訪問了正確的網(wǎng)站，接下來他們需要標(biāo)識導(dǎo)引來找到他們想要的東西，標(biāo)識導(dǎo)引有四方面的內(nèi)容：

1. 使用熟悉的組織系統(tǒng)。組織系統(tǒng)包括，字母（例如通訊錄）；地理位置；時間；連續(xù)區(qū)間（比如排名1~10,或一些數(shù)值范圍）；數(shù)字；種類（例如博客種類）。使用用戶已經(jīng)習(xí)慣的組織系統(tǒng)，用戶就更容易上手我們的網(wǎng)站，不必從頭學(xué)起，我們的網(wǎng)站也就更易用。
2. 明顯的標(biāo)簽。標(biāo)簽信息可以幫助用戶更好的找到他們想要的東西，比如一個標(biāo)記著“流行”標(biāo)簽的歌曲，會吸引來眾多不喜歡古典音樂的用戶。
3. 控件的主觀能動性。也就是，鏈接看起來要像鏈接，按鈕看上去要像按鈕，僅供閱讀的文本和可以單機的文本看上去應(yīng)該是有區(qū)別的。
4. “面包屑”。要讓用戶知道他正在網(wǎng)站的哪個位置，是從哪里來的，如何才能回到之前的頁面。面包屑導(dǎo)引或通過改變導(dǎo)航條的外觀都可以提供網(wǎng)站位置的反饋。

（3）讓用戶知道網(wǎng)站上有更好的東西

無論用戶是否在網(wǎng)站上找到了他們需要的東西，他們都會想找到更多的類似的更好的內(nèi)容。在這里，可以有效利用導(dǎo)航或面包屑導(dǎo)引，突出顯示用戶在網(wǎng)站中的當(dāng)前位置，并顯示相關(guān)的內(nèi)容，讓用戶可以鏈接到其他的地方。

另外，也可以使用提供“更多內(nèi)容”的選項，可以向用戶提供相關(guān)商品的快捷途徑?！案鄡?nèi)容”導(dǎo)航工具對于一組相關(guān)商品以及相關(guān)種類的快捷途徑最為有效，例如電商網(wǎng)站的“猜你喜歡”，文章網(wǎng)站的“相關(guān)文章”。

（4）為用戶提供下一步操作

用戶已經(jīng)找到了他們想要的東西，我們要為用戶的下一步操作提供相應(yīng)的選擇，我們應(yīng)該在設(shè)計網(wǎng)站時詢問自己“用戶希望在找到他們需要的東西后，做些什么？”

對于一個電商網(wǎng)站，用戶肯定是要購買到找到的商品，電商網(wǎng)站提供的“加入購物車”和“購買”按鈕有效幫助用戶解決了問題。對于一個文章網(wǎng)站，用戶閱讀一篇文章后需要做些什么呢？應(yīng)該是評論、分享、收藏、復(fù)制、粘貼這篇文章。

用戶會利用網(wǎng)站提供的“下一步”操作拉近與其目標(biāo)的距離。

2. 網(wǎng)站導(dǎo)航的細(xì)節(jié)闡述

這里之所以把網(wǎng)站的導(dǎo)航設(shè)計拿出來，是因為看似簡單的導(dǎo)航設(shè)計，里面含有很多的設(shè)計細(xì)節(jié)。

在討論導(dǎo)航的細(xì)節(jié)之前，我們先要明確用戶查找信息的方式，用戶訪問我們的網(wǎng)站就是為了獲取查找相關(guān)信息，而導(dǎo)航可以幫助用戶去完成這一操作，所以有必要了解用戶查找信息的方式。

（1）用戶查找信息的方法

• 已知內(nèi)容查找：用戶明確知道自己想要查詢什么，此時他們會直接通過搜索工具去查找。此時導(dǎo)航應(yīng)該適當(dāng)?shù)靥幚硭阉鳎褂脩裟軌虻竭_他們想去的地方。
• 探測內(nèi)容查找：用戶此時可能有一個需求，但是不能確定具體怎樣才能滿足這個需求。此時就會記性探測內(nèi)容查找，用戶想買一個數(shù)碼相機，但是不知道哪種數(shù)碼相機好，所以需要查找很多相機對比。
• 不知道自己要查找什么：有時用戶連需要什么都不清楚，比如用戶想買新房子，卻發(fā)現(xiàn)需要了解所在城市的相關(guān)政策，在尋找某個東西時，卻發(fā)現(xiàn)實際上需要了解另外一些東西。
• 歷史查找：用戶可能想查看以前找到的某些東西，這一點通常在設(shè)計中被忽略。

（2）導(dǎo)航的分類

• 結(jié)構(gòu)導(dǎo)航：展示網(wǎng)站內(nèi)容的層次結(jié)構(gòu)，包括全局導(dǎo)航和局部導(dǎo)。全局導(dǎo)航一般是網(wǎng)站的頂層級別，用戶可以通過全局導(dǎo)航很容易地訪問重要內(nèi)容。局部導(dǎo)航可以把用戶帶到網(wǎng)站層次結(jié)構(gòu)中鄰近當(dāng)前所在位置的層次。結(jié)構(gòu)導(dǎo)航對于“已知內(nèi)容查找”和“探測內(nèi)容查航找”很有用，對于“不知道自己要查找什么”的用戶也會有一些幫助。
• 關(guān)聯(lián)導(dǎo)航：將一個頁面與包含類似內(nèi)容的其他頁面相關(guān)聯(lián)。關(guān)聯(lián)導(dǎo)航適合于“探測內(nèi)容查找”，并且能幫助“不知道自己要查找什么”的用戶找到相關(guān)信息。
• 可用性導(dǎo)航：包括登錄，訪問用戶信息等內(nèi)容，主要內(nèi)容組織以外的所有內(nèi)容都可以納入可用性導(dǎo)航。

三類導(dǎo)航分別對應(yīng)不同的用戶查找信息方法：

（3）全局導(dǎo)航

在很多網(wǎng)站上，全局導(dǎo)航就是導(dǎo)航條，比如：

對網(wǎng)站內(nèi)容分類并選擇組織系統(tǒng)時，全局導(dǎo)航作為頂層類別，對用戶和企業(yè)來說是意義重大的，因為它展現(xiàn)了網(wǎng)站的頂層架構(gòu)。

全局導(dǎo)航需要再每個頁面都出現(xiàn)，不論用戶現(xiàn)在在哪里，都能通過全局導(dǎo)航繼續(xù)訪問網(wǎng)站的任何位置。

同時，全局導(dǎo)航還有一個作用，就是會告訴告訴用戶網(wǎng)站是關(guān)于什么的，以及用戶可以利用網(wǎng)站來做些什么。

全局導(dǎo)航通常會顯示在頁面的最上方，因為這樣就能將頁面的其余部分聚焦于內(nèi)容數(shù)據(jù)。

當(dāng)然，垂直的全局導(dǎo)航也是一種選擇，但是這樣會限制局部導(dǎo)航以及頁面內(nèi)容的可用空間。

（4）局部導(dǎo)航

局部導(dǎo)航也稱為欄目導(dǎo)航，因為它提供了一組鏈接。當(dāng)點擊了一個全部導(dǎo)航時，會進入到相應(yīng)頁面，此時會在全局導(dǎo)航下方出現(xiàn)新的一組導(dǎo)航條，這就是局部導(dǎo)航。

利用局部導(dǎo)航，只需要提供一個欄目下其他頁面的鏈接即可。在一個復(fù)雜的分類系統(tǒng)中，用戶希望從一個類別移到子類別，然后再移回來，設(shè)計局部導(dǎo)航就是為了讓用戶能夠輕松地在不同類別間導(dǎo)航。

局部導(dǎo)航可以有效的幫助“探測內(nèi)容查找”型用戶，這些用戶知道他們需要某些東西，但是又不確定到底是什么。

選擇一個全局導(dǎo)航后，局部導(dǎo)航可以幫助他們?yōu)g覽更加具體的內(nèi)容。而對于“不知道自己要查找什么”的用戶，局部導(dǎo)航可以為他們提供一組相關(guān)的選項，幫助他們做出決策。

局部導(dǎo)航通常出現(xiàn)在全局導(dǎo)航的下方（或頁面的左側(cè)）。這種布局方式也強調(diào)了內(nèi)容的組織方式：子類在類別下方，把相關(guān)性最強的鏈接放在最接近用戶需要的位置。

用戶在訪問網(wǎng)站的一個頁面時，會關(guān)注頁面的內(nèi)容，如果他看到的頁面上沒有需要的內(nèi)容，那么局部導(dǎo)航通常要放在離頁面內(nèi)容更近的位置，用戶想要訪問其他類別時，首先要找的便會是局部導(dǎo)航。

（5）導(dǎo)航訪問模式

在全局導(dǎo)航和局部導(dǎo)航這里，介紹一下用戶訪問導(dǎo)航的模型，用戶查找網(wǎng)站內(nèi)容的方式取決于網(wǎng)站的導(dǎo)航，通過導(dǎo)航訪問內(nèi)容有兩種基本模式（我喜歡這么叫這兩種方式）：彈跳模型和爬行模型。

彈跳模型：這種模型會使用戶前往一個子類，然后必須回到其父類（首頁）來選擇另一個不同的子類。

此模型適用于用戶瀏覽龐大的異構(gòu)內(nèi)容集的時候，眾多分類龐雜的網(wǎng)站如電商網(wǎng)站、素材類網(wǎng)站，這些類型網(wǎng)站中面包屑導(dǎo)引工具就顯得異常重要，用戶會沿著面包屑導(dǎo)航的軌跡返回。

采用該模型，為了讓用戶在網(wǎng)站中轉(zhuǎn)移時將其余的頂層類別隱藏，使用戶更沉浸當(dāng)前類別中。

同時，對于包含大量內(nèi)容的網(wǎng)站，不可能把所有頂層類別連同所有局部導(dǎo)航都顯示在一起。

例如，京東的面包屑還自帶了篩選功能：

爬行模型：在該模型中，用戶可以采用橫向的方式在各類別間轉(zhuǎn)移，用戶選擇一個類別后，可以繼續(xù)選擇頁面上的“兄弟”類別的導(dǎo)航，用戶只需要單擊一次就可以進行切換。

做一個簡單的總結(jié)：全局和局部導(dǎo)航統(tǒng)稱為結(jié)構(gòu)導(dǎo)航，優(yōu)秀的結(jié)構(gòu)導(dǎo)航能支持用戶的所有信息搜尋行為，包括前文中三類查找信息的用戶。

（6）關(guān)聯(lián)導(dǎo)航

關(guān)聯(lián)導(dǎo)航就是網(wǎng)站頁面上能為該頁面上的內(nèi)容關(guān)聯(lián)到額外內(nèi)容的鏈接，比如：文章詳情的“更多文章”、電商網(wǎng)站的“猜你喜歡”、新聞詳情的“相關(guān)新聞”等。

關(guān)聯(lián)導(dǎo)航有時很容易被我們忘記，因為它們相當(dāng)于跨越了網(wǎng)站信息架構(gòu)體系結(jié)構(gòu)的快捷方式。

但是，不得不承認(rèn)，關(guān)聯(lián)導(dǎo)航是保證網(wǎng)站可用性強大的驅(qū)動力，可以促使用戶沉浸于我們的內(nèi)容。

關(guān)聯(lián)導(dǎo)航關(guān)注兩方面內(nèi)容：

1. 用戶找到了需要的東西后，下一步做什么？
2. 如果頁面并不是用戶想要的，那么如何能把用戶繼續(xù)留在網(wǎng)站？下一步做什么？

a. 上文中已經(jīng)提到過“下一步”操作。當(dāng)用戶找到了他們希望的東西時，下一步要做什么？

如果是訪問了一篇文章，就應(yīng)該為用戶提供更多相關(guān)文章的鏈接；如果是觀看了一個視頻，就可以提供更多相關(guān)的視頻鏈接給用戶。

例如：在36kr網(wǎng)站，當(dāng)用戶閱讀了一篇文章后，網(wǎng)站提供了收藏、評論、分享等功能?；蛘撸脩粜那椴诲e想要繼續(xù)查看相關(guān)內(nèi)容，為此，網(wǎng)站提供了相關(guān)文章和感興趣文章的鏈接。又或者，用戶不想看類似文章了，此時網(wǎng)站提供了下一篇文章的鏈接。

b. 如果當(dāng)前頁面展示的不是用戶想要的，那么該怎么辦呢？我們當(dāng)然不能保證每一個頁面都是用戶想要的。

我們要做的，就是要提供一些其他的內(nèi)容給用戶看到，可以提供一些相關(guān)內(nèi)容的鏈接，或者是提供同一內(nèi)容不同格式的鏈接，比如在一個新聞詳情內(nèi)，可以給用戶提供文字、音頻以及視頻多種查看方式。

例如：在用百度搜索內(nèi)容時，并不是一下子就能搜索到用戶想找的內(nèi)容，此時在搜索頁面上提供了多種格式的搜索類型，同時還提供了搜索工具幫助用戶篩選搜索的結(jié)果，在界面的右側(cè)也提供了一些與搜索關(guān)鍵字相關(guān)的鏈接。

（7）可用性導(dǎo)航

信息架構(gòu)領(lǐng)域的美國知名作家James Kalbach給出了可用性導(dǎo)航的定義“可用性導(dǎo)航將工具和特性相連接，這些特性可以幫助訪問者使用網(wǎng)站?！?/strong>