1.3 Web產品的用戶體驗層面

網站相當于一個自助式產品，用戶需要依據自己的智慧和經驗來面對，當用戶對網站某個功能產生疑惑時，大多數網站無法意識到用戶的困境，所以網站只是把信息放在上面是不夠的，還需要用一種用戶能理解和接受的方式呈現出來，這就需要提高用戶體驗。提高用戶體驗的方法被稱為以用戶為中心的設計。戰略層、范圍層、結構層、框架層和表現層組成了一個基本架構，依據這個架構來解決用戶體驗的問題。

1.3.1 戰略層：產品目標和用戶需求

戰略層決定了產品的方向，根據產品目標和用戶需求來制定。

1.產品目標

產品目標是指通過產品能得到什么。產品目標主要通過3個方面來衡量：商業目標、品牌標識和成功標準。

商業目標可以簡單地理解為通過網站給企業帶來收益或替企業節約成本。品牌標識是指在用戶與產品發生交集時，網站在用戶心中形成的品牌形象，以提升用戶對企業的好感度。成功標準是指通過一些可追蹤的數據來評估產品是否達成商業目標和滿足用戶需求。

2.用戶需求

分析用戶需求主要有兩個方法，分別是用戶細分和用戶研究。通過這兩個方法收集資料，創建出代表真實用戶的虛構人物，如圖1-11所示。

用戶細分是通過人口統計學、消費心態檔案和用戶認知程度來構建用戶畫像。人口統計學包括性別、年齡、教育水平、收入等。消費心態檔案是用于描述用戶對社會，尤其是對產品的觀點或看法的心理分析方法。用戶認知程度是指用戶對Web產品的熟悉程度和適應程度，如是小白用戶還是重度用戶。

圖1-11

用戶研究是通過市場調研、現場調查、任務分析和用戶測試等方法來確認用戶需求。市場調研通常有問卷調查和用戶訪談兩種方式。現場調查是通過一套完整且有效的方法來了解用戶的日常行為習慣。任務分析是指在特定的任務環境中，對用戶與產品產生的交互行為進行分析。用戶測試是指在產品上線前，請一些用戶來測試產品，通過測試結果來優化用戶體驗。

1.3.2 范圍層：功能需求和內容需求

在通過戰略層對產品目標和用戶需求有較為清晰的認知之后，需要對已經明確的需求做優先級排列和拆分細化的工作，明確所設計的產品到底要為用戶提供什么樣的內容和功能。

1.功能需求

功能需求是指具體滿足用戶哪些方面的需求。功能需求可以分為直接需求和真實需求。例如，一個剛入職場的畢業生，在網上訂購了一盒釘子，他的直接需求為買一盒釘子。經過更深入的用戶訪談后發現，該用戶一個人在外地工作，下班回到出租屋，感覺出租屋很冷清，于是網購了一盒釘子，把全家福照片掛起來，這才覺得屋內溫暖了許多。可見，該用戶的真實需求是溫暖。所以，對用戶的研究，不能僅限于銷售數據的分析，還要挖掘數據背后的真實需求。

2.內容需求

內容需求與功能需求相配合，有效地收集和管理內容資源。

3.確定優先級

Web產品的上線時間或迭代時間是有限的，在有限的時間里需要確定功能開發的優先級。

1.3.3 結構層：交互設計和信息架構

結構層是將功能需求和內容需求組成一個整體。功能需求需要考慮交互設計，即用戶可能產生哪些行為，系統如何配合和響應這些用戶行為。內容需求需要考慮信息架構，即信息架構所呈現的內容是否合理，通常以用戶是否能快速找到想要的內容為判斷依據。

信息架構的單位是節點，節點可以對應任意信息。信息架構設計的結構方法有層級結構、矩陣結構、自然結構和線性結構。

層級結構又稱為樹狀結構或中心輻射結構，節點與其他相關節點存在父級和子級的關系，如果1-12所示。矩陣結構允許用戶在節點與節點之間沿著兩個或更多的維度移動，如圖1-13所示。

圖1-12

圖1-13

自然結構不遵循任何一種模式，其節點是逐一被連接起來的，沒有太強的分類概念，如圖1-14所示。線性結構是將節點從頭到尾地串聯起來，如圖1-15所示。

圖1-14

圖1-15

1.3.4 框架層：界面設計、導航設計和信息設計

結構層讓產品具有了整體形象，接下來在框架層需要確定界面設計、導航設計和信息設計。

1.界面設計

將最重要的內容讓用戶一眼看到，讓用戶知道在界面上能做哪些事情，使其與產品產生互動。基于用戶最常采用的行為習慣做交互元素的布局。例如，單擊圖片能調整頁面，通過搜索功能搜索信息，單擊更多下載按鈕可以瀏覽到更多的下載內容，如圖1-16所示。

圖1-16

2.導航設計

導航可以實現頁面跳轉，并且能體現網站的功能，它能清晰地告訴用戶“從哪里來”“在哪里”“可以到哪里去”，如圖1-17所示。

圖1-17

3.信息設計

根據用戶使用網站后所留存的內容，將這些內容進行信息分類，遵循用戶的想法并按優先級排列。例如，用戶每日在網站上打卡，網站則會顯示今日打卡成功，以及已經打卡的次數和根據打卡次數所獲得的等級。

1.3.5 表現層：視覺設計

界面設計解決交互布局的問題，導航設計解決頁面跳轉的問題，信息設計解決用戶信息排列的問題。接下來要為表現層做視覺設計。

在視覺設計上，可以采用品牌顏色，給用戶傳遞品牌形象，如圖1-18所示。在不破壞頁面結構的情況下，加強各模塊之間的區分，讓用戶能夠順暢地瀏覽頁面。可以用視覺引導的方法讓用戶完成目標任務。在做視覺設計時需要注意一致性，即頁面結構的一致性，元素使用的一致性等，使用戶在瀏覽頁面時不會迷茫或產生疑問。

圖1-18