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

2022-6-14    博博

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

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

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

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

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


匹配用戶心智模型


心智模型指的是人們心中根深蒂固存在的,影響人們認(rèn)識(shí)世界、解釋世界、面對(duì)世界以及如何采取行動(dòng)的許多假設(shè)、陳見(jiàn)和印象。是一個(gè)決定用戶信息獲取行為的內(nèi)在的、可預(yù)測(cè)的認(rèn)知模型。簡(jiǎn)單來(lái)講就是人類(lèi)基于經(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)品的信息設(shè)計(jì)?我總結(jié)了3個(gè)原則!

B 端產(chǎn)品頁(yè)面內(nèi)容變化較少,更強(qiáng)調(diào)一致性。主要由表格、表單、按鈕等各種信息元素構(gòu)成。在長(zhǎng)期的使用過(guò)程中,用戶對(duì)某些信息元素已經(jīng)形成了特定的心智模型。例如用戶看到輸入框,就知道需要填寫(xiě)內(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)知。

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

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

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


信息的層次性


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

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

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

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

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

不同的信息在不同系統(tǒng)層級(jí)中相對(duì)獨(dú)立的展示出來(lái),保證了信息的層次感和秩序性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


信息的可理解性


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

1. 幫助信息

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

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

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

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

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

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

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

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


寫(xiě)在最后


體驗(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)注的。

作者:子牧先生

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

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

魏華的微信.png

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

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

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



更多精彩文章:





分享本文至:

日歷

鏈接

個(gè)人資料

存檔