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

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

那么，筆者經(jīng)常會(huì)有個(gè)疑問(wèn)，這是用戶的真實(shí)訴求嗎？有沒(méi)有其他方法來(lái)解決此類訴求？畢竟對(duì)于界面排版來(lái)說(shuō)，界面信息多，則意味著頁(yè)面擁擠，視覺(jué)效果不佳。

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

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

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

1. OA系統(tǒng)

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

2. Scrum系統(tǒng)

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

3. 中臺(tái)系統(tǒng)

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

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

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

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

二、場(chǎng)景化設(shè)計(jì)

1. 什么是場(chǎng)景化設(shè)計(jì)

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

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

因此，我們要問(wèn)：“是什么場(chǎng)景下，用戶要求界面看到的信息越多越好？”到底用戶的痛點(diǎn)是什么：

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

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

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

……

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

2. 有哪些場(chǎng)景化設(shè)計(jì)的例子

（1）淘寶

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

（2）餓了么

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

（3）簡(jiǎn)書(shū)

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

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

通過(guò)對(duì)場(chǎng)景化設(shè)計(jì)的了解，我們可以知道，當(dāng)用戶在表達(dá)：“讓界面能看到的信息越多越好，界面設(shè)計(jì)的緊湊點(diǎn)吧。”就不再是一個(gè)簡(jiǎn)單的問(wèn)題了，背后有著更深刻的更需要被剖析的原因。

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

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

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

第一步：梳理用戶使用該界面的場(chǎng)景，且窮盡

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

通過(guò)對(duì)用戶使用該界面場(chǎng)景的描述，有利于我們發(fā)現(xiàn)很多用戶在使用界面過(guò)程中我們沒(méi)有注意到的細(xì)節(jié)，洞察設(shè)計(jì)機(jī)會(huì)點(diǎn)

第二步：根據(jù)場(chǎng)景挖掘設(shè)計(jì)機(jī)會(huì)

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

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

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

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

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

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

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

優(yōu)化前：

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

基于場(chǎng)景化設(shè)計(jì)：

四、總結(jié)

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

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

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

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