長(zhǎng)久以來(lái)，我們一直強(qiáng)調(diào) B 端設(shè)計(jì)，最重要的輸出產(chǎn)物不在于樣式，而是交互。優(yōu)秀的交互設(shè)計(jì)可以顯著的提升操作效率，更快完成工作任務(wù)，從而提升經(jīng)濟(jì)效益。

但是要怎么講清楚它是很痛苦的一件事，理論上的交互原則，和真實(shí)工作場(chǎng)景遇到的困難很難匹配。大家會(huì)有這種感覺(jué)：看再多的分享和原則，也做不好交互。

所以，我們要來(lái)探討一些 B 端交互的基本要求和特點(diǎn)，下面用一些近期的案例做簡(jiǎn)單的剖析。

在 B 端項(xiàng)目中，所有的工作目標(biāo)，都是圍繞在更好的解決業(yè)務(wù)問(wèn)題展開(kāi)的。一個(gè)完整的業(yè)務(wù)需求，必然是包含大量的組件、流程的共同參與。

我們?cè)谠O(shè)計(jì)內(nèi)容的過(guò)程中，往往會(huì)掉進(jìn)過(guò)度關(guān)注某個(gè)單元的細(xì)節(jié)，而忽略整體對(duì)整體業(yè)務(wù)目標(biāo)、重點(diǎn)的認(rèn)知，出現(xiàn)本末導(dǎo)致的問(wèn)題。

所以，針對(duì)每個(gè)局部的組件，我們一定要思考它在流程中的重要性，使用頻率，使用場(chǎng)景。

比如前陣子分享的學(xué)員案例篩選組件，我們將左側(cè)露出的篩選項(xiàng)進(jìn)行折疊合并，修改成了右圖的結(jié)果。

光盯著組件看，可以明確的說(shuō)案例1必然是更好操作的，因?yàn)楹Y選內(nèi)容可見(jiàn)，操作步驟較少。如果你只想到這里，那么必然是沒(méi)法處理好交互的。

我拿到這個(gè)案例的第一件事，實(shí)際上就是搞懂這個(gè)頁(yè)面是干嘛用的，處理什么業(yè)務(wù)，以及了解目前用戶的一些基本訴求。

最后得到的結(jié)果，就是操作員來(lái)到這個(gè)頁(yè)面，主要查看異常的狀態(tài)和它們的詳情。因?yàn)榱斜肀旧硎歉鶕?jù)時(shí)間排序的，異常狀態(tài)沒(méi)有處理的也通常都在前面。

所以，操作員直接查看列表是最高頻的操作，并且表頭因?yàn)橹С峙判蚯袚Q，也是高頻操作的內(nèi)容之一。反而頂部的篩選，只有遇到一些特殊情況，需要將歷史中的某些條目篩選出來(lái)，才會(huì)用得到。在正常使用過(guò)程中是會(huì)被自動(dòng)忽略的。

而且目前用戶的主要反饋也出現(xiàn)，頂部的篩選過(guò)高，每次進(jìn)頁(yè)面都要下拉才能看見(jiàn)列表，操作極為不便。

基于這樣的前提條件，我就一定會(huì)壓縮頂部篩選區(qū)域的高度，確保下方列表的大多數(shù)內(nèi)容在一屏內(nèi)可以顯示完。

那為什么還要改里面的篩選方法而不是簡(jiǎn)單做個(gè)折疊和展示？

還有一個(gè)全局化的考慮，就在對(duì)一個(gè)篩選組件的設(shè)計(jì)，就是其它所有頁(yè)面篩選組件樣式的基礎(chǔ)。這個(gè)頁(yè)面我們只放了七行，其它頁(yè)面最多的篩選項(xiàng)最高多達(dá)一倍。即使做成折疊的，展開(kāi)后甚至一屏都放不完篩選內(nèi)容，比如下面這樣的示例。

并且，篩選完之后，這個(gè)面板折疊還是不折疊，折疊了的話看結(jié)果列表就看不到前面選了哪些。不折疊同樣也基本看不見(jiàn)，因?yàn)榱斜硇枰吕?，把上半部分?nèi)容隱藏。

所以，最終進(jìn)行多列排序的設(shè)計(jì)，就是舍棄最“初步”的便利性，為業(yè)務(wù)目標(biāo)讓步。同時(shí)基于全局的可用性做預(yù)判，對(duì)一個(gè)低頻操作的模塊減少過(guò)度信息的露出，讓用戶可以高效完成 1 級(jí)信息索引（找到選項(xiàng)標(biāo)題），然后再去做 2 級(jí)篩選。

在長(zhǎng)期以來(lái)的 B 端項(xiàng)目實(shí)踐中，我都始終踐行業(yè)務(wù)優(yōu)先的原則，檢查處理的方案能不能滿足我上面分析的特征，只有滿足不了業(yè)務(wù)需要，我才會(huì)去修改它。

而不是虛空樹(shù)靶，光靠各自的 “覺(jué)得” 來(lái)討論，這樣的討論不僅沒(méi)有質(zhì)量，而且不會(huì)獲得有效的結(jié)果。

做產(chǎn)品和交互，對(duì)用戶的理解優(yōu)先建立在共情和同理心上。

了解用戶，最好的方法不是你做了科學(xué)的實(shí)驗(yàn)，應(yīng)用完善的理論，而是你自己成為用戶！可惜很多設(shè)計(jì)師都想不明白這個(gè)道理，過(guò)度追求數(shù)據(jù)或者調(diào)研方式。

在上一個(gè)案例中，也有同理心應(yīng)用的部分，自己作為用戶知道這個(gè)頁(yè)面操作的重點(diǎn)，在權(quán)衡利弊的過(guò)程中你自然知道應(yīng)該選擇什么，放棄什么。

下面再看另外一個(gè)學(xué)員案例，也是表單，但是是需要用戶完整填寫(xiě)的大量表單內(nèi)容。

在右側(cè)的改版里，我把單從橫排改成了豎排，從原本省空間的方案改成了不省空間的方案，和上一個(gè)案例截然不同。

為什么？看看下面的細(xì)節(jié)先。

如果真當(dāng)自己是用戶，看一遍自己做的設(shè)計(jì)，給自己定個(gè)操作的目的，并嘗試在這些內(nèi)容做選擇，那么你選擇到這種模塊，就必然開(kāi)始混亂起來(lái)。

上下的內(nèi)容離得太近了，比左右同行同級(jí)元素還近，這樣會(huì)極大損害信息識(shí)別的效率和操作順暢度。尤其當(dāng)我核對(duì)前面單選項(xiàng)是否選對(duì)的情況，閱讀起來(lái)更是痛苦。

而我們把內(nèi)容進(jìn)行上下排序，將親密性表現(xiàn)得更合理，那么操作的舒適度就會(huì)顯著的上升。至于多出來(lái)的高度，作為用戶你沉浸在表單輸入過(guò)程中，為什么會(huì)關(guān)注多出來(lái)的那點(diǎn)高度？

好吧！如果一定要用理論方法來(lái)分析，那可以堆砌一堆的理論解釋：

• 親密/對(duì)齊性：上下排序的親密性可以完美符合左對(duì)齊視覺(jué)引導(dǎo)，以及不同模塊跨度的劃分

• 菲茲定律：左對(duì)齊的選框位置距離極短，除了滾動(dòng)外鼠標(biāo)就負(fù)責(zé)上下移動(dòng)，而不用全屏幕流浪

• 心流理論：用戶視線不要輕易被打亂，就容易沉浸到完成當(dāng)前目標(biāo)，而不是關(guān)注怎么設(shè)計(jì)美觀

• ……

理論可以拿來(lái)在 PPT 里強(qiáng)化自己方案的說(shuō)服力，但前提是別自己繞進(jìn)去，純粹通過(guò)理論的堆積來(lái)認(rèn)為自己設(shè)計(jì)的是合理的。

再看看下面這種表單頁(yè)的案例，多列設(shè)計(jì)來(lái)讓畫(huà)布被填滿的設(shè)計(jì)，思考下到底是為了設(shè)計(jì)而設(shè)計(jì)，還是為 “用戶” 設(shè)計(jì)？

第三點(diǎn)，就是有效的整理需要的設(shè)計(jì)模塊的字段信息。從產(chǎn)品層面去理解該模塊的訴求，信息層級(jí)，狀態(tài)類型。

有很多復(fù)雜的組件，如果我們直接動(dòng)手畫(huà)，是行不通的。主要問(wèn)題源自需求層面的復(fù)雜性，不僅字段非常多，而且它們是有層級(jí)關(guān)系，集聯(lián)性質(zhì)。

比如再看下圖的學(xué)員案例，一個(gè)在公司平臺(tái)上傳公共文件時(shí)，進(jìn)行素材權(quán)限編輯和信息管理的組件。

在這個(gè)模塊中，包含的功能和可操控的元素非常多。從整個(gè)面板的標(biāo)題開(kāi)始，作為最頂層的信息，向下可以延伸出不同的子模塊和對(duì)應(yīng)的二級(jí)標(biāo)題。

每個(gè)二級(jí)標(biāo)題下，還有不同的下級(jí)元素。我們不僅要有效處理這些關(guān)系，同時(shí)還要分析權(quán)限的字段內(nèi)容，它們包含了：權(quán)限類型標(biāo)題、對(duì)象、對(duì)象權(quán)限、選擇、刪除、添加。

這時(shí)候，我就會(huì)用文字的方法把這些信息整理出來(lái)：

然后，重新梳理不同層級(jí)結(jié)構(gòu)，再完成不同狀態(tài)的兼顧，縮減無(wú)效的按鈕，盡可能降低信息的復(fù)雜程度。下面是改動(dòng)后的案例（只做了原型）。

交互的很多工作并不在設(shè)計(jì)軟件上，而是要跳出軟件和設(shè)計(jì)稿，去理解實(shí)際的產(chǎn)品需求、信息、字段。除了一些樹(shù)狀圖外，必要的交互流程圖是無(wú)法省略的。

多種工具導(dǎo)圖和原型的共同作用，才能幫助我們?cè)趶?fù)雜的需求環(huán)境下 “試” 出足夠多的方案找到最滿意的那一個(gè)。

最后，就是自己也拿不定主意，或者你的方案就是說(shuō)服不了產(chǎn)品、開(kāi)發(fā)的常見(jiàn)情況，怎么辦？

那就是真實(shí)的做測(cè)試和投票！

B 端比 C 端最大的優(yōu)勢(shì)之一，就是如果真要做用戶調(diào)研和測(cè)試，容易了無(wú)數(shù)倍。不管是給客戶做方案還是做公司內(nèi)部項(xiàng)目，你的目標(biāo)用戶群體是非常固定而且容易聯(lián)系的。

當(dāng)我們?cè)诮换シ桨干辖┏植幌碌臅r(shí)候，就不用糾結(jié)或者通過(guò)開(kāi)會(huì)的撕逼來(lái)做決策。而是把這交互方案的高保真原型做出來(lái)，給對(duì)應(yīng)的目標(biāo)用戶做測(cè)試。

比如上面表單的案例中，新老兩個(gè)案例，你都可以快速用 Axrure 或者 Protopie 等軟件實(shí)現(xiàn)高保真的交互原型，1:1 還原真實(shí)操作場(chǎng)景。

你可以從下面制作的初步案例中查看操作結(jié)果：

請(qǐng)?jiān)陔娔X端打開(kāi)，才能還原真實(shí)操作：

原案例：https://cloud.protopie.io/p/f20dc7a0eb

改后案例：https://cloud.protopie.io/p/42c51829cd

這時(shí)候，方案哪個(gè)有效不就根本不用爭(zhēng)論，交給目標(biāo)用戶去使用和投票不就明了了嘛？

B 端交互方案的決策權(quán)，可以由目標(biāo)用戶來(lái)主導(dǎo)，而我們要做的就是去建立這樣的決策機(jī)制，如何快速的來(lái)生成不同交互方案，并讓目標(biāo)用戶決斷。

不要再在無(wú)窮無(wú)盡的 “你覺(jué)得”、“我覺(jué)得” 中損耗項(xiàng)目進(jìn)度了……

以上，就是一些 B 端交互設(shè)計(jì)中的思路實(shí)際解決流程。這些也是我最真實(shí)的工作狀態(tài)下解決問(wèn)題的方案，所以并不想寫(xiě)一大堆理論來(lái)欺騙自己了?? （狗頭保命）。

希望大家能從中獲得收獲！

B端系統(tǒng)付費(fèi)正課介紹：硬核變強(qiáng)｜B端產(chǎn)品設(shè)計(jì)全能班8.0升級(jí)開(kāi)啟招生，想要變強(qiáng)就來(lái)！