如何系統地規劃出具備上乘使用者體驗的網站？
從零開始學運營，10年經驗運營總監親授，2天線下集訓+1年線上學習，做個有競爭力的運營人。 ofollow,noindex">瞭解詳情
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
現今，網站和web技術已經不算是新興技術了，但是不得不承認，在當下的移動網際網路時代，web技術仍然算得上是新潮的技術之一，並且網站也是各企業商業價值中的重要一環。因此，規劃、設計具有優秀使用者體驗的網站，仍然是我們的重要技能之一。
前戲：明確網站的業務模型
在開始正式地規劃網站之前，我們有必要了解網站的主要業務模型。儘管人們都更加願意獲得免費的資訊，但資訊提供方（企業）還是希望能夠由此得到回報的。
要明白，大多數企業要想存活，就必須要掙錢。在為企業建設網站之前，我們要知道公司的業務模型是什麼，如果不瞭解業務模型，就無法知道使用者哪些行為是有意義的，哪些行為是毫無價值的。
主流的業務模型包括：
- 市場/電子商務模型（比如B2B/B2C/C2C）；
- 廣告模型（需要很大的使用者訪問量）；
- 會員模型（增值服務）；
- 社群模型（收入來源輔助產品或服務的銷售）；
- 訂購模型（訂購服務）。
找準了業務模型，我們就可以開始設計出支援業務需求的網站了。
一、明確目標使用者
在開始網站設計之前，我們首先要問自己一個問題：“網站是為誰搭建的？”不是每個網站的設計者都能準確有效地回答這個問題，有的人會說“網上的每一個人”，還有的會說“所有喜愛某類產品的人”、“所有愛看書的人”或者“所有喜歡美食的人”。
這些回答都不是準確的回答，因為你無法從這些回答中得到精確的使用者角色。
我們可以採取如下工作方式，去明確目標使用者：
- 找到公司的市場/運營部門，市場/運營部門的人員或許對公司使用者的統計資料結果以及心理方面做過了大量的研究。
- 諮詢公司負責人或高管，瞭解他們希望產品所面向的使用者，以及他們所認為的具有價值的使用者行為。
在和各相關部門同事的談話中，並不只是收集使用者的統計資訊，真正要做的是得到一些合適的行為資訊來幫助我們更好的設計網站。
比如，我們瞭解到使用者的年齡較大，就要做出一些初步的設計決策。如：字型要放大、互動操作要儘量簡單、以及頁面上哪些元素更應該突出等。
二、與目標使用者交流
招募目標使用者通常需要公司內部其他部門的配合，比如客服部門，可以通過諸如電話邀約、郵件邀約等方式，如果目標使用者是企業，則可以通過公司高層或市場部門，向企業致電或傳送邀請函等方式，總之，儘量通過其他部門的協助完成使用者的邀約。
在訪談的過程中，我們要注意理解得到的反饋。比如，使用者可能會說“我希望按鈕大一些。”而他們的實際想法可能是“付款的過程太複雜了。”或者使用者可能會說“我希望這個的演顏色是紅色。”他們真正的意思可能是“要招到我想要的東西太耗費時間。”
最佳的方式是：當用戶在正常的環境中具體完成任務時實際地跟蹤使用者的行為。
所以，在訪談中，我們可以問一些諸如“你想做什麼？”、“你希望得到什麼”這樣的問題，而避免去問“你認為這個按鈕應該放在哪裡？”這種問題。我們要把重點放在使用者完成任務時遇到的難題上。
三、建立使用者角色模型
角色模型可以幫助我們更深入地理解設計所針對的物件，以及怎樣才能真正滿足這個使用者的需求。當然，也可以不去建立複雜的角色模型，只不過，如果能針對一個特定的“人”來進行設計，會讓我們的設計更加有效。
1. 總結使用者交流結果，把結果分發給各利益相關者或相關部門人員
在第二步中，我們會收集到一些資訊。可能已經得到使用者的相關資訊，比如：性別、地理位置、上網習慣、技術水平或是他們使用競品的方式。
我們瞭解到使用者當前遇到的麻煩，也瞭解到哪些方面還算不錯等資訊。
針對於收集到的資訊，我們需要建立一份報告，這份報告可能會涉及以下資訊：
- 使用者群體的技術程度；
- 年齡段，性別分佈等；
- 使用者想要通過產品完成的任務過程；
- 使用者使用同類產品的使用模式；
- 使用者感興趣的競品；
- 常見問題；
- 使用者價值觀、文化背景等內容。
這裡需要注意的是：
- 要保證每個資訊儘可能準確，去除諸如“使用者希望….”這樣的資訊；
- 資訊要與我們的產品相關；
- 資訊要針對網站整體成立，去除諸如“使用者無法找到付款按鈕”這類的資訊，取而代之的是“我們有一類使用者，他們知道想購買什麼，現在需要提供一種方法能加快購買流程”。
2. 與各相關部門人員召開會議，腦暴形成使用者角色
尋求各部門相關人員的協作，往往比單槍匹馬作戰更高效。
每一個部門都會對使用者有自己的理解，是男人還是女人？年齡段如何？住在哪裡？如果大家不確定，可以參照上一步的報告文件。
當大家提出了大量使用者特徵後，可以開始合併這些特徵，並將其改進為角色，比如：女性+25~35+華北地區=來自北京的27歲女性，甚至還可以為她取一個名字。
3. 讓角色成為真正的人
為使用者角色增加一些具體的個性化內容，比如：照片、姓名、職業、個人背景、職業、教育背景、目標、愛好、最喜歡的網站、他的願望等資訊。確保使用者角色的真實是這一步的關鍵。
4. 為人物角色加入場景表達
通過建立場景，會使得人物更加豐滿，同時有助於我們完成網站互動系統的設計。場景，就是人物角色使用產品時的背景故事簡介。
比如：王強（人物角色名字）開啟瀏覽器，從網站上看到了感興趣的電影介紹，首先他回選擇自己關心的電影型別，然後網站會推薦給他可能相看的電影；接下來，他會選擇真正感興趣的電影，並進行觀看。
四、繪製使用者路徑草圖
使用者路徑草圖可以幫助我們確定不同型別使用者會完成哪些型別的動作，由此我們可以決定需要為網站設計什麼。通過畫出不同使用者的路徑，可以幫助我們檢視是否有遺漏。舉一個例子：
比如，要建立一個小型電子商務網站的使用者路徑草圖，可以有這樣一個場景故事：買禮物的人瀏覽主頁，找到適合的禮物，買下禮物，寫下一張賀卡，寫上朋友的資訊，付款。
起初的使用者路徑草圖如下：
接下來可以考慮，網站的使用者不只是送禮物的人，也會有給自己買禮物的使用者、不滿意的使用者、失業想要線上賣東西的使用者、其他渠道接收到廣告的使用者，我們可以繼續為這些使用者新增使用者路徑：
五、明確業務流程與任務流程
繪製了全使用者的全路徑草圖，現在就要拆解使用者的全部任務，明確互動中每一步的細節。
其實這一步，就是根據使用者的任務，完成各個任務/功能的流程圖設計，以及和網站後臺系統互動的業務流程圖設計。
關於功能流程與業務流程，網上已有不少文章做出詳述，本文不再詳細闡述。
六、網站的使用者體驗設計
本步驟不再敘述如何繪製網站的原型圖，這裡要談的是在網站的設計中，值得注意的要點。
1. 網站上的一切要井井有條
網站中會含有豐富的資訊，使用者來到我們的網站時為了查詢資訊或者完成任務或者二者兼有，作為網站的設計者，我們的任務就是用好的設計幫助使用者達到他們的目的。
（1）幫助確認是否到達了正確的位置
來到網站，使用者希望知道這是不是他所需要的，也就是他是否達到了正確的位置。
使用者來到我們的網站時，首先看到的就是網站的組織方案。
組織方案有兩個作用：
- 導向作用，會告訴使用者這是一個什麼型別的網站；
- 告訴使用者要做什麼，它會向用戶展示“在這裡你可以瀏覽/購買/閱讀/分享/檢視/收聽的東西”。
因此，組織方案需要為使用者展示所有的產品範圍。比如，淘寶網站的分類導航：
（2）幫助使用者找到他們需要的東西
使用者知道他們訪問了正確的網站，接下來他們需要標識導引來找到他們想要的東西，標識導引有四方面的內容：
- 使用熟悉的組織系統。組織系統包括，字母（例如通訊錄）；地理位置；時間；連續區間（比如排名1~10,或一些數值範圍）；數字；種類（例如部落格種類）。 使用使用者已經習慣的組織系統，使用者就更容易上手我們的網站，不必從頭學起，我們的網站也就更易用。
- 明顯的標籤。 標籤資訊可以幫助使用者更好的找到他們想要的東西，比如一個標記著“流行”標籤的歌曲，會吸引來眾多不喜歡古典音樂的使用者。
- 控制元件的主觀能動性。 也就是，連結看起來要像連結，按鈕看上去要像按鈕，僅供閱讀的文字和可以單機的文字看上去應該是有區別的。
- “麵包屑”。 要讓使用者知道他正在網站的哪個位置，是從哪裡來的，如何才能回到之前的頁面。麵包屑導引或通過改變導航條的外觀都可以提供網站位置的反饋。
（3）讓使用者知道網站上有更好的東西
無論使用者是否在網站上找到了他們需要的東西，他們都會想找到更多的類似的更好的內容。在這裡，可以有效利用導航或麵包屑導引，突出顯示使用者在網站中的當前位置，並顯示相關的內容，讓使用者可以連結到其他的地方。
另外，也可以使用提供“更多內容”的選項，可以向用戶提供相關商品的快捷途徑。“更多內容”導航工具對於一組相關商品以及相關種類的快捷途徑最為有效，例如電商網站的“猜你喜歡”，文章網站的“相關文章”。
（4）為使用者提供下一步操作
使用者已經找到了他們想要的東西，我們要為使用者的下一步操作提供相應的選擇，我們應該在設計網站時詢問自己“使用者希望在找到他們需要的東西后，做些什麼？”
對於一個電商網站，使用者肯定是要購買到找到的商品，電商網站提供的“加入購物車”和“購買”按鈕有效幫助使用者解決了問題。對於一個文章網站，使用者閱讀一篇文章後需要做些什麼呢？應該是評論、分享、收藏、複製、貼上這篇文章。
使用者會利用網站提供的“下一步”操作拉近與其目標的距離。
2. 網站導航的細節闡述
這裡之所以把網站的導航設計拿出來，是因為看似簡單的導航設計，裡面含有很多的設計細節。
在討論導航的細節之前，我們先要明確使用者查詢資訊的方式，使用者訪問我們的網站就是為了獲取查詢相關資訊，而導航可以幫助使用者去完成這一操作，所以有必要了解使用者查詢資訊的方式。
（1）使用者查詢資訊的方法
- 已知內容查詢： 使用者明確知道自己想要查詢什麼，此時他們會直接通過搜尋工具去查詢。此時導航應該適當地處理搜尋，使使用者能夠到達他們想去的地方。
- 探測內容查詢： 使用者此時可能有一個需求，但是不能確定具體怎樣才能滿足這個需求。此時就會記性探測內容查詢，使用者想買一個數碼相機，但是不知道哪種數碼相機好，所以需要查詢很多相機對比。
- 不知道自己要查詢什麼： 有時使用者連需要什麼都不清楚，比如使用者想買新房子，卻發現需要了解所在城市的相關政策，在尋找某個東西時，卻發現實際上需要了解另外一些東西。
- 歷史查詢： 使用者可能想檢視以前找到的某些東西，這一點通常在設計中被忽略。
（2）導航的分類
- 結構導航： 展示網站內容的層次結構，包括全域性導航和區域性導 。 全域性導航一般是網站的頂層級別，使用者可以通過全域性導航很容易地訪問重要內容。區域性導航可以把使用者帶到網站層次結構中鄰近當前所在位置的層次。結構導航對於“已知內容查詢”和“探測內容查航找”很有用，對於“不知道自己要查詢什麼”的使用者也會有一些幫助。
- 關聯導航： 將一個頁面與包含類似內容的其他頁面相關聯。 關聯導航適 合於“探測內容查詢”，並且能幫助“不知道自己要查詢什麼”的使用者找到相關資訊。
- 可用性導航： 包括登入，訪問使用者資訊等內容，主要內容組織以外的所有內容都可以納入可用性導航。
三類導航分別對應不同的使用者查詢資訊方法：
（3）全域性導航
在很多網站上，全域性導航就是導航條，比如：
對網站內容分類並選擇組織系統時，全域性導航作為頂層類別，對使用者和企業來說是意義重大的，因為它展現了網站的頂層架構。
全域性導航需要再每個頁面都出現，不論使用者現在在哪裡，都能通過全域性導航繼續訪問網站的任何位置。
同時，全域性導航還有一個作用，就是會告訴告訴使用者網站是關於什麼的，以及使用者可以利用網站來做些什麼。
全域性導航通常會顯示在頁面的最上方，因為這樣就能將頁面的其餘部分聚焦於內容資料。
當然，垂直的全域性導航也是一種選擇，但是這樣會限制區域性導航以及頁面內容的可用空間。
（4）區域性導航
區域性導航也稱為欄目導航，因為它提供了一組連結。當點選了一個全部導航時，會進入到相應頁面，此時會在全域性導航下方出現新的一組導航條，這就是區域性導航。
利用區域性導航，只需要提供一個欄目下其他頁面的連結即可。在一個複雜的分類系統中，使用者希望從一個類別移到子類別，然後再移回來，設計區域性導航就是為了讓使用者能夠輕鬆地在不同類別間導航。
區域性導航可以有效的幫助“探測內容查詢”型使用者，這些使用者知道他們需要某些東西，但是又不確定到底是什麼。
選擇一個全域性導航後，區域性導航可以幫助他們瀏覽更加具體的內容。而對於“不知道自己要查詢什麼”的使用者，區域性導航可以為他們提供一組相關的選項，幫助他們做出決策。
區域性導航通常出現在全域性導航的下方（或頁面的左側）。這種佈局方式也強調了內容的組織方式：子類在類別下方，把相關性最強的連結放在最接近使用者需要的位置。
使用者在訪問網站的一個頁面時，會關注頁面的內容，如果他看到的頁面上沒有需要的內容，那麼區域性導航通常要放在離頁面內容更近的位置，使用者想要訪問其他類別時，首先要找的便會是區域性導航。
（5）導航訪問模式
在全域性導航和區域性導航這裡，介紹一下使用者訪問導航的模型，使用者查詢網站內容的方式取決於網站的導航，通過導航訪問內容有兩種基本模式（我喜歡這麼叫這兩種方式）： 彈跳模型和爬行模型。
彈跳模型：這種模型會使使用者前往一個子類，然後必須回到其父類（首頁）來選擇另一個不同的子類。
此模型適用於使用者瀏覽龐大的異構內容集的時候，眾多分類龐雜的網站如電商網站、素材類網站，這些型別網站中麵包屑導引工具就顯得異常重要，使用者會沿著麵包屑導航的軌跡返回。
採用該模型，為了讓使用者在網站中轉移時將其餘的頂層類別隱藏，使使用者更沉浸當前類別中。
同時，對於包含大量內容的網站，不可能把所有頂層類別連同所有區域性導航都顯示在一起。
例如，京東的麵包屑還自帶了篩選功能：
爬行模型：在該模型中，使用者可以採用橫向的方式在各類別間轉移，使用者選擇一個類別後，可以繼續選擇頁面上的“兄弟”類別的導航，使用者只需要單擊一次就可以進行切換。
做一個簡單的總結：全域性和區域性導航統稱為結構導航，優秀的結構導航能支援使用者的所有信息搜尋行為，包括前文中三類查詢資訊的使用者。
（6）關聯導航
關聯導航就是網站頁面上能為該頁面上的內容關聯到額外內容的連結，比如：文章詳情的“更多文章”、電商網站的“猜你喜歡”、新聞詳情的“相關新聞”等。
關聯導航有時很容易被我們忘記，因為它們相當於跨越了網站資訊架構體系結構的快捷方式。
但是，不得不承認，關聯導航是保證網站可用性強大的驅動力，可以促使使用者沉浸於我們的內容。
關聯導航關注兩方面內容：
- 使用者找到了需要的東西后，下一步做什麼？
- 如果頁面並不是使用者想要的，那麼如何能把使用者繼續留在網站？下一步做什麼？
a. 上文中已經提到過“下一步”操作。當用戶找到了他們希望的東西時，下一步要做什麼？
如果是訪問了一篇文章，就應該為使用者提供更多相關文章的連結；如果是觀看了一個視訊，就可以提供更多相關的視訊連結給使用者。
例如：在36kr網站，當用戶閱讀了一篇文章後，網站提供了收藏、評論、分享等功能。或者，使用者心情不錯想要繼續檢視相關內容，為此，網站提供了相關文章和感興趣文章的連結。又或者，使用者不想看類似文章了，此時網站提供了下一篇文章的連結。
b. 如果當前頁面展示的不是使用者想要的，那麼該怎麼辦呢？我們當然不能保證每一個頁面都是使用者想要的。
我們要做的，就是要提供一些其他的內容給使用者看到，可以提供一些相關內容的連結，或者是提供同一內容不同格式的連結，比如在一個新聞詳情內，可以給使用者提供文字、音訊以及視訊多種檢視方式。
例如：在用百度搜尋內容時，並不是一下子就能搜尋到使用者想找的內容，此時在搜尋頁面上提供了多種格式的搜尋型別，同時還提供了搜尋工具幫助使用者篩選搜尋的結果，在介面的右側也提供了一些與搜尋關鍵字相關的連結。
（7）可用性導航
資訊架構領域的美國知名作家James Kalbach給出了可用性導航的定義 “可用性導航將工具和特性相連線，這些特性可以幫助訪問者使用網站。”
好吧，專家的定義總是這麼晦澀。
其實我們對可用性導航並不陌生，網站的登入/註冊、搜尋、個人資訊、個人賬戶、客服、我的訂單等都是可用性導航。
可用性導航通常放在全域性導航附近，比如頁面的右上方，因為可用性導航也需要在網站的所有地方都能訪問到。
在設計可用性導航時，要利用視覺線索和頁面上的屋裡位置將它和全域性導航分開。
不同型別網站可用性導航包含的資訊不同，根據網站各自的業務進行具體設計，比如：京東的“登入/註冊、我的訂單、我的京東、京東會員、企業採購、客戶服務、手機京東”、站酷網的“搜尋、上傳、訊息、個人資訊”等。
（8）小結：
全域性導航和區域性導航可以幫助使用者縮小網站的內容範圍。關聯導航可以將使用者連線到相關的內容，提供不同情況的“下一步”。可用性導航可以放置另外三類導航未能妥善處理的其他重要連結。
三部分導航綜合到一起，就可以得到一個可用性很高的網站了。
如果在設計網站的導航時，還是無從下手，試著回答自己三個問題“ 內容如何組織？”“使用者希望通過網站做什麼？”“你希望使用者通過網站做什麼？”
3. 網站內容的基石—元資料
元資料是網站組織系統的基礎，搜尋以及電商網站上的導航系統都依賴於元資料。
網站上的資訊可以有不同的形式，比如：一篇文章、一張圖片或者是一個視音訊。
元資料可以確保以上各種形式的內容都能夠被使用者查詢瀏覽到，元資料就是每一項內容的所有資訊。比如，一首歌曲，元資料可能包括：出處，版本，作詞人，作曲人，演唱者，專輯名，時長，音樂型別等等。
元資料通常包括以下三種：
- 固有性元資料。與內容構成有關的元資料，比如這是一個word文件、jpeg圖片、ZIP檔案。
- 管理性元資料。與內容構成有關的元資料，比如圖片的用途、編輯人、是否已發表。
- 描述性元資料。與內容本質有關的元資料，比如一個圖片的描述性元資料：狗、犬科、可愛等。
下圖展示一些元資料的型別：
我們要根據網站的具體定位，組織具體的內容及其元資料，明確每一個元資料對使用者來說是否有用。
4、網站設計要遵循的基本原則
使用者體驗設計部分的最後，總結一些常用的設計原則吧：
- 標識引導設計：幫助使用者明確他們身在何處；他們要尋找的內容在哪裡；如何得到使用者搜尋的內容；使用者已經搜尋過哪些地方。比如，經典的麵包屑導航。
- 設定期望並提供反饋：在動作發生之前要讓使用者知道動作還未發生；提示使用者正處在過程中的哪個階段。比如，嚮導式導航設計，一直顯示使用者的操作進度。
- 保持一致性：同種型別頁面的架構一致、互動操作一致、視覺效果一致等。比如，所有商品的詳情頁都使用同樣的佈局。
- 提供防錯性：預防使用者出錯；保護使用者正在編輯的操作內容；及時通知錯誤。比如，在表單互動中，保留使用者已編輯資訊，及時反饋錯誤資訊等。
- 依靠辨識，不憑記憶：提供明顯且精確的可辨識要素，避免使用者憑記憶與網站互動。比如，保留使用者的搜尋歷史，保留使用者的瀏覽歷史等。
- 考慮到不同水平的使用者：《互動設計精髓》書中提到，使用者分為新手使用者、中級使用者以及專家使用者，新手使用者往往會很快過度到中級使用者，而專家使用者鳳毛麟角，所以我們的一般策略是為新手及中級使用者建立簡單的產品，為專家使用者構建一些特殊屬性。
- 提供幫助（說明）連結或文件：及時的幫助說明文件，可以有效幫助使用者解決使用網站過程中的燃眉之急。比如，網站關於會員體系的說明。
七、目標（種子）使用者測試網站
可以給使用者測試我們的網站原型，也可以快速搭建第一個版本後讓使用者使用得到反饋。無論採用哪一種方式，目標都是要儘快得到使用者的反饋，以及時調整解決出現的問題。
同時，我們要為發現的問題預留出足夠的處理時間。
八、迭代優化我們的網站
接下來，就是不斷的去迭代、優化網站了，根據公司業務的調整、或是配合其他產品線、或是增加產品功能，不斷的去完善網站。
九、總結
本文討論了系統規劃網站的大致流程，重點討論了提升網站使用者體驗的設計要點，從中又引出了導航、元資料以及基本的設計原則，希望本文的內容能給大家帶來一些幫助。
#專欄作家#
流年，人人都是產品經理專欄作家。網際網路產品設計師，4年網際網路產品設計經驗。擅長使用者體驗設計，喜歡鑽研需求功能背後的技術實現方式；在成為綜合型產品設計師的道路上不斷努力前進！
本文原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基於 CC0 協議
