設(shè)計(jì)一款產(chǎn)品的初衷可能有很多種，「某個(gè)人的個(gè)人喜好，設(shè)計(jì)一款自己喜愛的產(chǎn)品」、「一個(gè)技術(shù)團(tuán)隊(duì)利用最前沿技術(shù)的科學(xué)發(fā)明」、「一個(gè)企業(yè)需要詮釋自己品牌與形象的產(chǎn)品」、「完全是領(lǐng)導(dǎo)層個(gè)人想法和意見的產(chǎn)品」，這其中各有優(yōu)缺點(diǎn)，而今天我想談的是「以用戶為中心的產(chǎn)品」。

用戶體驗(yàn)綜述

創(chuàng)建吸引人的、高效的用戶體驗(yàn)的方法稱為「以用戶為中心的設(shè)計(jì)」。即在開發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶列入考慮范圍。

• 概念：「產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用」，也就是使用者如何接觸并使用它。
• 目的：提高效率。任何在用戶體驗(yàn)上所做的努力，都是為了「幫助人們工作得更快」和「減少他們犯錯(cuò)的幾率」
• 產(chǎn)品分類：功能型的的平臺(tái)類產(chǎn)品，關(guān)注的是任務(wù)，所有操作都被納入一個(gè)過程，去思考人們?nèi)绾瓮瓿蛇@個(gè)過程。信息型的媒介類產(chǎn)品，關(guān)注的是信息，產(chǎn)品應(yīng)該提供哪些信息，這些信息對(duì)用戶的意義是什么。
• 用戶體驗(yàn)要素：產(chǎn)品所有涉及用戶使用的部分分為五類（JJG理論），戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。通過以下示例可以很容易理解。

以某習(xí)慣養(yǎng)成類APP示例：

• 戰(zhàn)略層：創(chuàng)建一款習(xí)慣類手機(jī)APP，使人們通過APP達(dá)到習(xí)慣養(yǎng)成的目的。
• 范圍層：打卡為最基本最核心功能，為了增強(qiáng)用戶互動(dòng)增加社交功能，包括登錄、分享、社區(qū)等。需要統(tǒng)計(jì)功能便于用戶查看習(xí)慣養(yǎng)成信息。
• 結(jié)構(gòu)層：APP的交互設(shè)計(jì)，分為4個(gè)主要模塊「簽到」、「發(fā)現(xiàn)」、「我的」、「更多」，「簽到」模塊可以編輯習(xí)慣、添加習(xí)慣、完成習(xí)慣等。
• 框架層：每個(gè)APP頁面的界面設(shè)計(jì)，例如「簽到」界面，左上角為「編輯」入口，右上角為「添加習(xí)慣」入口，界面絕大部分為習(xí)慣文字列表展示，可以完成習(xí)慣。
• 表現(xiàn)層：左上角為藍(lán)色「編輯」按鈕，右上角為藍(lán)色的「添加習(xí)慣」按鈕。中部為文字的習(xí)慣列表，可以左右滑動(dòng)。

五個(gè)層面

戰(zhàn)略層

在所有講述產(chǎn)品相關(guān)的理論書籍中，最開始的一部分一定是企業(yè)戰(zhàn)略。沒錯(cuò)，一個(gè)企業(yè)設(shè)計(jì)的一款產(chǎn)品，是一定要符合企業(yè)戰(zhàn)略的，不管是開拓新市場、模仿競爭對(duì)手產(chǎn)品、吸引低端市場、增強(qiáng)企業(yè)形象，產(chǎn)品的最初設(shè)計(jì)目標(biāo)都是要符合企業(yè)戰(zhàn)略。

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

  范圍層

范圍確定了具體需求，即你設(shè)計(jì)的產(chǎn)品都包括哪些功能，要帶給用戶什么。范圍確定的依據(jù)是符合戰(zhàn)略的商業(yè)需求文檔。

• 功能規(guī)格：功能型產(chǎn)品中，項(xiàng)目初期描述系統(tǒng)應(yīng)該做什么，項(xiàng)目末期描述系統(tǒng)真正完成了什么。
• 內(nèi)容需求：信息型產(chǎn)品中，內(nèi)容需求通常通過一個(gè)內(nèi)容管理系統(tǒng)來進(jìn)行管理。
• 定義需求：在獲取用戶需求時(shí)，我們要仔細(xì)分辨用戶所描述的是否就是他們真正需要的，以下將用戶需求分為三種情況

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

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

人們不知道他們是否需要：當(dāng)定制某個(gè)習(xí)慣例如健身后，會(huì)定期推送健身相關(guān)教程文章等，使用者能更好地完成這個(gè)習(xí)慣。

結(jié)構(gòu)層

產(chǎn)品結(jié)構(gòu)與產(chǎn)品經(jīng)理設(shè)計(jì)的功能流程圖類似，主要描述的是產(chǎn)品的交互設(shè)計(jì)和信息架構(gòu)。在設(shè)計(jì)產(chǎn)品時(shí)，要充分考慮到可能的所有用戶行為然后系統(tǒng)對(duì)之做出相應(yīng)的相應(yīng)。在設(shè)計(jì)每個(gè)環(huán)節(jié)時(shí)，我們都要考慮到用戶是否認(rèn)為每一步都是合理的，即使到達(dá)某個(gè)頁面需要5步，只要每個(gè)步驟自然延續(xù)了上一個(gè)步驟中的任務(wù)，也比只有1步的突然跳轉(zhuǎn)更加合理。

• 結(jié)構(gòu)方法：結(jié)構(gòu)的基本單元是節(jié)點(diǎn)，它可以小到一個(gè)數(shù)字，或者大到一個(gè)功能模塊，我們?cè)谛畔⒓軜?gòu)中需要處理的是節(jié)點(diǎn)，而不是頁面、文檔或組件。

層級(jí)結(jié)構(gòu)

又稱「樹狀結(jié)構(gòu)」或「中心輻射結(jié)構(gòu)」——節(jié)點(diǎn)與其它相關(guān)節(jié)點(diǎn)之間存在父級(jí)/子級(jí)的關(guān)系。每一個(gè)節(jié)點(diǎn)有且僅有一個(gè)父節(jié)點(diǎn)。

矩陣結(jié)構(gòu)

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

自然結(jié)構(gòu)

不遵循任何一致的模式。適合對(duì)于一些想要鼓勵(lì)用戶自由探索感覺的產(chǎn)品。

線性結(jié)構(gòu)

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

• 組織原則：在最高層級(jí)使用的組織原則應(yīng)該緊密地與「產(chǎn)品目標(biāo)」和「用戶需求」相關(guān)。在結(jié)構(gòu)中較低的層級(jí)，主要依據(jù)內(nèi)容與功能需求。
  

  框架層

框架層是通過什么樣的功能和形式來表現(xiàn)，通俗一點(diǎn)就是我們產(chǎn)品設(shè)計(jì)時(shí)的線框圖，或者說是界面設(shè)計(jì)?？蚣軐犹峁┙o用戶做某些事的能力，例如登錄、退出。

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

目標(biāo)?

• 提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法
• 傳達(dá)出這些元素和他們所包含內(nèi)容之間的關(guān)系
• 傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系

類型

全局導(dǎo)航、局部導(dǎo)航、輔助導(dǎo)航、上下文導(dǎo)航、友好導(dǎo)航、網(wǎng)站地圖、索引表。

• 線框圖：對(duì)一個(gè)頁面中所有組成部分以及它們?nèi)绾谓Y(jié)合到一起最直觀的描述。

表現(xiàn)層

在表現(xiàn)層中，所有的內(nèi)容、功能和美學(xué)匯集到一起產(chǎn)生了一個(gè)最終的設(shè)計(jì)，它需要完成其它四個(gè)層面的目標(biāo)，又要滿足用戶的感官感受。

• 感知設(shè)計(jì)類型：當(dāng)我們使用手機(jī)端的APP產(chǎn)品時(shí)，感知類型包括觸覺、聽覺、視覺。由于觸覺和聽覺的實(shí)現(xiàn)能力有限，用戶體驗(yàn)設(shè)計(jì)的大部分都是涉及視覺設(shè)計(jì)。
• 對(duì)比和一致性：在視覺設(shè)計(jì)中，我們用于吸引用戶注意的一個(gè)主要工具就是對(duì)比。當(dāng)一個(gè)元素在設(shè)計(jì)中顯得與眾不同時(shí)，用戶就會(huì)注意到。下面這3幅圖，你第一眼看見的是哪里？

結(jié)尾

滿足客戶的需求才是一個(gè)好的設(shè)計(jì)。而JJG在用戶體驗(yàn)要素中提出的五個(gè)層面理論，是我們更加清晰地發(fā)現(xiàn)整個(gè)產(chǎn)品從最開始的設(shè)想到最終給用戶呈現(xiàn)的產(chǎn)品中需要做什么，怎么做，如何做好。

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

題圖來自PEXELS，基于CC0協(xié)議