很多設(shè)計(jì)師根據(jù)直覺進(jìn)行產(chǎn)品設(shè)計(jì)。雖然大部分情況下是沒問(wèn)題的，但是已經(jīng)證明了的通用標(biāo)準(zhǔn)可以更好的幫助你從邏輯上構(gòu)建有理有據(jù)的UI解決方案，而不是僅僅依賴于你的直覺。

本文我們將探討UI設(shè)計(jì)中的模態(tài)通用標(biāo)準(zhǔn)，討論為什么僅有兩種類型的原因，并且分析App和網(wǎng)站在將信息體系結(jié)構(gòu)和用戶信息流轉(zhuǎn)換為直觀的用戶界面是如何失敗的，本文將使用“Purrrfect”這個(gè)產(chǎn)品來(lái)講解。

兩種基本屏幕類型：模態(tài)屏幕、非模態(tài)屏幕

基本每個(gè)可視化窗口幾乎都屬于這兩類中的一個(gè)。為了理解模態(tài)與非模態(tài)的區(qū)別，我們首先要定義模態(tài)屏幕。

什么是“模態(tài)屏幕”？

模態(tài)屏幕示例

模態(tài)屏幕有不同的形狀和大?。?/span>

全屏模態(tài)視圖（左1）

彈出窗口（左2）

氣泡彈窗（左3）

燈箱彈窗（左4）

快訊/通知

...

模態(tài)屏幕和非模態(tài)屏幕這兩種類型看起來(lái)似乎很好理解，它們都從屬于App的主窗口。但是有一個(gè)重要的區(qū)別：

模態(tài)窗口

創(chuàng)建一個(gè)禁用主窗口的模式，模態(tài)窗口作為前面的子窗口使其保持可見。用戶必須先與模態(tài)窗口進(jìn)行交互才能返回父級(jí)應(yīng)用程序。

 —— 維基百科

大多數(shù)模態(tài)屏幕，特別是在桌面應(yīng)用上可以輕松識(shí)別，因?yàn)樗鼈兏采w主窗口并且可見：主窗口背景遮罩的彈出窗，彈出菜單和彈出框?qū)υ捒颍瑹粝鋸椏?，警告?..

但是移動(dòng)設(shè)備上的屏幕空間有限，這也是移動(dòng)設(shè)備上的許多模態(tài)屏幕占據(jù)整個(gè)屏幕的原因。它們不再保持底層主窗口可見，所以很難將它與非模態(tài)屏幕區(qū)分開來(lái)：

iOS示例：移動(dòng)設(shè)備上的模態(tài)屏幕

兩者的主要區(qū)別在于屏幕的交互方式不同。雖然非模態(tài)屏幕允許用戶簡(jiǎn)單地返回到父級(jí)屏幕，但是模態(tài)屏幕要求用戶在返回主窗口之前完成操作（示例中為“保存”）或取消當(dāng)前操作。

非模態(tài)屏幕最明顯可視信息便是導(dǎo)航欄（示例中為標(biāo)簽欄）。即使在子級(jí)頁(yè)面，非模態(tài)屏幕也允許用戶在主導(dǎo)航來(lái)回跳轉(zhuǎn)。另外模態(tài)屏幕要求用戶在再次使用主導(dǎo)航之前必須關(guān)閉窗口（示例中為“Save ”或“ Cancel ”）。

為什么要使用模態(tài)？

模態(tài)屏幕解決了一個(gè)簡(jiǎn)單的問(wèn)題：用戶容易分心，所以有時(shí)候必須讓用戶全神貫注的進(jìn)行操作。單一的模態(tài)屏幕正是要求人集中在單一的任務(wù)上，然后再繼續(xù)其他操作。

“模態(tài)通過(guò)阻止人們?cè)谕瓿扇蝿?wù)或解除消息或視圖之前做其他事情來(lái)創(chuàng)造焦點(diǎn)” 

—— Apple

什么時(shí)候應(yīng)該使用模態(tài)？

模態(tài)屏幕的規(guī)則我們已經(jīng)了然于胸，與非模態(tài)屏幕相比，它能達(dá)到的目的是什么，應(yīng)該在什么樣的情況下使用它呢？

試想一下，我們正在創(chuàng)造一個(gè)巧妙而新穎的App：“ Purrrfect ” ， 一個(gè)小貓數(shù)據(jù)庫(kù)，它允許用戶上傳，查看和評(píng)論可愛的貓咪GIF。

資料來(lái)源：https：//giphy.com/gifs/tDgXAst2PhIYw

我們App（簡(jiǎn)化）用戶流程如下圖所示：用戶打開App，進(jìn)入幾個(gè)可用選項(xiàng)卡之一（我們的小貓數(shù)據(jù)庫(kù)），點(diǎn)擊其中一只小貓（進(jìn)入詳細(xì)的單一小貓視圖），然后點(diǎn)擊評(píng)論部分（進(jìn)入評(píng)論部分）。

Purrrfect用戶流程

另外用戶可以在每個(gè)階段執(zhí)行補(bǔ)充操作。例如他可以在小貓數(shù)據(jù)庫(kù)頁(yè)面中將另一只小貓?zhí)砑拥綌?shù)據(jù)庫(kù)中，又或者他可以在小貓?jiān)斍轫?yè)中編輯數(shù)據(jù)。

如何分辨模態(tài)與非模態(tài)，其實(shí)沒有那么容易，這些只是我個(gè)人的經(jīng)驗(yàn)總結(jié)：對(duì)自包含過(guò)程使用模態(tài)屏幕，對(duì)其他所有內(nèi)容使用非模態(tài)屏幕。

“自包含過(guò)程”是指每個(gè)操作都有明確的起點(diǎn)和終點(diǎn)。此操作有明確的時(shí)間范圍，將用戶從一般用戶流中移出，讓他專注于操作，然后再將他帶回到開始的位置。

“需要特定的用戶任務(wù)，決策或確認(rèn)的關(guān)鍵信息”

——Google

對(duì)于Purrrfect App來(lái)說(shuō)，這意味著主要用戶流不是模態(tài)的。但是特殊的限時(shí)操作，如添加小貓，編輯小貓和撰寫評(píng)論都是模態(tài)的。

在用戶返回主流程之前，可以取消或保存完成所有模態(tài)操作。因此模態(tài)屏幕使用取消和保存按鈕（或其他類似操作）而不是后退按鈕。如果您的后退按鈕在非模態(tài)屏幕中觸發(fā)保存操作，您可能需要考慮使用取消和保存按鈕切換到模態(tài)屏幕。如果在模態(tài)屏幕中有兩個(gè)不同的操作，例如取消和保存，則無(wú)意義（因?yàn)樗鼈儠?huì)觸發(fā)相同的操作）您可能希望切換到非模態(tài)視圖。在這種情況下，主導(dǎo)航（例如標(biāo)簽欄）也應(yīng)保持在屏幕上可見。

讓我們回到我們改變游戲規(guī)則的App，Purrrfect界面如下圖所示：

Purrrfect用戶界面

在實(shí)際情況中，模態(tài)和非模態(tài)屏幕之間的區(qū)別通常沒那么明顯。例如圖像全屏頁(yè)面在大多數(shù)應(yīng)用中都是模態(tài)的，盡管它不是進(jìn)程或?qū)υ捒?。在一些特殊情況下，模態(tài)屏幕可能會(huì)承載頁(yè)面的焦點(diǎn)。如果我們的App屏幕中間是沒有其他操作（如編輯或評(píng)論）的情況，我們可能使用模態(tài)（全屏視圖）。但由于它允許用戶更深入地進(jìn)入信息架構(gòu)并執(zhí)行各種附加操作（顯示注釋，編輯  ......），因此它不再具有明確的終點(diǎn)，因此它是主流程的一部分，所以應(yīng)該選擇非模態(tài)視圖。

設(shè)計(jì)師有責(zé)任了解清楚App的流程，評(píng)估某個(gè)操作是否應(yīng)該單獨(dú)展示，從而決定來(lái)模態(tài)是否有意義。如有疑問(wèn)，請(qǐng)記住Apple的指導(dǎo)方針：

盡量減少模態(tài)的使用。通常人們更喜歡以非線性的方式與應(yīng)用交互。只有在獲得某人注意、任務(wù)必須完成或放棄，以繼續(xù)使用應(yīng)用或保存重要數(shù)據(jù)時(shí)，才考慮創(chuàng)建一個(gè)模態(tài)來(lái)連接上下層級(jí)。

——? Apple

雖然不需要嚴(yán)格區(qū)分模態(tài)和非模態(tài)，界面也可以完美展現(xiàn)。但是模態(tài)的概念深深植根于Apple，Google，Microsoft等企業(yè)的界面生態(tài)系統(tǒng)中，且用戶已經(jīng)形成了相應(yīng)的期望值。

如果Apple時(shí)不時(shí)的違反自己的規(guī)則，那么Apple將不會(huì)是Apple。例如，新版App Store在“今日”標(biāo)簽中打開亮點(diǎn)作為模態(tài)屏幕，但仍然允許用戶在屏幕底部導(dǎo)航到下一步（沒有明確的終點(diǎn)）。這樣用戶就可以在模態(tài)屏幕內(nèi)部更深入地導(dǎo)航到其他流程。從推薦以外的其他內(nèi)容打開相同的App屏幕會(huì)導(dǎo)致屏幕顯示為非模態(tài)屏幕。這將保留標(biāo)簽欄和后退操作（再次單擊當(dāng)前標(biāo)簽欄圖標(biāo)以轉(zhuǎn)到其主屏幕）。

不一致的Apple UI

左邊的不一致可以通過(guò)....來(lái)解決

A：...在非模態(tài)子屏幕中打開高亮顯示，并帶有后退按鈕并保留標(biāo)簽欄

B：...一旦用戶點(diǎn)擊模態(tài)屏幕內(nèi)的鏈接并繼續(xù)在App的父級(jí)別上的非模態(tài)子屏幕操作，從而關(guān)閉模態(tài)屏幕。

如何使用模態(tài)？

現(xiàn)在我們對(duì)何時(shí)使用模態(tài)有了一個(gè)大致的了解。那么“我們?nèi)绾芜M(jìn)行設(shè)計(jì)？”這是目前唯一的問(wèn)題。下面是對(duì)模態(tài)屏幕檢查后得到的列表：

頂部導(dǎo)航欄始終顯示關(guān)閉按鈕（或“取消”/“丟棄”/“最小化”/ ...）。當(dāng)用戶迷路時(shí)，可以輕松關(guān)閉疊加層并導(dǎo)航回App的頂層。

iOS和Android上的取消按鈕通常位于導(dǎo)航欄的左上角。Android更喜歡關(guān)閉/“x”圖標(biāo)，而iOS則喜歡“取消”文本，但是圖標(biāo)按鈕在ios也很常見，經(jīng)常使用ios設(shè)備的應(yīng)該都知道。

一般情況下，iOS和Android上的保存按鈕都位于導(dǎo)航欄的右上角。但是這種放置規(guī)則在大屏幕設(shè)備上是不可取的。所以在屏幕底部固定浮動(dòng)或頁(yè)面末端的內(nèi)嵌是我個(gè)人推薦的放置位置。

多步模態(tài)

一旦模態(tài)對(duì)話框由多個(gè)步驟或子級(jí)頁(yè)面組成，事情就會(huì)變得更加復(fù)雜。一般情況下，繼續(xù)按鈕顯示在右上角。第二步不會(huì)打開新的模態(tài)屏幕，而是保留在當(dāng)前模態(tài)屏幕，并在現(xiàn)有模態(tài)上覆蓋非模態(tài)子屏幕。

當(dāng)在屏幕底部放置主要操作（“保存”，“應(yīng)用”或“繼續(xù)”）時(shí)，模態(tài)第二步的右上區(qū)域釋放了可選取消按鈕的空間。雖然會(huì)從左到右跳轉(zhuǎn)，但這種方案仍然比不能在子屏幕上直接關(guān)閉更好一些。

動(dòng)畫

截止目前，iOS和Android在模態(tài)的使用方面非常相似。但是動(dòng)畫方面并不是這樣的。

iOS：動(dòng)畫在iOS中高度標(biāo)準(zhǔn)化。

非模態(tài)屏幕從右側(cè)進(jìn)入框架。標(biāo)簽欄在屏幕底部保持不變。頂部的導(dǎo)航欄也保持不變，但其內(nèi)容在自定義轉(zhuǎn)換中淡入淡出。此動(dòng)畫還為用于返回的邊緣滑動(dòng)手勢(shì)提供了基礎(chǔ)。

另一方面模態(tài)屏幕從框架的底部滑入并覆蓋整個(gè)界面（新的頂部導(dǎo)航欄）。他們不使用邊緣滑動(dòng)手勢(shì)，如果沒有保存之類的重要操作，自定義下拉關(guān)閉手勢(shì)可能會(huì)好一些。

Android： Android上的動(dòng)畫更加的豐富多樣。

Google建議在Material Design指南中使用“有意義的過(guò)渡” 。Android本身并不區(qū)分動(dòng)畫是否為模態(tài)或者非模態(tài)。

總結(jié)

大部分設(shè)計(jì)師根據(jù)直覺來(lái)進(jìn)行產(chǎn)品設(shè)計(jì)。有時(shí)候直覺的確很重要。但是更重要的是要我們需要了解一些通用標(biāo)準(zhǔn)，以便于在特定的時(shí)候選擇更好的適應(yīng)或者改變。

在我看來(lái)模態(tài)的概念是當(dāng)今應(yīng)用設(shè)計(jì)中最被忽視的UX原則之一?？缙脚_(tái)和Web本地混合應(yīng)用并不能很好的使用模態(tài)的指南和規(guī)范。但是模態(tài)的基本規(guī)則你應(yīng)該了解，以便在必要的時(shí)候適應(yīng)或者改變它。

上期回顧：《每月更新！10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)》

1、ZEPETO是如何做到強(qiáng)制用戶注冊(cè)，卻不讓人反感的？

很多時(shí)候我們可能只是心血來(lái)潮想嘗試一下某款app，并沒有注冊(cè)帳號(hào)長(zhǎng)期使用的打算。所以每當(dāng)打開的應(yīng)用，如果出現(xiàn)強(qiáng)制要求注冊(cè)，才能開啟使用的情況，真的會(huì)對(duì)產(chǎn)品的體驗(yàn)好感全無(wú)，甚至怕麻煩放棄使用。一些產(chǎn)品會(huì)提供「游客」身份試用簡(jiǎn)版「會(huì)員」享全部功能的選擇給新用戶，這無(wú)疑是一種體驗(yàn)不錯(cuò)的方案。

但如果受限于功能使用，或者就是要提高產(chǎn)品的用戶量，必須引導(dǎo)注冊(cè)，該如何減少用戶的反感情緒呢？

最近爆紅的ZEPETO的登錄界面就很值得借鑒。用「制作ZEPETO」和「已有ZEPETO」的文案，替代生硬的「登錄」與「注冊(cè)」。相同的功能設(shè)計(jì)，但因文案?jìng)鬟_(dá)情緒的不同給人帶來(lái)不一樣的感受。

「制作ZEPETO」幾個(gè)字不僅直白地說(shuō)明了產(chǎn)品意圖，還悄悄將「注冊(cè)」轉(zhuǎn)化成了用戶制作ZEPETO過(guò)程的一部分，無(wú)形中降低了用戶對(duì)強(qiáng)制性注冊(cè)的心理防備。

2、「抖音」的另類溫馨提示，規(guī)避責(zé)任和風(fēng)險(xiǎn)

為了吸引粉絲，短視頻的作者會(huì)爭(zhēng)相模仿，一些觀眾用戶也會(huì)因?yàn)橛腥とンw驗(yàn)嘗試，但很多視頻里的體驗(yàn)和動(dòng)作都是存在安全隱患的。為了規(guī)避風(fēng)險(xiǎn)，「抖音」里某些視頻的下方會(huì)提示：「效果未知，請(qǐng)勿輕易嘗試」或者「該行為存在危險(xiǎn)，請(qǐng)勿輕易模仿」。

如果刷「抖音」時(shí)長(zhǎng)超過(guò)五小時(shí)，也會(huì)提示看視頻時(shí)長(zhǎng)并提醒用戶注意適當(dāng)休息。這些小提示的出現(xiàn)，都是出于對(duì)用戶健康安全著想與負(fù)責(zé)的引導(dǎo)，也是產(chǎn)品團(tuán)隊(duì)規(guī)避責(zé)任與風(fēng)險(xiǎn)的方式。

3、好的用戶提示能給用戶增加「安全感」

用戶在進(jìn)行語(yǔ)音交互時(shí)，想取消當(dāng)前操作的概率非常大。如果系統(tǒng)按照錯(cuò)誤的指令執(zhí)行，會(huì)給用戶帶來(lái)挫敗感?！钢Ц秾殹沟恼Z(yǔ)音交互會(huì)根據(jù)用戶當(dāng)前的手勢(shì)進(jìn)行操作提醒，以減少用戶的學(xué)習(xí)成本。

不存在干擾或打斷用戶操作行為進(jìn)行的強(qiáng)制性，又能給予用戶對(duì)當(dāng)前操作進(jìn)行修正的機(jī)會(huì)。讓用戶輕松勝任操作，利用「控制錯(cuò)覺」打破用戶對(duì)不熟悉操作的顧慮與恐懼感。

4、適當(dāng)?shù)摹腹ぞ咛崾尽?能增加用戶的期待感

對(duì)于大多數(shù)團(tuán)隊(duì)來(lái)說(shuō)，敏捷開發(fā)時(shí)間短任務(wù)重，在有限時(shí)間內(nèi)并不能把所有功能都上線?！肝⑿拧箞F(tuán)隊(duì)在訂閱號(hào)里，添加了未開發(fā)功能提示。

當(dāng)用戶長(zhǎng)按文章時(shí)會(huì)出現(xiàn)toast提示，用特定的交互與簡(jiǎn)要文字說(shuō)明提示用戶「功能正在開發(fā)未上線」。

「工具提示」往往出現(xiàn)在新用戶引導(dǎo)流程，但微信團(tuán)隊(duì)將它用在了未完成開發(fā)功能的提示上，讓用戶對(duì)之后上線的功能產(chǎn)生期待感。

5、怎樣向用戶傳達(dá)隱性的安全感？

在支付寶的「我的」頁(yè)面中，「總資產(chǎn)」的后面會(huì)顯示綠色的「賬戶安全保障中」的文案。同樣的，「財(cái)富」頁(yè)面的「總資產(chǎn)」項(xiàng)后面也會(huì)顯示「保障中」的微文案。不斷出現(xiàn)強(qiáng)調(diào)資金安全性的文案，其實(shí)是支付寶在通過(guò)細(xì)節(jié)設(shè)計(jì)提升用戶在使用產(chǎn)品期間的安全感。因?yàn)楫?dāng)涉及金錢交易時(shí)，用戶都是極其慎重與不安的。

所以產(chǎn)品不僅要為用戶提供安全可靠的保障系統(tǒng)，也要將不可見的安全氛圍顯性化傳達(dá)給用戶。通過(guò)界面細(xì)節(jié)，比如文案展示出產(chǎn)品的安全性，能借助心理暗示的作用緩解用戶內(nèi)心的不安情緒，增強(qiáng)對(duì)產(chǎn)品的信任感。

6、「即刻」讓社區(qū)不友善言論自動(dòng)變萌的魔法是什么？

「即刻」app對(duì)于用戶評(píng)論的審核機(jī)制十分具有萌點(diǎn)：如果用戶在發(fā)表評(píng)論的內(nèi)容中，包含不友善或具有人生攻擊的詞句，系統(tǒng)會(huì)自動(dòng)彈出模態(tài)彈窗，提醒用戶修改留言。如果用戶依舊不愿修改言論并堅(jiān)持發(fā)布，評(píng)論內(nèi)容是可以發(fā)布成功的，但言論中包含的不符合平臺(tái)規(guī)定的字眼會(huì)被系統(tǒng)強(qiáng)制修改。

比如在發(fā)布的評(píng)論中包含具有攻擊性的詞語(yǔ)「智障」，發(fā)布成功后會(huì)被系統(tǒng)修改為「大笨蛋」。沒有強(qiáng)行阻斷用戶的評(píng)論行為對(duì)用戶造成評(píng)論失敗的挫敗感，又巧妙化解了不友善言論的發(fā)布,維護(hù)了社區(qū)的和諧。將所有負(fù)面甚至不文明的言論全都自動(dòng)過(guò)濾強(qiáng)行變萌，設(shè)計(jì)出這個(gè)審核功能的小哥哥或小姐姐一定有著一顆敏感又溫柔的心吧～

7、也許你都不知道，自己會(huì)有「恐懼癥」

「恐懼癥」是一種以恐懼癥狀為主要臨床表現(xiàn)的精神類疾病，指對(duì)特定的人、物或場(chǎng)景有按耐不住的焦慮、緊張甚至是恐懼的心理。如果在「百度」搜索含有「密集恐懼癥」、「深?？謶职Y」等類似關(guān)鍵詞的圖片，會(huì)在呈現(xiàn)完整加載結(jié)果前出現(xiàn)遮罩遮蔽圖片，并用文案提醒用戶圖片可能引起不適請(qǐng)自行選擇是否繼續(xù)查看。

由于無(wú)法確保瀏覽內(nèi)容的用戶是否具有相關(guān)病癥，強(qiáng)制性阻斷操作給予提醒并將是否繼續(xù)的選擇權(quán)交與用戶，算是對(duì)用戶的使用體驗(yàn)很用心的考量了吧。

8、替用戶做決定，不一定是壞事

對(duì)于上班族而言，每天吃什么簡(jiǎn)直是個(gè)世紀(jì)難題。面對(duì)海量的店家及不同的組合優(yōu)惠，常常挑花了眼，還是無(wú)從下手。如果你也存在這樣的問(wèn)題，不如來(lái)試試「美團(tuán)外賣」新推出的「滿減神器」吧。

針對(duì)店家的優(yōu)惠特點(diǎn)，系統(tǒng)會(huì)提前幫你羅列出最佳的優(yōu)惠選擇。不僅會(huì)標(biāo)注出各個(gè)套餐近期購(gòu)買的人數(shù)，還會(huì)優(yōu)先推薦「高回頭率」的套餐選擇。解決了選擇困難的痛點(diǎn)，讓用戶吃得實(shí)惠又省心。

9、轉(zhuǎn)賬也終于有「后悔藥」可以吃了

「支付寶」與「微信」早在幾年前就推出了「延時(shí)到賬」功能，但由于入口隱藏較深使用的人并不多。更重要的是即便中途發(fā)現(xiàn)被騙，也無(wú)法立馬撤銷交易，一旦延遲轉(zhuǎn)賬超時(shí)錢，還是會(huì)直接打到對(duì)方賬戶。而這一次新版「支付寶」聯(lián)合警方優(yōu)化了反詐騙的流程，對(duì)「延時(shí)到賬」功能的升級(jí)可謂是真正解決了轉(zhuǎn)賬安全的痛點(diǎn)。

對(duì)于選擇「延時(shí)到賬」的用戶，如果在到賬前發(fā)現(xiàn)被騙，雖無(wú)法自行撤回款項(xiàng)但只要上傳報(bào)警的相關(guān)憑證，這筆轉(zhuǎn)賬就會(huì)被臨時(shí)凍結(jié)。一旦警方判定被詐騙的情況屬實(shí)，用戶的轉(zhuǎn)賬就能原路返回轉(zhuǎn)出帳號(hào)了。更貼心的是，即便用戶沒有進(jìn)行「延時(shí)轉(zhuǎn)賬」操作，當(dāng)「支付寶」的風(fēng)控系統(tǒng)識(shí)別到轉(zhuǎn)賬存在風(fēng)險(xiǎn)（比如對(duì)收款方賬戶的交易歷史行為存疑）會(huì)自動(dòng)提醒用戶進(jìn)行「延時(shí)轉(zhuǎn)賬」。

10、美團(tuán)外賣上線「加密號(hào)碼」，讓訂餐更安心

今天在用「美團(tuán)外賣」與商家進(jìn)行聯(lián)系時(shí)，發(fā)現(xiàn)了一個(gè)「加密號(hào)碼」的彈窗。當(dāng)你確認(rèn)聯(lián)系商家后，會(huì)出現(xiàn)語(yǔ)音提示：「美團(tuán)外賣保護(hù)你的隱私，商家將不會(huì)知道你的號(hào)碼」。這個(gè)小細(xì)節(jié)很贊是因?yàn)樵诒Ｗo(hù)了用戶隱私的同時(shí)也通過(guò)語(yǔ)音提示在用戶心中強(qiáng)化了平臺(tái)的安全性與貼心。

以前如果用戶給商家差評(píng)了，很有可能會(huì)接到不少商家的騷擾電話，造成不好的產(chǎn)品使用體驗(yàn)。因此團(tuán)隊(duì)設(shè)計(jì)了「加密號(hào)碼」的功能，加強(qiáng)了用戶隱私的保護(hù)，讓聯(lián)系商家變得更安心無(wú)負(fù)擔(dān)。

某個(gè)時(shí)間我們下載了許多優(yōu)秀的APP，定了偉大的目標(biāo)“每天賞析一款優(yōu)秀產(chǎn)品，學(xué)習(xí)前沿的交互和視覺風(fēng)格，努力提高自己的審美和眼界，確保在工作中能迅速找到參考^_^…”

嗯，相信大家都有過(guò)類似的做法（不管你信不信，反正我信了）。自覺更新自己審美和眼界，值得表?yè)P(yáng)啊!（先給一顆糖吃）但是，時(shí)間一長(zhǎng)你會(huì)發(fā)現(xiàn) 索 mei 然 luan 無(wú) yi 味 si、沒有突破，基本每個(gè)設(shè)計(jì)點(diǎn)都有共同的理論支撐，而且每次賞析只能停留在基本的交互體驗(yàn)和視覺風(fēng)格上。

沒有強(qiáng)大的數(shù)據(jù)支撐，不知道為什么這么做？只知道設(shè)計(jì)理論 卻不知產(chǎn)品現(xiàn)狀？只能看到“點(diǎn)” 卻不知“面”的精彩？競(jìng)品的優(yōu)劣勢(shì)有哪些，我們應(yīng)該如何改善？不知道？因?yàn)槟銢]有做深度分析！

下面開始梳理我最近學(xué)習(xí)《產(chǎn)品體驗(yàn)報(bào)告》的一些心得，先上車吧，老鐵！

一、什么是產(chǎn)品體驗(yàn)報(bào)告？

產(chǎn)品體驗(yàn)報(bào)告，是體驗(yàn)者在深入了解某個(gè)產(chǎn)品的商業(yè)模式、目標(biāo)用戶、使用場(chǎng)景、市場(chǎng)現(xiàn)狀、產(chǎn)品功能、交互體驗(yàn)以及視覺風(fēng)格，同時(shí)還包含了競(jìng)品主要功能的對(duì)標(biāo)，是先有深度再到廣度的分析報(bào)告，是全方位總結(jié)出來(lái)的圖文報(bào)告。

這里的“體驗(yàn)者”可以是：運(yùn)營(yíng)、產(chǎn)品、交互、UI等產(chǎn)品相關(guān)人員，現(xiàn)在已經(jīng)不局限于產(chǎn)品經(jīng)理做報(bào)告了，因?yàn)樾袠I(yè)需要多元化人才嘛，同時(shí)也為你跳槽、轉(zhuǎn)崗、晉升打好基礎(chǔ)嘛（重點(diǎn)是為漲薪帶來(lái)機(jī)會(huì)）~

既然是一份圖文報(bào)告，就必須具備可呈現(xiàn)、可閱讀、可傳承的相關(guān)條件，類似于我們的工作總結(jié)、項(xiàng)目復(fù)盤等，產(chǎn)品體驗(yàn)報(bào)告也有特定的輸出框架和規(guī)范。

二、寫這個(gè)有什么用？

· 一般利用產(chǎn)品體驗(yàn)報(bào)告來(lái)指導(dǎo)產(chǎn)品改進(jìn)；

· 用于加深對(duì)目標(biāo)產(chǎn)品和目標(biāo)崗位的了解，深度體驗(yàn)相關(guān)產(chǎn)品是必備流程；

· 也可以用于新入職或應(yīng)聘時(shí)，為了摸清自身產(chǎn)品以及競(jìng)品而進(jìn)行的研究分析、面試時(shí)也能證明你對(duì)該產(chǎn)品做了充分準(zhǔn)備；

· 當(dāng)然也可以用來(lái)了解一些新生產(chǎn)品、感興趣的產(chǎn)品，拓展產(chǎn)品思維、設(shè)計(jì)思維。

產(chǎn)品體驗(yàn)是一個(gè)常規(guī)的手段，也是一個(gè)必要的流程，只有隨時(shí)隨地做到對(duì)行業(yè)，市場(chǎng)，用戶的了解，才能在關(guān)鍵時(shí)刻提出合適的解決方案。

三、前期準(zhǔn)備

熟悉產(chǎn)品&體驗(yàn)產(chǎn)品

熟悉APP是做報(bào)告的基礎(chǔ)，可以根據(jù)自己的經(jīng)驗(yàn)、看法，去體驗(yàn)它，感受它的優(yōu)劣勢(shì)。正如前面所說(shuō)，這個(gè)優(yōu)劣勢(shì)不光是停留在視覺、交互方面，還可以包括核心功能、特色功能等，甚至是戰(zhàn)略層面的。每個(gè)人都是用戶，所以不要怕判斷錯(cuò)誤，大膽去感受、去思考、去提意見，然后把你的想法記錄下來(lái)，零零散散的筆記沒事，后面再統(tǒng)一整理，第一感受是最真實(shí)的。

在記錄想法時(shí)候，最好把你的理由羅列出來(lái)：哪里好、哪里還可以優(yōu)化、我應(yīng)該怎么做？這個(gè)記錄好了，后面寫報(bào)告的時(shí)候會(huì)很輕松。當(dāng)然也不要閉門造車，盡量和身邊的產(chǎn)品人員共同探討，發(fā)掘他們對(duì)產(chǎn)品的看法，或許能收集到你遺漏的點(diǎn)。

如果是你參與設(shè)計(jì)的產(chǎn)品，那直接把你之前的設(shè)計(jì)思考和建議 復(fù)盤即可。

收集&整理資料

資料收集是一個(gè)比較繁瑣的過(guò)程，需要多渠道去發(fā)掘信息，并把他們串聯(lián)起來(lái)再分類，相信收集過(guò)后會(huì)對(duì)整個(gè)產(chǎn)品的戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層（用戶體驗(yàn)五要素）有大致的了解，后面會(huì)根據(jù)這5個(gè)層面做產(chǎn)品解剖。

收集具體層面：需要了解APP的市場(chǎng)反饋：各端下載量、使用評(píng)論，以及這個(gè)APP有哪些競(jìng)品，這些競(jìng)品的相關(guān)數(shù)據(jù)又是怎樣的。

如何獲得數(shù)據(jù)？可以通過(guò)：手機(jī)應(yīng)用市場(chǎng)、APP Annie、神策數(shù)據(jù)等數(shù)據(jù)網(wǎng)站來(lái)收集。很多自家產(chǎn)品還有內(nèi)部研發(fā)的“數(shù)據(jù)觀象臺(tái)”，這些都能記錄留存、轉(zhuǎn)化、用戶特征、行為、點(diǎn)擊事件等重要數(shù)據(jù)，是產(chǎn)品報(bào)告中的有力證據(jù)。

收集宏觀層面：可以直接通過(guò)公司官網(wǎng)、產(chǎn)品介紹、招聘網(wǎng)站、用研報(bào)告、運(yùn)營(yíng)報(bào)告等方式收集

分析資料

可以在寫報(bào)告的時(shí)候同時(shí)進(jìn)行。如果提前做好初步的資料分析，將會(huì)提高后面寫報(bào)告的效率。

分析具體層面：

（1）根據(jù)用戶的評(píng)論反饋初步判斷，提煉關(guān)鍵信息點(diǎn)進(jìn)行分類。同時(shí)可以查看競(jìng)品的用戶評(píng)價(jià)，兩者之間做對(duì)比，分析為什么會(huì)出現(xiàn)這些優(yōu)勢(shì)或差距；

（2）競(jìng)品的行為數(shù)據(jù)我們基本看不到，是人家的產(chǎn)品機(jī)密，我們主要是自家產(chǎn)品的行為數(shù)據(jù)，競(jìng)品只是參考意義；

（3）最后可以從功能、交互、視覺、運(yùn)營(yíng)的維度思考如何解決問(wèn)題并優(yōu)化，把這些都記錄下來(lái)。

分析宏觀層面：

根據(jù)搜集來(lái)的產(chǎn)品的背景、新聞、研究報(bào)告等信息進(jìn)行分析，提煉其中的重要觀點(diǎn)，然后把這些觀點(diǎn)按照“用戶體驗(yàn)五要素”歸類，把搜集來(lái)的觀點(diǎn)和自己對(duì)產(chǎn)品的想法進(jìn)行碰撞，記錄思考過(guò)程。

推薦工具

為了便于共享、傳播及圖片處理，產(chǎn)品體驗(yàn)報(bào)告通常以PPT的形式記錄，因此我比較推薦的排版工具有：office PPT、Keynote、Axure、Mockplus、Sketch、Ps、Ai。

注意：制作一份產(chǎn)品體驗(yàn)報(bào)告，你要面向的是企業(yè)高層、上級(jí)領(lǐng)導(dǎo)、面試官、產(chǎn)品團(tuán)隊(duì)的同事、客戶等，所以需要結(jié)構(gòu)清晰，排版精美、簡(jiǎn)潔，這樣才會(huì)讓人很有讀下去的欲望，正如文章開頭所說(shuō)：可呈現(xiàn)、可閱讀、可傳承。特別是自己以設(shè)計(jì)師的身份拿出報(bào)告的時(shí)候，排版是否精美、信息主次區(qū)分是否明顯，也是對(duì)自身專業(yè)性的一種考量（文章最后我會(huì)分享一些簡(jiǎn)單的模板供大家參考）

四、輸出框架

講到這里，準(zhǔn)備工作就已經(jīng)做的差不多了，現(xiàn)在我們開始規(guī)劃寫作思路。下面列舉的是比較全面思路，可根據(jù)現(xiàn)狀自定義框架（重點(diǎn)是產(chǎn)品分析那一步，綠篩那部分）：

五、體驗(yàn)環(huán)境

六、產(chǎn)品背景

產(chǎn)品背景可以結(jié)合上面宏觀層面收集來(lái)的資料加以描述，盡量保證描述的邏輯性，要讓現(xiàn)狀、痛點(diǎn)、價(jià)值、目標(biāo)一目了然。不要記流水賬、也不要復(fù)制粘貼。具體思路如下：

可按照發(fā)散到聚焦、聚焦再發(fā)散的邏輯描述：先介紹市場(chǎng)環(huán)境→當(dāng)前環(huán)境造成什么問(wèn)題→用戶存在什么痛點(diǎn)→產(chǎn)品如何解決痛點(diǎn)→產(chǎn)品能達(dá)到什么目的→產(chǎn)品價(jià)值和未來(lái)的方向

為了更容易理解，下面拿Uber的一段產(chǎn)品背景做舉例參考：

七、產(chǎn)品分析

1.戰(zhàn)略層

產(chǎn)品定位：為“誰(shuí)”提供什么樣的服務(wù)，解決“誰(shuí)”的什么需求；

產(chǎn)品類型：提供服務(wù)的產(chǎn)品屬于哪個(gè)領(lǐng)域，具有什么樣的產(chǎn)品屬性；

功能特性：代表了一個(gè)產(chǎn)品核心情緒，可以從產(chǎn)品定位和主要功能中提煉出關(guān)鍵詞。

目標(biāo)用戶&特征：大方向描述完后，現(xiàn)在開始對(duì)產(chǎn)品的主角（用戶）進(jìn)行細(xì)分，用戶是誰(shuí)、特征是什么、他有什么問(wèn)題、使用場(chǎng)景是怎樣的。

用戶信息可以通過(guò)用戶調(diào)研、后臺(tái)數(shù)據(jù)、產(chǎn)品數(shù)據(jù)、競(jìng)品數(shù)據(jù)、市場(chǎng)數(shù)據(jù)等渠道收集，在我前2篇文章中有講到過(guò)，如果前期有做這些準(zhǔn)備，可以提取相關(guān)信息寫入報(bào)告：

《用戶體驗(yàn)旅程圖 | 概念&實(shí)操&模板》

《用戶角色模型 | 拒絕“我認(rèn)為”的設(shè)計(jì)》

用戶需求&解決辦法：需求可以從實(shí)際數(shù)據(jù)和用戶反饋中提煉出來(lái)，有些運(yùn)營(yíng)團(tuán)隊(duì)會(huì)通過(guò)組建鐵粉群、論壇、問(wèn)卷調(diào)查等方式集中活躍的目標(biāo)用戶，在這里可以得到他們的訴求，當(dāng)然最好的方法還是面對(duì)面做訪談。解決辦法對(duì)應(yīng)到需求，可以利用“KANO模型”歸類，舉例：

使用場(chǎng)景：通過(guò)“KANO模型”歸納了需求和解決辦法，然后就要列舉出用戶使用產(chǎn)品的環(huán)境：

· 什么情況下使用產(chǎn)品？這個(gè)情況會(huì)不會(huì)導(dǎo)致情緒波動(dòng)？

· 什么地方使用產(chǎn)品？

· 這些地方網(wǎng)絡(luò)環(huán)境好不好？不好該怎么辦？

· 定位有沒有覆蓋到？精不精準(zhǔn)？不精準(zhǔn)怎么辦？

· 移動(dòng)支付時(shí)賬號(hào)內(nèi)無(wú)零錢怎么辦？

· 正在等車時(shí)，手機(jī)沒電怎么辦？

…

這個(gè)時(shí)候需要你保持一顆同理心，通過(guò)一個(gè)切入點(diǎn)把思維發(fā)散開，產(chǎn)品設(shè)計(jì)要考慮到極端情況，必須不停的問(wèn)“為什么”。可以借助團(tuán)隊(duì)的力量一起完善，C端產(chǎn)品每個(gè)人都是用戶。B端產(chǎn)品就需要身臨其境去現(xiàn)場(chǎng)，或者實(shí)實(shí)在在找用戶調(diào)研。

行業(yè)分析：這個(gè)分析完全是宏觀層面的東西，一般通過(guò)政策、經(jīng)濟(jì)、社會(huì)、科技方面來(lái)發(fā)掘，行業(yè)新聞資料網(wǎng)上都能找的到，其次就是看你平時(shí)對(duì)行業(yè)的關(guān)注度了。當(dāng)然一些數(shù)據(jù)平臺(tái)也有直觀的信息可以參考：

應(yīng)用數(shù)據(jù)：通過(guò)對(duì)比競(jìng)品在應(yīng)用市場(chǎng)的下載量可判斷出自身產(chǎn)品的市場(chǎng)占有量。用戶評(píng)論評(píng)星可以大致分析出產(chǎn)品口碑。迭代記錄是個(gè)好東西，可以了解競(jìng)品的研發(fā)方向。階段數(shù)據(jù)可以通過(guò)“友盟”等數(shù)據(jù)平臺(tái)接入應(yīng)用市場(chǎng)獲?。?

2.范圍層

這里從產(chǎn)品提供的功能(服務(wù))層面來(lái)分析，可以按以下2個(gè)維度區(qū)分，并描述他們帶來(lái)的價(jià)值：

· 基礎(chǔ)功能（必備的功能、解決問(wèn)題的、代表產(chǎn)品屬性的）

· 特色功能（核心且重要的、打破同質(zhì)化尋找差異化的、提升用戶滿意度的）

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

可以通過(guò)：功能架構(gòu)圖、業(yè)務(wù)流程圖、頁(yè)面流程圖去了解產(chǎn)品結(jié)構(gòu)，并且能清晰的看到用戶完成一個(gè)任務(wù)的路徑，中間會(huì)發(fā)生什么，有多少步驟，然后把你的看法記錄下來(lái)。

對(duì)于競(jìng)品我們可以邊操作邊記錄，我建議一定要自己畫一遍，流程圖能幫助你梳理產(chǎn)品邏輯，畫完之后可以分析其中的優(yōu)缺點(diǎn)，對(duì)比之下你會(huì)一目了然（解剖主要功能即可，像注冊(cè)/登錄/綁定 這些常規(guī)功能你自己看著辦~）

推薦工具：XMind、Axure

4.框架層

主要是對(duì)產(chǎn)品的重要界面進(jìn)行分析，并總結(jié)出優(yōu)劣勢(shì)和整改意見，因?yàn)檫@些是整個(gè)產(chǎn)品的靈魂，例如：一級(jí)導(dǎo)航頁(yè)、主要業(yè)務(wù)流程頁(yè)、重要功能頁(yè)、特色功能頁(yè)以及用戶最喜歡的頁(yè)面。

5.表現(xiàn)層

表現(xiàn)層就是一個(gè)產(chǎn)品注入靈魂之后的肉體，既呈現(xiàn)層、UI設(shè)計(jì)。人的審美觀會(huì)根據(jù)時(shí)間發(fā)生變化，所以這里是檢驗(yàn)?zāi)闫綍r(shí)有沒有經(jīng)常性把玩優(yōu)秀APP、有沒有關(guān)注設(shè)計(jì)趨勢(shì)。有設(shè)計(jì)基礎(chǔ)的當(dāng)然可以盡情發(fā)揮，不是設(shè)計(jì)出生的可以對(duì)應(yīng)以下幾個(gè)維度做參考：

· 視覺舒適度

每個(gè)人都有評(píng)價(jià)設(shè)計(jì)的資格，當(dāng)你在使用一款產(chǎn)品的時(shí)候是否被包裝所吸引，一眼看上去辣不辣眼睛，這是產(chǎn)品最基本的臉面問(wèn)題。

（1）顏色、布局、版式、微交互、精致度等，如果這些讓你的情緒產(chǎn)生正面增長(zhǎng)，那么恭喜你，你已經(jīng)被產(chǎn)品的“本能層次設(shè)計(jì)”所吸引；

（2）如果情緒波動(dòng)不大，說(shuō)明還看得過(guò)去~（同質(zhì)化很嚴(yán)重嘛）

（3）如果從視覺上讓你感覺不舒適、皺眉頭等負(fù)面情緒產(chǎn)生，那只能說(shuō)明：還有優(yōu)化的空間（夠委婉了吧）

· 視覺和交互的一致性

比如：頁(yè)面切換方式、反饋機(jī)制、加載刷新、空狀態(tài)、功能性按鈕的狀態(tài)、圖標(biāo)風(fēng)格、元素細(xì)節(jié)、設(shè)備適配、視覺語(yǔ)言等是否將一致性覆蓋到整個(gè)產(chǎn)品

· 品牌感

品牌設(shè)計(jì)是最容易在視覺上打破產(chǎn)品同質(zhì)化現(xiàn)象的方式，很多優(yōu)秀的產(chǎn)品早已深入人心，比如：企鵝-QQ、熊掌-百度、豬臉-飛豬……

將這些形象元素融入到APP里面，創(chuàng)造屬于自己的視覺效果，這是除功能以外尋找差異化的最佳方法。我舉一個(gè)“飛豬”的栗子：

“飛豬”將一個(gè)Logo特征融入到搜索框、toast、圖標(biāo)、標(biāo)簽等地方，從而提升視覺的一致性和品牌感，這是一種思維灌輸式的洗腦，將品牌映入人心

· 功能可見性

圍繞“視覺服從于功能”的原則。UI設(shè)計(jì)要把握好功能的視覺權(quán)重，比如：功能優(yōu)先級(jí)、入口層級(jí)、按鈕層級(jí)、哪些可操作等，這些都需要通過(guò)設(shè)計(jì)讓用戶感知到。

假設(shè)一個(gè)可點(diǎn)擊的地方，但用戶看不出來(lái)、沒感知到，這就是功能可見性極弱，影響使用體驗(yàn)。

同時(shí)還要考慮到用戶群體，如果是一款老年人、色盲者使用的產(chǎn)品，你的功能可見性又是怎樣的呢？

總之，我們做一個(gè)設(shè)計(jì)或者評(píng)價(jià)設(shè)計(jì)之前，腦袋里都要過(guò)一遍用戶使用場(chǎng)景。

八、競(jìng)品分析

基于戰(zhàn)略層面收集到的數(shù)據(jù)，我們需要和競(jìng)品做宏觀對(duì)比、具體對(duì)比，看看別人家產(chǎn)品是怎么做的，為什么受用戶喜歡：

宏觀對(duì)比：

具體對(duì)比：

· 功能差異化對(duì)比

· 視覺和交互對(duì)比

這里可以運(yùn)用文章開頭提到的“APP賞析”，站在UI設(shè)計(jì)和交互體驗(yàn)的角度做對(duì)比分析，羅列出雙方的優(yōu)劣勢(shì)，并提出自己的建議。

另外，這么多資料沒有模板嵌套 會(huì)影響工作效率，我簡(jiǎn)單整理了一些PPT，后面會(huì)把這些文件都分享出來(lái)。

九、假如我是產(chǎn)品經(jīng)理

相信你做到這一步的時(shí)候，已經(jīng)對(duì)產(chǎn)品了解的比較透徹了，在解剖過(guò)程中你肯定有很多疑問(wèn)和自己的想法，沒關(guān)系，大膽把他寫出來(lái)，這能夠檢驗(yàn)?zāi)愕姆治龀晒?

假如你是產(chǎn)品經(jīng)理或設(shè)計(jì)負(fù)責(zé)人，你會(huì)如何優(yōu)化、把控產(chǎn)品呢？就從以下四個(gè)方面開始你的表演吧：

· 功能問(wèn)題

· 交互體驗(yàn)

· 視覺風(fēng)格

· 產(chǎn)品未來(lái)發(fā)展的設(shè)想

十、總結(jié)

（1）千萬(wàn)別急著動(dòng)手，先收集相關(guān)資料和數(shù)據(jù)，認(rèn)真分析并做記錄；

（2）了解產(chǎn)品定位、用戶群體和市場(chǎng)現(xiàn)狀，知道產(chǎn)品為哪些人解決問(wèn)題、設(shè)計(jì)機(jī)會(huì)在哪里？；

（3）找到用戶訴求，參考競(jìng)品，結(jié)合產(chǎn)品現(xiàn)狀給出合理建議；

（4）與競(jìng)品做對(duì)比，找到優(yōu)缺點(diǎn)，設(shè)想改進(jìn)方案。