如何基于場景做網頁設計

時間：2025-11-15 16:42:12 網頁設計

如何基于場景做網頁設計

　　做產品設計必定要根據用戶場景來進行，所以其重要性不言而喻。今天我們就來分享一些根據用戶場景來設計產品的幾個方法。就跟隨小編去了解下吧，想了解更多相關信息請持續關注我們應屆畢業生考試網!

　　什么是用戶場景

　　移動互聯網時代，智能設備的廣泛應用把人們的時間碎片化分割，用戶的使用地點不再局限于 PC 電腦前，信息滲透無處不在，消費行為變得移動而分散。如何更精細的滿足用戶各個場景下的需求已是首要任務，越來越多的產品開始更多的圍繞用戶的實際情況和消費習慣展開設計，「場景化」逐漸成為耳熟能詳的詞匯。

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

　　時間因素

　　考慮用戶在什么時候會使用該產品，是工作的時候，上班的路上，與情人約會的時候，睡覺前，朋友聚會，還是鍛煉的時候。

　　比如，我們可以看到很多 iPad 上的視頻類應用比如愛奇藝、騰訊視頻默認的界面皮膚都是深色背景，而手機版則是白色皮膚，因為在 iPad 上看視頻用戶使用時段多在下班后的夜晚，深皮皮膚能精準的去適配用戶夜晚藏在被窩里看片的需求。

　　地點因素

　　考慮用戶在什么地點會使用該產品。在家，在學校，在辦公室，公交車上，打的的時候，地鐵里還是飯館里。

　　不同的地點有不同的需求，比如當大眾點評通過用戶的 GPS 定位信息發現用戶到了一個陌生城市的時候，自動會將首頁切換至旅游版面，給用戶推薦當地的當地必吃美食、必游景點、必買的特產等等。

　　人物因素

　　考慮使用該產品的人群會有怎樣的特征，通過數據的積累勾勒用戶的標簽，達到千人千面的個性化服務。

　　每個應用的「猜你喜歡」也是最基礎最直接的基于人物屬性的產品設計。例如淘寶會根據我之前瀏覽過剃須刀，在推薦信息流里推薦價格相似的飛利浦、博朗等不同系列的型號。大眾點評會根據我之前瀏覽、收藏、搜索、買單的消費行為，給我推薦相似口味或價格餐館。

　　場景化將時間、地點、人物串聯起來組成一個關于用戶使用的故事，去勾勒用戶當時的心情與意圖，跟用戶形成一種情感關聯。最后根據這個有溫度的生動的故事，結合實際的數據驗證或競品的分析去設計產品。

　　如何基于場景做設計

　　基于場景的設計可以幫助設計師分析需求，找到設計機會點，那么，怎樣基于場景做設計呢?

　　下面我們分享阿里設計師@六天總結的設計方法，[email protected]�[email protected]�

　　第一步：列舉場景

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

　　美團電影頁面(where)購票(do);

　　電影開始前(when)乘車(do)前往電影院的路上(where);

　　觀影前(when)在電影院(where)通過自助取票機取票(do);

　　觀眾(who)拿著爆米花可樂等零食手忙腳亂(how)地掏出電影票(do)在入口(where)排隊檢票(do); 檢票工作人員(who)在入口處(where)等到放映前 5 分鐘(when)開始檢查每位觀眾的電影票(do)并撕掉聯(do);

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

　　坐在座位上(where)將手中的爆米花，可樂，背包等放置好(how)，戴上眼鏡開始觀影(do);

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

　　回家的路上(where)和朋友吐槽劇透(do);在朋友圈(where)曬觀影照片(do);在購票app上(where)評價吐槽(do)。

　　對關鍵場景的描述有利于發現場景中的細節，更好地對場景進行分析判斷，在這部分可以通過填寫場景挖掘工具的中間部分，對該場景進行描述：誰(who)，在什么時候(when)，在什么地方(where)，做了什么事情(do)，周圍環境怎么樣(how)，不涉及到的元素可忽略。以上文列舉出的場景 4 為例，利用場景挖掘工具進行場景描述：

　　第二步：機會點挖掘

　　通過第一步對場景的列舉與描述，我們對涉及到的場景有了更深入的了解。下面一步是對場景進行判斷與分析，挖掘機會點。對于機會點的挖掘有兩種方法：第一種是通過分析當前場景用戶需求挖掘機會點;第二種是通過對用戶下一步目標的預期來尋找機會點。

　　1. 通過當前需求挖掘機會點

　　通過場景列舉階段對場景的描述，分析用戶在當前場景的需求并挖掘機會點。這一部分可以用到場景挖掘工具，在場景描述的基礎上，豎向分析當前場景用戶的需求。

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

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

　　2.通過預期用戶目標尋找機會點

　　第二種挖掘場景的方法為預期用戶下一步的目標意圖，首先需要對上文場景進行判斷，結合對當前場景的描述與分析，預期用戶接下來的行為，從而尋求當前場景的設計機會點。

　　那么怎樣對下一步進行預期呢?我們總結了三種預期的方法：

　　通過成組的動作進行預期。例如，復制-粘貼、編輯→保存、收到命令→執行命令、吃飯→付款;

　　通過用戶的認知流程進行預期。例如，瀏覽時反向滑動→結束瀏覽/回到頂部、手機放在耳旁→聽筒播放、拍照時擺好姿勢不動→準備完畢可以拍照;

　　通過產品的使用流程進行預期。例如截圖→分享、買票→取票。

　　以大眾點評的旅游版首頁為例，場景描述：用戶從常居地杭州(上文場景 where)來到廣州(當前場景 where)打開大眾點評 app(do)。根據上一場景的地理位置，以及當前場景的地理位置以及用戶行為，猜測到用戶可能正在旅游狀態，預期用戶下一步的目標為與旅游有關的一系列操作，如買景點門票、找當地美食、定酒店等，基于該機會點大眾點評設計了旅游版首頁，與標準版相比，旅游版首頁包括當地特色景點、美食、特產等入口，根據當前場景更有針對性地滿足用戶的需求與期望。

　　第三步：設計策略

　　在第二步中我們已經對當前場景的機會點進行了挖掘，那么怎樣將機會點轉化為設計點呢?在場景設計的第三步，我們給出了一些設計策略。在設計策略階段，我們通過設計目標把策略分為三部分：以高效為目標的設計策略，以貼心為目標的設計策略，以情感化為目標的設計策略。

　　1. 高效

　　以高效為目標的設計策略共有五點，根據行動點明確程度依次為：行動點前置插入，行動點替換，行動相關推送，突出行動點，自動執行。這五個設計策略都能夠不同程度地提高用戶操作效率，接下來通過案例依次介紹一下每個設計策略。

　　(1)行動點前置插入

　　行動點前置插入，指將預期到的用戶下一步的行為點前置到當前場景，使得用戶在需要的時候就能直接操作，達到縮短關鍵流程，提高操作效率的作用。行動點前置到當前頁面的形式多數為直接插入，以美團團購電影票為例，放映前將取票二維碼前置插入到首頁中，作為首頁內容的一部分進行展示，點擊后可直接彈出取票二維碼快捷取票，很大程度上縮短了關鍵流程。

　　(2)行動點替換

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

　　(3)行動點相關推送提示

　　行動點相關推送提示，指根據用戶當前或下一步的行為提供相關推送或提示，以輔助用戶進行決策行動，提高用戶操作效率。以手機淘寶為例，用戶在商品詳情頁面進行截圖后，預期到用戶接下來的行動是將該商品分享給好友，因此在該頁面彈出推送提示框，提示用戶進行分享，在用戶需要的時候就出現，縮短了關鍵流程的同時讓用戶感動。

　　(4)突出行動點

　　突出行動點，預期到用戶下一步的行為后通過顏色或提示等方式對行動點進行突出，吸引并提醒用戶點擊，減少思考成本，提高操作效率。以拍立淘為例，當在光線較暗的環境中打開拍立淘拍照功能，用戶當前場景下的需求為拍到清晰的圖片，且預期到用戶下一步行為是思考后打開閃光燈，因此拍立淘在檢測到光線較暗時立即在閃光燈按鈕下面彈出提示，以突出閃光燈按鈕來提醒用戶及時打開閃光燈。

　　(6)直接執行

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

　　當系統識別到這幾個場景時預期到用戶接下來的行為時查看手機信息，因此幫助用戶直接執行了點亮屏幕的行為，減少用戶操作流程，提高使用體驗及操作效率。

　　2. 貼心

　　通過機會點挖掘階段對用戶當前場景需求分析以及對下一步目標的預期，設計階段需要通過在細節上的設計一定程度上滿足用戶當前場景下的情感需求，或輔助用戶達到下一步的目標，讓用戶感到貼心與感動。

　　以 Mac 中的聽寫功能為例，當用戶通過 Mac 電腦啟動聽寫功能，Mac 會立即降低風扇速度，以使用戶在更加安靜的環境下使用該功能，從側面滿足用戶當前場景下的需求，讓用戶感到貼心。

　　3. 情感化

　　與上面以貼心為目標的設計策略類似，以情感化為目標的設計策略同樣需要具體場景具體分析，主要從細節出發滿足用戶在當前場景下的情感需求，讓用戶感動，給用戶驚喜。

　　豆瓣首頁輪播圖下面會根據時間顯示“上午好/下午好/晚上好”的情感化打招呼內容，并且當用戶向下瀏覽內容時，認為用戶當前場景下不再需要搜索而是依次瀏覽內容。因此，情感化的打招呼內容吸頂替換搜索框。通過對當前場景需求的判斷，采用情感化細節帶給用戶感動與驚喜。

　　產品設計的本質是讓用戶更容易、更愉快地使用產品。

　　因此，去親身體驗去思考用戶使用產品的場景，在設計的時候多去考慮用戶使用的時間、地點乃至使用產品時可能的情緒，多為此優化才能吸引用戶使用，方便用戶使用乃至感動用戶主動分享應用，這就是我們一直強調的用戶場景的重要性。

【如何基于場景做網頁設計】相關文章：

如何設計網頁02-22

Dreamweaver模板如何批量做網頁02-05

網頁設計中的文字如何設計10-31

網頁設計中如何設計按鈕09-24