本文作者從B端產(chǎn)品常見類型出發(fā)，圍繞什么是場景化設(shè)計、有哪些場景化設(shè)計的例子和為什么要進行場景化設(shè)計做了全方位的解讀分析，與大家分享。

B端產(chǎn)品設(shè)計師，經(jīng)常會被產(chǎn)品經(jīng)理告知一個用戶需求：“用戶說，產(chǎn)品的界面不要太多留白，我們的界面上要顯示盡可能多的信息，界面設(shè)計要緊湊，再緊湊?！睍r間長了，我們也慢慢默認這是一個指導(dǎo)設(shè)計師設(shè)計界面的首要準(zhǔn)則。

那么，筆者經(jīng)常會有個疑問，這是用戶的真實訴求嗎？有沒有其他方法來解決此類訴求？畢竟對于界面排版來說，界面信息多，則意味著頁面擁擠，視覺效果不佳。

下面筆者將自己的實踐思考和大家分享，我們具體來聊聊這個設(shè)計師們邁不過去的話題。

一、B端產(chǎn)品常見的類型

在B端產(chǎn)品中，常見的類型包括：OA系統(tǒng)、ERP系統(tǒng)、CRM系統(tǒng)、Scrum系統(tǒng)、中臺系統(tǒng)、工具類系統(tǒng)、小程序或APP的后臺管理系統(tǒng)。這些產(chǎn)品界面各不相同，并不都是要求界面展現(xiàn)信息越多越好。

1. OA系統(tǒng)

即自動化辦公系統(tǒng)，是通過軟件的方式使得辦公流程自動化，是信息管理和處理的集合。員工使用OA系統(tǒng)，重點關(guān)注的是他們的待辦事項，這時候，對于設(shè)計師來說，重點在工作臺界面的設(shè)計，讓員工知道我今天需要處理哪些工作，如何進入具體的流程處理頁面，只要我們設(shè)計的流程精簡、信息層次分明即可。

2. Scrum系統(tǒng)

是用來做企業(yè)項目快速迭代的系統(tǒng)，重點在提供高效、標(biāo)準(zhǔn)的敏捷研發(fā)管理解決方案，實現(xiàn)快速管理問題，員工間順暢協(xié)作，實現(xiàn)快速研發(fā)和迭代產(chǎn)品。在設(shè)計Scrum系統(tǒng)的時候，設(shè)計師的重點是了解用戶如何使用軟件來管理項目進度的，他們希望如何呈現(xiàn)項目管理的結(jié)果，這樣子去進行界面功能的布局和信息內(nèi)容的布局才是合理的。

3. 中臺系統(tǒng)

集合集團的技術(shù)和數(shù)據(jù)能力，對前臺進行強力支撐。具體的產(chǎn)品比如有員工中心、數(shù)據(jù)中臺、產(chǎn)品中心等。中臺產(chǎn)品由于業(yè)務(wù)屬性不強，在界面表達上趨向于簡單化，一般來說表單頁、表格頁、詳情頁等已經(jīng)足以覆蓋它們的大部分場景。而中臺產(chǎn)品由于用戶使用頻率不高，在界面排版上以專業(yè)和清晰為主。

4. 小程序或APP的后臺管理系統(tǒng)

是對前臺用戶界面端展示內(nèi)容的管理，比如上傳、刪除、編輯等，同時大部分后臺管理系統(tǒng)是給運營用的，因此在設(shè)計上只需要功能全，功能找的到就好，相關(guān)的操作能一屏的不要兩屏展示，能當(dāng)前頁的不要跳頁面處理。所以設(shè)計師在設(shè)計的時候，需要關(guān)注功能的整體性流程。

因此，不同產(chǎn)品其業(yè)務(wù)性質(zhì)不同，目標(biāo)用戶群不同，使用場景不同，界面設(shè)計需要考慮的重點就不通。

二、場景化設(shè)計

1. 什么是場景化設(shè)計

在產(chǎn)品設(shè)計中，場景化設(shè)計是指“誰（who），在什么時間（when），什么地點（where），做了什么事情（what），所面對的環(huán)境如何（how）”。具體來說，比如“小明，中午，在辦公室里，打開電腦處理考勤流程，這時正好領(lǐng)導(dǎo)打電話過來，一堆流程無法快速處理”。

在面對產(chǎn)品設(shè)計有具體場景的情況下，可以基于場景得出用戶的痛點和需求，針對性的梳理解決方案，通過合理的設(shè)計方法，提升用戶的產(chǎn)品體驗。

因此，我們要問：“是什么場景下，用戶要求界面看到的信息越多越好？”到底用戶的痛點是什么：

用戶每天要處理100條左右數(shù)據(jù)，那么界面設(shè)計的數(shù)據(jù)信息多就能看全這100條數(shù)據(jù)嗎？

用戶需要對重要數(shù)據(jù)進行對比查看和分析，那么界面設(shè)計的數(shù)據(jù)多了就能讓他快速進行對比嗎？

界面上除了簡單的表格，什么功能都沒有，用戶如何篩選自己需要的信息，簡單的將數(shù)據(jù)排出來就可以了嗎？

……

還有很多情況，無論你界面上放置的信息量多大，界面設(shè)計多緊湊（模塊間間距4px，表格行高20px，且不說界面丑不丑，這絕對會讓用戶在使用界面后產(chǎn)生視覺疲勞），都無法解決場景化下用戶的痛點。

2. 有哪些場景化設(shè)計的例子

（1）淘寶

登錄淘寶首頁，搜索框輸入目標(biāo)關(guān)鍵詞，我們可以看到映入眼簾的是淘寶默認將對應(yīng)物品的“篩選條件”展開，而匹配上的寶貝列表，處于屏幕二分之一以下區(qū)域。為什么這么設(shè)計呢？當(dāng)我們搜索較為寬泛的關(guān)鍵詞進入寶貝列表頁后，用戶是處于迷茫狀態(tài)的，他并不精確地知道自己要的是什么，而淘寶將精細化篩選條件直接展現(xiàn)給用戶，讓用戶可以根據(jù)條件進行精細過濾。當(dāng)然用戶也可以主動收起過濾條件。

（2）餓了么

打開餓了么訂外賣，根據(jù)定位，餓了么會根據(jù)用戶目前所在的地理位置主動推送紅包和優(yōu)惠券。同時通過定位，餓了么個性化推送用戶信息，形成用戶基于地理位置的個性化首頁，主動幫助用戶篩選外賣信息，減少用戶過濾和搜索，讓用戶直達自己最在意的信息。

（3）簡書

在簡書中，當(dāng)你對一篇文章點贊的時候，簡書會彈出一個toast提示，提示用戶還未關(guān)注作者，是否需要關(guān)注TA。簡書認為，當(dāng)你點贊作者文章的時候，就是欣賞作者的一種表現(xiàn)，那么你既然點贊了，順帶關(guān)注TA吧，這樣子后期作者的動態(tài)，就可以隨時了解了。

三、“界面信息呈現(xiàn)越多越好”到底在表達什么？

通過對場景化設(shè)計的了解，我們可以知道，當(dāng)用戶在表達：“讓界面能看到的信息越多越好，界面設(shè)計的緊湊點吧?！本筒辉偈且粋€簡單的問題了，背后有著更深刻的更需要被剖析的原因。

B端產(chǎn)品的難點是業(yè)務(wù)復(fù)雜性，業(yè)務(wù)一復(fù)雜，設(shè)計分析和設(shè)計復(fù)雜度就指數(shù)級上升了。簡單的“界面設(shè)計緊湊”，并不能有效得解決用戶的痛點。下面我們來看一個B端案例，用“場景化設(shè)計”的方法去處理“讓界面設(shè)計的緊湊點吧”這個問題。

表格數(shù)據(jù)展示的例子

表格頁通常都會給予查詢條件，但是有些表格的查詢字段很多，有十幾個，這時候全部鋪在頁面上很占空間，導(dǎo)致用戶能看到的表格數(shù)據(jù)就不多了。這時候用戶說，界面在設(shè)計緊湊點吧。

第一步：梳理用戶使用該界面的場景，且窮盡

1. 數(shù)據(jù)分析員（who），在數(shù)據(jù)篩選前（when），在辦公室（where），打開電腦查看數(shù)據(jù)創(chuàng)建者錄入進去的數(shù)據(jù)（what），面對一堆數(shù)據(jù)，需要從各個維度將數(shù)據(jù)篩選出來，太心累（how）。
2. 數(shù)據(jù)分析員（who），在篩選數(shù)據(jù)時（when），輸入篩選條件和點擊查詢按鈕，查看需要的數(shù)據(jù)（what），不停地輸入篩選條件，查詢數(shù)據(jù)，再輸入再查詢，導(dǎo)致效率很低（how）。
3. 數(shù)據(jù)分析員（who），在每次篩選數(shù)據(jù)后（when），要對一些同緯度的數(shù)據(jù)進行對比（what），但是數(shù)據(jù)在一屏展示不下，需要翻頁查看，很困難（how）。

通過對用戶使用該界面場景的描述，有利于我們發(fā)現(xiàn)很多用戶在使用界面過程中我們沒有注意到的細節(jié)，洞察設(shè)計機會點

第二步：根據(jù)場景挖掘設(shè)計機會

從以上3個用戶使用界面的場景，我們可以發(fā)現(xiàn)，數(shù)據(jù)分析員每天要查看的數(shù)據(jù)是很多的，同時要從一堆數(shù)據(jù)中篩選出自己需要的數(shù)據(jù)，并且進行數(shù)據(jù)對比，較為復(fù)雜。因此，單純的讓界面呈現(xiàn)多的信息和界面設(shè)計的緊湊，并不能解決用戶的痛點。

面對以上第一條：我們可以將數(shù)據(jù)分析員常用的篩選條件平鋪出來，將不常用的放入高級查詢。

面對以上第二條：由于數(shù)據(jù)分析員需要不停的篩選和查詢不同維度的數(shù)據(jù)，而每天需要查詢的維度又是差不多的，那么我們可以允許用戶保存常用的查詢條件。

面對以上第三條：當(dāng)篩選出數(shù)據(jù)后，數(shù)據(jù)分析員需要對數(shù)據(jù)進行對比，由于數(shù)據(jù)是系統(tǒng)自動過濾出來的，所以給予用戶主動的”拖拽“換行功能，可以保證用戶將重要數(shù)據(jù)在一屏中呈現(xiàn)。

同時，在數(shù)據(jù)分析員無需篩選數(shù)據(jù)，僅僅全局瀏覽數(shù)據(jù)的時候，可以把查詢條件收起來。

第三步：輸出基于用戶場景的設(shè)計方案

由此，我們的界面變成了這樣子：

優(yōu)化前：

基于粗暴的緊湊設(shè)計：

基于場景化設(shè)計：

四、總結(jié)

當(dāng)我們接到產(chǎn)品經(jīng)理說：讓用戶的界面信息越多越好吧。這樣子的粗暴需求后，我們可以試著去考慮“場景化設(shè)計”。

“界面設(shè)計的緊湊可以讓用戶看到更多的信息”這個想法雖然是合理的，但是單一的追求這個目標(biāo)，會導(dǎo)致界面顯得過于擁擠和降低用戶體驗，對于用戶來說：“1、界面信息結(jié)構(gòu)展現(xiàn)清晰。2、快速找到重要的信息。3、高效完成任務(wù)?！辈攀呛侠淼?。而不是一味的追求在當(dāng)前屏幕里塞滿盡可能多的信息。

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。