項(xiàng)目背景

網(wǎng)師分層對(duì)平臺(tái)的重要性不言而喻，諸如阿里這類(lèi)的電商平臺(tái)都有完善的商家分級(jí)體系，明確了不同等級(jí)的權(quán)益和運(yùn)營(yíng)策略。

2019 年底 CCtalk 平臺(tái)的網(wǎng)師數(shù)量達(dá)到了一定規(guī)模，平臺(tái)的基礎(chǔ)能力建設(shè)也相對(duì)完善，因此網(wǎng)師分層的事宜被提上日程。此前我們?cè)u(píng)估網(wǎng)師的方式是按照流水，將網(wǎng)師分為普通網(wǎng)師、中部網(wǎng)師和大 V 網(wǎng)師 3 類(lèi)，不同網(wǎng)師對(duì)產(chǎn)品功能需求及運(yùn)營(yíng)要求差別很大。這種粗略的劃分方式可以幫助簡(jiǎn)單評(píng)估網(wǎng)師，但并沒(méi)有產(chǎn)品化，而且只有單一的 GMV 維度，不夠全面客觀(guān)。有些客單價(jià)較低的網(wǎng)師也有大量的購(gòu)課學(xué)生，他們對(duì)平臺(tái)的價(jià)值也高。因而我們需要推出一套綜合網(wǎng)師流水、招生數(shù)量、內(nèi)容質(zhì)量等多個(gè)維度的方法來(lái)進(jìn)行分層運(yùn)營(yíng)。

面對(duì)以上問(wèn)題，相應(yīng)的解決方案是：

• 建立商戶(hù)等級(jí)體系
• 等級(jí)權(quán)益差別化
• 增加權(quán)益購(gòu)買(mǎi)觸點(diǎn)

價(jià)值分析

既然是涉及全平臺(tái)網(wǎng)師的重大升級(jí)調(diào)整，當(dāng)然要從全局的角度來(lái)進(jìn)行價(jià)值分析。我在這個(gè)項(xiàng)目中探索了用于多角色價(jià)值分析的「三維價(jià)值分析法」，從整個(gè)關(guān)系鏈的角度來(lái)解析網(wǎng)師分層對(duì)網(wǎng)師和平臺(tái)的價(jià)值。

Step1.列出相關(guān)利益者

分別包括：CCtalk平臺(tái)、網(wǎng)師、學(xué)生。

△ 列出相關(guān)利益者

Step2.設(shè)定中心點(diǎn)并建立關(guān)系

分析連接這3種角色的關(guān)鍵點(diǎn)是什么。我們CCtalk作為一個(gè)在線(xiàn)教育平臺(tái)，最核心的因素是內(nèi)容，因而將中心點(diǎn)設(shè)定為「內(nèi)容」。（注意，如果此時(shí)是做某個(gè)具體功能相關(guān)的項(xiàng)目，那么中心點(diǎn)可以是這個(gè)具體的功能，例如「作業(yè)」或「直播」）設(shè)定中心點(diǎn)后，建立不同角色和中心點(diǎn)之間的雙向關(guān)系。

△ 設(shè)定中心點(diǎn)并建立關(guān)系

Step3.進(jìn)行全局價(jià)值分析

在上一步的關(guān)系網(wǎng)的基礎(chǔ)上，用圓弧連接相鄰角色的價(jià)值走向關(guān)系，從全局的角度進(jìn)行不同角色間的價(jià)值分析。

△ 進(jìn)行全局價(jià)值分析

從上面的三維圖中可以看出網(wǎng)師分層對(duì)于平臺(tái)和網(wǎng)師的價(jià)值。
對(duì)網(wǎng)師來(lái)說(shuō)，有助于：了解成長(zhǎng)路徑，獲得更多產(chǎn)品運(yùn)營(yíng)支持，獲取更多功能權(quán)益。

對(duì)平臺(tái)來(lái)說(shuō)，可以：篩選網(wǎng)師，激勵(lì)網(wǎng)師自驅(qū)動(dòng)，增加收入。另外，還有一些間接的價(jià)值，包括通過(guò)督促網(wǎng)師生產(chǎn)高質(zhì)量的內(nèi)容來(lái)提升平臺(tái)的價(jià)值，通過(guò)督促網(wǎng)師積極招生來(lái)擴(kuò)大用戶(hù)規(guī)模。

△ 網(wǎng)師分層對(duì)于平臺(tái)和網(wǎng)師的價(jià)值

項(xiàng)目拆解

剛接到需求時(shí)，我內(nèi)心的 OS 是：大項(xiàng)目！概念大，范圍廣，都有點(diǎn)不知從哪里入手。

冷靜下來(lái)分析，網(wǎng)師分層本質(zhì)是一套針對(duì)商戶(hù)端的激勵(lì)體系。從下往上拆解：由底層商戶(hù)活躍度來(lái)計(jì)算經(jīng)驗(yàn)值，根據(jù)經(jīng)驗(yàn)值劃分商戶(hù)等級(jí)，并賦予不同等級(jí)不同的權(quán)益，權(quán)益包括教學(xué)核心功能：直播時(shí)長(zhǎng)，素材存儲(chǔ)空間，課程人數(shù)等。再向上衍生到不同權(quán)益對(duì)應(yīng)的使用場(chǎng)景，以及權(quán)益的擴(kuò)展方式。

△ 分層拆解

從設(shè)計(jì)層面，分為信息展示和場(chǎng)景觸達(dá)兩部分。這么一看，其實(shí)又挺簡(jiǎn)單。

設(shè)計(jì)落地

由于項(xiàng)目涉及的底層邏輯多，時(shí)間周期跨度大，因此拆分成 3個(gè)小版本來(lái)實(shí)現(xiàn)：商戶(hù)權(quán)益改造，經(jīng)驗(yàn)值等級(jí)底層 & 商戶(hù)等級(jí)外顯。前期的功能實(shí)現(xiàn)后，先預(yù)埋在版本中。等到經(jīng)驗(yàn)等級(jí)上線(xiàn)時(shí)統(tǒng)一發(fā)布。其中經(jīng)驗(yàn)值等級(jí)底層項(xiàng)目是純技術(shù)，不涉及設(shè)計(jì)。

所以下面將從功能權(quán)益分層和等級(jí)經(jīng)驗(yàn)值外顯兩部分來(lái)講解具體的設(shè)計(jì)過(guò)程。

Part1. 功能權(quán)益分層

功能權(quán)益分層是權(quán)益的使用層面，包括多場(chǎng)景觸達(dá)和引導(dǎo)購(gòu)買(mǎi)增量包。設(shè)計(jì)時(shí)分為場(chǎng)景梳理→設(shè)計(jì)要點(diǎn)→細(xì)化直播場(chǎng)景→具體設(shè)計(jì)這 4 步來(lái)實(shí)施。

Step A.場(chǎng)景梳理

拆解權(quán)益的生命周期，可分為三個(gè)階段：充足可用，即將不足，已用盡。而功能的使用場(chǎng)景——直播，也分為三個(gè)階段：直播前，直播中，直播后。

Step B.設(shè)計(jì)要點(diǎn)

將權(quán)益生命周期和直播場(chǎng)景結(jié)合進(jìn)行交叉分析，列出設(shè)計(jì)要點(diǎn)和具體的設(shè)計(jì)拆解。

△ 不同階段的設(shè)計(jì)要點(diǎn)及拆解

Step C.細(xì)化直播場(chǎng)景

發(fā)起直播的入口很多，除了「立即直播」的主場(chǎng)景之外，還有由預(yù)告進(jìn)入直播的 3 種場(chǎng)景，如果在每個(gè)入口都做功能禁用判斷的話(huà)，不僅邏輯會(huì)很復(fù)雜，開(kāi)發(fā)實(shí)現(xiàn)起來(lái)成本也比較大。

于是將直播前的流程細(xì)化，發(fā)現(xiàn)「直播檢測(cè)」是進(jìn)入直播間的必經(jīng)環(huán)節(jié)，因此將功能禁用的判斷節(jié)點(diǎn)縮減為 2 處：「立即直播」&「直播檢測(cè)」。

△ 細(xì)化直播場(chǎng)景

Step D.具體設(shè)計(jì)

有了前期的分析后，具體設(shè)計(jì)環(huán)節(jié)就相對(duì)容易了。下面以點(diǎn)擊「立即直播」時(shí)的功能余量判斷為例。

點(diǎn)擊「立即直播」按鈕，在按鈕原有的邏輯上加上新的判斷邏輯，此處要注意寫(xiě)清楚他們之間的優(yōu)先級(jí)關(guān)系。如果在不了解背景的情況下，很可能就直接寫(xiě)點(diǎn)擊按鈕進(jìn)行可用直播時(shí)長(zhǎng)的判斷，那需求宣講的時(shí)候開(kāi)發(fā)就會(huì)問(wèn)你，和原來(lái)按鈕上的邏輯是什么關(guān)系呢，此時(shí)就會(huì)一陣緊張。

△ 立即直播時(shí)判斷剩余可用直播時(shí)長(zhǎng)

Part2. 等級(jí)經(jīng)驗(yàn)值

等級(jí)經(jīng)驗(yàn)值屬于展示層。對(duì)網(wǎng)師用戶(hù)來(lái)說(shuō)，最重要的是了解自己當(dāng)前處于哪個(gè)等級(jí)以及相應(yīng)的權(quán)益有哪些。對(duì)平臺(tái)來(lái)說(shuō)，除了明確每個(gè)等級(jí)及相應(yīng)的權(quán)益，重要的是要引導(dǎo)網(wǎng)師升級(jí)，以激發(fā)他們的自驅(qū)力。

由此推導(dǎo)出相應(yīng)的設(shè)計(jì)方法：錨定目標(biāo)、降低門(mén)檻和利益點(diǎn)吸引。

△ 設(shè)計(jì)方法

在設(shè)計(jì)方法的指導(dǎo)下進(jìn)行落地，分為網(wǎng)師后臺(tái)首頁(yè)的展示，以及等級(jí)詳情頁(yè)的設(shè)計(jì)兩部分。

網(wǎng)師后臺(tái)首頁(yè)-個(gè)人信息模塊的展示

由于等級(jí)和權(quán)益掛鉤，涉及網(wǎng)師切身利益，因而在網(wǎng)師后臺(tái)首頁(yè)的個(gè)人信息模塊，增加當(dāng)前的經(jīng)驗(yàn)值和相應(yīng)等級(jí)的展示。同時(shí)，通過(guò)利益點(diǎn)吸引等方式，引導(dǎo)網(wǎng)師向下一個(gè)等級(jí)努力。

△ 個(gè)人信息模塊展示

等級(jí)詳情頁(yè)的設(shè)計(jì)

點(diǎn)擊等級(jí)進(jìn)入詳情頁(yè)，除了 Lv0 是將所有權(quán)益無(wú)差別展示，其他等級(jí)都是優(yōu)先展示新增部分，包括新獲得的普通權(quán)益和附贈(zèng)的高級(jí)功能。另外，用「箭頭」和「NEW」的圖標(biāo)幫助用戶(hù)區(qū)分是老權(quán)益的內(nèi)容升級(jí)，還是新增的權(quán)益。

總結(jié)反思

1. 前期缺乏深入調(diào)研

由于涉及網(wǎng)師的切身利益，因而此功能受到了網(wǎng)師們前所未有的關(guān)注。上線(xiàn)前一周，運(yùn)營(yíng)以郵件、通知等形式向網(wǎng)師預(yù)熱，3 月 5 日會(huì)上線(xiàn)這么一個(gè)功能。于是還沒(méi)上線(xiàn)就有網(wǎng)師來(lái)咨詢(xún)?cè)谀睦锟梢圆榭?。剛上線(xiàn)就收到了大量的用戶(hù)反饋，網(wǎng)師反饋群里的消息簡(jiǎn)直是秒速級(jí)地在刷屏。

其中，網(wǎng)師對(duì)每月直播時(shí)長(zhǎng)限制的反響最為強(qiáng)烈，部分網(wǎng)師表示平臺(tái)應(yīng)該鼓勵(lì)多直播，不能接受對(duì)直播時(shí)長(zhǎng)的限制。因?yàn)橹苯雨P(guān)系到上課這個(gè)核心功能，時(shí)長(zhǎng)不夠課都上不了，網(wǎng)師們的言辭非常激烈。所以我們又重新評(píng)估了平臺(tái)的直播成本，經(jīng)過(guò)深入討論，全面放開(kāi)了每月的直播可用時(shí)長(zhǎng)限制。

帶來(lái)的反思是，如果前期有通過(guò)問(wèn)卷、訪(fǎng)談等方式進(jìn)行深入的用戶(hù)調(diào)研，了解他們對(duì)核心權(quán)益的態(tài)度，那么在進(jìn)行權(quán)益設(shè)置時(shí)就能有更全面的考量。

2. 中高等級(jí)跨度太大，缺乏激勵(lì)效果

游戲任務(wù)的上手難度曲線(xiàn)一般是先平緩，再慢慢陡峭，越往上難度越大。我們的等級(jí)體系其實(shí)也是這個(gè)邏輯。初級(jí)到中級(jí)還較為容易，但再往上要非常難，要經(jīng)過(guò)長(zhǎng)時(shí)間的積累，一看就無(wú)望，難有激勵(lì)效果。

因而我們之后的優(yōu)化方向是在相鄰等級(jí)中間設(shè)定一些小目標(biāo)，達(dá)到可以提前贈(zèng)送下一等級(jí)的新權(quán)益，以此來(lái)提高激勵(lì)效果。

文章來(lái)源：優(yōu)設(shè)    作者：魚(yú)游設(shè)計(jì)

手把手教你 「如何 7 步從 0 ～ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過(guò)，設(shè)計(jì)風(fēng)格明確，用戶(hù)粘性高的軟件！」

據(jù)不完全了解，身邊大部分的 UI 同事都從 0 到 1 參與過(guò)一款或多款軟件的設(shè)計(jì)，設(shè)計(jì)過(guò)程中不知道你是否有過(guò)這樣的疑惑：

• 設(shè)計(jì)稿都做了 100 版了，但產(chǎn)品經(jīng)理還是不滿(mǎn)意，是我設(shè)計(jì)不行嗎？
• 產(chǎn)品目標(biāo)、用戶(hù)目標(biāo)都標(biāo)得清清楚楚了，但總是找不好設(shè)計(jì)關(guān)鍵詞，來(lái)來(lái)去去只會(huì)用「年輕化、輕量化」？
• 產(chǎn)品目標(biāo)明確了，設(shè)計(jì)關(guān)鍵詞也有了，但為什么做出來(lái)的稿子不是太概念，就是跟競(jìng)品太像呢？

在解決這些困惑之后，我總結(jié)了一套自用的，適合從 0 ～ 1 進(jìn)行軟件設(shè)計(jì)或項(xiàng)目改版的方法 ，并在其他項(xiàng)目上進(jìn)行了二次驗(yàn)證。

以實(shí)踐項(xiàng)目 —— 有道少兒詞典為例，上線(xiàn)一年期間，用戶(hù)次日留存峰值 36% 以上，也非常幸運(yùn)，被 App Store Today 推薦 4 次，App Store 編輯推薦 8 次，被 App Store 納入 2019 本土優(yōu)秀 App 盤(pán)點(diǎn)中，同時(shí)被預(yù)裝到蘋(píng)果線(xiàn)下直營(yíng)店，作為樣機(jī)體驗(yàn)軟件之一。所以，這個(gè)方法親測(cè)有效！

這篇文章，通過(guò)分析如何解決類(lèi)似「產(chǎn)品經(jīng)理不滿(mǎn)意、設(shè)計(jì)關(guān)鍵詞不對(duì)、設(shè)計(jì)風(fēng)格無(wú)區(qū)別」這些問(wèn)題，整理出 7 個(gè)幫你從 0 ～ 1 設(shè)計(jì)一款軟件的步驟。

文章較長(zhǎng)，大概需要花費(fèi) 15 分鐘，建議大家先看大綱，優(yōu)先閱讀符合自身情況的部分。

產(chǎn)品經(jīng)理為什么不滿(mǎn)意？

從 0 ～ 1 進(jìn)行軟件設(shè)計(jì)，免不了要多出幾個(gè)設(shè)計(jì)稿，但做了 100 稿，產(chǎn)品經(jīng)理對(duì)頁(yè)面設(shè)計(jì)還是不滿(mǎn)意的話(huà)，很有可能有 2 點(diǎn)原因：

原因 1：目標(biāo)不明確

一拿到需求就開(kāi)始做，很容易忽略需求背后的目標(biāo)，從 0 到 1 做一款新軟件更是要了解業(yè)務(wù)目標(biāo)和用戶(hù)目標(biāo)。

在提出解決辦法前，我們需要先捋清楚以下 2 個(gè)問(wèn)題：

為什么要了解目標(biāo)？

公司開(kāi)發(fā)軟件是為了達(dá)到某些目標(biāo)或是實(shí)現(xiàn)某個(gè)目的的，只有了解目標(biāo)才能更好地為公司創(chuàng)造價(jià)值。

什么是業(yè)務(wù)需求、業(yè)務(wù)目標(biāo)和用戶(hù)目標(biāo)？

平時(shí)產(chǎn)品經(jīng)理跟我們說(shuō)，要設(shè)計(jì)一個(gè)頁(yè)面，設(shè)計(jì) 一個(gè)流程，這就是一個(gè)業(yè)務(wù)需求，而這個(gè)需求的背后，能夠解釋清楚這個(gè)需求是為了什么，要做到什么程度，這就是業(yè)務(wù)目標(biāo)（通常包括用什么手段，給用戶(hù)帶來(lái)什么價(jià)值，達(dá)到什么目的）。而軟件的目標(biāo)用戶(hù)，他們?cè)谝粋€(gè)具體的時(shí)間、地點(diǎn)、環(huán)境下做了什么操作，想達(dá)到什么程度，滿(mǎn)足自己的什么要求，這可以理解為用戶(hù)目標(biāo)。

解決辦法 ：多使用 「為什么+動(dòng)詞」 的問(wèn)法，向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶(hù)目標(biāo)。

從 0 ～1 做軟件需要了解的業(yè)務(wù)目標(biāo)和用戶(hù)目標(biāo)，我們都可以從產(chǎn)品經(jīng)理那里得到。

少兒詞典的產(chǎn)品經(jīng)理很早就給出了業(yè)務(wù)目標(biāo)和用戶(hù)目標(biāo)。但，當(dāng)我們需要更多細(xì)節(jié)的時(shí)候，可以使用「為什么+動(dòng)詞」這樣的問(wèn)法。例如：

• 「我們要做一個(gè)少兒查詞軟件，定位是一款擁有權(quán)威釋義背書(shū)，在視、聽(tīng)、觸方面打造良好體驗(yàn)，緊扣教材和教學(xué)大綱的適合少兒和家長(zhǎng)使用的伴學(xué)詞典。你來(lái)做吧！」「為什么做這個(gè)？」
• 「現(xiàn)在兒童教育KOL越來(lái)越多，很多家長(zhǎng)都很關(guān)心k12教育問(wèn)題。市面上的很多產(chǎn)品都不太適合孩子使用」
• 「為什么這樣的定位可以滿(mǎn)足用戶(hù)需求呢？」「為什么是適合少兒和家長(zhǎng)使用呢？」
• 「為什么……」

在少兒詞典項(xiàng)目中

• 我們的業(yè)務(wù)目標(biāo)是：一款擁有權(quán)威釋義背書(shū)，在視、聽(tīng)、觸方面打造良好體驗(yàn)，緊扣教材和教學(xué)大綱的適合少兒和家長(zhǎng)使用的伴學(xué)詞典。
• 目標(biāo)用戶(hù)群體是：小學(xué) 1~6 年級(jí)的孩子和他們的家長(zhǎng)。
• 用戶(hù)目標(biāo)是：當(dāng)小學(xué)低年級(jí)的孩子在家學(xué)習(xí)的時(shí)候，他們的家長(zhǎng)需要一款軟件，能緩解家長(zhǎng)伴學(xué)的壓力。高年級(jí)的孩子需要一款軟件，為他們提供準(zhǔn)確教學(xué)。

原因 2 ：沒(méi)有對(duì)產(chǎn)品關(guān)鍵詞形成共識(shí)

我們既了解產(chǎn)品的業(yè)務(wù)目標(biāo)，也知道用戶(hù)目標(biāo)的情況下，方案還是被 pass 的話(huà)，可能是因?yàn)槟憬o出的方案和產(chǎn)品經(jīng)理想要的不是同一個(gè)東西。為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢？怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么？我們可以用產(chǎn)品關(guān)鍵詞來(lái)回答這個(gè)問(wèn)題。

為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢？

我們常見(jiàn)的業(yè)務(wù)目標(biāo)的內(nèi)容是很長(zhǎng)的，用戶(hù)目標(biāo)的內(nèi)容也是很長(zhǎng)的，在這種所有已知內(nèi)容都很長(zhǎng)的情況下，如果沒(méi)有準(zhǔn)確理解內(nèi)容，沒(méi)有對(duì)重點(diǎn)內(nèi)容達(dá)成一致，就很容易產(chǎn)生偏差。例如我要向你描述一位美女，她的頭發(fā)很柔順，臉蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我們腦海中想的不是同一個(gè)美女。但是，如果我跟你說(shuō)，這是一個(gè)跟芭比娃娃很像的美女的時(shí)候，我們腦海中的形象會(huì)接近很多。

怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么？

就像設(shè)計(jì)師在進(jìn)行頁(yè)面設(shè)計(jì)時(shí)，需要設(shè)計(jì)關(guān)鍵詞一樣，產(chǎn)品經(jīng)理在描述自己的業(yè)務(wù)目標(biāo)的時(shí)候，也需要能概括業(yè)務(wù)目標(biāo)重點(diǎn)，突出賣(mài)點(diǎn)的產(chǎn)品關(guān)鍵詞，這個(gè)產(chǎn)品關(guān)鍵詞能幫助設(shè)計(jì)師弄清楚產(chǎn)品經(jīng)理想要的東西。

部分產(chǎn)品經(jīng)理為了方便大家達(dá)成共識(shí)，會(huì)早早亮出產(chǎn)品關(guān)鍵詞，如果當(dāng)你們的產(chǎn)品經(jīng)理沒(méi)有辦法提供產(chǎn)品關(guān)鍵詞的時(shí)候，我們要學(xué)會(huì)在討論中找到。

解決辦法 ：從業(yè)務(wù)目標(biāo)開(kāi)始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞

從業(yè)務(wù)目標(biāo)和用戶(hù)目標(biāo)開(kāi)始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，在討論的過(guò)程中，我們可以留意產(chǎn)品多次提到的幾個(gè)形容詞，寫(xiě)下來(lái)，然后跟產(chǎn)品反復(fù)核對(duì)確認(rèn)，最后雙方確認(rèn)且保留下來(lái)的這 3～4 個(gè)形容詞，就是這個(gè)項(xiàng)目的產(chǎn)品關(guān)鍵詞。

少兒詞典的產(chǎn)品關(guān)鍵詞是：權(quán)威內(nèi)容，寓教于樂(lè)，適合孩子使用。這些關(guān)鍵詞被我貼在屏幕的顯眼處，就怕自己哪天忘記了。

設(shè)計(jì)關(guān)鍵詞為什么總是找不對(duì)

尋找設(shè)計(jì)關(guān)鍵詞，是設(shè)計(jì)師非常熟悉的步驟，但常常也在這里翻車(chē)，甚至還會(huì)出現(xiàn)，不管做什么軟件，反反復(fù)復(fù)就那幾個(gè)關(guān)鍵詞的情況，我們可以把原因歸結(jié)為：

原因：對(duì)用戶(hù)不夠了解

為什么不了解用戶(hù)會(huì)導(dǎo)致關(guān)鍵詞找不對(duì)？

我們的用戶(hù)在選擇軟件、使用軟件的時(shí)候，了解到的是軟件的設(shè)計(jì)、體驗(yàn)和功能。用戶(hù)下載軟件時(shí)，他們已有的認(rèn)知會(huì)影響他們對(duì)軟件的幻想。就像給小男孩的衣服是天藍(lán)色，小女孩的衣服是嫩粉色一樣，如果用戶(hù)想要一件天藍(lán)色的衣服，而我們給他展示的是深藍(lán)色或是嫩粉色的衣服，這都會(huì)讓用戶(hù)產(chǎn)生疑惑甚至離開(kāi)。因此，如果對(duì)用戶(hù)了解不準(zhǔn)確，會(huì)導(dǎo)致我們輸出錯(cuò)誤的設(shè)計(jì)關(guān)鍵詞。

而了解目標(biāo)用戶(hù)是又一件復(fù)雜的事情。

首先，我們的目標(biāo)用戶(hù)可能是一類(lèi)人，如有道詞典，下載軟件用戶(hù)和使用用戶(hù)大概率是同一個(gè)人。目標(biāo)用戶(hù)也有可能是兩類(lèi)人或是更多，如少兒詞典，下載用戶(hù)是家長(zhǎng)，使用用戶(hù)是家長(zhǎng)和孩子，企業(yè)協(xié)作軟件也類(lèi)似。

從接觸軟件，下載軟件，使用軟件，到判斷是否繼續(xù)使用軟件，不同的階段的目標(biāo)用戶(hù)是不一樣的，目標(biāo)用戶(hù)在不同階段的需求也是不一樣的。

其次，開(kāi)發(fā)軟件的周期是很長(zhǎng)的，在開(kāi)發(fā)軟件的過(guò)程中，我們的用戶(hù)在不斷地接收新的知識(shí)和觀(guān)點(diǎn)，用戶(hù)的喜好，認(rèn)知可能會(huì)發(fā)生很大的變化。

因此，為了更好地了解用戶(hù)，我們需要找到用戶(hù)跟軟件之間的交互關(guān)系，以及影響用戶(hù)喜好的因素。一共有 2 個(gè)步驟：

步驟 1. 分析不同用戶(hù)跟軟件之間的接觸點(diǎn)，從未來(lái)趨勢(shì)和用戶(hù)當(dāng)前認(rèn)知角度收集用戶(hù)資料

在這一步驟中，我們加入了 2 個(gè)概念，接觸點(diǎn)和未來(lái)趨勢(shì)。

什么是接觸點(diǎn)？

接觸點(diǎn)指的是用戶(hù)與產(chǎn)品發(fā)生交互的關(guān)鍵點(diǎn)，用來(lái)捋清楚我們剛剛提到 「用戶(hù)跟軟件之間的交互關(guān)系」。以少兒詞典為例，家長(zhǎng)和軟件之間的接觸點(diǎn)，可以羅列為：家長(zhǎng)聽(tīng)說(shuō)少兒詞典 – 到應(yīng)用中心下載軟件 – 打開(kāi)軟件 – 使用軟件……可見(jiàn)要想打造一款用戶(hù)好評(píng)度高的好產(chǎn)品，僅僅優(yōu)化軟件的體驗(yàn)是不夠的。

為什么要從未來(lái)趨勢(shì)和用戶(hù)當(dāng)前認(rèn)知角度去收集用戶(hù)資料？

剛剛有提到新軟件的周期是較長(zhǎng)的，前期定好的風(fēng)格、關(guān)鍵詞等，到了開(kāi)發(fā)上線(xiàn)后卻不適用了，既浪費(fèi)人力，也浪費(fèi)資源，因此要考慮未來(lái)趨勢(shì)對(duì)用戶(hù)的影響。同時(shí)，用戶(hù)在選擇軟件的時(shí)候，已有的喜好/預(yù)期/經(jīng)驗(yàn)等用戶(hù)認(rèn)知會(huì)影響用戶(hù)對(duì)軟件的判斷。就像大家想到夏天的冷飲時(shí)，腦海中會(huì)浮現(xiàn)冰塊、西瓜等元素，因此雪碧、西瓜等符合用戶(hù)對(duì)夏天認(rèn)知的食品在天氣炎熱時(shí)會(huì)熱銷(xiāo)，但是受到大部分買(mǎi)家越來(lái)越注重卡路里這一未來(lái)趨勢(shì)的影響，低卡的西瓜冷飲也可能在未來(lái)一段時(shí)間大賣(mài)。

接觸點(diǎn)和未來(lái)趨勢(shì)、用戶(hù)認(rèn)知之間有什么關(guān)系？

了解用戶(hù)接觸點(diǎn)之后，我們就可以猜測(cè)用戶(hù)在這一接觸點(diǎn)的需求和心理，加入未來(lái)趨勢(shì)和用戶(hù)認(rèn)知，能讓我們做出來(lái)的東西更符合用戶(hù)預(yù)期。

尋找接觸點(diǎn)。我們了解到，少兒詞典的目標(biāo)用戶(hù)群體是 1～6 年級(jí)的學(xué)生和他們的家長(zhǎng)，即 6～12 歲孩子，和 30～44 歲家長(zhǎng)。然后，我們粗略地將用戶(hù)的接觸點(diǎn)劃分為，篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件，孩子、家長(zhǎng)跟接觸點(diǎn)之間的關(guān)系就可以展示為：

孩子是軟件查詢(xún)、練習(xí)、核心功能體驗(yàn)者，家長(zhǎng)是內(nèi)容審核者、軟件篩選者、伴學(xué)時(shí)軟件使用者。

找到接觸點(diǎn)之后，我們還需要把影響用戶(hù)認(rèn)知的內(nèi)容具象化。

例如，我們想了解夏天做什么口味的飲品更好，我們可以從夏日飲品口味銷(xiāo)量排行榜，夏日新品類(lèi)型，夏日廣告等角度來(lái)獲得更清晰的用戶(hù)認(rèn)知。應(yīng)用到少兒詞典中就是，家長(zhǎng)在篩選軟件時(shí)，老師的要求，未來(lái)孩子考試的內(nèi)容、日常輔導(dǎo)內(nèi)容、大 V 推薦的內(nèi)容等會(huì)影響家長(zhǎng)對(duì)下載軟件的判斷。每個(gè)接觸點(diǎn)都可以使用這樣的方式，來(lái)聯(lián)想更多影響用戶(hù)認(rèn)知的內(nèi)容。然后我們將得到類(lèi)似下面的表格：

根據(jù)表格，我收集了 近 10 頁(yè)的用戶(hù)信息

步驟 2. 提取收集到的信息，并放入四象限中，總結(jié)出2～4個(gè)視覺(jué)關(guān)鍵詞、體驗(yàn)關(guān)鍵詞

雜亂無(wú)序的信息只有經(jīng)過(guò)歸納之后才能被大家使用。

怎么歸納總結(jié)雜亂的信息呢？

UI 設(shè)計(jì)師都清楚，在進(jìn)行界面設(shè)計(jì)時(shí)，大標(biāo)題、縮進(jìn)、分層等排版方式能讓我們的頁(yè)面看起來(lái)更清晰易讀。處理雜亂的信息也同理，要做的是找到信息的重點(diǎn)，然后把信息歸類(lèi)，最后再用一句對(duì)內(nèi)容進(jìn)行總結(jié)，方便大家理解。應(yīng)用到我們提取關(guān)鍵詞的環(huán)節(jié)中就是，挑選重要信息、放入四象限中、總結(jié)出能歸納這些信息的關(guān)鍵詞。

挑選重要信息。以家長(zhǎng)篩選軟件為例，當(dāng)我們將熱門(mén)大 V 推薦的教學(xué)方法、內(nèi)容，進(jìn)行整理的時(shí)候，會(huì)發(fā)現(xiàn)美學(xué)、樂(lè)感、編程、外文圖書(shū)、兒童心理教育、英文教學(xué)方法（自然拼讀）等內(nèi)容出現(xiàn)的頻率很高，在一堆內(nèi)容中挑選跟少兒詞典相關(guān)的內(nèi)容，如美學(xué)、外文圖書(shū)、兒童心理教育等。

放入四象限中。在這一方法中，我們將四象限劃分為設(shè)計(jì)和用戶(hù)認(rèn)知 2 個(gè)方向，其中設(shè)計(jì)劃分為視覺(jué)風(fēng)格和體驗(yàn)風(fēng)格，用戶(hù)認(rèn)知?jiǎng)澐譃楫?dāng)前認(rèn)知和未來(lái)趨勢(shì) 。以剛剛挑選的兒童美學(xué)教育為例，這是一個(gè)屬于未來(lái)家長(zhǎng)會(huì)越來(lái)越關(guān)注的少兒視覺(jué)發(fā)展方向，所以我們放在視覺(jué)風(fēng)格、未來(lái)趨勢(shì)這一象限中。其他內(nèi)容也類(lèi)似，不斷地提取出現(xiàn)頻率高、用戶(hù)熱點(diǎn)高的內(nèi)容，并根據(jù)內(nèi)容類(lèi)型放入四象限中

總結(jié)出能歸納這些信息的關(guān)鍵詞。以視覺(jué)和未來(lái)趨勢(shì)象限為例，我們收集到大 V 的美學(xué)教育，未來(lái)的課本發(fā)展趨勢(shì)，小學(xué)建筑風(fēng)格發(fā)展趨勢(shì)，他們都有一個(gè)特點(diǎn)，顏色柔和無(wú)攻擊，色彩豐富，因此，我們總結(jié)出一個(gè)視覺(jué)關(guān)鍵詞是柔和多彩。

其他內(nèi)容也采用相同的方法進(jìn)行總結(jié)，少兒詞典的視覺(jué)關(guān)鍵詞是柔和多彩，輕質(zhì)感，親和陪伴，體驗(yàn)關(guān)鍵詞是，探索多變，感官刺激和重復(fù)熟悉。

為什么做出來(lái)的設(shè)計(jì)稿不是太概念就是沒(méi)風(fēng)格？

視覺(jué)關(guān)鍵詞出來(lái)了，產(chǎn)品的業(yè)務(wù)目標(biāo)也出來(lái)了，從關(guān)鍵詞到頁(yè)面樣式的邏輯也很?chē)?yán)謹(jǐn)，但出來(lái)的風(fēng)格卻會(huì)覺(jué)得跟關(guān)鍵詞不太搭，或是跟競(jìng)品差異不大，在多款 App 實(shí)踐后，我們發(fā)現(xiàn)可能是這樣的原因：

沒(méi)有把關(guān)鍵詞的作用發(fā)揮出來(lái)

引用一句說(shuō)爛了的名言 「一千個(gè)人眼中就有一千個(gè)哈姆雷特」。大家在對(duì)關(guān)鍵詞的理解是有差異的，以「年輕」為例子，一款針對(duì)活力的年輕人的衣服和一款針對(duì)潮流的年輕人的衣服，設(shè)計(jì)風(fēng)格上可能是隔好幾條街的。因此，僅僅得到幾個(gè)視覺(jué)關(guān)鍵詞和體驗(yàn)關(guān)鍵詞還不足以讓我們找準(zhǔn)方向，我們還需要將關(guān)鍵詞組合和具體化。一共有 2 個(gè)步驟：

步驟 1. 分別組合產(chǎn)品關(guān)鍵詞和視覺(jué)關(guān)鍵詞，產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，找到同時(shí)滿(mǎn)足 2 組關(guān)鍵詞的規(guī)則

為什么將關(guān)鍵詞結(jié)合能讓關(guān)鍵詞的作用發(fā)揮出來(lái)呢？

我們的目的是要做一款滿(mǎn)足產(chǎn)品需求，符合用戶(hù)認(rèn)知的軟件。

從問(wèn)題 1 和問(wèn)題 2 中，我們得到了符合產(chǎn)品需求的產(chǎn)品關(guān)鍵詞，和符合用戶(hù)認(rèn)知的視覺(jué)關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，想要同時(shí)滿(mǎn)足產(chǎn)品需求和用戶(hù)認(rèn)知，我們需要找到他們的重合點(diǎn)。如下圖所示，將產(chǎn)品關(guān)鍵詞和視覺(jué)關(guān)鍵詞、體驗(yàn)關(guān)鍵詞分別結(jié)合，這樣的出來(lái)的規(guī)則就能最大限度地符合我們的要求，既滿(mǎn)足產(chǎn)品需求，又符合用戶(hù)認(rèn)知。

具體怎么做呢？下面將分別從視覺(jué)和體驗(yàn)角度舉例子。

視覺(jué)角度，以權(quán)威內(nèi)容和柔和多彩結(jié)合為例：

「權(quán)威內(nèi)容」 要求我們輸出的內(nèi)容是符合教材，符合老師標(biāo)準(zhǔn)的，內(nèi)容是準(zhǔn)確無(wú)誤的、來(lái)源是可靠的；「柔和多彩」 要求我們?cè)谶M(jìn)行頁(yè)面設(shè)計(jì)的時(shí)候減少大面積顏色的使用，色彩柔和，且顏色多樣。

將兩者結(jié)合，我們得到的規(guī)則是：

• 市面上的語(yǔ)文和英語(yǔ)教材以橙色封面為主，因此軟件把橙色作為主色，僅在重點(diǎn)區(qū)域使用橙色；
• 展示內(nèi)容要準(zhǔn)確，在牛津內(nèi)容布局上參考《牛津小學(xué)生》字典，中文字體采用跟教材相似的文鼎新中楷，英文字體采用跟衡水體相似的 Averta Std；
• 參考大 V 推薦的繪本、動(dòng)畫(huà)片常用的顏色，將顏色定為橙色、黃色、藍(lán)色和綠色，降低顏色飽和度；
• 參考繪本的圖案，選擇圓形作為主要的形狀，加入柔和色彩，使用深色和淺色疊加的圓形；
• ……

根據(jù)這些內(nèi)容，我們將得到下面的 4 個(gè)顏色和圓形疊加的形式。（ps：通過(guò)這樣的形式確定的是規(guī)則，如：以橙色為主結(jié)合另外 3 個(gè)顏色，圓形，使用深淺色搭配。具體顏色和疊加形式需要在具體頁(yè)面中進(jìn)行調(diào)整）

體驗(yàn)角度，以權(quán)威內(nèi)容和探索多變?yōu)槔?

體驗(yàn)上，「權(quán)威內(nèi)容」要求我們的操作形式是跟老師的教學(xué)相似，學(xué)習(xí)方法需要參考成熟且有效的方法；「探索多變」要求我們?cè)诮换バ问缴峡梢圆捎枚喾N形式，給孩子探索未知的機(jī)會(huì)，交互形式要符合兒童操作習(xí)慣，如涂抹、翻轉(zhuǎn)、拖拉等

將兩者結(jié)合，我們得到的規(guī)則是：

• 中文字體跟寫(xiě)，手寫(xiě)涂抹交互形式，添加錯(cuò)誤抖動(dòng)反饋；
• 單詞記憶，參考如師通學(xué)習(xí)方法，采用卡片翻轉(zhuǎn)形式，將單詞和圖片內(nèi)容分離；
• 英文跟讀，采用表情代替評(píng)分機(jī)制；
• ……

其他幾個(gè)關(guān)鍵詞的結(jié)合也是使用這樣的形式，這里就不一一展開(kāi)。下圖是少兒詞典的視覺(jué)關(guān)鍵詞和產(chǎn)品關(guān)鍵詞結(jié)合后的樣式。

步驟 2. 選擇復(fù)雜的核心頁(yè)面，把具象化的體驗(yàn)規(guī)則、視覺(jué)規(guī)則融進(jìn)頁(yè)面中，確定設(shè)計(jì)風(fēng)格

規(guī)則梳理出來(lái)后，我們就要挑選一些重要頁(yè)面進(jìn)行風(fēng)格嘗試，以結(jié)構(gòu)復(fù)雜的中文查詞單字結(jié)果頁(yè)為例：

分析小學(xué)一年級(jí)到六年級(jí)的考試內(nèi)容，我們了解到部首、筆順筆畫(huà)、跟寫(xiě)、發(fā)音等漢字的基礎(chǔ)信息是低年級(jí)用戶(hù)（小學(xué)三年級(jí)及以下）會(huì)使用到，他們要求信息完整且準(zhǔn)確；像詞組、造句這些信息則是針對(duì)高年級(jí)學(xué)生，要求快速準(zhǔn)確定位到具體的內(nèi)容板塊。

分析完內(nèi)容結(jié)構(gòu)后，我們就需要根據(jù)內(nèi)容布局，加入表格中總結(jié)的體驗(yàn)規(guī)則：

• 重復(fù)熟悉，針對(duì)低年級(jí)用戶(hù)的使用習(xí)慣，我們將頂部信息劃分為展示區(qū)域和操作區(qū)域，方便用戶(hù)操作，降低用戶(hù)學(xué)習(xí)成本；
• 重復(fù)熟悉，中文查詞結(jié)果頁(yè)中，使用田字格上下布局的形式，使用課本同款楷體字，滿(mǎn)足學(xué)生的識(shí)別文字書(shū)寫(xiě)規(guī)范的需求，也符合用戶(hù)認(rèn)知；
• 探索多變，在 tab 切換的時(shí)候，我們將 tab 選中的顏色變成軟件的 4 個(gè)主色循環(huán)切換，激發(fā)孩子對(duì)軟件的探索欲望；
• 探索多變，按鈕形式上采用出血的圖案形式，打破常規(guī)；
• ……

最后，梳理好頁(yè)面的體驗(yàn)形式之后，我們開(kāi)始給頁(yè)面添加視覺(jué)規(guī)則：

• 在推導(dǎo)中，我們選擇多彩的顏色模式，常見(jiàn)的小學(xué)課本是以橙色為主，因此，軟件也選擇橙色作為主色，并加入黃色、綠色和藍(lán)色作為輔助顏色；
• 圖標(biāo)采用的是孩子熟悉的元素+輕質(zhì)感這樣的組合；
• 結(jié)合繪本和孩子常見(jiàn)元素，使用兩個(gè)圓形疊加的形式，作為軟件的主要元素；
• 為了讓內(nèi)容更符合孩子閱讀和使用習(xí)慣，使用大字號(hào)和大間距的形式，常用字號(hào)是 32px，最小字號(hào)是 28px；
• ……

對(duì)比產(chǎn)品原型和市面上的一些競(jìng)品，我們可以發(fā)現(xiàn)，查詞軟件在內(nèi)容布局上相差無(wú)幾。如果沒(méi)有找到符合我們產(chǎn)品業(yè)務(wù)目標(biāo)，同時(shí)符合用戶(hù)認(rèn)知的規(guī)則，我們將被淹沒(méi)在一群查詞軟件中。

步驟 3. 建立一個(gè)畫(huà)板，把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來(lái)，并給他們限定使用范圍，方便自己查閱和團(tuán)隊(duì)合作

最后一步，相信很多設(shè)計(jì)師都會(huì)在設(shè)計(jì)過(guò)程中建立一套方便好用的設(shè)計(jì)規(guī)范庫(kù)，這里就不展開(kāi)來(lái)說(shuō)了。

總結(jié)

最后，再對(duì)上文的所有內(nèi)容進(jìn)行概括。從 0 到 1 進(jìn)行軟件設(shè)計(jì)我們需要用到下面這 7 步:

1. 多使用「為什么+動(dòng)詞」的問(wèn)法，向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶(hù)目標(biāo)。
2. 從業(yè)務(wù)目標(biāo)開(kāi)始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞。
3. 分析不同用戶(hù)跟軟件之間的接觸點(diǎn)，從未來(lái)趨勢(shì)和用戶(hù)當(dāng)前認(rèn)知角度收集用戶(hù)資料。
4. 提取收集到的信息，并放入四象限中，總結(jié)出2～4個(gè)視覺(jué)關(guān)鍵詞、體驗(yàn)關(guān)鍵詞。
5. 分別組合產(chǎn)品關(guān)鍵詞和視覺(jué)關(guān)鍵詞，產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，找到同時(shí)滿(mǎn)足 2 組關(guān)鍵詞的規(guī)則。
6. 選擇復(fù)雜的核心頁(yè)面，把具體化的體驗(yàn)規(guī)則、視覺(jué)規(guī)則融進(jìn)頁(yè)面中，確定設(shè)計(jì)風(fēng)格。
7. 建立一個(gè)畫(huà)板，把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來(lái)，并給他們限定使用范圍，方便自己查閱和團(tuán)隊(duì)合作。

完成這 7 步，將可以讓你從 0 ～ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過(guò)，設(shè)計(jì)風(fēng)格明確，用戶(hù)粘性高的軟件。

文章來(lái)源：優(yōu)設(shè)    作者：ukeyliang

用戶(hù)體驗(yàn)地圖（Customer Journey Map）是什么？

用戶(hù)體驗(yàn)地圖是從用戶(hù)的視角出發(fā)，去理解用戶(hù)、產(chǎn)品或者服務(wù)交互的一個(gè)重要的設(shè)計(jì)工具。

也可以說(shuō)是以可視化的形式，來(lái)表現(xiàn)一個(gè)用戶(hù)使用產(chǎn)品或者接受服務(wù)的體驗(yàn)情況，從體驗(yàn)的過(guò)程中來(lái)發(fā)現(xiàn)用戶(hù)在整個(gè)體驗(yàn)過(guò)程中的問(wèn)題點(diǎn)與情緒點(diǎn)，以此來(lái)從中提取出產(chǎn)品的優(yōu)化點(diǎn)，方便對(duì)產(chǎn)品進(jìn)行迭代，從而保證良好的用戶(hù)體驗(yàn)。

經(jīng)典案例

Chris Risdon繪制的歐洲鐵路購(gòu)票的體驗(yàn)地圖

上圖中是歐洲鐵路公司整個(gè)體驗(yàn)地圖的一部分。歐洲鐵路公司是一家美國(guó)經(jīng)銷(xiāo)商，為北美旅客提供一個(gè)獨(dú)立預(yù)訂火車(chē)票去歐洲各地的平臺(tái)，而無(wú)需用戶(hù)去網(wǎng)站預(yù)定。他們已經(jīng)擁有了一個(gè)良好體驗(yàn)的網(wǎng)站和一個(gè)屢獲殊榮的咨詢(xún)中心，但他們希望通過(guò)所有接觸點(diǎn)來(lái)優(yōu)化用戶(hù)使用過(guò)程，這樣可以讓他們更全面地了解，他們應(yīng)該專(zhuān)注的投資，設(shè)計(jì)和技術(shù)資源。整體的“診斷”評(píng)價(jià)系統(tǒng)，包含一系列的重點(diǎn)舉措，體驗(yàn)地圖只是其中派生的一部分。體驗(yàn)地圖幫助建立同理心圖，來(lái)理解隨著時(shí)間和空間的推移，用戶(hù)與歐洲鐵路公司服務(wù)系統(tǒng)交互時(shí)接觸點(diǎn)的變化。

在這張?bào)w驗(yàn)地圖中采用了五個(gè)關(guān)鍵組成一個(gè)體驗(yàn)地圖，一個(gè)體驗(yàn)地圖可以直觀(guān)的表示用戶(hù)操作流、期望、特定的目標(biāo)、用戶(hù)情緒狀態(tài)和整體的體驗(yàn)點(diǎn)，做到整體把控和評(píng)估產(chǎn)品體驗(yàn)。

作用 ：

用戶(hù)體驗(yàn)地圖能幫助我們創(chuàng)造出一個(gè)有大局觀(guān)的用戶(hù)體驗(yàn)，更好的幫助我們理解用戶(hù)的痛點(diǎn)和需求，幫助Team達(dá)成共識(shí)，非常有利于跨團(tuán)隊(duì)合作。

用戶(hù)體驗(yàn)地圖包含的內(nèi)容 ：

其中包括，人群（產(chǎn)品的用戶(hù)是哪一類(lèi)人）、 用戶(hù)的需求（用戶(hù)想得到什么）、 路徑（在某特定的場(chǎng)景下體驗(yàn)的整體過(guò)程） 、接觸點(diǎn)  （產(chǎn)品與人或人與服務(wù)接觸的關(guān)鍵點(diǎn)）、行為（用戶(hù)的行為是什么樣的？）、情緒  （體驗(yàn)過(guò)程中的感受心情） 、機(jī)會(huì)點(diǎn)  （過(guò)程中可以突破的點(diǎn)，可以成為特色的地方）、 解決方案  （解決用戶(hù)在體驗(yàn)過(guò)程的痛點(diǎn)）、 問(wèn)題  （解決用戶(hù)在體驗(yàn)過(guò)程的痛點(diǎn)）。

用戶(hù)畫(huà)像 ：

在準(zhǔn)備開(kāi)始繪制用戶(hù)體驗(yàn)地圖的時(shí)候，我們應(yīng)該要確立用戶(hù)群體 / 確定產(chǎn)品目標(biāo) / 了解用戶(hù)目標(biāo)，并作出用戶(hù)畫(huà)像。

視覺(jué)設(shè)計(jì)師怎么使用

舉例（一）：

那我們看看作為一名視覺(jué)設(shè)計(jì)師應(yīng)該關(guān)注哪部分的流程。

視覺(jué)設(shè)計(jì)師的用戶(hù)體驗(yàn)地圖 ：

我們的聚焦點(diǎn)應(yīng)在上圖的這幾個(gè)部分。

所以當(dāng)繪制完用戶(hù)體驗(yàn)地圖后，應(yīng)該再繪制一份視覺(jué)設(shè)計(jì)師看的版本，我們?cè)O(shè)計(jì)師主要關(guān)注的視覺(jué)的觸點(diǎn)。

定量方法（產(chǎn)品方向）：

我們?cè)谛袨楹颓榫w上一般會(huì)使用問(wèn)卷法、后臺(tái)數(shù)據(jù)分析法；而在需求和問(wèn)題上一般會(huì)使用焦點(diǎn)小組、訪(fǎng)談法、觀(guān)察法、日志法和田野調(diào)查，下面就為大家來(lái)解釋下這些方法。

焦點(diǎn)小組：是指從研究產(chǎn)品中所確定的全部用戶(hù)群(總體)中抽取一定數(shù)量的用戶(hù)來(lái)組成樣本,根據(jù)樣本信息推斷用戶(hù)群總體特征的一種調(diào)查方法。

訪(fǎng)談法：訪(fǎng)談，就是以口頭形式向用戶(hù)進(jìn)行詢(xún)問(wèn)，根據(jù)被詢(xún)用戶(hù)的答復(fù)搜集客觀(guān)的、不帶偏見(jiàn)的事實(shí)信息，以準(zhǔn)確地說(shuō)明樣本所要代表的總體的一種方式。

觀(guān)察法：觀(guān)察法是指研究者根據(jù)一定的研究目的、研究提綱或觀(guān)察表，用自己的感官和輔助工具去直接觀(guān)察用戶(hù)，從而獲得資料的一種方法。

日志法：是由用研人員按時(shí)間順序，詳細(xì)記錄自己在一段時(shí)間內(nèi)使用產(chǎn)品的過(guò)程，經(jīng)過(guò)歸納、分析，達(dá)到分析產(chǎn)品目的的一種工作分析方法。

田野調(diào)查：在日常生活中，在一個(gè)有一個(gè)嚴(yán)格定義的空間和時(shí)間的范圍內(nèi)，體驗(yàn)特定用戶(hù)群的日常生活與思想境界，通過(guò)記錄自己的生活的方方面面，來(lái)展示不同階段用戶(hù)群的基本需求。

注意事項(xiàng)（5要點(diǎn)）

1. 在制作地圖前，應(yīng)理清楚產(chǎn)品的前期規(guī)劃和需求，并且與同事達(dá)成共識(shí)。

2. 避免以自己的經(jīng)驗(yàn)或者認(rèn)知來(lái)確定用戶(hù)體驗(yàn)地圖中的接觸點(diǎn)，應(yīng)當(dāng)真正的從用戶(hù)的行為中去提取。

3. 不要將一些落后的信息加入到用戶(hù)體驗(yàn)地圖中。

4. 最好先在Team內(nèi)部腦暴一份地圖，再去與所制作的地圖進(jìn)行對(duì)比。

5. 用戶(hù)體驗(yàn)地圖不會(huì)涉及到實(shí)現(xiàn)方案和現(xiàn)實(shí)機(jī)制，只涉及用戶(hù)的體驗(yàn)。

團(tuán)隊(duì)人員的合理搭配 ：

將公司或者團(tuán)隊(duì)的PM、RD、運(yùn)營(yíng)、Leader等過(guò)來(lái)，詳細(xì)的描述這一份用戶(hù)體驗(yàn)地圖，聆聽(tīng)他們的反饋。

在分析用戶(hù)問(wèn)題上 ：

分為四個(gè)等級(jí)：ABCD，在對(duì)優(yōu)先級(jí)進(jìn)行排列的同時(shí)應(yīng)該，考慮到產(chǎn)品在每個(gè)階段的側(cè)重點(diǎn)，根據(jù)不同的進(jìn)度和情況，來(lái)對(duì)優(yōu)先級(jí)進(jìn)行排列，幫助我們整理問(wèn)題和提煉最核心的一些體驗(yàn)問(wèn)題，區(qū)分問(wèn)題還能幫助我們更好的把握產(chǎn)品的優(yōu)化方向。

視覺(jué)設(shè)計(jì)師應(yīng)該關(guān)注的點(diǎn) ：

視覺(jué)設(shè)計(jì)師的任務(wù)是什么？是有效的傳達(dá)出產(chǎn)品的信息、簡(jiǎn)潔并且優(yōu)雅的傳達(dá)、通過(guò)視覺(jué)設(shè)計(jì)制造出愉悅的用戶(hù)體驗(yàn)。用戶(hù)在很多的場(chǎng)景下都可能接觸到企業(yè)的產(chǎn)品或者是服務(wù)，這個(gè)服務(wù)接觸帶給用戶(hù)的感受更多是偏向于視覺(jué)感知方面的。所以我們需要盡可能的列舉出企業(yè)的產(chǎn)品或者服務(wù)與用戶(hù)可能產(chǎn)生接觸的場(chǎng)景、服務(wù)觸點(diǎn)，再根據(jù)服務(wù)觸點(diǎn)延伸出相關(guān)的“視覺(jué)觸點(diǎn)”，用來(lái)梳理出我們需要輸出的視覺(jué)產(chǎn)物，做出相對(duì)應(yīng)的查漏補(bǔ)缺和優(yōu)化，輸出指導(dǎo)企業(yè)的品牌建設(shè)工作。而用戶(hù)體驗(yàn)地圖就很適合作為這樣的工具。

“體驗(yàn)地圖”對(duì)于優(yōu)化視覺(jué)體驗(yàn)的意義 ：

整體性：系統(tǒng)性地規(guī)劃品牌的視覺(jué)統(tǒng)一化工作，提升品牌建設(shè)工作的全面性和完整度。也可以避免未來(lái)工作中不同的品牌 / UI / 運(yùn)營(yíng)設(shè)計(jì)師對(duì)于品牌概念的理解不同而帶來(lái)的設(shè)計(jì)出入。

品牌設(shè)計(jì)，是用戶(hù)對(duì)于公司產(chǎn)品的直接印象，所以在品牌設(shè)計(jì)的要求就是：建立特征、保持特征、推廣特征、美化特征、對(duì)于以上的要求，來(lái)提供完整且匹配的設(shè)計(jì)方案。

運(yùn)營(yíng)設(shè)計(jì)，運(yùn)營(yíng)設(shè)計(jì)的目標(biāo)就是讓用戶(hù)盡可能的感知到產(chǎn)品的好，把產(chǎn)品的特點(diǎn)通過(guò)設(shè)計(jì)包裝傳遞給用戶(hù)，一個(gè)好的運(yùn)營(yíng)設(shè)計(jì)，應(yīng)該是在用戶(hù)看到你的設(shè)計(jì)作品后，會(huì)產(chǎn)生足夠好的興趣和好感，并愿意去關(guān)注你的產(chǎn)品。

UI設(shè)計(jì)，這是產(chǎn)品與用戶(hù)接觸過(guò)程中，頻率最高、最直觀(guān)的部分，目的是為了讓用戶(hù)認(rèn)識(shí)到產(chǎn)品的相貌和氣質(zhì)，UI設(shè)計(jì)需要注意界面視覺(jué)層次的強(qiáng)弱、信息劃分、用戶(hù)的視線(xiàn)軌跡、色彩的表達(dá)、質(zhì)感、舒適度等，來(lái)讓用戶(hù)覺(jué)得這個(gè)產(chǎn)品設(shè)計(jì)真好。

例如 ：

OFO，以年輕人為主的共享騎行產(chǎn)品，無(wú)論是在品牌/運(yùn)營(yíng)/UI的設(shè)計(jì)上，都能讓人感覺(jué)時(shí)尚、年輕、陽(yáng)光、且有親和力。

品牌設(shè)計(jì) :

UI設(shè)計(jì) :

運(yùn)營(yíng)設(shè)計(jì) ：

UI設(shè)計(jì) ：

運(yùn)營(yíng)設(shè)計(jì) ：

設(shè)計(jì)師的進(jìn)階 ：

在一開(kāi)始的初級(jí)設(shè)計(jì)師階段（也就是1.0階段），我們需要從交互設(shè)計(jì)師手中接過(guò)交互設(shè)計(jì)稿，來(lái)對(duì)它進(jìn)行氣質(zhì)進(jìn)行改造，做出獨(dú)特的視覺(jué)設(shè)計(jì)，也就是將其翻譯為高保真稿，然后再與開(kāi)發(fā)同學(xué)進(jìn)行對(duì)接，也要保持視覺(jué)走查，以防實(shí)際效果與預(yù)期效果的不符；在這個(gè)1.0階段我們的表現(xiàn)力和創(chuàng)造力，是最為主要的，如何去做出差異化？這是這個(gè)階段的設(shè)計(jì)師需要考慮的，在這個(gè)APP設(shè)計(jì)趨同的大浪潮下，你如果能夠做出不一樣的設(shè)計(jì)，那么你則可以一鳴驚人，從眾多水平相當(dāng)?shù)脑O(shè)計(jì)師中脫穎而出，這時(shí)你便可以考慮進(jìn)入下一個(gè)階段，也就是2.0。

在高級(jí)設(shè)計(jì)階段（即2.0階段），這時(shí)候你就需要擁有更好的產(chǎn)品思維和邏輯能力，不僅僅只是從交互設(shè)計(jì)師拿到交互設(shè)計(jì)稿，直接上手開(kāi)做，在這之前，你需要開(kāi)始了解產(chǎn)品的業(yè)務(wù)定位、用戶(hù)人群、產(chǎn)品目標(biāo)、當(dāng)前的問(wèn)題、未來(lái)的迭代等，需求方這時(shí)候就成你的主要對(duì)接對(duì)象，需要你具備拆解需求、采集用戶(hù)的需求、擴(kuò)展業(yè)務(wù)、能進(jìn)行設(shè)計(jì)驗(yàn)證的能力，能將產(chǎn)品的氣質(zhì)和品牌貫穿于整個(gè)產(chǎn)品(UI/運(yùn)營(yíng)/品牌)，設(shè)計(jì)是怎么推導(dǎo)的，現(xiàn)在就不是僅僅只在停留在好看的層面上了，畢竟設(shè)計(jì)師不是畫(huà)師，而是解決問(wèn)題的，我們?cè)谧隽四硞€(gè)設(shè)計(jì)后，就要去關(guān)注它的變化了，看看用戶(hù)的反饋、商業(yè)轉(zhuǎn)化率等等，這都是為你的下一次設(shè)計(jì)迭代做的參考。

從

分享到脈脈

轉(zhuǎn)自：脈脈

原文鏈接：https://maimai.cn/article/detail?fid=988630001&efid=N-uHKNnf7vXGBmaFd3lZHA&use_rn=1

在頁(yè)面導(dǎo)航欄中，常會(huì)見(jiàn)到返回、取消與關(guān)閉三者按鈕。許多同學(xué)會(huì)弄混它們的使用邏輯，所以寫(xiě)一篇小文幫助各位梳理下。

返回和關(guān)閉

先拋開(kāi)圖標(biāo)，我們回到功能本身的含義上看。如果我們不在產(chǎn)品的語(yǔ)境里，就單看「返回」和「關(guān)閉」這兩個(gè)詞，你首先會(huì)想到什么呢？

當(dāng)我這么去問(wèn)自己的時(shí)候，腦子里出現(xiàn)的并不只是零碎的詞語(yǔ)，而是一些場(chǎng)景和畫(huà)面。比如我走錯(cuò)路了，需要原路返回；公司復(fù)工了，我要返程回去?；蛘撸X(jué)時(shí)間到了，我該關(guān)閉電腦了；飯菜燒好了，我得把油煙機(jī)關(guān)掉，等等。

如果仔細(xì)去想的話(huà)就會(huì)意識(shí)到，語(yǔ)義衍生出來(lái)的，都是我們?nèi)粘Ｉ钪械慕?jīng)驗(yàn)和對(duì)世界的認(rèn)知。產(chǎn)品中使用的各種語(yǔ)言，不管是文字也好，或者圖標(biāo)圖形也罷，一直都是以我們對(duì)它最本能的理解為基礎(chǔ)的。所以只要你聯(lián)想自己對(duì)「返回」和「關(guān)閉」的看法，就能知道它應(yīng)該在什么樣的產(chǎn)品情境中出現(xiàn)，以及它為什么會(huì)出現(xiàn)。

于是，很自然的，我們會(huì)把「返回」和「路徑」聯(lián)系在一起，所以「返回」在導(dǎo)航設(shè)計(jì)中不可或缺。并且「返」也預(yù)示著我們會(huì)回到之前的路徑節(jié)點(diǎn)，整個(gè)過(guò)程是連續(xù)性的，不被切斷的。而「關(guān)閉」就完全不一樣了，它一般和我們的動(dòng)作有關(guān)，是一個(gè)短暫性的操作，相比返回也顯得更為獨(dú)立。

根據(jù)我們對(duì)語(yǔ)義的判斷，再結(jié)合實(shí)際產(chǎn)品中「返回」的場(chǎng)景，我們可以概括出「返回」和「關(guān)閉」的特征差異。

1. 返回

連續(xù)性：按照產(chǎn)品的頁(yè)面層級(jí)順次跳轉(zhuǎn)。但存在特殊情況，因?yàn)橛行┊a(chǎn)品定義的功能出入口是不一致的，在信息架構(gòu)層級(jí)已經(jīng)做了一定的優(yōu)化，所以返回不一定會(huì)按原來(lái)的路徑回去，可能會(huì)按產(chǎn)品既定的路徑。比如網(wǎng)易云音樂(lè)歌曲播放頁(yè)進(jìn)入直播后返回不是到播放頁(yè)。

整體性：在產(chǎn)品功能頁(yè)面關(guān)聯(lián)性較強(qiáng)的功能中，「返回」需要連接各個(gè)頁(yè)面與層級(jí)之間的架構(gòu)關(guān)系，因此「返回」作為操作節(jié)點(diǎn)，可以幫助產(chǎn)品功能的各個(gè)頁(yè)面之間建立聯(lián)系，維持產(chǎn)品的整體性。

2. 關(guān)閉

非連續(xù)性：用于產(chǎn)品中的臨時(shí)內(nèi)容或臨時(shí)動(dòng)作，比如彈窗或活動(dòng)頁(yè)，與上一級(jí)頁(yè)面沒(méi)有直接關(guān)系。

獨(dú)立性：非產(chǎn)品原生內(nèi)容或是產(chǎn)品內(nèi)的獨(dú)立內(nèi)容。比如小程序、瀏覽器標(biāo)簽等。

3. 返回和關(guān)閉的使用場(chǎng)景

知道了返回和關(guān)閉的特征后，我們可以從兩者的使用角度上再去梳理一下。

現(xiàn)在產(chǎn)品中關(guān)于返回和關(guān)閉有三種狀態(tài)：

1. 只有返回
2. 只有關(guān)閉
3. 返回和關(guān)閉同時(shí)存在

1 和 2 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場(chǎng)景。

3 的情況會(huì)有特殊性，因?yàn)樗瑫r(shí)具有返回和關(guān)閉這兩種看起來(lái)相矛盾的特性。其實(shí)這是由內(nèi)容決定的，當(dāng)內(nèi)容同時(shí)具有獨(dú)立性和整體性時(shí)，就需要支持兩種操作。如小程序可以作為一個(gè)獨(dú)立功能，但其本身又可以看作是一個(gè)完整的小產(chǎn)品，具有自己的頁(yè)面結(jié)構(gòu)和頁(yè)面層級(jí)。所以小程序?qū)τ谒鶎俚漠a(chǎn)品，我們有關(guān)閉的需要，小程序內(nèi)的頁(yè)面導(dǎo)航又需要返回來(lái)實(shí)現(xiàn)。

除此之外，產(chǎn)品可能開(kāi)始只有返回，后面臨時(shí)出現(xiàn)關(guān)閉按鈕，比如微博「疫情地圖」中使用「小區(qū)疫情查詢(xún)」和「7×24 小時(shí)疫情快訊」后會(huì)出現(xiàn)關(guān)閉功能（幫助用戶(hù)快速退出）。

這里我們可以從連續(xù)性和非連續(xù)性的角度看，產(chǎn)品針對(duì)具有復(fù)雜層級(jí)和內(nèi)容的頁(yè)面設(shè)計(jì)了順次（返回）和跳頁(yè)（關(guān)閉）的導(dǎo)航方式，其中關(guān)閉隨實(shí)際情境出現(xiàn)。以此為用戶(hù)提供了更為靈活的導(dǎo)航路徑，來(lái)同時(shí)滿(mǎn)足用戶(hù)逐級(jí)深入、連續(xù)返回瀏覽和選擇性查看、臨時(shí)關(guān)閉的需求。

取消和關(guān)閉

針對(duì)于「關(guān)閉」，它和「取消」會(huì)有重疊的含義，所以有時(shí)并不能很好地去區(qū)分這兩個(gè)功能表達(dá)的應(yīng)用場(chǎng)景。于是，我們可以借用之前的方式，先把「取消」單獨(dú)拿出來(lái)理解。

一般來(lái)說(shuō)，「取消」意味著行為過(guò)程中，還有后續(xù)行為，整個(gè)過(guò)程沒(méi)有完成，當(dāng)下后悔了，因此取消了當(dāng)前操作。它更傾向于表達(dá)我們主動(dòng)去做了什么改變，然后中途放棄了。

比如，想煮個(gè)飯，于是下了米，倒了水，定時(shí)，確認(rèn)（取消），完成（關(guān)閉）。

這時(shí)候中間如果突然不想煮飯了，在定時(shí)之后，就停止當(dāng)前行為，那就是取消。但點(diǎn)了確認(rèn)并完成煮飯之后，這個(gè)行為就結(jié)束了，只能關(guān)閉。因此，它們之間就是行為上的差異。

就好比，打開(kāi)微信公眾號(hào)文章，內(nèi)容已經(jīng)加載出來(lái)，行為已經(jīng)產(chǎn)生并結(jié)束，這時(shí)候左上角就一定是關(guān)閉。而發(fā)朋友圈的時(shí)候，左上角是取消，那是因?yàn)樾袨檫^(guò)程還在繼續(xù)，沒(méi)有發(fā)布，所以可以取消。而發(fā)布之后，就無(wú)法取消，想要關(guān)閉，也就只能刪除這條朋友圈了。

所以在操作行為中的頁(yè)面，左上角最好是使用「取消」。

當(dāng)我們對(duì)詞的含義有了進(jìn)一步思考后，就可以去看它們?cè)诋a(chǎn)品中的表現(xiàn)了。

比如廣告的關(guān)閉、推薦內(nèi)容的關(guān)閉。都是產(chǎn)品自身提供的內(nèi)容，用戶(hù)不想看到就選擇關(guān)掉了，沒(méi)有試圖去改變什么。

包括內(nèi)容頁(yè)面，或者活動(dòng)頁(yè)面，被點(diǎn)開(kāi)，且加載完成呈現(xiàn)出來(lái)之后，這個(gè)行為就結(jié)束了，沒(méi)有取消的概念，只有關(guān)閉。

再比如，選擇圖片文件時(shí)的取消，微信發(fā)朋友圈、微博發(fā)帖時(shí)的取消等等，我們能發(fā)現(xiàn)都是用戶(hù)主動(dòng)采取了什么措施，但是又后悔了所以選擇取消。

或者如游戲設(shè)置，就不適合用關(guān)閉，會(huì)讓用戶(hù)在理解上產(chǎn)在歧義，比如用戶(hù)設(shè)置到一半，不想設(shè)置了，那現(xiàn)在關(guān)閉的話(huà)，設(shè)置是生效了么？所以用取消會(huì)更合適。

這些時(shí)候，不存在關(guān)閉的概念，因?yàn)闆](méi)有內(nèi)容可以關(guān)閉，只能是取消當(dāng)前行為。如果使用關(guān)閉，與該場(chǎng)景下的用戶(hù)行為不符，反而增加了用戶(hù)對(duì)文案的理解成本。

簡(jiǎn)單來(lái)說(shuō)，取消強(qiáng)調(diào)的是放棄改變，關(guān)閉強(qiáng)調(diào)的就只是抉擇。

不過(guò)這里也有一個(gè)特殊例子，就是，微信公眾號(hào)文章轉(zhuǎn)發(fā)給好友，左上角是關(guān)閉，而釘釘里面內(nèi)容轉(zhuǎn)發(fā)給朋友，就是取消。為什么呢？

在一些特殊場(chǎng)景之下，「關(guān)閉」是包含「取消」的。

好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級(jí)，如果在過(guò)程中不想繼續(xù)了，拔掉電源就是完全關(guān)閉了，但同時(shí)這個(gè)行為也包含了人不想繼續(xù)煮飯這個(gè)行為，想取消掉了，所以這時(shí)候關(guān)閉是包含取消的。它跟文章加載完成，已經(jīng)呈現(xiàn)出來(lái)，是不一樣的。

而上面這個(gè)微信與釘釘?shù)睦?，就存在這種包含關(guān)系。比如，內(nèi)容已經(jīng)加載完，要分享給好友，這時(shí)候加載出來(lái)的好友列表已經(jīng)出現(xiàn)，只是選擇發(fā)送給誰(shuí)的問(wèn)題，用戶(hù)可以關(guān)閉已經(jīng)加載完成的好友列表頁(yè)面，或者理解為用戶(hù)打算取消當(dāng)前行為。

不過(guò)這樣的設(shè)計(jì)并不建議大家將其定義為關(guān)閉，因?yàn)楫吘剐袨檫€在繼續(xù)，使用取消反而更容易理解也更符合場(chǎng)景定義。

譬如，PC 的彈窗經(jīng)常會(huì)同時(shí)出現(xiàn)叉（指代關(guān)閉）和取消，雖然操作的結(jié)果都是使彈窗消失，但是用戶(hù)的操作目標(biāo)是不一樣的，事實(shí)上這里提供了兩種選擇，即我不想做決定，我要關(guān)掉彈窗，以及我決定現(xiàn)在不這么做，我要取消這個(gè)動(dòng)作，這里的關(guān)閉其實(shí)就暗含了取消的動(dòng)作。

在 PC 端，我們有足夠的空間為用戶(hù)提供不同的選擇，給予用戶(hù)充分的自主控制權(quán)，以滿(mǎn)足他們對(duì)功能的不同期待。而在移動(dòng)端，我們需要?jiǎng)h減或合并功能，所以當(dāng)用戶(hù)同時(shí)產(chǎn)生重疊的訴求時(shí)，我們往往會(huì)選擇當(dāng)下最符合用戶(hù)心境的功能，這是「場(chǎng)景細(xì)化」的結(jié)果。這也能解釋為什么現(xiàn)在很多 PC 產(chǎn)品的彈窗中也只會(huì)保留取消，而不提供叉（指代關(guān)閉）的選擇。因?yàn)橛脩?hù)面對(duì)功能不知所措、不做決定的情況已經(jīng)越來(lái)越少，更多的用戶(hù)已經(jīng)明確地知道自己應(yīng)該怎么做。

這就是「取消」和「關(guān)閉」的差異，以及移動(dòng)產(chǎn)品對(duì)兩者的取舍的根本原因。

同樣的，有一些頁(yè)面，取消和關(guān)閉都會(huì)用叉的圖標(biāo)來(lái)表示，只是在不同情境中，這個(gè)叉同樣可以理解為取消，關(guān)閉，以及取消或關(guān)閉。差異點(diǎn)跟上述內(nèi)容相同。

結(jié)語(yǔ)

返回、取消和關(guān)閉看起來(lái)簡(jiǎn)單，深入分析后又顯得復(fù)雜，但相對(duì)復(fù)雜的分析都只是為了能簡(jiǎn)單地去運(yùn)用。在這個(gè)問(wèn)題中，每個(gè)人都可以從自己日常的經(jīng)驗(yàn)出發(fā)，然后在產(chǎn)品不同的語(yǔ)境里去體會(huì)一個(gè)詞語(yǔ)、一個(gè)圖標(biāo)背后隱藏著我們什么樣的認(rèn)知和使用的習(xí)慣。

那由這個(gè)問(wèn)題延伸的，其實(shí)還有產(chǎn)品的導(dǎo)航方式，頁(yè)面出入口的設(shè)計(jì)差異，產(chǎn)品中整體與獨(dú)立，連續(xù)與非連續(xù)的內(nèi)容結(jié)構(gòu)，原生與非原生頁(yè)面的差異等等。

小問(wèn)題同樣可以見(jiàn)大，但我們也不需要過(guò)度思考，本來(lái)問(wèn)題的解讀角度就是因人而異的，也無(wú)法面面俱到，上面的只是我的理解方式。設(shè)計(jì)還是需要回歸到用戶(hù)和產(chǎn)品的目標(biāo)，再去結(jié)合場(chǎng)景和產(chǎn)品業(yè)務(wù)的使用模式才能得出合理有價(jià)值的方案。

文章來(lái)源：優(yōu)設(shè)    作者：呆呆U理

菲茲定律在交互設(shè)計(jì)中的應(yīng)用是很普遍和廣泛的，有時(shí)候在我們?cè)O(shè)計(jì)界面之時(shí)，不知不覺(jué)就應(yīng)用了菲茲定律，但是我們卻未察覺(jué)。

關(guān)于菲茲定律的具體內(nèi)容，可以說(shuō)是大家耳熟能詳，甚至在學(xué)生時(shí)代就有所了解：從一個(gè)起始位置移動(dòng)到最終目標(biāo)點(diǎn)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離（D）和目標(biāo)的大小（W），可以用數(shù)學(xué)公式表達(dá)為：

在當(dāng)今互聯(lián)網(wǎng)背景下簡(jiǎn)單來(lái)解釋說(shuō)，就是大而近的目標(biāo)區(qū)域意味著用戶(hù)用需要耗費(fèi)太大的精力即可輕易點(diǎn)擊或者關(guān)注到目標(biāo)，反之，小而遠(yuǎn)的目標(biāo)區(qū)域則意味著用戶(hù)將耗費(fèi)一些時(shí)間和動(dòng)作才能觸及到目標(biāo)。在一般情況下，讓用戶(hù)耗費(fèi)時(shí)間和動(dòng)作的操作，會(huì)使人產(chǎn)生負(fù)面的用戶(hù)體驗(yàn)。

以上說(shuō)的，其實(shí)是對(duì)菲茲定律表象的解釋?zhuān)總€(gè)人在網(wǎng)上也會(huì)搜到很多類(lèi)似的解釋。當(dāng)你搜索時(shí)會(huì)發(fā)現(xiàn)，關(guān)于對(duì)菲茲定律的應(yīng)用，網(wǎng)上絕大多數(shù)的資料都是在以PC端界面作為定律的解釋?zhuān)苿?dòng)界面卻少之又少，這里面的一部分原因是菲茲定律提出的時(shí)間，一部分也是因?yàn)樵谝苿?dòng)端的設(shè)計(jì)中，菲茲定律會(huì)變得很零散和瑣碎，很難真正用幾句話(huà)來(lái)總結(jié)，這篇文章也是我第一次試著在移動(dòng)端的交互設(shè)計(jì)的范疇內(nèi)對(duì)菲茲定律的應(yīng)用進(jìn)行簡(jiǎn)單的總結(jié)。

1. 讓按鈕更大一些

我在這一部分分了幾種情況，分別進(jìn)行討論，其一呢，就是fab button。在現(xiàn)有的fab button中，大家會(huì)發(fā)現(xiàn)，雖然按照正常iOS的設(shè)計(jì)規(guī)范，一般按鈕的大小都會(huì)被設(shè)計(jì)為88px，但是在設(shè)計(jì)fab button時(shí)，我們一般都會(huì)選擇大一些的尺寸，例如100px、110px、120px。

其二就是頁(yè)面內(nèi)功能按鈕的大小，我們?cè)谧鼋缑嬖O(shè)計(jì)的時(shí)候，都知道做到統(tǒng)一性，但很少去深入地想，界面統(tǒng)一的背后是在像用戶(hù)傳達(dá)一個(gè)什么意思。

舉個(gè)例子，這是【洋蔥數(shù)學(xué)】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號(hào)+密碼+按鈕（或手機(jī)號(hào)+按鈕等）的組合。

那我們來(lái)思考一個(gè)問(wèn)題：為什么在手機(jī)號(hào)只有11位已經(jīng)確定的情況下，輸入框和【下一步】按鈕還要做這么長(zhǎng)，接近通欄的一個(gè)樣式。

我試著來(lái)找到這個(gè)問(wèn)題的答案，第一個(gè)，是對(duì)于品牌設(shè)計(jì)規(guī)范的執(zhí)行，對(duì)邊距是有一定要求的，也就是我們常說(shuō)的保持頁(yè)面元素的統(tǒng)一性；第二個(gè)，即是對(duì)菲茲定律的應(yīng)用，在這個(gè)頁(yè)面中，最核心的兩個(gè)功能【輸入】和【下一步】給予他們一個(gè)足夠的大小，會(huì)讓用戶(hù)的注意力更加集中，避免被分散精力。

2. 讓相關(guān)聯(lián)的信息內(nèi)容距離更近

這也和設(shè)計(jì)原則中的親密性相一致。依舊可以用我們常見(jiàn)的信息輸入界面來(lái)加以印證。這兩個(gè)界面是我隨手做的，對(duì)比一下即可看出優(yōu)劣。

在相關(guān)性比較強(qiáng)的功能中，拉近彼此距離，既能夠給信息一個(gè)清晰的層級(jí)，更能夠減少用戶(hù)的操作成本。

3. 界面的邊界會(huì)讓用戶(hù)操作更加精準(zhǔn)和容易

在研究交互界面的時(shí)候，我們總聽(tīng)到一個(gè)說(shuō)法，“界面的邊界是無(wú)限的”，它當(dāng)然不是在說(shuō)界面是無(wú)限大的，對(duì)于一塊屏幕來(lái)說(shuō)，在進(jìn)行操作的時(shí)候，無(wú)論是PC的鼠標(biāo)光標(biāo)，還是移動(dòng)屏幕的手指，在操作到界面邊緣時(shí)，因?yàn)闊o(wú)法延伸，所以最精準(zhǔn)。

這也是我們看絕大多數(shù)fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。

除此之外，還有在很多安卓手機(jī)中，卸載app時(shí)會(huì)讓用戶(hù)把要卸載的app拖拽到屏幕上邊緣的區(qū)域進(jìn)行卸載，這樣相比給一個(gè)【X】按鈕，會(huì)更加精準(zhǔn)，而且拖拽的操作也會(huì)給用戶(hù)更多思考的空間和時(shí)間，減少誤操作的概率。

但是，這個(gè)但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒(méi)有限定條件的情況下，菲茲定律的應(yīng)用不會(huì)有任何問(wèn)題，但是如果加以條件的限定，就不是這么簡(jiǎn)單了。

簡(jiǎn)單舉個(gè)例子：在進(jìn)行刪除等負(fù)向操作時(shí)，很多app會(huì)把確認(rèn)刪除等操作做得離你的上一步操作區(qū)域更遠(yuǎn)，或者讓確認(rèn)按鈕更加不明顯，這是在幫助用戶(hù)，或者說(shuō)希望用戶(hù)在做負(fù)向操作時(shí)，有更多的思考空間和時(shí)間，規(guī)避誤操作的影響。

在《看懂設(shè)計(jì)》這個(gè)系列里，我會(huì)選擇性地對(duì)在交互設(shè)計(jì)中常常被應(yīng)用的設(shè)計(jì)心理學(xué)、方法論等進(jìn)行簡(jiǎn)潔有案例的解析，例如大家耳熟能詳?shù)慕换ピO(shè)計(jì)7大定律、斯金納箱理論、邊際效應(yīng)、錨定效應(yīng)、格式塔理論等等讓大家盡可能地在實(shí)際案例中找到它們的應(yīng)用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽(tīng)說(shuō)過(guò)，但是不會(huì)應(yīng)用。

轉(zhuǎn)自：站酷-鹿?fàn)敳皇窍挑~(yú) 

當(dāng)我們回顧近20年的手機(jī)發(fā)展歷程，可以發(fā)現(xiàn)2007年iPhone的橫空出世真正改變了手機(jī)這個(gè)行業(yè)。喬布斯在發(fā)布會(huì)上展示初代iPhone給行業(yè)帶來(lái)的沖擊力是前所未有的，對(duì)人機(jī)交互領(lǐng)域也帶來(lái)了了深遠(yuǎn)的影響。

信息限制

操作與反饋

總結(jié)

任何一個(gè)新事物的出現(xiàn)，人們總是傾向于從現(xiàn)有的知識(shí)體系中尋找類(lèi)似的事物進(jìn)行描述與概括，以尋求情感上的歸屬和理性上的辨識(shí)。但是過(guò)于超前的創(chuàng)新，往往是現(xiàn)有的知識(shí)體系無(wú)法解釋的。無(wú)法解釋?zhuān)匀粺o(wú)法接受。

文章來(lái)源：站酷