2019-11-5 資深UI設(shè)計(jì)者
本文從什么是場(chǎng)景化、場(chǎng)景化設(shè)計(jì)的案例、為什么要基于場(chǎng)景化做設(shè)計(jì)和如何進(jìn)行場(chǎng)景化設(shè)計(jì) 4 個(gè)方面為你完整梳理場(chǎng)景化設(shè)計(jì)思維的知識(shí)點(diǎn)。
「場(chǎng)景」在百度百科里的定義是：戲劇、電影中的場(chǎng)面，泛指情景。情景又指：
在戲劇或影視劇里，場(chǎng)景由人物，時(shí)空，事件（行為），環(huán)境（社會(huì)環(huán)境和自然環(huán)境）等要素構(gòu)成。
互聯(lián)網(wǎng)中的「場(chǎng)景」我把它分為兩類，一類是為了實(shí)現(xiàn)用戶目標(biāo)而產(chǎn)生的場(chǎng)景，這種類型的場(chǎng)景需要明確用戶目標(biāo)，可能并不需要涵蓋用戶是怎么實(shí)現(xiàn)目標(biāo)的。這類場(chǎng)景指根據(jù)用戶的精準(zhǔn)需求，為其提供精準(zhǔn)服務(wù)，用明確的差異化服務(wù)給用戶提供一個(gè)使用產(chǎn)品的動(dòng)機(jī)。比如微博和微信，微信定位是熟人社交，微博則是陌生人社交。另一類是更加精細(xì)化的場(chǎng)景，這類場(chǎng)景需要明確用戶操作流程。本文主要針對(duì)第二類場(chǎng)景展開(kāi)。
場(chǎng)景化設(shè)計(jì)指基于對(duì)場(chǎng)景的分析，得出用戶痛點(diǎn)與需求，結(jié)合前后場(chǎng)景預(yù)判用戶目標(biāo)，通過(guò)設(shè)計(jì)提高用戶效率，給予用戶驚喜與感動(dòng)。
場(chǎng)景要素包括：4W+1H，即Who人、When時(shí)間、Where地點(diǎn)、What事件 、How環(huán)境，什么人，在什么時(shí)候，在什么地方，做了什么事情，所處的環(huán)境如何。其中 Where 又包括線上地點(diǎn)和線下地點(diǎn)，線下指現(xiàn)實(shí)中的定位，可以通過(guò)手機(jī)信號(hào)塔數(shù)據(jù)（GPS），Wifi 連接等獲??；線上指用戶所處的具體頁(yè)面。
如：用戶（who）早上上班（when）在地鐵上（where）看電子書(shū)（what），地鐵上人多嘈雜且操作不方便（how）。再比如用戶（who）中午（when）在辦公室里（where）點(diǎn)外賣(mài)（what），肚子很餓還不知道吃什么（how）。五要素就像口訣，幫助我們?nèi)婵焖俚孛枋鰣?chǎng)景。
為幫助大家更好的理解場(chǎng)景化設(shè)計(jì)，這里基于上面提到的場(chǎng)景五要素舉一些例子。
人是變量：用戶不同，看到的信息不同。隨著大數(shù)據(jù)和智能推薦技術(shù)的普及，越來(lái)越多的產(chǎn)品通過(guò)挖掘不同用戶的喜好，生成用戶畫(huà)像，為每位用戶提供「千人千面」的個(gè)性化內(nèi)容。這樣的產(chǎn)品大家都很熟悉，比如抖音，淘寶，微博，今日頭條。
時(shí)間是變量：時(shí)間不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，當(dāng)在出行類 app 上定好行程后，MIUI11 就會(huì)自動(dòng)將該行程記錄在負(fù)一屏顯示并同步日歷，同時(shí)會(huì)根據(jù)出行的時(shí)間點(diǎn)，在通知欄實(shí)時(shí)更新提示：
再比如在 Google Maps 的 app 里開(kāi)啟導(dǎo)航時(shí)，如果目的地在預(yù)計(jì)到達(dá)時(shí)間還沒(méi)有開(kāi)門(mén)，或者快要/已經(jīng)關(guān)門(mén)了的話，會(huì)有個(gè)彈窗提醒。
還有螞蟻森林的頁(yè)面會(huì)根據(jù)用戶打開(kāi)的時(shí)間進(jìn)行變化（白天與夜晚模式）等等，這些都是充分考慮了場(chǎng)景中時(shí)間這一變量，才有如此暖心的設(shè)計(jì)。
地點(diǎn)是變量：同一個(gè)用戶，在不同地點(diǎn)看到的信息不同。比如，大眾點(diǎn)評(píng)APP當(dāng)用戶從常住地北京（where）定位成非常住地杭州（where）時(shí)，根據(jù)用戶的上個(gè)場(chǎng)景與當(dāng)前場(chǎng)景預(yù)測(cè)用戶可能處于旅游狀態(tài)，從而預(yù)測(cè)用戶下一步的目標(biāo)是在杭州「吃喝玩樂(lè)」，所以首頁(yè)和攻略頁(yè)的內(nèi)容都發(fā)生了變化，為用戶推薦旅行地的「吃喝玩樂(lè)」。
環(huán)境是變量：不同環(huán)境看到的信息不同，比如設(shè)備環(huán)境發(fā)生變化時(shí)：iOS13 中的備忘錄頁(yè)面，將「添加」按鈕移到了右下角。為什么？因?yàn)槭謾C(jī)屏幕越來(lái)越大，把按鈕從右上角移到右下角，更有利于用戶單手操作。
再比如：我們?cè)隈{駛環(huán)境下，要保持注意力集中，避免或減少分心駕駛導(dǎo)致的交通事故，所以基于駕駛環(huán)境，iOS11 上線了駕駛模式功能。當(dāng) iphone 與車(chē)內(nèi)的 USB 或藍(lán)牙連接，或 iphone 感知到人的移動(dòng)速度時(shí)，iphone 就會(huì)自動(dòng)進(jìn)入駕駛模式，在該模式下，任何人發(fā)短信，我們都不會(huì)收到提示，對(duì)方會(huì)收到「我正在駕駛，稍后回復(fù)您」的自動(dòng)回復(fù)。同時(shí)，iphone 會(huì)追加一條短信，提示對(duì)方只要回復(fù)「緊急」關(guān)鍵詞，我們就能立刻接收到他們的消息提示。
通過(guò)上面的舉例想必大家已經(jīng)了解到了基于場(chǎng)景做設(shè)計(jì)的好處。由于與用戶的空間相隔，設(shè)計(jì)師無(wú)法感知用戶在真實(shí)場(chǎng)景中使用產(chǎn)品的具體情況。通過(guò)場(chǎng)景化設(shè)計(jì)的方法，對(duì)用戶使用場(chǎng)景進(jìn)行分析與預(yù)期，可以幫助設(shè)計(jì)師找到用戶與場(chǎng)景的內(nèi)在聯(lián)系，探索新的功能及交互方式。
可以概括為以下四步。
根據(jù)用戶的使用流程和行為路徑列舉場(chǎng)景，這里以乘坐飛機(jī)（手機(jī)購(gòu)票）為例，列舉乘坐飛機(jī)涉及到的關(guān)鍵場(chǎng)景：
通過(guò)對(duì)關(guān)鍵場(chǎng)景的詳細(xì)描述，我們將摸不著的用戶場(chǎng)景像過(guò)電影一樣在眼前一一呈現(xiàn)，有利于我們發(fā)現(xiàn)很多想不到或者通過(guò)調(diào)研得不到的細(xì)節(jié)，幫助我們發(fā)現(xiàn)用戶真正的痛點(diǎn)與需求，洞察設(shè)計(jì)機(jī)會(huì)點(diǎn)。
完成了第一步的場(chǎng)景列舉，我們對(duì)流程中涉及的場(chǎng)景有了深刻的了解。下一步就是對(duì)場(chǎng)景的判斷與分析，挖掘機(jī)會(huì)點(diǎn)。機(jī)會(huì)點(diǎn)挖掘有兩個(gè)方向，一是通過(guò)分析當(dāng)前場(chǎng)景存在的痛點(diǎn)和需求挖掘機(jī)會(huì)點(diǎn)，二是通過(guò)對(duì)用戶下一步目標(biāo)的預(yù)判尋找機(jī)會(huì)點(diǎn)。
通過(guò)分析當(dāng)前場(chǎng)景存在的痛點(diǎn)和需求挖掘機(jī)會(huì)點(diǎn)
支付寶「朋友」界面，當(dāng)用戶輸入某數(shù)值時(shí)，輸入框上方會(huì)自動(dòng)顯示「給對(duì)方轉(zhuǎn)賬***元」按鈕，用戶可點(diǎn)擊該按鈕完成轉(zhuǎn)賬。這是因?yàn)榻?jīng)常有用戶誤以為輸入數(shù)值發(fā)送即完成了轉(zhuǎn)賬，導(dǎo)致很多尷尬的狀況出現(xiàn)?；谠搱?chǎng)景下的痛點(diǎn)與需求，支付寶做了這個(gè)改進(jìn)，貼心又好用。
iOS 系統(tǒng)在切換 APP 操作時(shí)，會(huì)將一些金融類 APP 虛化，以此來(lái)保證用戶信息安全。這一設(shè)計(jì)細(xì)節(jié)也是充分考慮了用戶在切換 APP 時(shí)的場(chǎng)景，解除了用戶在公告場(chǎng)合擔(dān)心被窺屏而泄露個(gè)人財(cái)富信息的擔(dān)憂。
還有，當(dāng)我們用耳機(jī)聽(tīng)音樂(lè)或播放視頻時(shí)，拔下耳機(jī)，聲音就會(huì)自動(dòng)停掉，這樣就算在安靜的場(chǎng)合聽(tīng)音樂(lè)或者看視頻，耳機(jī)不小心掉下來(lái)也不會(huì)發(fā)出尷尬的聲音，這些都是充分考慮了用戶當(dāng)前使用時(shí)的場(chǎng)景，才做出如此貼心的設(shè)計(jì)。
通過(guò)對(duì)用戶下一步目標(biāo)的預(yù)判尋找機(jī)會(huì)點(diǎn)
第二個(gè)方法是通過(guò)對(duì)用戶當(dāng)前場(chǎng)景的分析，預(yù)判用戶下一步的行為與目標(biāo)，從而尋找當(dāng)前場(chǎng)景的機(jī)會(huì)點(diǎn)。
如何預(yù)期用戶下一步目標(biāo)？有三個(gè)方法：
在谷歌瀏覽器，當(dāng)我們打開(kāi)多個(gè)瀏覽窗口時(shí)，通常需要手動(dòng)一個(gè)個(gè)地關(guān)閉標(biāo)簽頁(yè)。chrome 充分考慮到了用戶的使用場(chǎng)景，當(dāng)用戶關(guān)閉一個(gè)標(biāo)簽頁(yè)時(shí)，預(yù)期用戶會(huì)關(guān)閉下一個(gè)標(biāo)簽頁(yè)，所以當(dāng)關(guān)閉一個(gè)標(biāo)簽時(shí)，相鄰標(biāo)簽會(huì)自動(dòng)靠近，保證關(guān)閉的按鈕始終位于鼠標(biāo)的當(dāng)前位置，這樣用戶就不用移動(dòng)鼠標(biāo)關(guān)閉下一個(gè)標(biāo)簽頁(yè)，提高了用戶的使用效率。
在將機(jī)會(huì)點(diǎn)轉(zhuǎn)化為具體的設(shè)計(jì)時(shí)，有兩個(gè)可作為依據(jù)的設(shè)計(jì)原則，分別為，情感化。
實(shí)現(xiàn)有以下幾個(gè)方法：
行動(dòng)點(diǎn)前置
通過(guò)對(duì)用戶下一目標(biāo)的預(yù)測(cè)，將用戶目標(biāo)在當(dāng)前場(chǎng)景展示，縮短操作流程，達(dá)到的目標(biāo)。如淘寶首頁(yè)的 tab 欄會(huì)根據(jù)每個(gè)用戶的瀏覽記錄預(yù)測(cè)用戶目標(biāo)，千人千面?zhèn)€性化展現(xiàn)，縮短了用戶查找商品的路徑，提高商品購(gòu)買(mǎi)效率。
行動(dòng)點(diǎn)置換
還是拿淘寶舉例，淘寶底部的第一個(gè)導(dǎo)航，當(dāng)用戶滑動(dòng)首頁(yè)下方的商品流時(shí)，該按鈕由首頁(yè)變成置頂。
行動(dòng)點(diǎn)相關(guān)提示
意思是根據(jù)用戶當(dāng)前目標(biāo)或下一步目標(biāo)進(jìn)行相關(guān)的提示。如支付寶朋友頁(yè)面，當(dāng)上滑時(shí)，會(huì)出現(xiàn)「找人轉(zhuǎn)賬」的提示，點(diǎn)擊進(jìn)入朋友列表的純凈模式（去掉了服務(wù)通知等跟轉(zhuǎn)賬無(wú)用的列表），提高了用戶尋找的效率。
再比如，網(wǎng)易郵箱，當(dāng)郵件中提到附件，但是沒(méi)有上傳附件時(shí)，點(diǎn)擊發(fā)送后，系統(tǒng)彈出下方的提示，解決了用戶常常忘記添加附件的困擾。
突出行動(dòng)點(diǎn)
根據(jù)用戶當(dāng)前目標(biāo)或下一步目標(biāo)突出關(guān)鍵按鈕，幫助用戶快速找到關(guān)鍵操作，吸引用戶點(diǎn)擊，降低了用戶思考成本，提升效率。運(yùn)用這個(gè)方法進(jìn)行設(shè)計(jì)的例子太多了，比如淘寶的商品詳情頁(yè)用紅色突出購(gòu)買(mǎi)按鈕等。
直接執(zhí)行
根據(jù)用戶當(dāng)前目標(biāo)或下一步目標(biāo)直接執(zhí)行。比如滴滴的掃一掃界面，當(dāng)檢測(cè)到光線較暗時(shí)，手電筒會(huì)自動(dòng)打開(kāi)，提高了掃一掃的效率。
情感化
唐納德·諾曼在《情感化設(shè)計(jì)》中提到設(shè)計(jì)的三個(gè)層次，分別為：本能的設(shè)計(jì)，行為的設(shè)計(jì)，反思的設(shè)計(jì)。情感化設(shè)計(jì)是能打動(dòng)人的，它能傳遞感情，勾起回憶，給人驚喜，情感化設(shè)計(jì)是幫助產(chǎn)品與用戶之間建立情感的紐帶，能強(qiáng)化用戶對(duì)品牌的認(rèn)知，培養(yǎng)對(duì)品牌的忠誠(chéng)度。
情感化設(shè)計(jì)的步驟依次為：提煉影響產(chǎn)品的的情感指標(biāo)→聚焦用戶對(duì)產(chǎn)品的情感訴求→產(chǎn)出設(shè)計(jì)方案→驗(yàn)證設(shè)計(jì)價(jià)值（來(lái)源于周姮—知乎螞蟻金服體驗(yàn)技術(shù)部的一次分享）。
在谷歌表格每列的開(kāi)頭依次輸入「Pride」五個(gè)字母后，表格會(huì)變成彩虹樣式。
網(wǎng)易云音樂(lè)在用戶生日時(shí)會(huì)變成「生日快樂(lè)」的蛋糕樣式，點(diǎn)擊進(jìn)去的音樂(lè)列表，第一首歌是生日歌，讓人心里暖暖的。
最后一步就是設(shè)計(jì)方案的驗(yàn)證，設(shè)計(jì)方案能否幫助用戶縮短操作流程？降低用戶思考成本？幫助用戶地完成任務(wù)？是否能打動(dòng)用戶給他們帶來(lái)驚喜與溫暖？通過(guò)可用性測(cè)試及上線后的數(shù)據(jù)反饋，幫助我們更好的優(yōu)化設(shè)計(jì)方案。
1. 什么是場(chǎng)景化設(shè)計(jì)？
場(chǎng)景五要素：4W+1H，即Who人、When時(shí)間、Where地點(diǎn)、What事件 、How環(huán)境，什么人，在什么時(shí)候，在什么地方，做了什么事情，所處的環(huán)境如何。
2. 有哪些場(chǎng)景化設(shè)計(jì)的例子？
3. 為什么要進(jìn)行場(chǎng)景化設(shè)計(jì)？
4. 怎么進(jìn)行場(chǎng)景化設(shè)計(jì)？
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com