編輯導(dǎo)語(yǔ)：很多時(shí)候，我們對(duì)B端產(chǎn)品交互設(shè)計(jì)的思維方式都是固化的，因此需要具備對(duì)用戶移情或者同理心的能力，才能夠理解不同情形下交互的操作環(huán)境。接下來，本文作者為我們分享了B端產(chǎn)品交互設(shè)計(jì)的一些經(jīng)驗(yàn)和總結(jié)，告訴我們簡(jiǎn)單并不是設(shè)計(jì)的最高標(biāo)準(zhǔn)。

一、初衷：改變固化的B端產(chǎn)品交互設(shè)計(jì)思維方式

1. 生活場(chǎng)景設(shè)計(jì)

故事開始之前，咱們先看看兩個(gè)生活中常見的場(chǎng)景：

1）石板路

每次去公園的時(shí)候，遇到公園有些石板路，你是否也和老文一樣有強(qiáng)迫癥，每一步腳印一定要踩在石板的中間。

但是你是否發(fā)現(xiàn)公園石板路，不管是寬石板還是那種窄石板，石板和石板之間的距離很不合理，一步走一格，步子太??；一步走兩格，步子又太大。

2）遙控器

記得家里第一臺(tái)彩色電視機(jī)，遙控器上滿是按鈕，并且還有很多不明思議的按鈕。

出于好奇每個(gè)按鈕都會(huì)去體驗(yàn)一下，其中有一些按鈕會(huì)出現(xiàn)搞不懂的功能，有一些則沒有按鈕沒任何反應(yīng)，讓人不知所措。

以上兩個(gè)場(chǎng)景，石板路沒有說明書，因?yàn)樽呗反蠹叶紩?huì)，但是石板路的設(shè)計(jì)卻讓人很不舒服。遙控器有說明書，但是繁瑣的說明書依舊讓人很困惑，那我們是否在石板路兩頭各制作一個(gè)石板路說明書？

告訴大家石板路應(yīng)該怎么走；亦或是直接砍掉遙控器上讓人困惑的按鈕鍵，一了百了？不管我們采取哪種方式解決問題，都會(huì)讓人感覺很牽強(qiáng)。所以當(dāng)軟件產(chǎn)品的設(shè)計(jì)時(shí)，遇到類似的問題應(yīng)該怎么處理。

2. B端產(chǎn)品交互設(shè)計(jì)的問題和文章背景

通過兩個(gè)生活場(chǎng)景，咱們把石板路和電視機(jī)遙控器看成一個(gè)軟件產(chǎn)品，那其實(shí)就是產(chǎn)品經(jīng)理在設(shè)計(jì)上出現(xiàn)了問題。

類似場(chǎng)景，在B端的產(chǎn)品交互設(shè)計(jì)中也是會(huì)經(jīng)常出現(xiàn)的問題。最近老文公司的產(chǎn)品每增加一個(gè)新的客戶，總是聽到重復(fù)的聲音：

1. 你們公司的系統(tǒng)流程好復(fù)雜呀！
2. 這個(gè)地方的費(fèi)用是怎么計(jì)算的？
3. 操作完這個(gè)功能之后，接下來我要做什么？
4. 司機(jī)能不能不提供身份證號(hào)碼？
5. 點(diǎn)完這個(gè)按鈕之后系統(tǒng)自動(dòng)執(zhí)行流程？
6. ……..

如果一個(gè)問題總是被用戶重復(fù)提出疑惑，那肯定是產(chǎn)品的設(shè)計(jì)給用戶造成了心情上的不美麗，老文了解到公司的其他產(chǎn)品也出現(xiàn)同樣的問題。發(fā)現(xiàn)問題集中在公司新上線的B端產(chǎn)品上，并且用戶的問題基本類似。

這樣使得我不得不去重視這些問題，以前設(shè)計(jì)B端產(chǎn)品的時(shí)候固化的思維方式是：優(yōu)先實(shí)現(xiàn)功能，交互設(shè)計(jì)、UI可以放后面再去完善。

這種思維方式是否可取需要重新考慮，因?yàn)檫@些產(chǎn)品都有相對(duì)完善的產(chǎn)品介紹和用戶操作手冊(cè)，但是用戶依舊還是會(huì)提出很多同質(zhì)問題，并且出現(xiàn)在多個(gè)產(chǎn)品上。

正因?yàn)樯鲜鰡栴}，也激起我重新思考B端產(chǎn)品交互設(shè)計(jì)的重要性，如何在資源有限的情況下，解決好業(yè)務(wù)復(fù)雜的B端產(chǎn)品交互設(shè)計(jì)。

還有就是現(xiàn)在的企業(yè)用戶已經(jīng)不是以前僅僅滿足于功能的使用，對(duì)產(chǎn)品的UI設(shè)計(jì)、交互設(shè)計(jì)也有了更高的追求。

背景：老文公司是一家互聯(lián)網(wǎng)物流解決方案供應(yīng)商，面向的用戶是物流行業(yè)中一線員工。雖然他們自己總說行業(yè)文化程度不高，系統(tǒng)接收能力不強(qiáng)，系統(tǒng)要簡(jiǎn)單、方便。

即便如此，事實(shí)上他們也已經(jīng)被各種APP培養(yǎng)的很“嬌貴”了。

二、何為交互：用戶移情或同理心

何為交互？交互：交流互動(dòng)，即系統(tǒng)與用戶“對(duì)話”的過程。

老文認(rèn)為在產(chǎn)品中的交互設(shè)計(jì)，這個(gè)過程經(jīng)歷了兩次完全獨(dú)立的人機(jī)交互，一個(gè)是產(chǎn)品經(jīng)理將設(shè)計(jì)的系統(tǒng)和功能，通過技術(shù)工程師編碼呈現(xiàn)出來；二個(gè)是用戶通過使用系統(tǒng)和功能達(dá)成和產(chǎn)品經(jīng)理“對(duì)話”。

設(shè)計(jì)產(chǎn)品的交互，需要了解產(chǎn)品的最終用戶，知道他們想達(dá)成什么目的，需要經(jīng)歷那些步驟。還要求理解不同情形下交互的操作環(huán)境。

所以，對(duì)用戶的移情或者同理心，觀察用戶的本事以及把產(chǎn)品的方方面面融入交互細(xì)節(jié)的能力都至關(guān)重要。

1. 用戶操作手冊(cè)

用戶操作手冊(cè)在B端產(chǎn)品中屬于一個(gè)必備的產(chǎn)品類文檔，先不管文檔的水平如何，在面向客戶的SaaS產(chǎn)品或者平臺(tái)類產(chǎn)品，就文檔的使用效果而言，整體的情況一般。

當(dāng)然，在公司內(nèi)部使用的B端產(chǎn)品或強(qiáng)產(chǎn)品類型的情況是另外一個(gè)場(chǎng)景了。

所以，產(chǎn)品經(jīng)理在產(chǎn)品交付的初期，不能過度的期待用戶操作手冊(cè)能夠帶來太大的效果，因?yàn)檫@還跟用戶使用系統(tǒng)的素質(zhì)有關(guān)系。

B端產(chǎn)品本身在流程和業(yè)務(wù)上相對(duì)會(huì)比較復(fù)雜，所以導(dǎo)致用戶操作手冊(cè)也會(huì)比較冗長(zhǎng)。真正用心讀完操作手冊(cè)的用戶并不會(huì)太多，如果有問題就會(huì)直接咨詢客服或者產(chǎn)品經(jīng)理，所以面對(duì)面的培訓(xùn)反而會(huì)有更好的效果。

2. 系統(tǒng)交互提示

基于上述原因，所以在系統(tǒng)內(nèi)的交互提示反而更加重要。

用戶之所以會(huì)疑惑，大部分的時(shí)候是因?yàn)榇蜷_系統(tǒng)不知道怎么去使用。還有就是操作了某個(gè)功能之后，反饋不是很明確，不知道下一步將如何使用。

老文在此提供兩個(gè)例子：

1）業(yè)務(wù)導(dǎo)航指引菜單，公司集散中心系統(tǒng)-快捷導(dǎo)航圖：

2）釘釘系統(tǒng)內(nèi)交互設(shè)計(jì)，善于利用交互提示：

3. 列表頁(yè)和查詢條件

進(jìn)入2B的系統(tǒng)，滿屏都是列表，基本上列表頁(yè)和查詢條件占據(jù)了系統(tǒng)的一半以上，并且大部分的功能都是從列表查詢頁(yè)開始。

所以列表頁(yè)的設(shè)計(jì)反而顯得尤為重要，頁(yè)面的布局和交互設(shè)計(jì)在一些細(xì)節(jié)上操作，會(huì)使得操作起來更加便捷，咱們直接看幾個(gè)典型的案例。

1）查詢列表設(shè)計(jì)

2）表格中信息縮略設(shè)計(jì)

3）推拉框（抽屜）設(shè)計(jì)

4. 彈窗還是開啟新頁(yè)面？

2B產(chǎn)品中經(jīng)常需要思考這個(gè)問題，彈窗和重新開啟一個(gè)新的頁(yè)面，哪個(gè)交互體驗(yàn)會(huì)更加好。

排除研發(fā)人員的排斥心理和框架限制，這個(gè)交互需要好好思考，因?yàn)榇蠖鄶?shù)的技術(shù)人員還是喜歡使用彈窗來解決，往往彈窗并不一定是最好的交互。

之所以單獨(dú)將這塊的內(nèi)容拿出來分析，原因在于2B產(chǎn)品中新增、編輯、刪除、查詢、詳情這個(gè)幾個(gè)最多的場(chǎng)景，其中有新增、編輯、詳情基本都是相似的功能。

在設(shè)計(jì)這些界面的交互時(shí)，一定要根據(jù)實(shí)際的業(yè)務(wù)來判斷是采用彈窗還是開啟一個(gè)新頁(yè)面來完成交互。一款2B的產(chǎn)品如果在這幾個(gè)功能交互上做到“賞心悅目”，那用戶的體驗(yàn)基本上被征服了一大半。

以查看詳情舉例：

三、反饋闡釋規(guī)則：少即是多

老文認(rèn)為約束也是一種交互設(shè)計(jì)，特別是在2B產(chǎn)品中，約束顯得尤為重要，因?yàn)?B產(chǎn)品往往擁有相對(duì)復(fù)雜的流程。

在我們將現(xiàn)實(shí)業(yè)務(wù)場(chǎng)景中的呈現(xiàn)到產(chǎn)品中時(shí)，并不能完全照搬流程，因?yàn)樵谙到y(tǒng)的流程設(shè)計(jì)時(shí)，應(yīng)該要考慮如何約束用戶行為，分支太多將會(huì)加大系統(tǒng)的復(fù)雜性同時(shí)，也使用戶產(chǎn)生更多的困惑。

有意識(shí)的引導(dǎo)客戶朝著產(chǎn)品設(shè)計(jì)的流程上操作，才能讓用戶體會(huì)到系統(tǒng)操作的便利性。

1. 強(qiáng)約束：生活中最常見的就是各類接口的約束，如數(shù)據(jù)線、螺絲和螺帽，這種屬于強(qiáng)約束或者叫做邏輯約束，如果不匹配的話根本無(wú)法使用，功能也將無(wú)法發(fā)揮作用。
2. 弱約束：生活中常見的有紅綠燈、汽車尾燈，這種也可以叫做文化限制，如果遇到了紅燈還硬是要通過，那就會(huì)付出相應(yīng)的代價(jià)或犯錯(cuò)。但是功能還是可以繼續(xù)執(zhí)行下去。

約束即規(guī)則，規(guī)則決定了一下事項(xiàng)：

1. 用戶使用某個(gè)功能時(shí)會(huì)發(fā)生什么？如：新增按鈕。
2. 交互期間用戶可以進(jìn)行什么操作？如：取消下載。
3. 動(dòng)作或狀態(tài)發(fā)生的時(shí)間和先后順序。如：訂單狀態(tài)變化。
4. 交互是否可以重復(fù)或多久重復(fù)一次？如：訂單支付按鈕防止重復(fù)提交，點(diǎn)擊之后禁用，直到完成之后再放開操作。
5. 交互結(jié)束時(shí)會(huì)發(fā)生什么？切換到另外一個(gè)交互，還是自動(dòng)消失？亦或是永遠(yuǎn)不結(jié)束？

回到產(chǎn)品的設(shè)計(jì)上來看，我們?cè)谠O(shè)計(jì)約束時(shí)，不同的業(yè)務(wù)場(chǎng)景需要采取不同的約束等級(jí)，需要去模擬業(yè)務(wù)場(chǎng)景的操作行為，也不能全部都是強(qiáng)硬的約束。

根據(jù)最后一條規(guī)則的問題，用戶可能知道可能不知道規(guī)則的存在，而規(guī)則完成之后就在于系統(tǒng)給予什么反饋。那么系統(tǒng)的引導(dǎo)就很重要了，所以約束和反饋一般都是在一起關(guān)聯(lián)設(shè)計(jì)。

關(guān)于反饋的設(shè)計(jì)，主要是更加友好的讓系統(tǒng)與用戶進(jìn)行對(duì)話。讓用戶及時(shí)得到自己想要的結(jié)果，并且能夠讓用戶知道下一步如何操作。

系統(tǒng)的反饋設(shè)計(jì)除了那些重要的提示之外（如刪除二次確認(rèn)等），還應(yīng)該更多的考慮流程上的反饋設(shè)計(jì)。

1. 業(yè)務(wù)場(chǎng)景一

假設(shè)一個(gè)業(yè)務(wù)流程需要A、B、C三個(gè)角色一起操作才能夠完成，大部分產(chǎn)品的設(shè)計(jì)是給下游角色進(jìn)行或系統(tǒng)內(nèi)消息，或短信提示，或APP消息推送。但是，往往很容易忽略掉上游角色的感受。

當(dāng)A完成自己的操作時(shí)，我們很容易想到的是給下游提示，提醒他們及時(shí)的完成操作。但是卻忘記及時(shí)給A角色做反饋，告訴A接下來他應(yīng)該干什么。

這個(gè)時(shí)候很容易讓A或B產(chǎn)生困惑，我接下來應(yīng)該干什么？

好的交互設(shè)計(jì)是，當(dāng)A完成自己的操作時(shí)，進(jìn)行引導(dǎo)反饋，如提示：“您的訂單已經(jīng)完成發(fā)布，系統(tǒng)將通知B及時(shí)接單，訂單完成時(shí)，系統(tǒng)將給您發(fā)送信息通知您?！?/p>

如有必要的話，可以引導(dǎo)A角色去操作另外的功能，如：“您可以及時(shí)完成訂單支付，承運(yùn)商接單后可以及時(shí)收到運(yùn)費(fèi)”，并給出對(duì)應(yīng)的訂單支付功能的快速鏈接。

2. 業(yè)務(wù)場(chǎng)景二

常見的活動(dòng)抽獎(jiǎng)大轉(zhuǎn)盤，大部分這種抽獎(jiǎng)的算法都不是公平的，當(dāng)用戶點(diǎn)擊抽獎(jiǎng)按鈕后，只需要反饋抽獎(jiǎng)結(jié)果即可：恭喜你中獎(jiǎng)了！or 很遺憾，您什么都沒有得到，下次加油！不需要將里面的算法都反饋給你用戶，為什么你沒有中到一等獎(jiǎng)。

與這個(gè)場(chǎng)景類似的還有我們常見的進(jìn)度條，反饋給用戶的結(jié)果是：前面99%進(jìn)度走的非常快，但是后面1%會(huì)相對(duì)變慢或等待。

業(yè)務(wù)場(chǎng)景二需要說明的是，有時(shí)候不讓用戶知道約束的細(xì)節(jié)同樣有合理的非欺騙性原因。用戶每次觸發(fā)的操作沒有必要都讓用戶知道獲取的數(shù)據(jù)，只需要向他們反饋一些重要的結(jié)果或變化即可，用最少的反饋傳達(dá)最豐富的的信息。

四、B端產(chǎn)品交互設(shè)計(jì)的一些經(jīng)驗(yàn)和總結(jié)

1. 即使資源不夠，也不能只注重功能而放棄交互設(shè)計(jì)

現(xiàn)在2B產(chǎn)品的設(shè)計(jì)中MVP的設(shè)計(jì)思路也越來越多，但是更多的都是關(guān)注功能層面，往往很容易忽略掉交互設(shè)計(jì)這塊?？偸且韵葷M足功能為前提，UI和交互設(shè)計(jì)可以后續(xù)慢慢迭代。

但是老文覺得即便是2B也有一個(gè)基本的底線，不能一味的讓步這塊的體驗(yàn)。產(chǎn)品經(jīng)理在設(shè)計(jì)產(chǎn)品的時(shí)候，特別是原型時(shí)，就兼顧這塊的考慮，最后會(huì)發(fā)現(xiàn)事實(shí)上并不需要投入額外資源也能呈現(xiàn)一個(gè)更好的交互性產(chǎn)品。

所以B端產(chǎn)品經(jīng)理在設(shè)計(jì)產(chǎn)品時(shí)，即便一開始研發(fā)資源不夠的情況下，也不能放棄掉交互設(shè)計(jì)這塊。

老文公司由于產(chǎn)品線較多，所以每次一個(gè)新的產(chǎn)品都是研發(fā)資源相對(duì)緊張，犧牲了交互設(shè)計(jì)，導(dǎo)致呈現(xiàn)出來的第一個(gè)版本用戶體驗(yàn)很不好，用戶的第一印象不好的情況下，即便是后面逐步去改善，也需要花費(fèi)很多時(shí)間和精力。

2. 簡(jiǎn)單并不是設(shè)計(jì)的最高標(biāo)準(zhǔn)

老文經(jīng)常去一線客戶處收集需求，每次客戶老板都會(huì)跟我說：“業(yè)務(wù)流程就是這樣，具體要做成什么樣我也不知道，但是我只有一個(gè)要求：簡(jiǎn)單、好用、最好是傻瓜式操作?！?/p>

老文一直在苦苦追尋，到底如何將B端產(chǎn)品設(shè)計(jì)的流程設(shè)計(jì)簡(jiǎn)單？是將實(shí)際的業(yè)務(wù)流程中某些操作直接砍掉么，還是重新設(shè)計(jì)一套流程呢？

不管是采用哪種方式，最后得到的反饋都是不滿足用戶需求。最后發(fā)現(xiàn)用戶并不是需要一個(gè)變型的業(yè)務(wù)流程，也不是害怕復(fù)雜，而是用戶在使用系統(tǒng)的過程中有很多困惑，系統(tǒng)并未給出反饋。

所以，用戶要的是他的解決困惑，復(fù)雜并不是問題。設(shè)計(jì)上用戶多操作幾下按鈕并不會(huì)造成用戶的體驗(yàn)下降。所以回到第一點(diǎn)上，交互設(shè)計(jì)并不是頁(yè)面做的多么花哨，而是設(shè)計(jì)時(shí)將困惑解除。

3. 好看的東西更好用，美即是生產(chǎn)力

如果解決了上述兩個(gè)層次上的需求，那么我們回到和第二點(diǎn)沖突的地方，第二點(diǎn)中不需要頁(yè)面的花哨，那是因?yàn)槟莻€(gè)階段更應(yīng)該關(guān)注解決用戶困惑。

在第二點(diǎn)的基礎(chǔ)上更上一個(gè)層次的話，那我們就需要考慮外表上的東西了，猶如第三點(diǎn)的標(biāo)題一樣。美即是生產(chǎn)力，即便沒有內(nèi)涵，至少也要是一個(gè)花瓶。用戶的評(píng)價(jià)至少也要是：雖然那個(gè)產(chǎn)品使用很一般，但是設(shè)計(jì)的還是很美的。

這里包含兩點(diǎn)，一個(gè)是美可以給人帶來好的心情；第二個(gè)是美需要相互組合，想要呈現(xiàn)出好看的產(chǎn)品，同時(shí)也將要更多的考慮功能之間的組合，所以好看的東西更好用。

4. 除了更美之外，還需要考慮人性的需求

最后，除了外表之外，我們還需要考慮更深層次的需求，也就是反思層面上面的的需求。

產(chǎn)品的設(shè)計(jì)到最后其實(shí)就是研究用戶的心理，這一點(diǎn)在C端產(chǎn)品上體現(xiàn)的更加明顯，如現(xiàn)在的短視頻、淘寶等APP，將用戶的行為、心理分析的非常透徹了。

那么B端產(chǎn)品該如何設(shè)計(jì)和體現(xiàn)呢，老文認(rèn)為需要深入了解產(chǎn)品行業(yè)之后，將行業(yè)內(nèi)涵上的東西表現(xiàn)出來。比如行業(yè)內(nèi)的約定俗成的術(shù)語(yǔ)、規(guī)矩、文化等，然后通過系統(tǒng)中的名詞、圖標(biāo)呈現(xiàn)出來。

要讓用戶感受到系統(tǒng)對(duì)這個(gè)行業(yè)文化和從業(yè)人員的尊重，營(yíng)造出來業(yè)務(wù)氛圍，用戶使用系統(tǒng)時(shí)，感受的到產(chǎn)品經(jīng)理也是深入到本行業(yè)的人。

最終，用戶在系統(tǒng)中也能感受到現(xiàn)實(shí)工作中的角色，完成系統(tǒng)角色塑造和現(xiàn)實(shí)角色結(jié)合。行業(yè)的不同，表現(xiàn)方式也應(yīng)該有所變化，產(chǎn)品設(shè)計(jì)的迭代中，咱們的終極層次為考慮人性的需求，以人為本。

最后，老文同樣也認(rèn)同在交互設(shè)計(jì)中，簡(jiǎn)單并不是設(shè)計(jì)的最高標(biāo)準(zhǔn)，天下沒有大作品，讓我們往小處想，改變世界。

特此說明：本文部分內(nèi)容參考書籍：《設(shè)計(jì)心理學(xué)》、《微交互》。

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

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