2022-6-14 博博
最近在 12306 網(wǎng)站購票時(shí)，彈窗中展示了大段的文字信息，我只是匆匆掃了兩眼就果斷關(guān)閉了，實(shí)在沒有耐心逐字讀完。特別是節(jié)日搶票的場景，用戶更不會有心情去看這些提示信息。
所以在做產(chǎn)品設(shè)計(jì)時(shí)，需要注重信息的傳遞效率。B 端產(chǎn)品通常用在 PC 端，屏幕顯示區(qū)域大，在做設(shè)計(jì)時(shí)會不自覺的添加較多的信息，反而影響了用戶的使用體驗(yàn)。今天我們就來討論下如何做好信息傳遞？
我總結(jié)了以下 3 個(gè)原則：
心智模型指的是人們心中根深蒂固存在的，影響人們認(rèn)識世界、解釋世界、面對世界以及如何采取行動的許多假設(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)成。在長期的使用過程中，用戶對某些信息元素已經(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)知。
例如考慮到用戶的視覺動線，“新建”主要、高頻按鈕通常放在左上角，方便用戶瀏覽和操作，而輔助功能按鈕會放置在右側(cè)，用戶也逐漸形成了這樣的心智模型。
如果主操作按鈕放置在右上角則違背了用戶的心智模型，用戶使用產(chǎn)品時(shí)，需要建立新的心智模型，改變已有的行為習(xí)慣。并且這種設(shè)計(jì)并不能帶來其他層面的體驗(yàn)提升，個(gè)人認(rèn)為有些得不償失。
B 端產(chǎn)品業(yè)務(wù)比較復(fù)雜，頁面內(nèi)容也會較多，信息的有效組織尤其重要。信息設(shè)計(jì)不是簡單的內(nèi)容堆砌，需要根據(jù)用戶場景和需求做出優(yōu)化處理，構(gòu)建有效的信息的層級幫助用戶去理解業(yè)務(wù)內(nèi)容。
信息層級包括 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)層級中相對獨(dú)立的展示出來，保證了信息的層次感和秩序性。
2. 頁面信息結(jié)構(gòu)
復(fù)雜業(yè)務(wù)場景下，單個(gè)頁面會承載大量的信息內(nèi)容，需要通過合理有序地呈現(xiàn)給用戶。主要有 2 種方式進(jìn)行信息拆解。
1）高效組織——卡片化設(shè)計(jì)
在 B 端產(chǎn)品中，為了保證功能的完整性，必須要一個(gè)頁面中展示給用戶。逐條平鋪，散點(diǎn)式的信息展示會造成信息密度過高，缺少層次性。而卡片方式可以很好的聚類相似信息，分割差異化信息，有助于降低信息的復(fù)雜性，幫助用戶快速定位信息、瀏覽內(nèi)容。
2）化整為零——步驟化設(shè)計(jì)
面對復(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ì)過于平淡，會在界面中添加各種視覺元素，反而會增加用戶的認(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)注的。
轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司
更多精彩文章：
