編輯導(dǎo)讀：場景化設(shè)計是產(chǎn)品設(shè)計中重要的一環(huán)，它能讓用戶按照產(chǎn)品設(shè)定的路線快速完成目標。那么，如何基于場景做正確的設(shè)計呢？本文將從八個方面進行深入分析，希望對你有幫助。

一、什么是場景化設(shè)計？

場景化設(shè)計的定義：根據(jù)特定時間、使用情景、及用戶的特性，進行定制化的設(shè)計，使用戶按照產(chǎn)品設(shè)定的路線快速完成目標。

互聯(lián)網(wǎng)中的2類場景：

挖掘需求：

用戶：到中午飯點，但外面很曬，而且人多得排隊，午休時間又很短。產(chǎn)品：明確用戶精準的需求，提供精準的服務(wù)，點外賣軟件誕生。第一類場景主要是挖掘用戶需求提供用戶使用動機。

研究需求：

用戶：這個軟件點外賣軟件操作繁瑣，找不到想要的。產(chǎn)品：梳理用戶使用流程并優(yōu)化，根據(jù)用戶畫像進行千人千面展示，進行精準推薦。第二類場景主要是精細化用戶如何使用產(chǎn)品，可能會遇到什么問題，針對問題提供解決方案。也是我們設(shè)計師接到最多的需求。

二、場景分析中包含什么內(nèi)容？

場景分析又叫：4W1H場景分析，即誰（Who）在什么時間（When）什么地方（Where）干了什么事（What）所處環(huán)境怎么樣（How）

舉例：

我（Who）在中午快下班的點（When）在公司（Where）打開美團查看外賣送到哪（What）肚子很餓，午休時間短（How）。再比如啊坤（Who）在早上（When）去公司的地鐵上（Where）掏出手機看打籃球的視頻（What）周圍環(huán)境人多嘈雜（How）。

三、場景中存在的變量

1. 人（Who）

用戶存在差異性，不同的用戶看到的內(nèi)容也不同。

淘寶針對每個用戶的使用習(xí)慣生成用戶畫像進行精準推薦從而實現(xiàn)干人千面，比如你搜索過、瀏覽過、購買過的商品，淘寶便會在首頁給你推薦相似產(chǎn)品，（之前有一個梗，某人搜索過骨灰盒，結(jié)果淘寶一直給他推……）更有甚者的是你在看一些新聞資訊軟件時，會出現(xiàn)你淘寶搜索過的商品的廣告。

類似還有：比如你抖音經(jīng)?？葱〗憬阋曨l結(jié)果一直給你推送等……

2. 時間（When）

根據(jù)對用戶使用場景分析，在特定時間進行內(nèi)容推薦。

• 比如經(jīng)常點外賣的朋友會發(fā)現(xiàn)，在快到飯點的時候，一些外賣軟件會提前給你推薦一些商品或活動吸引你點擊。
• 我之前玩過某個游戲，當我晚上打開時游戲中的場景會自動切換成晚上。
• 還有一些訂票軟件，電影票也好火車票也好，在電影快開始前或行程出發(fā)前都會有相應(yīng)的時間提示推送。

3. 地點（Where）

常見在一些旅游產(chǎn)品或周邊服務(wù)產(chǎn)品，用戶定位不同推薦內(nèi)容也不同。

比如飛豬App當你定位是在深圳，那么你首頁看到的都是深圳周邊的吃喝玩樂、攻略等內(nèi)容。當你切換為其他地方時，展示的內(nèi)容截然不同。

4. 環(huán)境（How）

當設(shè)備環(huán)境發(fā)生改變，通過預(yù)測環(huán)境來提升使用體驗。

• 比如當用戶手機連接耳機在播放視頻或聽音樂時，耳機突然拔出，視頻或音樂也會對應(yīng)暫停，緩解尷尬 。
• 又比如網(wǎng)易云音樂設(shè)計團隊根據(jù)用戶具體的使用情景，設(shè)定用戶在有網(wǎng)狀態(tài)下打開App會進入「發(fā)現(xiàn)」的音樂首頁，而在無網(wǎng)情境里會直接跳轉(zhuǎn)「我的」頁面。音樂首頁便于用戶發(fā)現(xiàn)最新音樂資訊與歌單推薦，在線聽歌；而「我的」方便直接打開「本地音樂」列表，離線聽歌。好的體驗永遠離不開場景特征與需求，區(qū)別化的頁面跳轉(zhuǎn)為用戶縮短了行為路徑，節(jié)省了操作步驟，讓使用體驗更貼合具體使用場景。
• 還有比如你的手機防水現(xiàn)在剛從水里撈出來的情況下去充電，手機是無法正常充電并且會提示充電接口潮濕，提高產(chǎn)品使用安全性。

四、場景化設(shè)計有什么好處？

好處在于通過對用戶使用場景進行分析，有利于幫助我們了解到當前場景下用戶的需求和痛點，并通過設(shè)計手段進行優(yōu)化，以更好滿足用戶體驗?zāi)繕撕彤a(chǎn)品商業(yè)目標。

為了更好地理解上面這段話，舉例補充：

假設(shè)你女朋友是用戶，你是產(chǎn)品。在女朋友體驗了一段時間后對你積壓了很多不滿意，那么你現(xiàn)在就要注意，此刻你女朋友的體驗?zāi)繕说貌坏綕M足，你有帶綠帽子的風險，對應(yīng)的也就是用戶會尋找其他可以替代的產(chǎn)品。

再舉一個例子，之前在脈脈上看到的一對男女朋友的對話截圖。

大致意思是：

女：假如某天我懷孕了怎么辦？男：結(jié)婚啊。女：如果孩子不是你的怎么辦？男：分手啊。結(jié)果場面瞬間失控……

上述例子能很好的體現(xiàn)在產(chǎn)品設(shè)計中，如例中，男女的思維方式不同導(dǎo)致男生沒有g(shù)et到女生的問題重點。對應(yīng)在產(chǎn)品設(shè)計中就是產(chǎn)品設(shè)計者因為無法了解到用戶的真實使用場景，很容易想當然的設(shè)計。

五、如何基于場景進行設(shè)計？

1. 場景挖掘工具

作用：借助場景挖掘工具來優(yōu)化信息展示，輔助運用于場景舉例、機會點挖掘步驟中，目的是對關(guān)鍵場景進行清晰描述并展現(xiàn)，以此幫助設(shè)計師在場景設(shè)計四部曲中更好的挖掘設(shè)計機會點。

2. 機會點挖掘

分析當前場景下已有的痛點和需求挖掘機會點。

1）垂直分析當前場景

分析當前場景下用戶的真實需求并挖掘機會點。

QQ群內(nèi)左滑快速引用。

場景描述

用戶（Who）在QQ群內(nèi)（Where）和陌生群友吹水聊天（What）群里人很活躍，消息很多（How）當聊到某個問題的時候（When）想就這個問題，詢問細節(jié)（What）但不知道怎么引用這個問題，而且長按后操作很多，引用有點復(fù)雜（How）。

QQ給出的解決方法是，選擇指定消息采用簡單的左滑手勢松手后即可快速引用進行回復(fù)。

應(yīng)用程序側(cè)屏：

場景描述

用戶（Who）在早上（Where）出門趕公交車上班（What）想打開車來了App查看公交車到站時間，但手機上App很多找半天（How）。

基于用戶手機上應(yīng)用程序很多的情況下，提供左滑側(cè)邊欄功能。用戶可設(shè)置使用頻率很高或特定時間急需要用到的應(yīng)用程序，方便用戶減少查找時間。

在設(shè)置常用應(yīng)用場景下，還有一個痛點需要解決，我手機上有幾百個應(yīng)用，但設(shè)置常用應(yīng)用程序界面沒有搜索或快速篩選功能，導(dǎo)致我無法快速找到指定應(yīng)用進行設(shè)置。

Chrome瀏覽器多媒體控制面板：

場景描述

用戶（Who）在Chrome瀏覽器上（When）打開同視頻不同片源的網(wǎng)頁進行預(yù)加載（What）打開的網(wǎng)頁很多，當視頻加載好后，電腦播放聲音但很難快速找到已經(jīng)加載出視頻的那個網(wǎng)頁（How）

基于用戶在網(wǎng)頁進行多個多媒體播放時，Chrome瀏覽器新增多媒體控制面板，可快速對后臺網(wǎng)頁中加載好的多媒體進行操作，節(jié)省了用戶網(wǎng)頁標題查找的時間。

微信設(shè)置提醒：

場景描述

用戶（Who）在微信上（When）與小號聊天，約定某個時機做什么事（What）手頭上還有很多事要忙，回頭就忘記了（How）。

「微信」的聊天定時提醒功能，就能很好的幫你解決這個問題。在「微信」里長按對話內(nèi)容，就可以針對某條說話內(nèi)容設(shè)置時間提醒了。相較于設(shè)定鬧鐘和計時器，針對具體對話信息與事件的提醒設(shè)置更具針對性，更符合實際使用場景需求。

基于當前場景進行優(yōu)化的案例的還有很多……

2）橫向預(yù)判下一場景

結(jié)合上一場景分析當前場景并預(yù)期用戶下ー步意圖，以此發(fā)現(xiàn)機會點。

1.通過連貫成組動作進行預(yù)判

例如：輸入框編輯一發(fā)送、復(fù)制一粘貼、輸入驗證碼—登錄。

滴滴登錄驗證碼免手動確定：

當用戶需要獲取驗證碼登錄時，可直接輸入短信驗證碼即可自動校驗減少點擊確定操作。一方面提示了交互效率，一方面精簡頁面元素減少信息干擾。

更有甚者可直接發(fā)送短信一鍵登錄。

淘寶淘口令/百度網(wǎng)盤鏈接識別：

我們都很熟悉復(fù)制「淘寶」的商品分享鏈接，打開APP就能直接跳轉(zhuǎn)頁面至商品詳情頁的操作。新版「百度網(wǎng)盤」的分享功能也采用了類似的設(shè)計邏輯：只要一鍵復(fù)制完整的網(wǎng)盤鏈接與密碼，登錄app時系統(tǒng)就會自動讀取分享鏈接與提取碼信息。用戶點擊「立即查看」按鈕即可訪問網(wǎng)盤內(nèi)容頁，無須再手動粘貼或輸入提取密碼。原本繁瑣的操作步驟被簡化，更加合理的操作路徑讓使用過程變得高效而簡單。

2.根據(jù)用戶認知流程預(yù)判

例如：當前視頻結(jié)束—自動播放下個、知乎收藏回答—提示分享、屏幕旋轉(zhuǎn)—切換全屏。

YouTube自動播放下一個視頻：

在YouTube上，當用戶當前視頻觀看結(jié)束后如果用戶沒有其他操作，YouTube則會在8秒后自動播放下一個視頻（根據(jù)用戶喜好自動推薦）增加用戶時間投入。

快速切換全屏：

在用戶開啟手機屏幕自動旋轉(zhuǎn)后，播放視頻都可以根據(jù)重力傳感器，進行快速全屏切換，減少點擊操作。

3）根據(jù)產(chǎn)品使用流程預(yù)判

多用于各式智能場景。例如：點外賣軟件在用戶點完外賣后，會在首頁右下角生成一個智能場景模塊，展示訂單配送入口、飛豬在進行地址切換后，會判斷切換地址是否與定位地址一樣，如果不同則會推送相關(guān)行程機票及其他旅行服務(wù)、還有淘寶聊天窗口快捷信息。

新消息浮窗提示：

在用戶收到新消息后，三星手機會及時浮窗提示，用戶在當前頁面就可及時查看最新消息并直接回復(fù)，減少頁面跳轉(zhuǎn)。

飛豬地址切換及時推送：

在用戶地址由本地切換為其他城市后，飛豬預(yù)測用戶目標是旅游，進而推薦對應(yīng)城市行程機票、其他與該城市相關(guān)的旅游服務(wù)，以此縮短用戶觸達步驟提高用戶購買率。

百度網(wǎng)盤文件選擇優(yōu)化：

百度網(wǎng)盤在選擇文件時充分發(fā)揮了什么場景下做什么事，在用戶選擇后可喚起底部操作并隱藏tab多余操作。一方面交互效率更高（減少多余選擇），一方面對初次使用的用戶進行視線引導(dǎo)降低操作難度。

六、設(shè)計策略

將場景中挖掘到的機會點，轉(zhuǎn)化成設(shè)計策略。

基于場景設(shè)計設(shè)計方案設(shè)定 3 個目標：交互更高效，細節(jié)更貼心、使用有共鳴。

1. 高效：行動點前置插入、行動點替換、行動點推送提示、突出行動點、直接執(zhí)行
2. 貼心：貼心的細節(jié)
3. 情感化：品牌元素的融入

1. 高效

以高效為目標的設(shè)計策略共有5點，其宗旨是對用戶行為預(yù)判將行動點提前，讓用戶更快達成目標。

根據(jù)對用戶行為預(yù)判的準確程度，將設(shè)計策略中5點按操作執(zhí)行強到弱排序依次為：直接執(zhí)行、行動點前置插入、行動點替換、行動點相關(guān)推薦、突出行動點。以上5個策略能不同程度提高用戶操作效率，接下來借助案例逐個講解。

1）直接執(zhí)行

直接執(zhí)行需要對用戶在當下場景下的需求或目的非常明確，提高操作流暢性和交互效率。

比如：當你手機打開自動旋轉(zhuǎn)后在播放 Youtube 視頻時，可旋轉(zhuǎn)手機即可快速切換全屏播放模式避免單手操作困難。

再比如在你 mac 打開兩個窗口時，你只需要將鼠標放在任意一個窗口上即可上下滑動瀏覽內(nèi)容，不需要點擊選中窗口。

2）行動點前置插入

即通過場景分析，預(yù)判用戶下一步目標和行為，將能夠滿足用戶目標的模塊插入當前該場景，已達到縮短觸達路徑提高交互效率的作用。

3）行動點替換

場景內(nèi)某一按鈕隨某個交互發(fā)送變化（位置不變功能變），需求等級低的替換為需求等級強的。

4）行動點推送提示

行動點推送與行動點前置唯一不同的地方在于：推送為彈窗/推送提示等，可手動或自動關(guān)閉。

5）突出行動點

突出行動點的案例很多，比如：banner購買按鈕動效、頁面中某個很搶眼的按鈕等等……

通過將該場景下重要功能進行強化凸顯，來引導(dǎo)用戶進行操作。凸顯的方式很多：有色彩對比、減少多余選擇、投影、動效等…最終目標都是突出頁面功能，引導(dǎo)用戶決策，讓用戶更快更好地完成目標。

2. 貼心

基于場景的設(shè)計像貼心的朋友一樣關(guān)注用戶的每個細節(jié)，讓用戶有被理解和被關(guān)注的感覺。以用戶所處場景及其需求為基礎(chǔ)，貼心的設(shè)計需要著重考量場景中的細節(jié)或接觸點，拉近產(chǎn)品與用戶的距離，讓用戶獲得更好的體驗。

3. 情感化

基于場景的情感化設(shè)計，是指以用戶當下所處場景為基礎(chǔ)，通過使用一些與用戶所處場景相關(guān)聯(lián)的設(shè)計元素，來增強用戶代入感并誘發(fā)用戶情緒反應(yīng)，最后提高執(zhí)行特定行為的可能性的設(shè)計。

七、衡量標準

在經(jīng)過上述一系列流程后，我們可能產(chǎn)出了一些設(shè)計方案，那么我們最終如何去進行驗證呢？

對基于場景的設(shè)計方案設(shè)定了4個簡單的衡量標準：

1. 高效：該設(shè)計方案是否真提高了用戶使用效率？
2. 驚喜：是否想用戶所想，通過情感化及貼心的細節(jié)給用戶驚喜？
3. 感動：能否給用戶內(nèi)心帶來強烈的震撼并認同？
4. 期待：用戶在下次處于相同場景下，是否對該方案產(chǎn)生期待？

由于精力有限，關(guān)于這塊可暫時按下暫停，因為這些點具體落實下來又牽扯到很多知識點，比如：用戶研究、數(shù)據(jù)驗證等…每一個點都能講很多，后面我再找機會去研究。當然，感興趣的同學(xué)也可以多上網(wǎng)查找相關(guān)資料~

通過對比，我們可以發(fā)現(xiàn)這位設(shè)計師在改版后比較明顯的是：卡片、投影強化了模塊區(qū)分。但是對于模塊的重要程度排序、信息的權(quán)重處理、整體配色等包括場景化設(shè)計都還有可提升的空間。接下來我會以這個案例介紹下在做測試題時如何展示自己對場景化設(shè)計來提升產(chǎn)品體驗的思考。

正式開始前，我們可以回到上面先大概看下這位設(shè)計師的帖子內(nèi)容（看不清的同學(xué)可放大網(wǎng)頁），然后問自己一個問題，這個頁面的改版目標是什么？

八、改版前的設(shè)計目標是什么？

1. 產(chǎn)品側(cè)

任務(wù)處理類產(chǎn)品，提升用戶操作效率，加快用戶任務(wù)處理速度，提高頁面利用率。

2. 設(shè)計側(cè)

設(shè)計是提供解決方案，即如何提升用戶操作效率？如何加快用戶處理速度？可以通過降低視覺噪點、加強信息層級、突出頁面重點、結(jié)合使用場景提供最佳方案。

將該產(chǎn)品用戶使用場景中可能遇到的問題進行列舉：

頁面層次拆解：

上面講到，我們改版目標是提升使用效率，與該場景下用戶目標一致，那么首先需要保證視覺上瀏覽順暢。通過一維分析法可以看到改版前頁面信息層較多，且閱讀較跳躍。該設(shè)計師在改版后有一定改善，但還可以繼續(xù)優(yōu)化。

模塊重要層級排序：

通過將頁面模塊進行劃分并按重要程度繼續(xù)排序以確認頁層次排布，減少頁面視覺噪點，突出重要模塊，使用戶閱讀更流暢有節(jié)奏感。

設(shè)計產(chǎn)出：

設(shè)計闡述：

以上就是這期要分享的全部內(nèi)容，在看了u一點料2后希望能將自己所學(xué)的內(nèi)容進行實踐鞏固并分享。

這期的案例并不算復(fù)雜，但因為項目背景資料比較少，我不保證這個是合適的方案，所以在實際工作中還需要與需求方深度溝通并且進行用戶調(diào)研，了解用戶真實使用情況才能產(chǎn)出更優(yōu)策略。

在后面的工作里如果有機會的話也希望能拿出更多實際案例來進行講解~

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

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