編輯導(dǎo)語：B端產(chǎn)品與C端產(chǎn)品所面向的用戶、適用場景不同，其個(gè)中的設(shè)計(jì)邏輯也有所差異；例如在B端產(chǎn)品設(shè)計(jì)中，需要降低用戶的理解門檻，并保證信息傳遞的效率，等等。本篇文章里，作者便結(jié)合個(gè)人經(jīng)驗(yàn)，總結(jié)了B端產(chǎn)品信息設(shè)計(jì)的三個(gè)原則，一起來看一下。

最近在12306網(wǎng)站購票時(shí)，彈窗中展示了大段的文字信息，我只是匆匆掃了兩眼就果斷關(guān)閉了，實(shí)在沒有耐心逐字讀完。特別是節(jié)日搶票的場景，用戶更不會(huì)有心情去看這些提示信息。

所以在做產(chǎn)品設(shè)計(jì)時(shí)，需要注重信息的傳遞效率。B端產(chǎn)品通常用在PC端，屏幕顯示區(qū)域大，在做設(shè)計(jì)時(shí)會(huì)不自覺的添加較多的信息，反而影響了用戶的使用體驗(yàn)。今天我們就來討論下如何做好信息傳遞？

我總結(jié)了以下3個(gè)原則：

一、匹配用戶心智模型

心智模型指的是人們心中根深蒂固存在的，影響人們認(rèn)識(shí)世界、解釋世界、面對(duì)世界以及如何采取行動(dòng)的許多假設(shè)、陳見和印象。是一個(gè)決定用戶信息獲取行為的內(nèi)在的、可預(yù)測的認(rèn)知模型。

簡單來講就是人類基于經(jīng)驗(yàn)的總結(jié)，去認(rèn)知世界。《About Face4：交互設(shè)計(jì)精髓》中提出了3種模型，實(shí)現(xiàn)模型、表現(xiàn)模型、用戶的心智模型。好的產(chǎn)品的設(shè)計(jì)要盡可能匹配用戶的心智模型，越符合用戶心智模型的設(shè)計(jì)，產(chǎn)品越容易理解。

B端產(chǎn)品頁面內(nèi)容變化較少，更強(qiáng)調(diào)一致性。主要由表格、表單、按鈕等各種信息元素構(gòu)成。

在長期的使用過程中，用戶對(duì)某些信息元素已經(jīng)形成了特定的心智模型。例如用戶看到輸入框，就知道需要填寫內(nèi)容；看到步驟條引導(dǎo)，就知道多步操作；看到Radio Button，就知道是單選。

因此方案設(shè)計(jì)時(shí)，設(shè)計(jì)師的一個(gè)重要目標(biāo)就是讓表現(xiàn)模型盡可能地匹配用戶心理模型，避免因?yàn)榻M件使用不當(dāng)，造成用戶產(chǎn)生錯(cuò)誤認(rèn)知。

例如考慮到用戶的視覺動(dòng)線，“新建”等主要、高頻按鈕通常放在左上角，方便用戶瀏覽和操作，而輔助功能按鈕會(huì)放置在右側(cè)，用戶也逐漸形成了這樣的心智模型。

如果主操作按鈕放置在右上角則違背了用戶的心智模型，用戶使用產(chǎn)品時(shí)，需要建立新的心智模型，改變已有的行為習(xí)慣。并且這種設(shè)計(jì)并不能帶來其他層面的體驗(yàn)提升，個(gè)人認(rèn)為有些得不償失。

二、信息的層次性

B端產(chǎn)品業(yè)務(wù)比較復(fù)雜，頁面內(nèi)容也會(huì)較多，信息的有效組織尤其重要。信息設(shè)計(jì)不是簡單的內(nèi)容堆砌，需要根據(jù)用戶場景和需求做出優(yōu)化處理，構(gòu)建有效的信息的層級(jí)幫助用戶去理解業(yè)務(wù)內(nèi)容。

信息層級(jí)包括2個(gè)方面：

1. 系統(tǒng)空間分層

在一個(gè)系統(tǒng)中存在著空間分層，當(dāng)頁面較為復(fù)雜時(shí)，需要通過合理的內(nèi)容分層，有序的展現(xiàn)內(nèi)在邏輯關(guān)系。

B端核心交互就是“增、刪、改、查”，其中”查“就是信息的檢索和瀏覽。所以頁面主要是由搜索條件和表格構(gòu)成的。

而“增、改”等操作行為主要是在臨時(shí)的系統(tǒng)空間中完成，例如彈窗、側(cè)邊浮窗、跳轉(zhuǎn)頁面等形式。不同的信息在不同系統(tǒng)層級(jí)中相對(duì)獨(dú)立的展示出來，保證了信息的層次感和秩序性。

2. 頁面信息結(jié)構(gòu)

復(fù)雜業(yè)務(wù)場景下，單個(gè)頁面會(huì)承載大量的信息內(nèi)容，需要通過合理有序地呈現(xiàn)給用戶。

主要有2種方式進(jìn)行信息拆解。

1）高效組織——卡片化設(shè)計(jì)

在B端產(chǎn)品中，為了保證功能的完整性，必須要一個(gè)頁面中展示給用戶。逐條平鋪，散點(diǎn)式的信息展示會(huì)造成信息密度過高，缺少層次性。而卡片方式可以很好的聚類相似信息，分割差異化信息，有助于降低信息的復(fù)雜性，幫助用戶快速定位信息、瀏覽內(nèi)容。

2）化整為零——步驟化設(shè)計(jì)

面對(duì)復(fù)雜的信息內(nèi)容，用戶容易產(chǎn)生畏難情緒。將復(fù)雜內(nèi)容分步拆解，把用戶的關(guān)注點(diǎn)從頁面內(nèi)容轉(zhuǎn)移到步驟進(jìn)度上，可以減少用戶的心理壓力。另外節(jié)點(diǎn)信息頁也可以幫助用戶更好地理解業(yè)務(wù)流程。

另外步驟化設(shè)計(jì)還可以將散點(diǎn)內(nèi)容歸集到一個(gè)任務(wù)流程中，引導(dǎo)用戶快速完成工作任務(wù)。例如Win11系統(tǒng)安裝后的設(shè)置引導(dǎo)，可以方便用戶快速完成系統(tǒng)基本配置，避免用戶操作的行為成本。

3. 頁面元素設(shè)計(jì)

不同于C端產(chǎn)品，B端產(chǎn)品更強(qiáng)調(diào)效率。正如奧卡姆剃刀原則所說“如無必要，勿增實(shí)體”。頁面內(nèi)容需要以簡潔為主，避免無關(guān)要素形成信息干擾。

而設(shè)計(jì)師更加感性，擔(dān)心設(shè)計(jì)過于平淡，會(huì)在界面中添加各種視覺元素，反而會(huì)增加用戶的認(rèn)知成本。

三、信息的可理解性

B端產(chǎn)品通常業(yè)務(wù)具有一定的專業(yè)性，用戶門檻較高。在復(fù)雜業(yè)務(wù)場景下，必須讓用戶能夠較為清晰地理解產(chǎn)品及功能，才能保證信息的傳達(dá)效率。

1. 幫助信息

B端產(chǎn)品需要盡可能地降低用戶學(xué)習(xí)成本，但是本身業(yè)務(wù)層面的難度是無法避免的。因此需要為用戶提供及時(shí)有效的幫助信息。

在阿里云、騰訊云界面中包含了大量的解釋說明、Tips等信息，解決用戶在使用過程中的疑問，幫助用戶更好地理解業(yè)務(wù)內(nèi)容，減少用戶的記憶量。同時(shí)幫助信息還需要具有拓展性，當(dāng)提示信息無法完全解決用戶疑問時(shí)，還需要能夠引導(dǎo)用戶，查看完整的幫助文檔，減少用戶翻查資料的成本。

2. 可視化設(shè)計(jì)

數(shù)據(jù)可視化設(shè)計(jì)在B端產(chǎn)品中應(yīng)用較多，例如概覽頁面，通過圖形化的方式將數(shù)據(jù)的內(nèi)在關(guān)系更直觀的表達(dá)出來。

在某些特定的場景下，內(nèi)容頁面也可以通過可視化展示幫助用戶理解信息，例如常見的身份證圖片上傳等，很多用戶無法分清楚正面反面，借助圖片可視化提示，便于用戶更好地理解信息。

寫在最后

體驗(yàn)設(shè)計(jì)行業(yè)需要?jiǎng)?chuàng)新，但是B端產(chǎn)品設(shè)計(jì)需要更加謹(jǐn)慎。尊重用戶的習(xí)慣，完整表達(dá)業(yè)務(wù)邏輯性、保證內(nèi)容的可理解性，是設(shè)計(jì)師必須去關(guān)注的。

#專欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

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

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