體驗設計要素

Jesse James Garrett的《用戶(hù)體驗要素》為我們提供了一個(gè)全面的框架，以系統地設計和優(yōu)化用戶(hù)體驗。從戰略層到表現層，每一層次都至關(guān)重要，確保產(chǎn)品不僅滿(mǎn)足用戶(hù)需求，還實(shí)現商業(yè)目標。本文將深入探討這五個(gè)層面，幫助設計師和開(kāi)發(fā)者創(chuàng )建更加人性化和有效的產(chǎn)品體驗。

一、用戶(hù)體驗要素簡(jiǎn)介

《用戶(hù)體驗要素》，作者“Ajax之父”Jesse JamesGarrett，是一位信息架構和用戶(hù)體驗的積極倡導者，總結提煉出了用戶(hù)體驗的五個(gè)要素，被廣泛地運用到產(chǎn)品設計中來(lái)。

Jesse James Garrett，是用戶(hù)體驗咨詢(xún)公司Adaptive Path的創(chuàng )始人之一。從用戶(hù)體驗要素“在2000年3月初次發(fā)布到網(wǎng)上以來(lái)，Jesse的所繪制的這個(gè)模型已經(jīng)被下載了2萬(wàn)多次。

Jesse的互聯(lián)網(wǎng)從業(yè)經(jīng)驗包括ATT、Intel、Boeing、Motorola、Hewlett-packard以及和美國國家公眾廣播等。

他在用戶(hù)體驗領(lǐng)域的貢獻包括”視覺(jué)詞典（the Visual Vocabulary）“，一個(gè)為規范信息架構文檔而建立的開(kāi)放符號系統，現在這個(gè)系統在全球各個(gè)企業(yè)中得到廣泛的應用。他的個(gè)人網(wǎng)站 是提供信息架構資源的網(wǎng)站中最受歡迎的一個(gè)。

用戶(hù)體驗，指的是產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用，換言之，就是人們如何“接觸”和“使用”它。

現在用戶(hù)體驗大多用在軟件開(kāi)發(fā)層面，但我認為，這種以用戶(hù)為中心的產(chǎn)品設計也同樣適用于傳統的實(shí)物產(chǎn)品，而且產(chǎn)品越復雜，向用戶(hù)提供良好的使用體驗也就越困難。Jesse很系統清晰地向我們展示了用戶(hù)體驗的五個(gè)要素。

二、用戶(hù)體驗五要素

在用戶(hù)體驗要素一書(shū)中，構成了完整用戶(hù)體驗的五個(gè)層面：戰略層、范圍層、結構層、框架層、表現層；這五個(gè)部分組成，通常使用方法論的順序是從上至下。

1. 戰略層（Strategy Plane）

是用戶(hù)體驗五要素中的第一個(gè)層次，也是最基礎的層次。它涉及定義網(wǎng)站或應用程序的目標，以及識別和滿(mǎn)足用戶(hù)需求的策略。在這個(gè)層次上，設計師和利益相關(guān)者需要明確項目的基本方向和核心目的。戰略層的組成分為三部分：目標、用戶(hù)需求、成功標準

1）目標

這里的目標分為兩個(gè)商業(yè)目標和用戶(hù)目標

商業(yè)目標：明確企業(yè)希望通過(guò)網(wǎng)站或應用程序實(shí)現的目標。例如，提高銷(xiāo)售量、增加品牌知名度、提供客戶(hù)支持等。

用戶(hù)目標：確定用戶(hù)使用網(wǎng)站或應用程序的目的和期望。例如，查找信息、完成購買(mǎi)、獲取支持等。

2）用戶(hù)需求

顧名思義就是用戶(hù)需要什么，可以通過(guò)以下方法得到，

用戶(hù)研究：通過(guò)調研和分析，了解目標用戶(hù)的需求、行為和痛點(diǎn)。可以采用問(wèn)卷調查、用戶(hù)訪(fǎng)談、焦點(diǎn)小組等方法。

用戶(hù)角色（Persona）：創(chuàng )建虛擬的用戶(hù)角色，代表不同類(lèi)型的用戶(hù)及其需求和行為模式。

3）成功的標準

戰略層定的是否成功需要通過(guò)一些數據可視化的指標進(jìn)行衡量，例如：

定量指標：如流量、轉化率、用戶(hù)留存率、銷(xiāo)售額等。

定性指標：如用戶(hù)滿(mǎn)意度、品牌認知度、用戶(hù)體驗反饋等。

戰略層的案例：在線(xiàn)教育平臺

商業(yè)目標：

增加付費用戶(hù)數量

提供高質(zhì)量的教育內容

構建一個(gè)活躍的學(xué)習社區

用戶(hù)目標：

方便地找到并注冊感興趣的課程

獲取高質(zhì)量的學(xué)習資料和支持

與其他學(xué)員互動(dòng)和交流

用戶(hù)需求：

通過(guò)問(wèn)卷調查和用戶(hù)訪(fǎng)談，發(fā)現用戶(hù)需要更加個(gè)性化的課程推薦、簡(jiǎn)化的注冊流程、以及互動(dòng)性更強的學(xué)習社區。

創(chuàng )建用戶(hù)角色，例如：需要提升技能的職場(chǎng)人士、準備考試的學(xué)生、興趣學(xué)習的退休人員等。

成功標準：

增加注冊和付費用戶(hù)數量

提升用戶(hù)滿(mǎn)意度和學(xué)習效果（通過(guò)反饋和考試成績(jì)）

提高社區參與度和活躍度（通過(guò)論壇帖子、討論組等）

2. 范圍層（Scope Plane）

是用戶(hù)體驗五要素中的第二個(gè)層次。在戰略層確定了項目的總體目標和用戶(hù)需求之后，范圍層進(jìn)一步細化這些目標，定義具體的功能和內容需求。范圍層的關(guān)鍵是將抽象的戰略目標轉化為具體的、可執行的項目要求。范圍層有兩個(gè)部分組成：功能規格和內容需求。

1）功能規格：

功能清單：詳細列出網(wǎng)站或應用程序所需的所有功能。例如，搜索功能、購物車(chē)功能、用戶(hù)注冊和登錄功能等。

功能優(yōu)先級：根據用戶(hù)需求和商業(yè)目標，對各功能進(jìn)行優(yōu)先級排序，決定哪些功能必須首先實(shí)現，哪些功能可以稍后添加。

2）內容需求：

內容清單：詳細列出網(wǎng)站或應用程序所需的所有內容。例如，產(chǎn)品描述、教程文章、幫助文檔、圖像和視頻等。

內容優(yōu)先級：根據用戶(hù)需求和商業(yè)目標，對各內容進(jìn)行優(yōu)先級排序，決定哪些內容必須首先提供，哪些內容可以稍后補充。

范圍層的案例：在線(xiàn)教育平臺

功能規格：

課程搜索和推薦：提供課程搜索功能，并根據用戶(hù)興趣推薦課程。

課程詳情頁(yè)：展示課程的詳細信息，包括課程簡(jiǎn)介、教師簡(jiǎn)介、課程大綱等。

用戶(hù)注冊和登錄：提供用戶(hù)賬戶(hù)創(chuàng )建和登錄功能，支持社交媒體登錄。

在線(xiàn)學(xué)習功能：提供視頻播放、課件下載、作業(yè)提交和在線(xiàn)考試等功能。

學(xué)習社區：允許用戶(hù)參與論壇討論、加入學(xué)習小組等。

支付功能：集成多種支付方式，允許用戶(hù)購買(mǎi)課程。

功能優(yōu)先級：

課程搜索和推薦

課程詳情頁(yè)

用戶(hù)注冊和登錄

在線(xiàn)學(xué)習功能

學(xué)習社區

支付功能

內容需求：

課程簡(jiǎn)介：詳細描述課程的目標、內容和預期學(xué)習成果。

教師簡(jiǎn)介：介紹授課教師的背景和資歷。

課程大綱：提供課程的詳細計劃和章節安排。

學(xué)習資料：提供課件、閱讀材料、參考資料等。

常見(jiàn)問(wèn)題：解答用戶(hù)可能遇到的問(wèn)題和疑慮。

內容優(yōu)先級：

課程簡(jiǎn)介

教師簡(jiǎn)介

課程大綱

學(xué)習資料

常見(jiàn)問(wèn)題

3. 結構層（Structure Plane）

是用戶(hù)體驗五要素中的第三個(gè)層次。在戰略層確定了項目的總體目標和用戶(hù)需求之后，范圍層定義了具體的功能和內容需求，而結構層則將這些功能和內容組織成一個(gè)系統化的布局和導航結構。結構層的核心是設計信息架構和交互設計，以確保用戶(hù)能夠輕松地找到信息并完成任務(wù)。結構層有兩個(gè)部分組成：信息架構和交互設計。

1）信息架構：

內容組織：對信息進(jìn)行分類(lèi)和分組，建立邏輯結構。通過(guò)層次結構、網(wǎng)狀結構或混合結構來(lái)展示信息之間的關(guān)系。

導航結構：設計全局導航、局部導航和輔助導航，確保用戶(hù)能夠方便地在網(wǎng)站或應用程序中進(jìn)行瀏覽和操作。

路徑設計：確定用戶(hù)完成特定任務(wù)的路徑，確保流程簡(jiǎn)潔高效。

2）交互設計：

用戶(hù)流程：設計用戶(hù)在完成任務(wù)過(guò)程中所需的步驟和操作路徑，確保流程順暢無(wú)阻。

界面布局：確定每個(gè)頁(yè)面或屏幕的布局，包括關(guān)鍵元素的位置和排列方式。

交互模式：定義用戶(hù)與系統的交互方式，如點(diǎn)擊、滑動(dòng)、拖拽等，確保操作直觀(guān)易用。

結構層的案例：在線(xiàn)教育平臺

信息架構：

內容組織：將課程按類(lèi)別進(jìn)行分類(lèi)（如編程、設計、營(yíng)銷(xiāo)等），每個(gè)類(lèi)別下再細分為子類(lèi)別（如Python、UI設計、數字營(yíng)銷(xiāo)等）。

導航結構：設計主導航欄，包含首頁(yè)、課程分類(lèi)、我的課程、社區論壇和幫助中心。子導航欄在每個(gè)課程類(lèi)別頁(yè)面中展示具體的子類(lèi)別。

路徑設計：設計從首頁(yè)到課程詳情頁(yè)，再到課程學(xué)習和社區互動(dòng)的用戶(hù)路徑，確保用戶(hù)能夠順利找到并學(xué)習課程。

交互設計：

用戶(hù)流程：用戶(hù)在首頁(yè)搜索或瀏覽課程，點(diǎn)擊課程進(jìn)入詳情頁(yè)，查看課程簡(jiǎn)介和章節內容，注冊或登錄后開(kāi)始學(xué)習課程，學(xué)習過(guò)程中可以參與社區討論和提交作業(yè)。

界面布局：在課程詳情頁(yè)，左側展示課程視頻播放器，右側顯示課程簡(jiǎn)介、教師簡(jiǎn)介、課程大綱和用戶(hù)評價(jià)。頁(yè)面底部顯示相關(guān)課程推薦。

交互模式：點(diǎn)擊課程大綱中的章節可直接跳轉到對應視頻，播放視頻時(shí)顯示播放控制條，提交作業(yè)時(shí)使用表單填寫(xiě)和上傳功能。

4. 框架層（Skeleton Plane）

是用戶(hù)體驗五要素中的第四個(gè)層次，它位于結構層之上，并進(jìn)一步將結構層的抽象框架細化為具體的設計布局和界面元素。在這一層次上，設計師確定用戶(hù)界面的具體布局和導航系統，使得信息能夠以一種清晰且有序的方式呈現，從而幫助用戶(hù)有效地完成任務(wù)。框架層有三個(gè)部分組成：界面設計、導航設計、信息設計。

1）界面設計：

布局設計：確定頁(yè)面上各個(gè)元素（如標題、文本、圖像、按鈕、表單等）的具體位置和排列方式。

界面元素：設計具體的界面元素，如按鈕、輸入框、復選框、下拉菜單等，并確保它們的外觀(guān)和行為一致。

2）導航設計：

全局導航：設計全局導航系統，使用戶(hù)能夠輕松訪(fǎng)問(wèn)網(wǎng)站或應用程序的主要部分。

局部導航：設計局部導航系統，使用戶(hù)能夠在某個(gè)特定區域內方便地瀏覽和操作。

輔助導航：設計輔助導航元素，如面包屑導航、側邊欄、頁(yè)腳導航等，幫助用戶(hù)了解自己的位置和可能的操作路徑。

3）信息設計：

信息層次：確定信息的層次結構，確保重要信息優(yōu)先展示，次要信息輔助展示。

信息呈現：設計信息的呈現方式，使用戶(hù)能夠快速理解和使用。例如，使用列表、表格、卡片等方式展示信息。

框架層的案例：在線(xiàn)教育平臺

界面設計：

布局設計：在課程詳情頁(yè)，頂部是課程標題和簡(jiǎn)介，左側是課程視頻播放器，右側是課程大綱和教師簡(jiǎn)介，下面是用戶(hù)評論和課程評價(jià)。

界面元素：設計統一風(fēng)格的播放按鈕、下載按鈕和提交作業(yè)按鈕。確保所有互動(dòng)元素在不同頁(yè)面上保持一致。

導航設計：

全局導航：頂部導航欄包括主頁(yè)、課程分類(lèi)、我的課程、社區論壇和幫助中心。確保用戶(hù)能方便地訪(fǎng)問(wèn)平臺的主要功能。

局部導航：在課程詳情頁(yè)，有課程章節導航，幫助用戶(hù)快速跳轉到不同章節。

輔助導航：使用面包屑導航，讓用戶(hù)了解當前課程所在的分類(lèi)和子分類(lèi)，并能快速返回上一級。

信息設計：

信息層次：在課程詳情頁(yè)，首先展示課程標題和簡(jiǎn)介，其次是課程視頻和教師簡(jiǎn)介，最后是用戶(hù)評論和課程評價(jià)。重要信息放在頁(yè)面的顯著(zhù)位置，確保用戶(hù)一目了然。

信息呈現：使用列表展示課程大綱，使用卡片式布局展示推薦課程，使信息更直觀(guān)和易于理解。

5. 表現層（Surface Plane）

是用戶(hù)體驗五要素中的第五個(gè)層次，也是最直觀(guān)、用戶(hù)直接接觸到的層次。它將框架層的布局和結構進(jìn)一步具體化，通過(guò)視覺(jué)設計和交互設計來(lái)創(chuàng )造用戶(hù)的最終體驗。表現層關(guān)注的是用戶(hù)界面的視覺(jué)外觀(guān)和感受，確保信息以美觀(guān)、清晰且有效的方式呈現。表現層有三個(gè)部分組成：視覺(jué)設計、交互設計。

1）視覺(jué)設計：

顏色：選擇和搭配顏色，以傳達品牌形象和情感，并提高可讀性和用戶(hù)體驗。

字體：選擇合適的字體和字號，確保文本的可讀性和美觀(guān)。

圖像和圖標：使用高質(zhì)量的圖像和圖標，增強視覺(jué)吸引力和信息傳遞效果。

布局和空間：合理安排頁(yè)面元素，確保頁(yè)面干凈整潔、層次分明，避免視覺(jué)疲勞。

2）交互設計：

按鈕和鏈接：設計直觀(guān)易用的按鈕和鏈接，確保用戶(hù)能夠輕松識別和操作。

動(dòng)效和反饋：使用動(dòng)效和反饋（如懸停效果、點(diǎn)擊效果、加載動(dòng)畫(huà)等），提升用戶(hù)的互動(dòng)體驗。

響應式設計：確保網(wǎng)站或應用在不同設備和屏幕尺寸下都能有良好的顯示效果。

表現層的案例：在線(xiàn)教育平臺

視覺(jué)設計：

顏色：使用品牌的主色調（如綠色和橙色），傳達積極向上的學(xué)習氛圍。通過(guò)對比色（如橙色）突出重要按鈕（如“開(kāi)始學(xué)習”按鈕）。

字體：選擇易讀的無(wú)襯線(xiàn)字體（如Roboto或Open Sans），不同層次的文字（如課程標題、章節標題、正文）使用不同的字號和字體粗細。

圖像和圖標：使用高質(zhì)量的教師照片和課程圖片，增強可信度和吸引力。使用簡(jiǎn)潔的圖標（如播放、下載、提交作業(yè)等）輔助導航。

布局和空間：合理安排課程信息，確保每個(gè)部分（如課程簡(jiǎn)介、視頻播放器、課程大綱、用戶(hù)評論）之間有足夠的空間，避免頁(yè)面雜亂。

交互設計：

按鈕和鏈接：設計直觀(guān)的按鈕，使用一致的顏色和樣式。確保按鈕大小合適，易于點(diǎn)擊。使用顏色變化和下劃線(xiàn)標識可點(diǎn)擊的鏈接。

動(dòng)效和反饋：在用戶(hù)懸?；螯c(diǎn)擊按鈕時(shí)，提供顏色變化或陰影效果的視覺(jué)反饋。使用加載動(dòng)畫(huà)表示視頻加載過(guò)程，提升用戶(hù)體驗。

響應式設計：確保平臺在不同設備（如臺式機、平板、手機）上都能良好顯示，布局和元素會(huì )根據屏幕尺寸自動(dòng)調整。

三、用戶(hù)體驗要素總結

用戶(hù)體驗要素提供了一個(gè)全面、系統的方法來(lái)進(jìn)行用戶(hù)體驗設計，其層層遞進(jìn)的結構和用戶(hù)、業(yè)務(wù)并重的特點(diǎn)使其成為設計師的重要工具。然而，五要素框架的復雜性、資源需求和靈活性問(wèn)題也需要設計師在實(shí)際應用中加以考慮和權衡。對于不同規模和類(lèi)型的項目，設計師需要根據具體情況靈活調整和應用這一框架，以實(shí)現最佳的用戶(hù)體驗和業(yè)務(wù)目標。以下分為優(yōu)點(diǎn)和缺點(diǎn)進(jìn)行分析：

1. 優(yōu)點(diǎn)

1）系統性和全面性：

全面覆蓋：五要素從戰略層、范圍層、結構層、框架層到表現層，涵蓋了從抽象目標到具體實(shí)現的每一個(gè)步驟，確保設計過(guò)程的全面性和連貫性。

結構清晰：每個(gè)層次都有明確的定義和具體的目標，幫助設計師有條不紊地進(jìn)行設計工作。

2）層層遞進(jìn)：

邏輯順序：五要素按照從抽象到具體的順序排列，確保每一步的輸出都能為下一步提供支持。這種層層遞進(jìn)的方法有助于逐步細化設計，從而減少遺漏和重復工作。

逐步細化：從戰略層的宏觀(guān)目標到表現層的具體設計，設計師能夠逐步細化用戶(hù)需求和商業(yè)目標，確保最終產(chǎn)品符合預期。

3）用戶(hù)和業(yè)務(wù)的平衡：

用戶(hù)導向：五要素框架始終關(guān)注用戶(hù)需求和體驗，確保設計的最終目標是滿(mǎn)足用戶(hù)需求。

業(yè)務(wù)目標：同時(shí)，框架也強調業(yè)務(wù)目標的重要性，幫助設計師在滿(mǎn)足用戶(hù)需求的同時(shí)，確保項目的商業(yè)成功。

4）跨學(xué)科應用：

廣泛適用：五要素框架不僅適用于網(wǎng)站和應用程序的設計，也適用于其他類(lèi)型的產(chǎn)品設計和用戶(hù)體驗項目。它的普適性使得設計師能夠在不同領(lǐng)域中靈活應用。

2. 缺點(diǎn)

1）復雜性和時(shí)間成本：

時(shí)間和資源投入：五要素框架涉及多個(gè)層次和步驟，需要大量的時(shí)間和資源進(jìn)行用戶(hù)研究、需求分析、信息架構設計、交互設計和視覺(jué)設計。對于小型項目或資源有限的團隊來(lái)說(shuō)，可能難以完全實(shí)施。

管理復雜性：多個(gè)層次和步驟的管理可能會(huì )增加項目的復雜性，特別是在團隊協(xié)作和溝通方面，可能需要更高效的管理和協(xié)調。

2）靈活性和適應性：

靈活性不足：由于框架的結構化特點(diǎn)，某些項目可能需要更加靈活和快速的設計方法。五要素框架在某些情況下可能顯得過(guò)于僵硬，難以快速適應變化。

適應性問(wèn)題：不同項目的需求和環(huán)境差異很大，五要素框架在某些特定情境下可能需要調整和適應，但這可能會(huì )導致框架的部分優(yōu)勢無(wú)法充分發(fā)揮。

3）實(shí)施難度：

經(jīng)驗要求：全面實(shí)施五要素框架需要設計師具備豐富的經(jīng)驗和多學(xué)科的知識，對于初學(xué)者或經(jīng)驗不足的團隊來(lái)說(shuō)，可能會(huì )面臨較高的實(shí)施難度。

培訓和學(xué)習曲線(xiàn)：團隊成員可能需要時(shí)間和培訓來(lái)充分理解和掌握五要素框架的各個(gè)層次和方法，這可能會(huì )增加項目的初始成本。

專(zhuān)欄作家

南設，*：南設（ID：NANSHE18），人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。專(zhuān)注設計，邏輯性強，注重體驗。分享體驗設計、人工智能開(kāi)發(fā)等。

本文原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議