以「用戶為中心」的產品設計詳述

設計一款產品的初衷可能有很多種，「某個人的個人喜好，設計一款自己喜愛的產品」、「一個技術團隊利用最前沿技術的科學發明」、「一個企業需要詮釋自己品牌與形象的產品」、「完全是領導層個人想法和意見的產品」，這其中各有優缺點，而今天我想談的是「以用戶為中心的產品」。

用戶體驗綜述

創建吸引人的、高效的用戶體驗的方法稱為「以用戶為中心的設計」。即在開發產品的每一個步驟中，都要把用戶列入考慮範圍。

• 概念 ：「產品如何與外界發生聯系並發揮作用」，也就是使用者如何 接觸 並 使用 它。
• 目的： 提高效率。任何在用戶體驗上所做的努力，都是為了「幫助人們工作得更快」和「減少他們犯錯的幾率」
• 產品分類 ：功能型的的平臺類產品，關註的是任務，所有操作都被納入一個過程，去思考人們如何完成這個過程。信息型的媒介類產品，關註的是信息，產品應該提供哪些信息，這些信息對用戶的意義是什麽。
• 用戶體驗要素 ：產品所有涉及用戶使用的部分分為五類（JJG理論），戰略層，範圍層，結構層，框架層，表現層。通過以下示例可以很容易理解。

以某習慣養成類APP示例：

• 戰略層：創建一款習慣類手機APP，使人們通過APP達到習慣養成的目的。
• 範圍層：打卡為最基本最核心功能，為了增強用戶互動增加社交功能，包括登錄、分享、社區等。需要統計功能便於用戶查看習慣養成信息。
• 結構層：APP的交互設計，分為4個主要模塊「簽到」、「發現」、「我的」、「更多」，「簽到」模塊可以編輯習慣、添加習慣、完成習慣等。
• 框架層：每個APP頁面的界面設計，例如「簽到」界面，左上角為「編輯」入口，右上角為「添加習慣」入口，界面絕大部分為習慣文字列表展示，可以完成習慣。
• 表現層：左上角為藍色「編輯」按鈕，右上角為藍色的「添加習慣」按鈕。中部為文字的習慣列表，可以左右滑動。

五個層面

戰略層

在所有講述產品相關的理論書籍中，最開始的一部分一定是企業戰略。沒錯，一個企業設計的一款產品，是一定要符合企業戰略的，不管是開拓新市場、模仿競爭對手產品、吸引低端市場、增強企業形象，產品的最初設計目標都是要符合企業戰略。

• 為什麽要依據戰略 ？只有依照戰略，我們才能知道「我們通過產品能得到什麽」，「用戶通過產品能得到什麽」，產品的設計方向不會偏差。
• 戰略目標 ：所有的戰略目標無外乎兩個，替公司賺錢、替公司省錢。企業都是逐利的，利潤才是王道，而做的那些贊助、公益、宣傳，也不過是增強企業形象，讓人們更多地去購買他們的產品。
• 用戶需求分析 ：通過用戶需求分析，我們才能知道用戶想要什麽樣的產品。方法有很多，例如「人口統計學」、建立「消費心態檔案」、「問卷調查」、「用戶訪談」、「焦點小組」等，然後創建「用戶人群畫像」，這種書籍非常之多，這裏不再詳述。
• 戰略文檔 ：一份戰略文檔是必須，在產品開發階段，戰略文檔可以幫助所有的參與者在他們工作中做出正確的選擇。
  

  範圍層

範圍確定了具體需求，即你設計的產品都包括哪些功能，要帶給用戶什麽。範圍確定的依據是符合戰略的商業需求文檔。

• 功能規格 ：功能型產品中，項目初期描述系統應該做什麽，項目末期描述系統真正完成了什麽。
• 內容需求 ：信息型產品中，內容需求通常通過一個內容管理系統來進行管理。
• 定義需求 ：在獲取用戶需求時，我們要仔細分辨用戶所描述的是否就是他們真正需要的，以下將用戶需求分為三種情況

人們講述他們想要的：在app的登錄界面，選擇第三方登錄時沒有微信，但是使用者只希望用微信登錄。

人們說出來的、所期望的不是他們想要的：每次習慣完成時忘記打開APP完成習慣。其實是APP沒有在系統通知欄或桌面添加小工具的功能，如果增加可視化工具，會解決此類大部分問題（僅針對安卓）。

人們不知道他們是否需要：當定制某個習慣例如健身後，會定期推送健身相關教程文章等，使用者能更好地完成這個習慣。

結構層

產品結構與產品經理設計的功能流程圖類似，主要描述的是產品的交互設計和信息架構。在設計產品時，要充分考慮到可能的所有用戶行為然後系統對之做出相應的相應。在設計每個環節時，我們都要考慮到用戶是否認為每一步都是合理的，即使到達某個頁面需要5步，只要每個步驟自然延續了上一個步驟中的任務，也比只有1步的突然跳轉更加合理。

• 結構方法：結構的基本單元是 節點 ，它可以小到一個數字，或者大到一個功能模塊，我們在信息架構中需要處理的是節點，而不是頁面、文檔或組件。

層級結構

又稱「樹狀結構」或「中心輻射結構」——節點與其它相關節點之間存在父級/子級的關系。每一個節點有且僅有一個父節點。

矩陣結構

允許用戶在節點與節點之間沿著兩個或更多的”維度”移動。能夠幫助帶著不同需求的用戶在相同內容中尋求各自想要的東西。例如在汽車之家中，我們可以通過品牌搜索汽車，也可以通過車型、價格等搜索。

自然結構

不遵循任何一致的模式。適合對於一些想要鼓勵用戶自由探索感覺的產品。

線性結構

連貫的語言流程。例如你目前閱讀的文章，觀看的視頻等。

• 組織原則：在最高層級使用的組織原則應該緊密地與「產品目標」和「用戶需求」相關。在結構中較低的層級，主要依據內容與功能需求。

  框架層

框架層是通過什麽樣的功能和形式來表現，通俗一點就是我們產品設計時的線框圖，或者說是界面設計。框架層提供給用戶做某些事的能力，例如登錄、退出。

• 設計原則 ：選擇正確的界面元素，讓用戶一眼就看到「最重要的東西」。例如在「微習慣」中，當用戶打開app，絕大部分內容是自己設定的習慣文字列表，用戶可以清晰地看見正在養成的習慣。而像時間、模塊導航、編輯等信息都被淡化。
• 導航設計  ：導航是提供給用戶去某個地方的能力，在購物類應用或者新聞類應用中非常多。

目標 

• 提供給用戶一種在網站間跳轉的方法
• 傳達出這些元素和他們所包含內容之間的關系
• 傳達出它的內容和用戶當前瀏覽頁面之間的關系

類型

全局導航、局部導航、輔助導航、上下文導航、友好導航、網站地圖、索引表。

• 線框圖 ：對一個頁面中所有組成部分以及它們如何結合到一起最直觀的描述。

表現層

在表現層中，所有的內容、功能和美學匯集到一起產生了一個最終的設計，它需要完成其它四個層面的目標，又要滿足用戶的感官感受。

• 感知設計類型 ：當我們使用手機端的APP產品時，感知類型包括觸覺、聽覺、視覺。由於觸覺和聽覺的實現能力有限，用戶體驗設計的大部分都是涉及視覺設計。
• 對比和一致性 ：在視覺設計中，我們用於吸引用戶註意的一個主要工具就是對比。當一個元素在設計中顯得與眾不同時，用戶就會註意到。下面這3幅圖，你第一眼看見的是哪裏？

結尾

滿足客戶的需求才是一個好的設計。而JJG在用戶體驗要素中提出的五個層面理論，是我們更加清晰地發現整個產品從最開始的設想到最終給用戶呈現的產品中需要做什麽，怎麽做，如何做好。

本文由 @escher 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議

文章來源：