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

一、什么是場景化設計？

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

互聯網中的2類場景：

挖掘需求：

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

研究需求：

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

二、場景分析中包含什么內容？

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

舉例：

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

三、場景中存在的變量

1. 人（Who）

用戶存在差異性，不同的用戶看到的內容也不同。

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

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

2. 時間（When）

根據對用戶使用場景分析，在特定時間進行內容推薦。

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

3. 地點（Where）

常見在一些旅游產品或周邊服務產品，用戶定位不同推薦內容也不同。

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

4. 環境（How）

當設備環境發生改變，通過預測環境來提升使用體驗。

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

四、場景化設計有什么好處？

好處在于通過對用戶使用場景進行分析，有利于幫助我們了解到當前場景下用戶的需求和痛點，并通過設計手段進行優化，以更好滿足用戶體驗目標和產品商業目標。

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

假設你女朋友是用戶，你是產品。在女朋友體驗了一段時間后對你積壓了很多不滿意，那么你現在就要注意，此刻你女朋友的體驗目標得不到滿足，你有帶綠帽子的風險，對應的也就是用戶會尋找其他可以替代的產品。

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

大致意思是：

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

上述例子能很好的體現在產品設計中，如例中，男女的思維方式不同導致男生沒有get到女生的問題重點。對應在產品設計中就是產品設計者因為無法了解到用戶的真實使用場景，很容易想當然的設計。

五、如何基于場景進行設計？

1. 場景挖掘工具

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

2. 機會點挖掘

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

1）垂直分析當前場景

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

QQ群內左滑快速引用。

場景描述

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

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

應用程序側屏：

場景描述

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

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

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

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

場景描述

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

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

微信設置提醒：

場景描述

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

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

基于當前場景進行優化的案例的還有很多……

2）橫向預判下一場景

結合上一場景分析當前場景并預期用戶下ー步意圖，以此發現機會點。

1.通過連貫成組動作進行預判

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

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

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

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

淘寶淘口令/百度網盤鏈接識別：

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

2.根據用戶認知流程預判

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

YouTube自動播放下一個視頻：

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

快速切換全屏：

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

3）根據產品使用流程預判

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

新消息浮窗提示：

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

飛豬地址切換及時推送：

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

百度網盤文件選擇優化：

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

六、設計策略

將場景中挖掘到的機會點，轉化成設計策略。

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

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

1. 高效

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

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

1）直接執行

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

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

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

2）行動點前置插入

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

3）行動點替換

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

4）行動點推送提示

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

5）突出行動點

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

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

2. 貼心

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

3. 情感化

基于場景的情感化設計，是指以用戶當下所處場景為基礎，通過使用一些與用戶所處場景相關聯的設計元素，來增強用戶代入感并誘發用戶情緒反應，最后提高執行特定行為的可能性的設計。

七、衡量標準

在經過上述一系列流程后，我們可能產出了一些設計方案，那么我們最終如何去進行驗證呢？

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

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

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

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

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

八、改版前的設計目標是什么？

1. 產品側

任務處理類產品，提升用戶操作效率，加快用戶任務處理速度，提高頁面利用率。

2. 設計側

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

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

頁面層次拆解：

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

模塊重要層級排序：

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

設計產出：

設計闡述：

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

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

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

本文由 @幺零三 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議