Bs界面設(shè)計之七:如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

2022-6-14    博博

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

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

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

我總結(jié)了以下 3 個原則:

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!


匹配用戶心智模型


心智模型指的是人們心中根深蒂固存在的,影響人們認識世界、解釋世界、面對世界以及如何采取行動的許多假設(shè)、陳見和印象。是一個決定用戶信息獲取行為的內(nèi)在的、可預(yù)測的認知模型。簡單來講就是人類基于經(jīng)驗的總結(jié),去認知世界。

《About Face4:交互設(shè)計精髓》中提出了 3 種模型,實現(xiàn)模型、表現(xiàn)模型、用戶的心智模型。好的產(chǎn)品的設(shè)計要盡可能匹配用戶的心智模型,越符合用戶心智模型的設(shè)計,產(chǎn)品越容易理解。

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

B 端產(chǎn)品頁面內(nèi)容變化較少,更強調(diào)一致性。主要由表格、表單、按鈕等各種信息元素構(gòu)成。在長期的使用過程中,用戶對某些信息元素已經(jīng)形成了特定的心智模型。例如用戶看到輸入框,就知道需要填寫內(nèi)容;看到步驟條引導(dǎo),就知道多步操作;看到 Radio Button,就知道是單選。

因此方案設(shè)計時,設(shè)計師的一個重要目標就是讓表現(xiàn)模型盡可能的匹配用戶心理模型,避免因為組件使用不當,造成用戶產(chǎn)生錯誤認知。

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

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

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!


信息的層次性


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

信息層級包括 2 個方面:

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

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

B 端核心交互就是“增、刪、改、查”,其中“查”就是信息的檢索和瀏覽。所以頁面主要是由搜索條件和表格構(gòu)成的。而“增、改”等操作行為主要是在臨時的系統(tǒng)空間中完成,例如彈窗、側(cè)邊浮窗、跳轉(zhuǎn)頁面等形式。

不同的信息在不同系統(tǒng)層級中相對獨立的展示出來,保證了信息的層次感和秩序性。

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

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

復(fù)雜業(yè)務(wù)場景下,單個頁面會承載大量的信息內(nèi)容,需要通過合理有序地呈現(xiàn)給用戶。主要有 2 種方式進行信息拆解。

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

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

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

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

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

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

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

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

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

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

不同于 C 端產(chǎn)品,B 端產(chǎn)品更強調(diào)效率。正如奧卡姆剃刀原則所說“如無必要,勿增實體”。頁面內(nèi)容需要以簡潔為主,避免無關(guān)要素形成信息干擾。而設(shè)計師更加感性,擔心設(shè)計過于平淡,會在界面中添加各種視覺元素,反而會增加用戶的認知成本。

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!


信息的可理解性


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

1. 幫助信息

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

在阿里云、騰訊云界面中包含了大量的解釋說明、Tips 等信息,解決用戶在使用過程中的疑問,幫助用戶更好的理解業(yè)務(wù)內(nèi)容,減少用戶的記憶量。

同時幫助信息還需要具有拓展性,當提示信息無法完全解決用戶疑問時,還需要能夠引導(dǎo)用戶,查看完整的幫助文檔,減少用戶翻查資料的成本。

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!

2. 可視化設(shè)計

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

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

如何做好B端產(chǎn)品的信息設(shè)計?我總結(jié)了3個原則!


寫在最后


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

作者:子牧先生

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



更多精彩文章:





分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔