網(wǎng)站建設(shè)中基于場景的設(shè)計方法發(fā)布者:本站 時間:2022-05-07 09:05:24
移動終端由于被用戶隨身攜帶,變成用戶身體的延伸,在每一個場景中,深度陪伴著用戶。也因此,移動終端獲得天然的優(yōu)勢,得以針對用戶實際所在的場景來設(shè)計,以設(shè)計出更加貼心的體驗。 但是,由于設(shè)計師與用戶的空間相隔,無法看到用戶在真實場景中的使用情況。為了了解用戶的痛點及需求,我們需要通過場景設(shè)計的方法,對用戶使用場景進(jìn)行分析或預(yù)期?;趫鼍暗脑O(shè)計可以幫助設(shè)計師找到用戶與場景的內(nèi)在聯(lián)系,探索新的功能及交互方式。 本文將以案例為主介紹基于場景的設(shè)計方法。
什么是基于場景的設(shè)計?
什么才是基于場景的設(shè)計呢?以看電影為例,在整個看電影的過程中,涉及到的主要場景有以下六個:線上買票-去電影院-線下取票-檢票入座-觀影-評論吐槽。基于看電影涉及到的場景,格瓦拉app設(shè)計了一個基于場景的功能:當(dāng)用戶在格瓦拉購票成功后,首頁會出現(xiàn)一個人偶小浮標(biāo),在不同場景下點擊該浮標(biāo),會出現(xiàn)不同的內(nèi)容,例如在去電影院的場景下顯示影院地理位置以及滴滴打車入口;線下取票場景顯示取票二維碼可以快捷取票;線下取票后再點擊小浮標(biāo)顯示電影開始時間以及座位號;觀影后顯示別人的評論以及吐槽入口引導(dǎo)用戶去評論(如圖1)。
基于場景的設(shè)計方法
對上面的案例總結(jié)歸納后可以得出,格瓦拉是基于用戶看電影這一系列場景的判斷與分析,理解用戶每一場景的痛點及需求,結(jié)合上文場景,預(yù)期用戶下一步的目標(biāo)及意圖,通過設(shè)計縮短關(guān)鍵流程,輔助用戶提高操作效率。通過對大量案例進(jìn)行分析歸納,將場景設(shè)計的概念簡單歸納為:基于場景,理解需求,預(yù)期意圖,進(jìn)行設(shè)計。
再來看一個另外一個基于場景的設(shè)計案例——拍立淘。拍立淘是手淘中的一個功能,主要通過對線下產(chǎn)品拍照并識別,輔助用戶在淘寶內(nèi)快速找到該貨品。大家可能經(jīng)常有這樣一種購物場景:在線下店試衣服,到淘寶上找同款購買;在雜志或圖片上看到喜歡的單品,在淘寶上找同款。通過分析這兩類相似的場景(基于場景),發(fā)現(xiàn)用戶在當(dāng)前場景的需求是快速在淘寶上找到該貨品(理解需求),并預(yù)期用戶下一步的行為是通過淘寶搜索功能搜索該貨品(預(yù)期行為)。因此手淘在搜索框添加了拍立淘的功能,可以幫助用戶通過拍照或圖片識別快速在淘寶中找到目標(biāo),提高操作效率,給用戶驚喜,讓用戶感動(進(jìn)行設(shè)計)。
怎樣基于場景做設(shè)計?
基于場景的設(shè)計可以幫助設(shè)計師分析需求,找到設(shè)計機(jī)會點,那么怎樣基于場景做設(shè)計呢?通過對大量案例的分析及歸納,我們總結(jié)出了基于場景的設(shè)計方法-場景設(shè)計四步曲(如圖2),以及場景挖掘工具卡片(如圖3),場景設(shè)計四步曲將場景設(shè)計的方法通過四個步驟來表示,包括場景列舉、機(jī)會點挖、設(shè)計策略、衡量標(biāo)準(zhǔn);場景挖掘工具主要應(yīng)用在場景設(shè)計四步曲中的前兩步,對關(guān)鍵場景進(jìn)行描述,以及幫助設(shè)計師更清晰地應(yīng)用場景設(shè)計四步曲中的方法挖掘機(jī)會點。接下來我將對場景設(shè)計四步曲進(jìn)行細(xì)分拆解,來講述每個階段我們需要做的事情。
基于場景的設(shè)計方法
基于場景的設(shè)計方法
第一步:列舉場景
在列舉場景之前我們要現(xiàn)明確什么是場景?場景由以下幾個元素組成:誰(who),在什么時候(when),在什么地方(where),做了什么事情(do),周圍環(huán)境怎么樣(how)。例如用戶(who)夜間(when)在陌生的路上(where)開車(do)對路線不熟悉且路況不好(how),再如,買家(who)在線下批發(fā)市場(where)批貨(do)。 明確了什么是場景后,我們將場景進(jìn)行了分類,分為線上場景和線下場景兩類。線上場景和線下場景的區(qū)分在于場景中對的位置元素“where”,我們認(rèn)為線下場景的“where”是指現(xiàn)實中的位置,可通過GPS,藍(lán)牙,Wi-Fi鑰匙等來檢測;而線上場景的“where”指app中對某個頁面,例如首頁,支付頁面,商品詳情頁等。
怎樣列舉場景呢?推薦方法是通過操作流程圖來依次提取其中的關(guān)鍵場景,還是以看電影為例,看電影的流程為:買電影票-去電影院-取票-檢票找座位-觀影-出影院-評論吐槽,根據(jù)流程可以抽取列舉出看電影涉及到的關(guān)鍵場景為:
基于場景的設(shè)計方法
①美團(tuán)電影頁面(where)購票(do); ②電影開始前(when)乘車(do)前往電影院的路上(where); ③觀影前(when)在電影院(where)通過自助取票機(jī)取票(do); ④觀眾(who)拿著爆米花可樂等零食手忙腳亂(how)地掏出電影票(do)在入口(where)排隊檢票(do); 檢票工作人員(who)在入口處(where)等到放映前5分鐘(when)開始檢查每位觀眾的電影票(do)并撕掉聯(lián)(do); ⑤觀眾(who)拿著爆米花可樂3D眼鏡等手忙腳亂地(how)查看電影票上的座位號(do)并在昏暗的燈光下越過同排其他顧客(how)找到自己的座位(do); ⑥坐在座位上(where)將手中的爆米花,可樂,背包等放置好(how),戴上眼鏡開始觀影(do); ⑦觀影結(jié)束后(where)拿好自己的東西走出影廳(where)將眼鏡還給工作人員(do),扔掉手里的垃圾(do),排隊上廁所(do); ⑧回家的路上(where)和朋友吐槽劇透(do);在朋友圈(where)曬觀影照片(do);在購票app上(where)評價吐槽(do)。
對關(guān)鍵場景的描述有利于發(fā)現(xiàn)場景中的細(xì)節(jié),更好地對場景進(jìn)行分析判斷,在這部分可以通過填寫場景挖掘工具的中間部分,對該場景進(jìn)行描述:誰(who),在什么時候(when),在什么地方(where),做了什么事情(do),周圍環(huán)境怎么樣(how),不涉及到的元素可忽略。以上文列舉出的場景4為例,利用場景挖掘工具進(jìn)行場景描述(如圖4):
基于場景的設(shè)計方法
第二步:機(jī)會點挖掘
通過第一步對場景的列舉與描述,我們對涉及到的場景有了更深入的了解。下面一步是對場景進(jìn)行判斷與分析,挖掘機(jī)會點(如圖5)。對于機(jī)會點的挖掘有兩種方法:第一種是通過分析當(dāng)前場景用戶需求挖掘機(jī)會點;第二種是通過對用戶下一步目標(biāo)的預(yù)期來尋找機(jī)會點。
基于場景的設(shè)計方法
1.通過當(dāng)前需求挖掘機(jī)會點。 通過場景列舉階段對場景的描述,分析用戶在當(dāng)前場景的需求并挖掘機(jī)會點。這一部分可以用到場景挖掘工具,在場景描述的基礎(chǔ)上,豎向分析當(dāng)前場景用戶的需求(如圖6)。
基于場景的設(shè)計方法
以iOS系統(tǒng)接聽電話的交互方式為例。接聽電話存在兩種不同的場景,鎖屏狀態(tài)下的場景和非鎖屏狀態(tài)下的場景。鎖屏狀下有電話打入時(when)手機(jī)放在口袋里(where)處于鎖屏狀態(tài)(how)用戶將手機(jī)從口袋里取出并接聽(do)。當(dāng)前場景下,用戶的痛點為將手機(jī)從口袋取出的時候很容易不小心碰到屏幕產(chǎn)生誤操作,因此iOS基于該場景下的用戶的痛點與需求,將鎖屏狀態(tài)下的接聽設(shè)計為滑動接聽,可以很大程度上避免誤操作;而在非鎖屏的場景下,用戶多數(shù)情況正在使用手機(jī),注意力較集中,采用點擊接聽的方式更方便且快捷(如圖7)。
基于場景的設(shè)計方法
再舉一個微信語音聊天的例子,當(dāng)手機(jī)處于音量靜音的狀態(tài)(how)在聊天頁面(where)點擊語音信息(do),用戶的需求是清晰聽到對方發(fā)送的語音信息,但由于手機(jī)處于音量靜音狀態(tài)聽不到語音且用戶無法快速判斷為什么沒有聲音,微信基于該場景的痛點及需求設(shè)計了這樣的方案:當(dāng)用戶處于該場景下,會有彈框提示用戶調(diào)高音量后播放,通過特定場景下貼心的提示讓用戶感動(如圖8)。
基于場景的設(shè)計方法
2.通過預(yù)期用戶目標(biāo)尋找機(jī)會點。 第二種挖掘場景的方法為預(yù)期用戶下一步的目標(biāo)意圖,首先需要對上文場景進(jìn)行判斷,結(jié)合對當(dāng)前場景的描述與分析,預(yù)期用戶接下來的行為,從而尋求當(dāng)前場景的設(shè)計機(jī)會點。這里也可以使用場景挖掘工具幫助挖掘機(jī)會點,首先對上文場景進(jìn)行簡單描述,結(jié)合對當(dāng)前場景的描述,橫向預(yù)期下一步用戶可能做的事情(如圖9)。
基于場景的設(shè)計方法
那么怎樣對下一步進(jìn)行預(yù)期呢?我們總結(jié)了三種預(yù)期的方法。一、通過成組的動作進(jìn)行預(yù)期,例如,復(fù)制-粘貼、編輯→保存、收到命令→執(zhí)行命令、吃飯→付款;二、通過用戶的認(rèn)知流程進(jìn)行預(yù)期,例如,瀏覽時反向滑動→結(jié)束瀏覽/回到頂部、手機(jī)放在耳旁→聽筒播放、拍照時擺好姿勢不動→準(zhǔn)備完畢可以拍照;三、通過產(chǎn)品的使用流程進(jìn)行預(yù)期,例如截圖→分享、買票→取票。
以大眾點評的旅游版首頁為例,場景描述:用戶從常居地杭州(上文場景where)來到廣州(當(dāng)前場景where)打開大眾點評app(do)。根據(jù)上一場景的地理位置,以及當(dāng)前場景的地理位置以及用戶行為,猜測到用戶可能正在旅游狀態(tài),預(yù)期用戶下一步的目標(biāo)為與旅游有關(guān)的一系列操作,如買景點門票、找當(dāng)?shù)孛朗?、定酒店等,基于該機(jī)會點大眾點評設(shè)計了旅游版首頁,與標(biāo)準(zhǔn)版相比,旅游版首頁包括當(dāng)?shù)靥厣包c、美食、特產(chǎn)等入口,根據(jù)當(dāng)前場景更有針對性地滿足用戶的需求與期望(如圖10 )。
基于場景的設(shè)計方法
再以谷歌的hangouts為例,場景描述:用戶在聊天頁面(where)聊天的時候(do)收到對方發(fā)送的信息“where are you”(how),根據(jù)對當(dāng)前場景的判斷,預(yù)期到用戶下一步的行為是回復(fù)對方自己所在的位置。怎樣幫助用戶在接下來更加方便快捷地回復(fù)所處位置是當(dāng)前場景的設(shè)計機(jī)會點,hangouts將該機(jī)會點轉(zhuǎn)化為如下設(shè)計點:當(dāng)檢測到對方發(fā)送的文字中包含“where are you”的時候就會在原有頁面中插入定位按鈕,點擊定位按鈕后發(fā)送自己的位置給對方(如圖11)。
基于場景的設(shè)計方法
第三步:設(shè)計策略
在第二步中我們已經(jīng)對當(dāng)前場景的機(jī)會點進(jìn)行了挖掘,那么怎樣將機(jī)會點轉(zhuǎn)化為設(shè)計點呢?在場景設(shè)計的第三步,我們給出了一些設(shè)計策略,這些設(shè)計策略是我們通過對大量案例進(jìn)行分析歸納,提取總結(jié)出來的,可能還不夠完善,希望可以幫助你快速產(chǎn)出方案。在設(shè)計策略階段,我們通過設(shè)計目標(biāo)把策略分為三部分:以貼心為目標(biāo)的設(shè)計策略,以高效為目標(biāo)的設(shè)計策略,以情感化為目標(biāo)的設(shè)計策略(如圖12 )。
基于場景的設(shè)計方法
1.高效。
以高效為目標(biāo)的設(shè)計策略共有五點,根據(jù)行動點明確程度依次為:行動點前置插入,行動點替換,行動相關(guān)推送,突出行動點,自動執(zhí)行。這五個設(shè)計策略都能夠不同程度地提高用戶操作效率,接下來通過案例依次介紹一下每個設(shè)計策略。
◆ 行動點前置插入 行動點前置插入,指將預(yù)期到的用戶下一步的行為點前置到當(dāng)前場景,使得用戶在需要的時候就能直接操作,達(dá)到縮短關(guān)鍵流程,提高操作效率的作用。行動點前置到當(dāng)前頁面的形式多數(shù)為直接插入,以美團(tuán)團(tuán)購電影票為例,放映前將取票二維碼前置插入到首頁中,作為首頁內(nèi)容的一部分進(jìn)行展示,點擊后可直接彈出取票二維碼快捷取票,很大程度上縮短了關(guān)鍵流程。除了這個案例外,上面有提到的谷歌hangouts也屬于行動點前置插入的典型案例,檢測到對方詢問你在哪里的時候,在聊天頁面直接插入定位按鈕(如圖13)。
基于場景的設(shè)計方法
◆ 行動點替換 行動點替換,一般是指當(dāng)前場景下某個行動點的功能不再適合當(dāng)前場景,因而將其替換為另外的需求較強(qiáng)的行動點,位置不發(fā)生變化,而功能變化,為用戶提供當(dāng)前場景需要的或與下一步意圖相關(guān)的行動點能夠幫助用戶提高操作效率。以Mono首頁為例,當(dāng)用戶在首頁上滑向下瀏覽時,導(dǎo)航欄的“推薦”按鈕替換為“返回頂部”,在不改變布局的情況下實現(xiàn)了高效操作的目的(如圖14)。
基于場景的設(shè)計方法
◆ 行動點相關(guān)推送提示 行動點相關(guān)推送提示,指根據(jù)用戶當(dāng)前或下一步的行為提供相關(guān)推送或提示,以輔助用戶進(jìn)行決策行動,提高用戶操作效率。以手機(jī)淘寶為例,用戶在商品詳情頁面進(jìn)行截圖后,預(yù)期到用戶接下來的行動是將該商品分享給好友,因此在該頁面彈出推送提示框,提示用戶進(jìn)行分享,在用戶需要的時候就出現(xiàn),縮短了關(guān)鍵流程的同時讓用戶感動 (如圖12)。除此之外,上面提到的微信聊天頁面音量靜音狀態(tài)下聽取語音消息的案例,也是通過預(yù)測用戶下一步的行為,而提供了相關(guān)的提示,以使用戶減少思考成本,快速達(dá)到下一步目標(biāo)(如圖15)。
基于場景的設(shè)計方法
◆ 突出行動點 突出行動點,預(yù)期到用戶下一步的行為后通過顏色或提示等方式對行動點進(jìn)行突出,吸引并提醒用戶點擊,減少思考成本,提高操作效率。以拍立淘為例,當(dāng)在光線較暗的環(huán)境中打開拍立淘拍照功能,用戶當(dāng)前場景下的需求為拍到清晰的圖片,且預(yù)期到用戶下一步行為是思考后打開閃光燈,因此拍立淘在檢測到光線較暗時立即在閃光燈按鈕下面彈出提示,以突出閃光燈按鈕來提醒用戶及時打開閃光燈。案例中通過彈出提示框的形式來突出下一步行動點,可以幫助用戶減少思考時間,達(dá)到高效操作的目標(biāo)。除此之外,上文中提到的Mono首頁行動點替換的案例中也用到了突出行動點的設(shè)計策略,案例中通過為按鈕添加底色從而實現(xiàn)突出行動點的目的,通過這種方式提示用戶可點擊的行動點(如圖16)。
基于場景的設(shè)計方法
◆ 直接執(zhí)行 直接執(zhí)行,適用于一些需求較為明確的行動點,做用戶之所想,提高操作流暢性及效率。以iOS10中的抬腕喚醒功能為例,用戶從桌上拿起手機(jī),或從口袋中掏出手機(jī),將屏幕朝下放置的手機(jī)翻轉(zhuǎn)過來,屏幕就會自動點亮。當(dāng)系統(tǒng)識別到這幾個場景時預(yù)期到用戶接下來的行為時查看手機(jī)信息,因此幫助用戶直接執(zhí)行了點亮屏幕的行為,減少用戶操作流程,提高使用體驗及操作效率。除此之外,微信聊天頁面聽取語音信息的時候,可以通過耳朵離聽筒的距離預(yù)期用戶對于聽筒播放還是揚(yáng)聲器播放的意圖,因此幫助用戶自動切換兩種播放模式,使得整個流程更加流暢與高效。
2.貼心。
怎樣基于場景來設(shè)計出讓用戶感到貼心的產(chǎn)品呢?通過機(jī)會點挖掘階段對用戶當(dāng)前場景需求分析以及對下一步目標(biāo)的預(yù)期,設(shè)計階段需要通過在細(xì)節(jié)上的設(shè)計一定程度上滿足用戶當(dāng)前場景下的情感需求,或輔助用戶達(dá)到下一步的目標(biāo),讓用戶感到貼心與感動。由于這部分的案例規(guī)律性弱,很難歸納出具體的策略,因此需要從細(xì)節(jié)出發(fā)具體場景具體分析。 以Mac中的聽寫功能為例,當(dāng)用戶通過Mac電腦啟動聽寫功能,Mac會立即降低風(fēng)扇速度,以使用戶在更加安靜的環(huán)境下使用該功能,從側(cè)面滿足用戶當(dāng)前場景下的需求,讓用戶感到貼心。 再以導(dǎo)航app的HUD模式為例,用戶在行車過程中需要集中精力注視前方,尤其是夜間行車的時候更需要集中注意力,而現(xiàn)有手機(jī)導(dǎo)航需要不時低頭查看且顯示屏幕小,導(dǎo)航app的HUD模式能夠很好地滿足該場景下的痛點與需求,可以在夜間將導(dǎo)航信息投影在前車窗上,使用戶無需低頭就可以查看(如圖17)。
基于場景的設(shè)計方法
3.情感化。
與上文以貼心為目標(biāo)的設(shè)計策略類似,以情感化為目標(biāo)的設(shè)計策略同樣需要具體場景具體分析,主要從細(xì)節(jié)出發(fā)滿足用戶在當(dāng)前場景下的情感需求,讓用戶感動,給用戶驚喜。 以Uber首頁為例,2016年北京遭遇暴雨期間,許多市民稱打車為打船,基于該場景Uber 將首頁地圖上車的形式換為船,并將切換車型的滑塊icon由車替換為錨(如圖18),類似的根據(jù)不同社會熱點事件場景更換首頁視覺細(xì)節(jié)的案例越來越多,通過細(xì)節(jié)上的改變使得產(chǎn)品在當(dāng)前場景下能夠與用戶產(chǎn)生更多共鳴,滿足用戶情感化的需求,給用戶驚喜。
豆瓣首頁輪播圖下面會根據(jù)時間顯示“上午好/下午好/晚上好”的情感化打招呼內(nèi)容,并且當(dāng)用戶向下瀏覽內(nèi)容時,認(rèn)為用戶當(dāng)前場景下不再需要搜索而是依次瀏覽內(nèi)容,因此情感化的打招呼內(nèi)容吸頂替換搜索框(如圖18)。通過對當(dāng)前場景需求的判斷,采用情感化細(xì)節(jié)帶給用戶感動與驚喜。
基于場景的設(shè)計方法
第四步:衡量標(biāo)準(zhǔn)
為了檢測我們通過上一步設(shè)計策略產(chǎn)出的方案是否符合標(biāo)準(zhǔn),這一步我們需要對方案進(jìn)行衡量判斷,結(jié)合設(shè)計目標(biāo),我們設(shè)定了四個衡量標(biāo)準(zhǔn):效率、驚喜、感動、期待。該方案是否能夠縮短關(guān)鍵流暢,減少思考成本,從而實現(xiàn)提高操作效率的目的?方案能否想用戶之所想,通過情感化及貼心的細(xì)節(jié)給用戶驚喜,讓用戶感動?當(dāng)用戶下次再處于該場景中,是否會對你的方案產(chǎn)生期待?希望可以通過最后一步的衡量標(biāo)準(zhǔn)幫你更好地優(yōu)化現(xiàn)有方案。
基于場景的設(shè)計方法
回顧幾個重要的點
基于場景的設(shè)計方法
1.基于場景的設(shè)計是指基于對當(dāng)前場景的判斷與分析,理解用戶痛點與需求,結(jié)合前后文預(yù)期用戶的目標(biāo)及意圖,通過設(shè)計提高操作效率,給用戶驚喜與感動,使用戶期待。 2.怎樣基于場景做設(shè)計呢,第一步通過流程圖列舉場景,第二步通過分析當(dāng)前場景需求或結(jié)上下文預(yù)期用戶下一步行為來挖掘機(jī)會點,第三步將機(jī)會點通過設(shè)計策略轉(zhuǎn)化為設(shè)計點,第四步通過衡量標(biāo)準(zhǔn)對設(shè)計點進(jìn)行衡量判斷以及優(yōu)化。 3.場景挖掘工具可通過線下打印作為腦暴機(jī)會點的工具,填寫完中間對場景描述部分后,通過豎向分析當(dāng)前場景需求,通過橫向結(jié)合上文場景預(yù)期下一步行為。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗,優(yōu)秀的技術(shù)和設(shè)計水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時聯(lián)系電話:021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)