阿里設(shè)計(jì)師分享設(shè)計(jì)方法:如何基于場(chǎng)景做設(shè)計(jì)?

3 評(píng)論 38696 瀏覽 376 收藏 18 分鐘

做產(chǎn)品設(shè)計(jì)必定要根據(jù)用戶場(chǎng)景來進(jìn)行,所以其重要性不言而喻。今天我們就來分享一些根據(jù)用戶場(chǎng)景來設(shè)計(jì)產(chǎn)品的幾個(gè)方法。

什么是用戶場(chǎng)景

移動(dòng)互聯(lián)網(wǎng)時(shí)代,智能設(shè)備的廣泛應(yīng)用把人們的時(shí)間碎片化分割,用戶的使用地點(diǎn)不再局限于 PC 電腦前,信息滲透無處不在,消費(fèi)行為變得移動(dòng)而分散。如何更精細(xì)的滿足用戶各個(gè)場(chǎng)景下的需求已是首要任務(wù),越來越多的產(chǎn)品開始更多的圍繞用戶的實(shí)際情況和消費(fèi)習(xí)慣展開設(shè)計(jì),「場(chǎng)景化」逐漸成為耳熟能詳?shù)脑~匯。

那么,場(chǎng)景化是什么?簡單說就是人物、時(shí)間、地點(diǎn)三要素所組成的特定關(guān)系。在某某時(shí)間(when),某某地點(diǎn)(where),特定類型的用戶(who)萌發(fā)了某種欲望(desire),會(huì)想到通過某種手段(method)來滿足(do)這種欲望。

1

時(shí)間因素

考慮用戶在什么時(shí)候會(huì)使用該產(chǎn)品,是工作的時(shí)候,上班的路上,與情人約會(huì)的時(shí)候,睡覺前,朋友聚會(huì),還是鍛煉的時(shí)候。

比如,我們可以看到很多 iPad 上的視頻類應(yīng)用比如愛奇藝、騰訊視頻默認(rèn)的界面皮膚都是深色背景,而手機(jī)版則是白色皮膚,因?yàn)樵?iPad 上看視頻用戶使用時(shí)段多在下班后的夜晚,深皮皮膚能精準(zhǔn)的去適配用戶夜晚藏在被窩里看片的需求。

2

地點(diǎn)因素

考慮用戶在什么地點(diǎn)會(huì)使用該產(chǎn)品。在家,在學(xué)校,在辦公室,公交車上,打的的時(shí)候,地鐵里還是飯館里。

不同的地點(diǎn)有不同的需求,比如當(dāng)大眾點(diǎn)評(píng)通過用戶的 GPS 定位信息發(fā)現(xiàn)用戶到了一個(gè)陌生城市的時(shí)候,自動(dòng)會(huì)將首頁切換至旅游版面,給用戶推薦當(dāng)?shù)氐漠?dāng)?shù)乇爻悦朗场⒈赜尉包c(diǎn)、必買的特產(chǎn)等等。

3

人物因素

考慮使用該產(chǎn)品的人群會(huì)有怎樣的特征,通過數(shù)據(jù)的積累勾勒用戶的標(biāo)簽,達(dá)到千人千面的個(gè)性化服務(wù)。

每個(gè)應(yīng)用的「猜你喜歡」也是最基礎(chǔ)最直接的基于人物屬性的產(chǎn)品設(shè)計(jì)。例如淘寶會(huì)根據(jù)我之前瀏覽過剃須刀,在推薦信息流里推薦價(jià)格相似的飛利浦、博朗等不同系列的型號(hào)。大眾點(diǎn)評(píng)會(huì)根據(jù)我之前瀏覽、收藏、搜索、買單的消費(fèi)行為,給我推薦相似口味或價(jià)格餐館。

4

場(chǎng)景化將時(shí)間、地點(diǎn)、人物串聯(lián)起來組成一個(gè)關(guān)于用戶使用的故事,去勾勒用戶當(dāng)時(shí)的心情與意圖,跟用戶形成一種情感關(guān)聯(lián)。最后根據(jù)這個(gè)有溫度的生動(dòng)的故事,結(jié)合實(shí)際的數(shù)據(jù)驗(yàn)證或競(jìng)品的分析去設(shè)計(jì)產(chǎn)品。

如何基于場(chǎng)景做設(shè)計(jì)

基于場(chǎng)景的設(shè)計(jì)可以幫助設(shè)計(jì)師分析需求,找到設(shè)計(jì)機(jī)會(huì)點(diǎn),那么,怎樣基于場(chǎng)景做設(shè)計(jì)呢?

下面我們分享阿里設(shè)計(jì)師@六天總結(jié)的設(shè)計(jì)方法,包括場(chǎng)景列舉、機(jī)會(huì)點(diǎn)挖、設(shè)計(jì)策略。接下來我們來詳細(xì)看看場(chǎng)景設(shè)計(jì)以及每個(gè)階段需要做的事情。

5

第一步:列舉場(chǎng)景

前面我們已經(jīng)明確了什么是場(chǎng)景,那么怎樣列舉場(chǎng)景呢?推薦方法是通過操作流程圖來依次提取其中的關(guān)鍵場(chǎng)景。以看電影為例,看電影的流程為:買電影票→ 去電影院→取票→檢票找座位→觀影→出影院→評(píng)論吐槽,根據(jù)流程可以抽取列舉出看電影涉及到的關(guān)鍵場(chǎng)景為:

6

  1. 美團(tuán)電影頁面(where)購票(do);
  2. 電影開始前(when)乘車(do)前往電影院的路上(where);
  3. 觀影前(when)在電影院(where)通過自助取票機(jī)取票(do);
  4. 觀眾(who)拿著爆米花可樂等零食手忙腳亂(how)地掏出電影票(do)在入口(where)排隊(duì)檢票(do); 檢票工作人員(who)在入口處(where)等到放映前 5 分鐘(when)開始檢查每位觀眾的電影票(do)并撕掉聯(lián)(do);
  5. 觀眾(who)拿著爆米花可樂 3D 眼鏡等手忙腳亂地(how)查看電影票上的座位號(hào)(do)并在昏暗的燈光下越過同排其他顧客(how)找到自己的座位(do);
  6. 坐在座位上(where)將手中的爆米花,可樂,背包等放置好(how),戴上眼鏡開始觀影(do);
  7. 觀影結(jié)束后(where)拿好自己的東西走出影廳(where)將眼鏡還給工作人員(do),扔掉手里的垃圾(do),排隊(duì)上廁所(do);
  8. 回家的路上(where)和朋友吐槽劇透(do);在朋友圈(where)曬觀影照片(do);在購票app上(where)評(píng)價(jià)吐槽(do)。

對(duì)關(guān)鍵場(chǎng)景的描述有利于發(fā)現(xiàn)場(chǎng)景中的細(xì)節(jié),更好地對(duì)場(chǎng)景進(jìn)行分析判斷,在這部分可以通過填寫場(chǎng)景挖掘工具的中間部分,對(duì)該場(chǎng)景進(jìn)行描述:誰(who),在什么時(shí)候(when),在什么地方(where),做了什么事情(do),周圍環(huán)境怎么樣(how),不涉及到的元素可忽略。以上文列舉出的場(chǎng)景 4 為例,利用場(chǎng)景挖掘工具進(jìn)行場(chǎng)景描述:

7

第二步:機(jī)會(huì)點(diǎn)挖掘

通過第一步對(duì)場(chǎng)景的列舉與描述,我們對(duì)涉及到的場(chǎng)景有了更深入的了解。下面一步是對(duì)場(chǎng)景進(jìn)行判斷與分析,挖掘機(jī)會(huì)點(diǎn)。對(duì)于機(jī)會(huì)點(diǎn)的挖掘有兩種方法:第一種是通過分析當(dāng)前場(chǎng)景用戶需求挖掘機(jī)會(huì)點(diǎn);第二種是通過對(duì)用戶下一步目標(biāo)的預(yù)期來尋找機(jī)會(huì)點(diǎn)。

8

1. 通過當(dāng)前需求挖掘機(jī)會(huì)點(diǎn)

通過場(chǎng)景列舉階段對(duì)場(chǎng)景的描述,分析用戶在當(dāng)前場(chǎng)景的需求并挖掘機(jī)會(huì)點(diǎn)。這一部分可以用到場(chǎng)景挖掘工具,在場(chǎng)景描述的基礎(chǔ)上,豎向分析當(dāng)前場(chǎng)景用戶的需求。

9

以 iOS 系統(tǒng)接聽電話的交互方式為例。接聽電話存在兩種不同的場(chǎng)景,鎖屏狀態(tài)下的場(chǎng)景和非鎖屏狀態(tài)下的場(chǎng)景。鎖屏狀下有電話打入時(shí)(when)手機(jī)放在口袋里(where)處于鎖屏狀態(tài)(how)用戶將手機(jī)從口袋里取出并接聽(do)。

當(dāng)前場(chǎng)景下,用戶的痛點(diǎn)為將手機(jī)從口袋取出的時(shí)候很容易不小心碰到屏幕產(chǎn)生誤操作,因此 iOS 基于該場(chǎng)景下的用戶的痛點(diǎn)與需求,將鎖屏狀態(tài)下的接聽設(shè)計(jì)為滑動(dòng)接聽,可以很大程度上避免誤操作;而在非鎖屏的場(chǎng)景下,用戶多數(shù)情況正在使用手機(jī),注意力較集中,采用點(diǎn)擊接聽的方式更方便且快捷。

10

2.通過預(yù)期用戶目標(biāo)尋找機(jī)會(huì)點(diǎn)

第二種挖掘場(chǎng)景的方法為預(yù)期用戶下一步的目標(biāo)意圖,首先需要對(duì)上文場(chǎng)景進(jìn)行判斷,結(jié)合對(duì)當(dāng)前場(chǎng)景的描述與分析,預(yù)期用戶接下來的行為,從而尋求當(dāng)前場(chǎng)景的設(shè)計(jì)機(jī)會(huì)點(diǎn)。

那么怎樣對(duì)下一步進(jìn)行預(yù)期呢?我們總結(jié)了三種預(yù)期的方法:

  1. 通過成組的動(dòng)作進(jìn)行預(yù)期。例如,復(fù)制-粘貼、編輯→保存、收到命令→執(zhí)行命令、吃飯→付款;
  2. 通過用戶的認(rèn)知流程進(jìn)行預(yù)期。例如,瀏覽時(shí)反向滑動(dòng)→結(jié)束瀏覽/回到頂部、手機(jī)放在耳旁→聽筒播放、拍照時(shí)擺好姿勢(shì)不動(dòng)→準(zhǔn)備完畢可以拍照;
  3. 通過產(chǎn)品的使用流程進(jìn)行預(yù)期。例如截圖→分享、買票→取票。

以大眾點(diǎn)評(píng)的旅游版首頁為例,場(chǎng)景描述:用戶從常居地杭州(上文場(chǎng)景 where)來到廣州(當(dāng)前場(chǎng)景 where)打開大眾點(diǎn)評(píng) app(do)。根據(jù)上一場(chǎng)景的地理位置,以及當(dāng)前場(chǎng)景的地理位置以及用戶行為,猜測(cè)到用戶可能正在旅游狀態(tài),預(yù)期用戶下一步的目標(biāo)為與旅游有關(guān)的一系列操作,如買景點(diǎn)門票、找當(dāng)?shù)孛朗?、定酒店等,基于該機(jī)會(huì)點(diǎn)大眾點(diǎn)評(píng)設(shè)計(jì)了旅游版首頁,與標(biāo)準(zhǔn)版相比,旅游版首頁包括當(dāng)?shù)靥厣包c(diǎn)、美食、特產(chǎn)等入口,根據(jù)當(dāng)前場(chǎng)景更有針對(duì)性地滿足用戶的需求與期望。

11

第三步:設(shè)計(jì)策略

在第二步中我們已經(jīng)對(duì)當(dāng)前場(chǎng)景的機(jī)會(huì)點(diǎn)進(jìn)行了挖掘,那么怎樣將機(jī)會(huì)點(diǎn)轉(zhuǎn)化為設(shè)計(jì)點(diǎn)呢?在場(chǎng)景設(shè)計(jì)的第三步,我們給出了一些設(shè)計(jì)策略。在設(shè)計(jì)策略階段,我們通過設(shè)計(jì)目標(biāo)把策略分為三部分:以高效為目標(biāo)的設(shè)計(jì)策略,以貼心為目標(biāo)的設(shè)計(jì)策略,以情感化為目標(biāo)的設(shè)計(jì)策略。

12

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ì)策略都能夠不同程度地提高用戶操作效率,接下來通過案例依次介紹一下每個(gè)設(shè)計(jì)策略。

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

行動(dòng)點(diǎn)前置插入,指將預(yù)期到的用戶下一步的行為點(diǎn)前置到當(dāng)前場(chǎng)景,使得用戶在需要的時(shí)候就能直接操作,達(dá)到縮短關(guān)鍵流程,提高操作效率的作用。行動(dòng)點(diǎn)前置到當(dāng)前頁面的形式多數(shù)為直接插入,以美團(tuán)團(tuán)購電影票為例, 放映前將取票二維碼前置插入到首頁中,作為首頁內(nèi)容的一部分進(jìn)行展示,點(diǎn)擊后可直接彈出取票二維碼快捷取票,很大程度上縮短了關(guān)鍵流程。

13

(2)行動(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 首頁為例,當(dāng)用戶在首頁上滑向下瀏覽時(shí),導(dǎo)航欄的“推薦”按鈕替換為“ 返回頂部”,在不改變布局的情況下實(shí)現(xiàn)了高效操作的目的。

14

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

行動(dòng)點(diǎn)相關(guān)推送提示,指根據(jù)用戶當(dāng)前或下一步的行為提供相關(guān)推送或提示,以輔助用戶進(jìn)行決策行動(dòng),提高用戶操作效率。以手機(jī)淘寶為例,用戶在商品詳情頁面進(jìn)行截圖后,預(yù)期到用戶接下來的行動(dòng)是將該商品分享給好友,因此在該頁面彈出推送提示框,提示用戶進(jìn)行分享,在用戶需要的時(shí)候就出現(xiàn),縮短了關(guān)鍵流程的同時(shí)讓用戶感動(dòng) 。

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

突出行動(dòng)點(diǎn),預(yù)期到用戶下一步的行為后通過顏色或提示等方式對(duì)行動(dòng)點(diǎn)進(jìn)行突出,吸引并提醒用戶點(diǎn)擊,減少思考成本,提高操作效率。以拍立淘為例,當(dāng)在光線較暗的環(huán)境中打開拍立淘拍照功能,用戶當(dāng)前場(chǎng)景下的需求為拍到清晰的圖片,且預(yù)期到用戶下一步行為是思考后打開閃光燈,因此拍立淘在檢測(cè)到光線較暗時(shí)立即在閃光燈按鈕下面彈出提示,以突出閃光燈按鈕來提醒用戶及時(shí)打開閃光燈。

15

(6)直接執(zhí)行

直接執(zhí)行,適用于一些需求較為明確的行動(dòng)點(diǎn),做用戶之所想,提高操作流暢性及效率。以 iOS10 中的抬腕喚醒功能為例,用戶從桌上拿起手機(jī),或從口袋中掏出手機(jī),將屏幕朝下放置的手機(jī)翻轉(zhuǎn)過來,屏幕就會(huì)自動(dòng)點(diǎn)亮。

當(dāng)系統(tǒng)識(shí)別到這幾個(gè)場(chǎng)景時(shí)預(yù)期到用戶接下來的行為時(shí)查看手機(jī)信息,因此幫助用戶直接執(zhí)行了點(diǎn)亮屏幕的行為,減少用戶操作流程,提高使用體驗(yàn)及操作效率。

2. 貼心

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

以 Mac 中的聽寫功能為例,當(dāng)用戶通過 Mac 電腦啟動(dòng)聽寫功能,Mac 會(huì)立即降低風(fēng)扇速度,以使用戶在更加安靜的環(huán)境下使用該功能,從側(cè)面滿足用戶當(dāng)前場(chǎng)景下的需求,讓用戶感到貼心。

16

3. 情感化

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

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

17

產(chǎn)品設(shè)計(jì)的本質(zhì)是讓用戶更容易、更愉快地使用產(chǎn)品。

因此,去親身體驗(yàn)去思考用戶使用產(chǎn)品的場(chǎng)景,在設(shè)計(jì)的時(shí)候多去考慮用戶使用的時(shí)間、地點(diǎn)乃至使用產(chǎn)品時(shí)可能的情緒,多為此優(yōu)化才能吸引用戶使用,方便用戶使用乃至感動(dòng)用戶主動(dòng)分享應(yīng)用,這就是我們一直強(qiáng)調(diào)的用戶場(chǎng)景的重要性。

 

來源:庖丁開發(fā)(微信號(hào):pddev16)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ?? 看到iOS10那段瞬間出戲……講真剛開始我真以為我手機(jī)壞掉了……壞掉了……為什么拿起來就亮一下……是不是觸控出現(xiàn)問題了什么的……關(guān)鍵是蘋果手機(jī)特么這么耗電……我拿一下就亮一下……我的電……我要是想用的話自己按HOME鍵就行了啊,而且你亮的話我還是需要按HOME鍵才能解鎖用啊……所以拿起來就亮一下……特么簡直就是……智障……

    來自江蘇 回復(fù)
    1. 我也是,后來直接關(guān)閉了這個(gè)功能。

      來自廣東 回復(fù)
  2. 哦拒絕

    回復(fù)