一、什么是基于場(chǎng)景的設(shè)計(jì)？

1.定義：基于用戶達(dá)到某個(gè)目標(biāo)的一系列場(chǎng)景的判斷與分析，理解用戶每一場(chǎng)景的痛點(diǎn)及需求，結(jié)合上文場(chǎng)景，預(yù)期用戶下一步的目標(biāo)及意圖，通過(guò)設(shè)計(jì)來(lái)幫助用戶提高或讓用戶引起情感上的感動(dòng)/共鳴等目標(biāo)。

2.要點(diǎn)：基于場(chǎng)景，理解需求，預(yù)期意圖，進(jìn)行設(shè)計(jì)。

3.案例：以看電影為例，在整個(gè)看電影的過(guò)程中，涉及到的主要場(chǎng)景有以下六個(gè)：線上買(mǎi)票－去電影院－線下取票－檢票入座－觀影－評(píng)論吐槽。

格瓦拉app設(shè)計(jì)了一個(gè)基于場(chǎng)景的功能：當(dāng)用戶在格瓦拉購(gòu)票成功后，首頁(yè)會(huì)出現(xiàn)一個(gè)人偶小浮標(biāo)，在不同場(chǎng)景下點(diǎn)擊該浮標(biāo)，會(huì)出現(xiàn)不同的內(nèi)容，例如在去電影院的場(chǎng)景下顯示影院地理位置以及滴滴打車(chē)入口；線下取票場(chǎng)景顯示取票二維碼可以快捷取票；線下取票后再點(diǎn)擊小浮標(biāo)顯示電影開(kāi)始時(shí)間以及座位號(hào)；觀影后顯示別人的評(píng)論以及吐槽入口引導(dǎo)用戶去評(píng)論。

二、??為什么要基于場(chǎng)景做設(shè)計(jì)

1.移動(dòng)端的崛起使得用戶的場(chǎng)景千變?nèi)f化，通過(guò)分析用戶在不同使用場(chǎng)景中產(chǎn)品的使用情況，能夠更好的了解用戶的需求和痛點(diǎn)，給出更好的設(shè)計(jì)方案。

2.中小型互聯(lián)網(wǎng)公司根本沒(méi)有那么多時(shí)間和金錢(qián)去進(jìn)行大規(guī)模的用戶調(diào)研，且只關(guān)注幾種典型用戶會(huì)限制產(chǎn)品的發(fā)展。

三、怎樣基于場(chǎng)景做設(shè)計(jì)？

場(chǎng)景設(shè)計(jì)四步曲：場(chǎng)景列舉、機(jī)會(huì)點(diǎn)挖、設(shè)計(jì)策略、衡量標(biāo)準(zhǔn)

1.??列舉場(chǎng)景

a.定義：誰(shuí)（who），在什么時(shí)候(when)，在什么地方(where)，做了什么事情(do)，周?chē)h(huán)境怎么樣(how)。

例子：用戶(who)夜間(when)在陌生的路上(where)開(kāi)車(chē)(do)對(duì)路線不熟悉且路況不好(how)

b.線上場(chǎng)景和線下場(chǎng)景：“where”不同

線下場(chǎng)景的“where”：現(xiàn)實(shí)中的位置，可通過(guò)GPS，藍(lán)牙，Wi-Fi鑰匙等來(lái)檢測(cè)；

線上場(chǎng)景的“where”：app中的某個(gè)頁(yè)面，例如首頁(yè)，支付頁(yè)面，商品詳情頁(yè)等。

c.關(guān)鍵場(chǎng)景獲?。和ㄟ^(guò)操作流程圖來(lái)依次提取其中的關(guān)鍵場(chǎng)景

案例：看電影的流程為：買(mǎi)電影票－去電影院－取票－檢票找座位－觀影－出影院－評(píng)論吐槽

根據(jù)流程可以抽取列舉出看電影涉及到的關(guān)鍵場(chǎng)景為：

1.? ? ?美團(tuán)電影頁(yè)面(where)購(gòu)票(do)；

2.? ? ?電影開(kāi)始前(when)乘車(chē)(do)前往電影院的路上(where)；

3.? ? ?觀影前(when)在電影院(where)通過(guò)自助取票機(jī)取票（do）；

4.? ? ?觀眾(who)拿著爆米花可樂(lè)等零食手忙腳亂(how)地掏出電影票(do)在入口(where)排隊(duì)檢票(do)；檢票工作人員(who)在入口處(where)等到放映前5分鐘(when)開(kāi)始檢查每位觀眾的電影票(do)并撕掉聯(lián)(do)；

5.? ? ?觀眾(who)拿著爆米花可樂(lè)3D眼鏡等手忙腳亂地(how)查看電影票上的座位號(hào)(do)并在昏暗的燈光下越過(guò)同排其他顧客(how)找到自己的座位(do)；

6.? ? ?坐在座位上(where)將手中的爆米花，可樂(lè)，背包等放置好(how)，戴上眼鏡開(kāi)始觀影(do)

7.? ? ?觀影結(jié)束后(where)拿好自己的東西走出影廳(where)將眼鏡還給工作人員(do)，扔掉手里的垃圾(do)，排隊(duì)上廁所(do)；

8.? ? ? 回家的路上(where)和朋友吐槽劇透(do)；在朋友圈(where)曬觀影照片(do)；在購(gòu)票app上(where)評(píng)價(jià)吐槽(do)。

2.機(jī)會(huì)點(diǎn)挖掘

方法：

a. 通過(guò)分析當(dāng)前場(chǎng)景用戶需求挖掘機(jī)會(huì)點(diǎn)；

案例：舉一個(gè)微信語(yǔ)音聊天的例子，當(dāng)手機(jī)處于音量靜音的狀態(tài)(how)在聊天頁(yè)面(where)點(diǎn)擊語(yǔ)音信息(do)，用戶的需求是清晰聽(tīng)到對(duì)方發(fā)送的語(yǔ)音信息，但由于手機(jī)處于音量靜音狀態(tài)聽(tīng)不到語(yǔ)音且用戶無(wú)法快速判斷為什么沒(méi)有聲音，微信基于該場(chǎng)景的痛點(diǎn)及需求設(shè)計(jì)了這樣的方案：當(dāng)用戶處于該場(chǎng)景下，會(huì)有彈框提示用戶調(diào)高音量后播放

b.通過(guò)對(duì)用戶下一步目標(biāo)的預(yù)期來(lái)尋找機(jī)會(huì)點(diǎn)。

首先需要對(duì)上文場(chǎng)景進(jìn)行判斷，結(jié)合對(duì)當(dāng)前場(chǎng)景的描述與分析，預(yù)期用戶接下來(lái)的行為，從而尋求當(dāng)前場(chǎng)景的設(shè)計(jì)機(jī)會(huì)點(diǎn)。

如何對(duì)下一步進(jìn)行預(yù)期：

一、通過(guò)成組的動(dòng)作進(jìn)行預(yù)期，例如，復(fù)制－粘貼、吃飯→付款；

二、通過(guò)用戶的認(rèn)知流程進(jìn)行預(yù)期，例如，拍照時(shí)擺好姿勢(shì)不動(dòng)→準(zhǔn)備完畢可以拍照；

三、通過(guò)產(chǎn)品的使用流程進(jìn)行預(yù)期，例如截圖→分享、買(mǎi)票→取票。

案例：谷歌的hangouts

場(chǎng)景描述：用戶在聊天頁(yè)面(where)聊天的時(shí)候(do)收到對(duì)方發(fā)送的信息“where are you”(how)，根據(jù)對(duì)當(dāng)前場(chǎng)景的判斷，預(yù)期到用戶下一步的行為是回復(fù)對(duì)方自己所在的位置。

“怎樣幫助用戶在接下來(lái)更加方便快捷地回復(fù)所處位置”，是當(dāng)前場(chǎng)景的設(shè)計(jì)機(jī)會(huì)點(diǎn)，hangouts將該機(jī)會(huì)點(diǎn)轉(zhuǎn)化為如下設(shè)計(jì)點(diǎn)：當(dāng)檢測(cè)到對(duì)方發(fā)送的文字中包含“where

are you”的時(shí)候就會(huì)在原有頁(yè)面中插入定位按鈕，點(diǎn)擊定位按鈕后發(fā)送自己的位置給對(duì)方

3. 設(shè)計(jì)策略

以貼心為目標(biāo)的設(shè)計(jì)策略，以高效為目標(biāo)的設(shè)計(jì)策略，以情感化為目標(biāo)的設(shè)計(jì)策略

1.高效。

以高效為目標(biāo)的設(shè)計(jì)策略共有五點(diǎn)，根據(jù)行動(dòng)點(diǎn)明確程度依次為：行動(dòng)點(diǎn)前置插入，行動(dòng)點(diǎn)替換，行動(dòng)相關(guān)推送，突出行動(dòng)點(diǎn)，自動(dòng)執(zhí)行。這五個(gè)設(shè)計(jì)策略都能夠不同程度地提高用戶操作效率，接下來(lái)通過(guò)案例依次介紹一下每個(gè)設(shè)計(jì)策略。

行動(dòng)點(diǎn)前置插入

指將預(yù)期到的用戶下一步的行為點(diǎn)前置到當(dāng)前場(chǎng)景，使得用戶在需要的時(shí)候就能直接操作，達(dá)到縮短關(guān)鍵流程，提高操作效率的作用。形式多數(shù)為直接插入。

上面提到的谷歌hangouts就屬于行動(dòng)點(diǎn)前置插入的典型案例

行動(dòng)點(diǎn)替換

一般是指當(dāng)前場(chǎng)景下某個(gè)行動(dòng)點(diǎn)的功能不再適合當(dāng)前場(chǎng)景，因而將其替換為另外的需求較強(qiáng)的行動(dòng)點(diǎn)，位置不發(fā)生變化，而功能變化，為用戶提供當(dāng)前場(chǎng)景需要的或與下一步意圖相關(guān)的行動(dòng)點(diǎn)能夠幫助用戶提高操作效率。以Mono首頁(yè)為例，當(dāng)用戶在首頁(yè)上滑向下瀏覽時(shí)，導(dǎo)航欄的“推薦”按鈕替換為“返回頂部”，在不改變布局的情況下實(shí)現(xiàn)了高效操作的目的

行動(dòng)點(diǎn)相關(guān)推送提示

指根據(jù)用戶當(dāng)前或下一步的行為提供相關(guān)推送或提示，以輔助用戶進(jìn)行決策行動(dòng)，提高用戶操作效率。

上面提到的微信聊天頁(yè)面音量靜音狀態(tài)下聽(tīng)取語(yǔ)音消息的案例，就是通過(guò)預(yù)測(cè)用戶下一步的行為，而提供了相關(guān)的提示，以使用戶減少思考成本，快速達(dá)到下一步目標(biāo)

突出行動(dòng)點(diǎn)，

預(yù)期到用戶下一步的行為后通過(guò)顏色或提示等方式對(duì)行動(dòng)點(diǎn)進(jìn)行突出，吸引并提醒用戶點(diǎn)擊，減少思考成本，提高操作效率。

直接執(zhí)行，

適用于一些需求較為明確的行動(dòng)點(diǎn)，做用戶之所想，提高操作流暢性及效率。

?

貼心：

通過(guò)機(jī)會(huì)點(diǎn)挖掘階段對(duì)用戶當(dāng)前場(chǎng)景需求分析以及對(duì)下一步目標(biāo)的預(yù)期，設(shè)計(jì)階段需要通過(guò)在細(xì)節(jié)上的設(shè)計(jì)一定程度上滿足用戶當(dāng)前場(chǎng)景下的情感需求，或輔助用戶達(dá)到下一步的目標(biāo)，讓用戶感到貼心與感動(dòng)。

案例：導(dǎo)航app的HUD模式

用戶在行車(chē)過(guò)程中需要集中精力注視前方，尤其是夜間行車(chē)的時(shí)候更需要集中注意力，而現(xiàn)有手機(jī)導(dǎo)航需要不時(shí)低頭查看且顯示屏幕小，導(dǎo)航app的HUD模式能夠很好地滿足該場(chǎng)景下的痛點(diǎn)與需求，可以在夜間將導(dǎo)航信息投影在前車(chē)窗上，使用戶無(wú)需低頭就可以查看

?

情感化：

與上文以貼心為目標(biāo)的設(shè)計(jì)策略類似，以情感化為目標(biāo)的設(shè)計(jì)策略同樣需要具體場(chǎng)景具體分析，主要從細(xì)節(jié)出發(fā)滿足用戶在當(dāng)前場(chǎng)景下的情感需求，讓用戶感動(dòng)，給用戶驚喜。

案例：豆瓣的上午好／下午好／晚上好”

豆瓣首頁(yè)輪播圖下面會(huì)根據(jù)時(shí)間顯示“上午好／下午好／晚上好”的情感化打招呼內(nèi)容，并且當(dāng)用戶向下瀏覽內(nèi)容時(shí)，認(rèn)為用戶當(dāng)前場(chǎng)景下不再需要搜索而是依次瀏覽內(nèi)容，因此情感化的打招呼內(nèi)容吸頂替換搜索框。通過(guò)對(duì)當(dāng)前場(chǎng)景需求的判斷，采用情感化細(xì)節(jié)帶給用戶感動(dòng)與驚喜。

?

4. 衡量標(biāo)準(zhǔn)

效率：該方案是否能夠縮短關(guān)鍵流暢，減少思考成本，從而實(shí)現(xiàn)提高操作效率的目的？

驚喜、感動(dòng)：方案能否想用戶之所想，通過(guò)情感化及貼心的細(xì)節(jié)給用戶驚喜，讓用戶感動(dòng)？

期待：當(dāng)用戶下次再處于該場(chǎng)景中，是否會(huì)對(duì)你的方案產(chǎn)生期待？

總結(jié)：

1.基于場(chǎng)景的設(shè)計(jì)是指基于對(duì)當(dāng)前場(chǎng)景的判斷與分析，理解用戶痛點(diǎn)與需求，結(jié)合前后文預(yù)期用戶的目標(biāo)及意圖，通過(guò)設(shè)計(jì)提高操作效率，給用戶驚喜與感動(dòng)，使用戶期待。 2.怎樣基于場(chǎng)景做設(shè)計(jì)呢，第一步通過(guò)流程圖列舉場(chǎng)景，第二步通過(guò)分析當(dāng)前場(chǎng)景需求或結(jié)上下文預(yù)期用戶下一步行為來(lái)挖掘機(jī)會(huì)點(diǎn)，第三步將機(jī)會(huì)點(diǎn)通過(guò)設(shè)計(jì)策略轉(zhuǎn)化為設(shè)計(jì)點(diǎn)，第四步通過(guò)衡量標(biāo)準(zhǔn)對(duì)設(shè)計(jì)點(diǎn)進(jìn)行衡量判斷以及優(yōu)化。 3.場(chǎng)景挖掘工具可通過(guò)線下打印作為腦暴機(jī)會(huì)點(diǎn)的工具，填寫(xiě)完中間對(duì)場(chǎng)景描述部分后，通過(guò)豎向分析當(dāng)前場(chǎng)景需求，通過(guò)橫向結(jié)合上文場(chǎng)景預(yù)期下一步行為。

五、參考文獻(xiàn)

如何基于場(chǎng)景設(shè)計(jì)產(chǎn)品 http://blog.csdn.net/zoeyyeoz/article/details/51182501

以場(chǎng)景為中心的產(chǎn)品設(shè)計(jì)方法

http://www.woshipm.com/pd/103420.html

基于場(chǎng)景的設(shè)計(jì)方法

http://www.sj33.cn/digital/ued/201608/46100.html

六、更多討論