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

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

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

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

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

模態(tài)屏幕示例

模態(tài)屏幕有不同的形狀和大小：

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

彈出窗口（左2）

氣泡彈窗（左3）

燈箱彈窗（左4）

快訊/通知

...

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

模態(tài)窗口

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

 —— 維基百科

大多數(shù)模態(tài)屏幕，特別是在桌面應(yīng)用上可以輕松識別，因為它們覆蓋主窗口并且可見：主窗口背景遮罩的彈出窗，彈出菜單和彈出框?qū)υ捒?，燈箱彈框，警告?..

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

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

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

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

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

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

“模態(tài)通過阻止人們在完成任務(wù)或解除消息或視圖之前做其他事情來創(chuàng)造焦點” 

—— Apple

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

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

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

資料來源：https：//giphy.com/gifs/tDgXAst2PhIYw

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

Purrrfect用戶流程

另外用戶可以在每個階段執(zhí)行補充操作。例如他可以在小貓數(shù)據(jù)庫頁面中將另一只小貓?zhí)砑拥綌?shù)據(jù)庫中，又或者他可以在小貓詳情頁中編輯數(shù)據(jù)。

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

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

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

——Google

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

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

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

Purrrfect用戶界面

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

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

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

——? Apple

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

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

不一致的Apple UI

左邊的不一致可以通過....來解決

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

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

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

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

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

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

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

多步模態(tài)

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

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

動畫

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

iOS：動畫在iOS中高度標準化。

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

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

Android： Android上的動畫更加的豐富多樣。

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

總結(jié)

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

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

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

1、ZEPETO是如何做到強制用戶注冊，卻不讓人反感的？

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

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

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

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

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

為了吸引粉絲，短視頻的作者會爭相模仿，一些觀眾用戶也會因為有趣去體驗嘗試，但很多視頻里的體驗和動作都是存在安全隱患的。為了規(guī)避風(fēng)險，「抖音」里某些視頻的下方會提示：「效果未知，請勿輕易嘗試」或者「該行為存在危險，請勿輕易模仿」。

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

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

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

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

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

對于大多數(shù)團隊來說，敏捷開發(fā)時間短任務(wù)重，在有限時間內(nèi)并不能把所有功能都上線。「微信」團隊在訂閱號里，添加了未開發(fā)功能提示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10、美團外賣上線「加密號碼」，讓訂餐更安心

今天在用「美團外賣」與商家進行聯(lián)系時，發(fā)現(xiàn)了一個「加密號碼」的彈窗。當(dāng)你確認聯(lián)系商家后，會出現(xiàn)語音提示：「美團外賣保護你的隱私，商家將不會知道你的號碼」。這個小細節(jié)很贊是因為在保護了用戶隱私的同時也通過語音提示在用戶心中強化了平臺的安全性與貼心。

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

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

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

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

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

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

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

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

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

二、寫這個有什么用？

· 一般利用產(chǎn)品體驗報告來指導(dǎo)產(chǎn)品改進；

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

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

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

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

三、前期準備

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

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

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

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

收集&整理資料

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

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

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

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

分析資料

可以在寫報告的時候同時進行。如果提前做好初步的資料分析，將會提高后面寫報告的效率。

分析具體層面：

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

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

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

分析宏觀層面：

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

推薦工具

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

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

四、輸出框架

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

五、體驗環(huán)境

六、產(chǎn)品背景

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

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

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

七、產(chǎn)品分析

1.戰(zhàn)略層

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

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

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

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

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

《用戶體驗旅程圖 | 概念&實操&模板》

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

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

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

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

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

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

· 定位有沒有覆蓋到？精不精準？不精準怎么辦？

· 移動支付時賬號內(nèi)無零錢怎么辦？

· 正在等車時，手機沒電怎么辦？

…

這個時候需要你保持一顆同理心，通過一個切入點把思維發(fā)散開，產(chǎn)品設(shè)計要考慮到極端情況，必須不停的問“為什么”?？梢越柚鷪F隊的力量一起完善，C端產(chǎn)品每個人都是用戶。B端產(chǎn)品就需要身臨其境去現(xiàn)場，或者實實在在找用戶調(diào)研。

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

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

2.范圍層

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

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

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

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

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

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

推薦工具：XMind、Axure

4.框架層

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

5.表現(xiàn)層

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

· 視覺舒適度

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

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

（2）如果情緒波動不大，說明還看得過去~（同質(zhì)化很嚴重嘛）

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

· 視覺和交互的一致性

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

· 品牌感

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

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

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

· 功能可見性

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

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

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

總之，我們做一個設(shè)計或者評價設(shè)計之前，腦袋里都要過一遍用戶使用場景。

八、競品分析

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

宏觀對比：

具體對比：

· 功能差異化對比

· 視覺和交互對比

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

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

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

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

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

· 功能問題

· 交互體驗

· 視覺風(fēng)格

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

十、總結(jié)

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

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

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

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