- 相關(guān)推薦
如何基于場(chǎng)景做網(wǎng)頁(yè)設計
做產(chǎn)品設計必定要根據用戶(hù)場(chǎng)景來(lái)進(jìn)行，所以其重要性不言而喻。今天我們就來(lái)分享一些根據用戶(hù)場(chǎng)景來(lái)設計產(chǎn)品的幾個(gè)方法。就跟隨小編去了解下吧，想了解更多相關(guān)信息請持續關(guān)注我們應屆畢業(yè)生考試網(wǎng)!
什么是用戶(hù)場(chǎng)景
移動(dòng)互聯(lián)網(wǎng)時(shí)代，智能設備的廣泛應用把人們的時(shí)間碎片化分割，用戶(hù)的使用地點(diǎn)不再局限于 PC 電腦前，信息滲透無(wú)處不在，消費行為變得移動(dòng)而分散。如何更精細的滿(mǎn)足用戶(hù)各個(gè)場(chǎng)景下的需求已是首要任務(wù)，越來(lái)越多的產(chǎn)品開(kāi)始更多的圍繞用戶(hù)的實(shí)際情況和消費習慣展開(kāi)設計，「場(chǎng)景化」逐漸成為耳熟能詳的詞匯。
那么，場(chǎng)景化是什么?簡(jiǎn)單說(shuō)就是人物、時(shí)間、地點(diǎn)三要素所組成的特定關(guān)系。在某某時(shí)間(when)，某某地點(diǎn)(where)，特定類(lèi)型的用戶(hù)(who)萌發(fā)了某種欲望(desire)，會(huì )想到通過(guò)某種手段(method)來(lái)滿(mǎn)足(do)這種欲望。
時(shí)間因素
考慮用戶(hù)在什么時(shí)候會(huì )使用該產(chǎn)品，是工作的時(shí)候，上班的路上，與情人約會(huì )的時(shí)候，睡覺(jué)前，朋友聚會(huì )，還是鍛煉的時(shí)候。
比如，我們可以看到很多 iPad 上的視頻類(lèi)應用比如愛(ài)奇藝、騰訊視頻默認的界面皮膚都是深色背景，而手機版則是白色皮膚，因為在 iPad 上看視頻用戶(hù)使用時(shí)段多在下班后的夜晚，深皮皮膚能精準的去適配用戶(hù)夜晚藏在被窩里看片的需求。
地點(diǎn)因素
考慮用戶(hù)在什么地點(diǎn)會(huì )使用該產(chǎn)品。在家，在學(xué)校，在辦公室，公交車(chē)上，打的的時(shí)候，地鐵里還是飯館里。
不同的地點(diǎn)有不同的需求，比如當大眾點(diǎn)評通過(guò)用戶(hù)的 GPS 定位信息發(fā)現用戶(hù)到了一個(gè)陌生城市的時(shí)候，自動(dòng)會(huì )將首頁(yè)切換至旅游版面，給用戶(hù)推薦當地的當地必吃美食、必游景點(diǎn)、必買(mǎi)的特產(chǎn)等等。
人物因素
考慮使用該產(chǎn)品的人群會(huì )有怎樣的特征，通過(guò)數據的積累勾勒用戶(hù)的標簽，達到千人千面的個(gè)性化服務(wù)。
每個(gè)應用的「猜你喜歡」也是最基礎最直接的基于人物屬性的產(chǎn)品設計。例如淘寶會(huì )根據我之前瀏覽過(guò)剃須刀，在推薦信息流里推薦價(jià)格相似的飛利浦、博朗等不同系列的型號。大眾點(diǎn)評會(huì )根據我之前瀏覽、收藏、搜索、買(mǎi)單的消費行為，給我推薦相似口味或價(jià)格餐館。
場(chǎng)景化將時(shí)間、地點(diǎn)、人物串聯(lián)起來(lái)組成一個(gè)關(guān)于用戶(hù)使用的故事，去勾勒用戶(hù)當時(shí)的心情與意圖，跟用戶(hù)形成一種情感關(guān)聯(lián)。最后根據這個(gè)有溫度的生動(dòng)的故事，結合實(shí)際的數據驗證或競品的分析去設計產(chǎn)品。
如何基于場(chǎng)景做設計
基于場(chǎng)景的設計可以幫助設計師分析需求，找到設計機會(huì )點(diǎn)，那么，怎樣基于場(chǎng)景做設計呢?
下面我們分享阿里設計師@六天總結的設計方法，[email protected]�[email protected]�
第一步：列舉場(chǎng)景
前面我們已經(jīng)明確了什么是場(chǎng)景，那么怎樣列舉場(chǎng)景呢?推薦方法是通過(guò)操作流程圖來(lái)依次提取其中的關(guān)鍵場(chǎng)景。以看電影為例，看電影的流程為：買(mǎi)電影票→ 去電影院→取票→檢票找座位→觀(guān)影→出影院→評論吐槽，根據流程可以抽取列舉出看電影涉及到的關(guān)鍵場(chǎng)景為：
美團電影頁(yè)面(where)購票(do);
電影開(kāi)始前(when)乘車(chē)(do)前往電影院的路上(where);
觀(guān)影前(when)在電影院(where)通過(guò)自助取票機取票(do);
觀(guān)眾(who)拿著(zhù)爆米花可樂(lè )等零食手忙腳亂(how)地掏出電影票(do)在入口(where)排隊檢票(do); 檢票工作人員(who)在入口處(where)等到放映前 5 分鐘(when)開(kāi)始檢查每位觀(guān)眾的電影票(do)并撕掉聯(lián)(do);
觀(guān)眾(who)拿著(zhù)爆米花可樂(lè ) 3D 眼鏡等手忙腳亂地(how)查看電影票上的座位號(do)并在昏暗的燈光下越過(guò)同排其他顧客(how)找到自己的座位(do);
坐在座位上(where)將手中的爆米花，可樂(lè )，背包等放置好(how)，戴上眼鏡開(kāi)始觀(guān)影(do);
觀(guān)影結束后(where)拿好自己的東西走出影廳(where)將眼鏡還給工作人員(do)，扔掉手里的垃圾(do)，排隊上廁所(do);
回家的路上(where)和朋友吐槽劇透(do);在朋友圈(where)曬觀(guān)影照片(do);在購票app上(where)評價(jià)吐槽(do)。
對關(guān)鍵場(chǎng)景的描述有利于發(fā)現場(chǎng)景中的細節，更好地對場(chǎng)景進(jìn)行分析判斷，在這部分可以通過(guò)填寫(xiě)場(chǎng)景挖掘工具的中間部分，對該場(chǎng)景進(jìn)行描述：誰(shuí)(who)，在什么時(shí)候(when)，在什么地方(where)，做了什么事情(do)，周?chē)h(huán)境怎么樣(how)，不涉及到的元素可忽略。以上文列舉出的場(chǎng)景 4 為例，利用場(chǎng)景挖掘工具進(jìn)行場(chǎng)景描述：
第二步：機會(huì )點(diǎn)挖掘
通過(guò)第一步對場(chǎng)景的列舉與描述，我們對涉及到的場(chǎng)景有了更深入的了解。下面一步是對場(chǎng)景進(jìn)行判斷與分析，挖掘機會(huì )點(diǎn)。對于機會(huì )點(diǎn)的挖掘有兩種方法：第一種是通過(guò)分析當前場(chǎng)景用戶(hù)需求挖掘機會(huì )點(diǎn);第二種是通過(guò)對用戶(hù)下一步目標的預期來(lái)尋找機會(huì )點(diǎn)。
1. 通過(guò)當前需求挖掘機會(huì )點(diǎn)
通過(guò)場(chǎng)景列舉階段對場(chǎng)景的描述，分析用戶(hù)在當前場(chǎng)景的需求并挖掘機會(huì )點(diǎn)。這一部分可以用到場(chǎng)景挖掘工具，在場(chǎng)景描述的基礎上，豎向分析當前場(chǎng)景用戶(hù)的需求。
以 iOS 系統接聽(tīng)電話(huà)的交互方式為例。接聽(tīng)電話(huà)存在兩種不同的場(chǎng)景，鎖屏狀態(tài)下的場(chǎng)景和非鎖屏狀態(tài)下的場(chǎng)景。鎖屏狀下有電話(huà)打入時(shí)(when)手機放在口袋里(where)處于鎖屏狀態(tài)(how)用戶(hù)將手機從口袋里取出并接聽(tīng)(do)。
當前場(chǎng)景下，用戶(hù)的痛點(diǎn)為將手機從口袋取出的時(shí)候很容易不小心碰到屏幕產(chǎn)生誤操作，因此 iOS 基于該場(chǎng)景下的用戶(hù)的痛點(diǎn)與需求，將鎖屏狀態(tài)下的接聽(tīng)設計為滑動(dòng)接聽(tīng)，可以很大程度上避免誤操作;而在非鎖屏的場(chǎng)景下，用戶(hù)多數情況正在使用手機，注意力較集中，采用點(diǎn)擊接聽(tīng)的方式更方便且快捷。
2.通過(guò)預期用戶(hù)目標尋找機會(huì )點(diǎn)
第二種挖掘場(chǎng)景的方法為預期用戶(hù)下一步的目標意圖，首先需要對上文場(chǎng)景進(jìn)行判斷，結合對當前場(chǎng)景的描述與分析，預期用戶(hù)接下來(lái)的行為，從而尋求當前場(chǎng)景的設計機會(huì )點(diǎn)。
那么怎樣對下一步進(jìn)行預期呢?我們總結了三種預期的方法：
通過(guò)成組的動(dòng)作進(jìn)行預期。例如，復制-粘貼、編輯→保存、收到命令→執行命令、吃飯→付款;
通過(guò)用戶(hù)的認知流程進(jìn)行預期。例如，瀏覽時(shí)反向滑動(dòng)→結束瀏覽/回到頂部、手機放在耳旁→聽(tīng)筒播放、拍照時(shí)擺好姿勢不動(dòng)→準備完畢可以拍照;
通過(guò)產(chǎn)品的使用流程進(jìn)行預期。例如截圖→分享、買(mǎi)票→取票。
以大眾點(diǎn)評的旅游版首頁(yè)為例，場(chǎng)景描述：用戶(hù)從常居地杭州(上文場(chǎng)景 where)來(lái)到廣州(當前場(chǎng)景 where)打開(kāi)大眾點(diǎn)評 app(do)。根據上一場(chǎng)景的地理位置，以及當前場(chǎng)景的地理位置以及用戶(hù)行為，猜測到用戶(hù)可能正在旅游狀態(tài)，預期用戶(hù)下一步的目標為與旅游有關(guān)的一系列操作，如買(mǎi)景點(diǎn)門(mén)票、找當地美食、定酒店等，基于該機會(huì )點(diǎn)大眾點(diǎn)評設計了旅游版首頁(yè)，與標準版相比，旅游版首頁(yè)包括當地特色景點(diǎn)、美食、特產(chǎn)等入口，根據當前場(chǎng)景更有針對性地滿(mǎn)足用戶(hù)的需求與期望。
第三步：設計策略
在第二步中我們已經(jīng)對當前場(chǎng)景的機會(huì )點(diǎn)進(jìn)行了挖掘，那么怎樣將機會(huì )點(diǎn)轉化為設計點(diǎn)呢?在場(chǎng)景設計的第三步，我們給出了一些設計策略。在設計策略階段，我們通過(guò)設計目標把策略分為三部分：以高效為目標的設計策略，以貼心為目標的設計策略，以情感化為目標的設計策略。
1. 高效
以高效為目標的設計策略共有五點(diǎn)，根據行動(dòng)點(diǎn)明確程度依次為：行動(dòng)點(diǎn)前置插入，行動(dòng)點(diǎn)替換，行動(dòng)相關(guān)推送，突出行動(dòng)點(diǎn)，自動(dòng)執行。這五個(gè)設計策略都能夠不同程度地提高用戶(hù)操作效率，接下來(lái)通過(guò)案例依次介紹一下每個(gè)設計策略。
(1)行動(dòng)點(diǎn)前置插入
行動(dòng)點(diǎn)前置插入，指將預期到的用戶(hù)下一步的行為點(diǎn)前置到當前場(chǎng)景，使得用戶(hù)在需要的時(shí)候就能直接操作，達到縮短關(guān)鍵流程，提高操作效率的作用。行動(dòng)點(diǎn)前置到當前頁(yè)面的形式多數為直接插入，以美團團購電影票為例， 放映前將取票二維碼前置插入到首頁(yè)中，作為首頁(yè)內容的一部分進(jìn)行展示，點(diǎn)擊后可直接彈出取票二維碼快捷取票，很大程度上縮短了關(guān)鍵流程。
(2)行動(dòng)點(diǎn)替換
行動(dòng)點(diǎn)替換，一般是指當前場(chǎng)景下某個(gè)行動(dòng)點(diǎn)的功能不再適合當前場(chǎng)景，因而將其替換為另外的需求較強的行動(dòng)點(diǎn)，位置不發(fā)生變化，而功能變化，為用戶(hù)提供當前場(chǎng)景需要的或與下一步意圖相關(guān)的行動(dòng)點(diǎn)能夠幫助用戶(hù)提高操作效率。以 Mono 首頁(yè)為例，當用戶(hù)在首頁(yè)上滑向下瀏覽時(shí)，導航欄的“推薦”按鈕替換為“ 返回頂部”，在不改變布局的情況下實(shí)現了高效操作的目的。
(3)行動(dòng)點(diǎn)相關(guān)推送提示
行動(dòng)點(diǎn)相關(guān)推送提示，指根據用戶(hù)當前或下一步的行為提供相關(guān)推送或提示，以輔助用戶(hù)進(jìn)行決策行動(dòng)，提高用戶(hù)操作效率。以手機淘寶為例，用戶(hù)在商品詳情頁(yè)面進(jìn)行截圖后，預期到用戶(hù)接下來(lái)的行動(dòng)是將該商品分享給好友，因此在該頁(yè)面彈出推送提示框，提示用戶(hù)進(jìn)行分享，在用戶(hù)需要的時(shí)候就出現，縮短了關(guān)鍵流程的同時(shí)讓用戶(hù)感動(dòng) 。
(4)突出行動(dòng)點(diǎn)
突出行動(dòng)點(diǎn)，預期到用戶(hù)下一步的行為后通過(guò)顏色或提示等方式對行動(dòng)點(diǎn)進(jìn)行突出，吸引并提醒用戶(hù)點(diǎn)擊，減少思考成本，提高操作效率。以拍立淘為例，當在光線(xiàn)較暗的環(huán)境中打開(kāi)拍立淘拍照功能，用戶(hù)當前場(chǎng)景下的需求為拍到清晰的圖片，且預期到用戶(hù)下一步行為是思考后打開(kāi)閃光燈，因此拍立淘在檢測到光線(xiàn)較暗時(shí)立即在閃光燈按鈕下面彈出提示，以突出閃光燈按鈕來(lái)提醒用戶(hù)及時(shí)打開(kāi)閃光燈。
(6)直接執行
直接執行，適用于一些需求較為明確的行動(dòng)點(diǎn)，做用戶(hù)之所想，提高操作流暢性及效率。以 iOS10 中的抬腕喚醒功能為例，用戶(hù)從桌上拿起手機，或從口袋中掏出手機，將屏幕朝下放置的手機翻轉過(guò)來(lái)，屏幕就會(huì )自動(dòng)點(diǎn)亮。
當系統識別到這幾個(gè)場(chǎng)景時(shí)預期到用戶(hù)接下來(lái)的行為時(shí)查看手機信息，因此幫助用戶(hù)直接執行了點(diǎn)亮屏幕的行為，減少用戶(hù)操作流程，提高使用體驗及操作效率。
2. 貼心
通過(guò)機會(huì )點(diǎn)挖掘階段對用戶(hù)當前場(chǎng)景需求分析以及對下一步目標的預期，設計階段需要通過(guò)在細節上的設計一定程度上滿(mǎn)足用戶(hù)當前場(chǎng)景下的情感需求，或輔助用戶(hù)達到下一步的目標，讓用戶(hù)感到貼心與感動(dòng)。
以 Mac 中的聽(tīng)寫(xiě)功能為例，當用戶(hù)通過(guò) Mac 電腦啟動(dòng)聽(tīng)寫(xiě)功能，Mac 會(huì )立即降低風(fēng)扇速度，以使用戶(hù)在更加安靜的環(huán)境下使用該功能，從側面滿(mǎn)足用戶(hù)當前場(chǎng)景下的需求，讓用戶(hù)感到貼心。
3. 情感化
與上面以貼心為目標的設計策略類(lèi)似，以情感化為目標的設計策略同樣需要具體場(chǎng)景具體分析，主要從細節出發(fā)滿(mǎn)足用戶(hù)在當前場(chǎng)景下的情感需求，讓用戶(hù)感動(dòng)，給用戶(hù)驚喜。
豆瓣首頁(yè)輪播圖下面會(huì )根據時(shí)間顯示“上午好/下午好/晚上好”的情感化打招呼內容，并且當用戶(hù)向下瀏覽內容時(shí)，認為用戶(hù)當前場(chǎng)景下不再需要搜索而是依次瀏覽內容。因此，情感化的打招呼內容吸頂替換搜索框。通過(guò)對當前場(chǎng)景需求的判斷，采用情感化細節帶給用戶(hù)感動(dòng)與驚喜。
產(chǎn)品設計的本質(zhì)是讓用戶(hù)更容易、更愉快地使用產(chǎn)品。
因此，去親身體驗去思考用戶(hù)使用產(chǎn)品的場(chǎng)景，在設計的時(shí)候多去考慮用戶(hù)使用的時(shí)間、地點(diǎn)乃至使用產(chǎn)品時(shí)可能的情緒，多為此優(yōu)化才能吸引用戶(hù)使用，方便用戶(hù)使用乃至感動(dòng)用戶(hù)主動(dòng)分享應用，這就是我們一直強調的用戶(hù)場(chǎng)景的重要性。
【如何基于場(chǎng)景做網(wǎng)頁(yè)設計】相關(guān)文章：
如何做網(wǎng)頁(yè)設計的10個(gè)小竅門(mén)11-06
如何設計網(wǎng)頁(yè)10-15
如何制作網(wǎng)頁(yè)設計09-17
網(wǎng)頁(yè)設計師如何應聘網(wǎng)頁(yè)設計職位09-19
怎么做網(wǎng)頁(yè)設計08-26