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

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

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

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

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

一、更流暢的“輸入”體驗(yàn)

1. 智能默認(rèn)

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

設(shè)置默認(rèn)值的要點(diǎn)有以下兩點(diǎn)：

• 支持靈活配置：因?yàn)椴煌臉I(yè)務(wù)可能會需要不同的默認(rèn)值，所以為了使該功能更具擴(kuò)展性，在設(shè)計(jì)之初要考慮將其設(shè)計(jì)為可配置模式
• 默認(rèn)值出現(xiàn)的觸發(fā)點(diǎn)：顯示默認(rèn)值的時(shí)機(jī)一般可分為兩類，一是進(jìn)入界面即立刻展示；二是根據(jù)A帶出B，即填寫了某個(gè)字段，可以帶出其他字段的值

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

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

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

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

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

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

3. 智能推薦

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

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

4. 自動(dòng)識別文本

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

5. 批量導(dǎo)入

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

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

同時(shí)，做導(dǎo)入功能有以下兩個(gè)值得注意的點(diǎn)：

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

6. 批量填充

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

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

二、有效減少運(yùn)維的“指引提示”

1. 消息提醒及消息盒子

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

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

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

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

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

第三類：用戶提交單據(jù)后，“消息提醒”會閃現(xiàn)幾秒，接著會自動(dòng)消失。

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

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

2. 界面操作指引

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

界面操作指引對新用戶尤其有幫助，因?yàn)楫?dāng)用戶進(jìn)入到一個(gè)從未操作過且較為復(fù)雜的界面，會無從下手，不知道先從哪一步開始。

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

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

3. 加載提示

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

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

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

1. 簡化界面

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

伸縮展示：

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

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

智能顯示/隱藏：

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

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

3. 個(gè)性化支持

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

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

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

4. 快速定位

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

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