本文主要介紹了一些筆者在日常B端系統(tǒng)設計工作中總結的交互設計要點，多關注交互設計的細節(jié)，可讓系統(tǒng)功能實現更大價值。

在B端系統(tǒng)的功能設計中，往往會把“業(yè)務場景覆蓋齊全”、“功能邏輯完善”、“投入產出成正比”放在優(yōu)先考慮梯隊，而“交互設計”往往會因為投入成本高、影響面較小等問題被忽略。因為對業(yè)務系統(tǒng)而言，“讓業(yè)務跑通”似乎理應優(yōu)先于“讓業(yè)務跑得更快”。另一方面，有時候在技術設計上也會為了更好的系統(tǒng)性能，從而犧牲一些良好的交互體驗。

但是，良好的交互設計不僅能提升用戶的使用體驗，還可以提高用戶的工作效率，甚至可以節(jié)約IT的運維成本，同樣可帶來較高的價值。

再者，有許多交互設計的細節(jié)實則耗費極少的開發(fā)成本即可實現，所以在功能設計初期或優(yōu)化階段，我們都應該多關注如何利用交互設計的細節(jié)，讓系統(tǒng)功能實現更大價值。

下面，從三大方面闡述了一些B端系統(tǒng)交互設計的細節(jié)要點：

一、更流暢的“輸入”體驗

1. 智能默認

為表單字段設置默認值是減少用戶工作量的有效措施，我們可以想象當用戶輸入填寫一張幾十個字段的表單，若每個字段都需要用戶逐個輸入，那將是一件很消耗耐心的事情。

設置默認值的要點有以下兩點：

• 支持靈活配置：因為不同的業(yè)務可能會需要不同的默認值，所以為了使該功能更具擴展性，在設計之初要考慮將其設計為可配置模式
• 默認值出現的觸發(fā)點：顯示默認值的時機一般可分為兩類，一是進入界面即立刻展示；二是根據A帶出B，即填寫了某個字段，可以帶出其他字段的值

2. 業(yè)務規(guī)則卡控提醒

“卡控校驗”雖說會阻斷用戶的后續(xù)步驟，但卻是提前識別異常數據、規(guī)范用戶輸入的有效管理手段，也可以說是保存單據時必不可少的一環(huán)。

但是我們可以思考：如何讓”卡控校驗“發(fā)揮本職作用的同時，又可以讓用戶感到”智能“而非”阻斷“呢？

下面列出了兩種卡控提醒的常見形式，可根據使用場景選擇合適的方式：

輸入前文本提醒：適用于文字較少的通用規(guī)則

輸入后彈窗確認：適用于用戶較難自行判斷的問題，需要系統(tǒng)提供詳細提示信息以指引用戶修改

3. 智能推薦

智能推薦在C端產品的應用十分廣泛，不過目前在B端系統(tǒng)的應用相對較少，但該技術其實可以有效地節(jié)約用戶輸入/搜索時間。

例如，當用戶在訂單系統(tǒng)錄入銷售產品時，若將能將該用戶常選產品or近期銷量較高產品展示在前排，則能幫助用戶更快速完成這一步驟。

4. 自動識別文本

用戶粘貼一段長文本，系統(tǒng)自動將其識別拆分填入對應的字段，該場景在單據輸入環(huán)節(jié)十分常見，例如地址信息的識別、聯系人姓名電話的識別、產品信息的識別等。所以，對于一些組合信息需被拆分成多個格式化字段的表單，在需求調研時，需充分了解用戶獲取信息來源的習慣，若用戶收到的信息常是一段文本并可通過一定規(guī)則實現自動識別，則可考慮添加該功能。

5. 批量導入

對于一些以“行”為結構的表單信息，常常需要支持“導入”功能?？梢酝ㄟ^了解用戶獲取信息的來源，以及編輯信息的習慣，了解其是否需要該功能。

在訂單系統(tǒng)中，企業(yè)客戶常常通過EXCEL表格傳遞訂單的產品行信息，例如：產品型號、數量、價格、發(fā)運日期等，所以對錄入訂單的用戶來說，支持直接導入EXCEL表格錄入單據信息無疑是十分提效的功能。

同時，做導入功能有以下兩個值得注意的點：

• 清晰展示導入結果：當導入成功時，可直接在輸入界面展示已導入的內容，以便用戶直接確認內容準確性以及操作后續(xù)步驟；當導入失敗時，需詳細指出哪個單元格的數據不符合哪一點要求，以便用戶能快速定位問題修改數據。
• 導入性能：當用戶使用導入功能時，一般都是有較多數量的信息，所以導入的速度非常影響用戶的使用體驗。

6. 批量填充

對于表單信息，還有一種提效的舉措，就是“批量填充”，也就是將某列的所有行一次性填充同樣的值。填充操作的交互上可以是右擊某個單元格，又或者是一鍵填充等等。而填充方式上也可以有多種選擇，例如：

• 全部填充：即該列的所有單元格，都填充該值
• 空值填充：即將該列所有為空的單元格，都填充該值
• 選擇值填充：將該列已被勾選的行，填充該值

二、有效減少運維的“指引提示”

1. 消息提醒及消息盒子

對于用戶操作的消息提醒大致可以分為以下幾類：

第一類：用戶輸入內容后，“消息提醒”立即固定展示在界面，直到用戶輸入正確的內容才消失。

此類交互一般適用于文本較短且內容比較固定的提示，例如：請輸入正確的電話格式，XX比例不能超過10%等等

第二類：用戶提交單據后，“消息提醒”必須等用戶確定后，才允許用戶進行下一步操作。

此類交互一般適用于對后續(xù)流程影響較大的內容且必須有用戶做決定

第三類：用戶提交單據后，“消息提醒”會閃現幾秒，接著會自動消失。

此類交互一般適用于偶發(fā)性的系統(tǒng)報錯

下面，我們來看看什么是“消息盒子”。對于上述第三類“消息提醒”，用戶在享受到無需手工關閉“消息提醒”的便利之余，可能會有一個困擾，那就是來不及看完提醒或復制提醒，“消息提醒”就自動消失了。這時候如果有一個地方可以查看歷史的消息提醒那將更便于用戶追溯歷史提醒。所以，才有了下圖的“消息盒子”，它的主要作用就是讓用戶可以查看/復制歷史的消息提醒。

2. 界面操作指引

上述的“消息提醒”是針對用戶“輸入后”的提示，而“界面操作指引”則是針對用戶“輸入前”的提示。

界面操作指引對新用戶尤其有幫助，因為當用戶進入到一個從未操作過且較為復雜的界面，會無從下手，不知道先從哪一步開始。

常見的界面操作指引一般有“靜態(tài)文本”和“動態(tài)指引”：

• 靜態(tài)文本：例如在輸入框旁提示“請?zhí)顚慩XX”、在界面頂部或底部提示“請先xxx”
• 動態(tài)指引：將需要填寫的信息逐步展示，當用戶完成step1，再展示step2

3. 加載提示

當界面數據量較大或者系統(tǒng)性能不穩(wěn)定時，容易出現界面加載較慢的問題，這時候如果在界面出現進度條、loading圖標等加載提示，可以避免用戶誤以為是功能失靈。

當然，如果加載提示的方式可以更有趣一些，相信用戶的煩躁度也會降低一些。

三、提升工作效率的“界面展示”

1. 簡化界面

B端系統(tǒng)的單據往往需要錄入數十個字段信息，所以容易導致界面冗余，影響界面美觀性的同時也會影響用戶的操作效率。下面列舉了一些常用的簡化界面的方法：

伸縮展示：

為了讓用戶可在一個界面查看更多信息，同時不讓界面顯得擁擠，可以將部分信息“選擇性隱藏”，即觸發(fā)某個地方再展示這部分信息。

例如，下圖是訂單系統(tǒng)的訂單列表，我們將訂單信息區(qū)分為“訂單頭信息”和“訂單行明細信息”，由于明細信息較多，所以我們可默認不展示該部分信息，當雙擊訂單頭信息時，再在下方展示出其對應的明細信息。

智能顯示/隱藏：

首先，針對部分存在依賴關系的字段，可利用它們的綁定關系設計智能帶出或隱藏邏輯。例如若“遞送發(fā)票地址”為“線上“，那么“遞送發(fā)票地址(省市區(qū))”則無需填寫，但是“遞送發(fā)票郵箱”必須填寫。所以，我們可設計為當填寫了“遞送發(fā)票地址”，再智能帶出其余需補充的字段。

其次，針對不同業(yè)務的需求，對部分字段做”顯示范圍“的限制。因為多個業(yè)務可能是共用一個表單，但是不同業(yè)務需要填寫的內容會存在一些差異。假設A業(yè)務，無需收集b字段信息，那么A業(yè)務填寫表單時，界面可隱藏b字段。

3. 個性化支持

考慮到每個用戶的操作習慣不同，所以系統(tǒng)設計少不了個性化支持功能。

例如列表視圖，用戶常常會希望根據工作習慣自定義列表的字段排序，所以我們可以提供對應的自定義視圖功能。

滿足用戶的個性化需求，便能助力用戶更高效地操作系統(tǒng)。

4. 快速定位

用戶想快速定位某個信息時，必須用到“搜索”相關的功能，那么除了最常見的搜索欄，還有以下幾個能幫助用戶快速定位的實用功能：

• 標簽：標簽不但可以幫助用戶快速歸類信息，它還具有較高的“可視化”，能讓用戶更快捷識別出當前信息的相關內容。
• 快速定位列：該功能適用于表單設計，例如某個表單有A-Z列，如果用戶想查看第一行第Z列的信息，一般就只能往后滑動，但是我們可以通過設計“快速定位列”功能，支持用戶輸入列名后，自動定位到該列，便可幫助用戶節(jié)約查找時間。
• 默認查詢：該功能指用戶進入某個界面后，自動根據默認條件搜索出界面數據。