B端產(chǎn)品信息具有：信息量大、關(guān)聯(lián)關(guān)系復(fù)雜，最終達到目的是用戶高效率的理解信息并完成任務(wù)。本文借鑒佐藤可士的超級整理術(shù)，幫你梳理好復(fù)雜的B端信息。
組裝、排序
承載畫布：對于pc端，組裝設(shè)計原則是避免有橫向滾動條，筆記本、臺式。所有信息最小寬度適配在 1366px 內(nèi)；響應(yīng)適配考慮到 1920px 尺寸？紤]到瀏覽器右側(cè)滾動條10px 留足安全距離。
首屏信息高度考慮768-110=658px內(nèi)
移動端一般使用750*1334 px，其中H5頁面要減去考慮到瀏覽器的高度。
將信息作為一個單元進行組裝。信息組裝的形式一方面要符合用戶的認知習(xí)慣。常見有列表、矩陣式卡片、線性卡片、時間軸、樹形組件等，亦可參考Ant Design、element UI等規(guī)范
小技巧：注重視覺秩序性、信息整體性、保持對齊、簡潔、克制
1. 列表：對比、高效
應(yīng)用場景和特點
雛形為excel表格。適用大量信息，一個對象為一行，多個對象同類數(shù)據(jù)為列。分割明確，信息間易于對比，閱覽效率高。常和搜索、排序、篩選、操作、分頁等元素協(xié)同。
用戶瀏覽習(xí)慣
- 首先通過縱向瀏覽快速對比列獲知關(guān)鍵信息
- 然后橫向?qū)螚l目了解并執(zhí)行相關(guān)操作
展示處理技巧
垂直方向?qū)R：
- 一般數(shù)字類右對齊，如金額、數(shù)量，
- 信息左對齊，如商品名、編號、時間、狀態(tài)、操作等
- 標題與對象垂直對齊
水平方向-頂部對齊。前端使用組件默認是水平居中對齊，對于復(fù)雜信息展示會錯亂，需要調(diào)整
不能跨列超出。當字段過長可定義換行，信息對于用戶不必要完整展示，超出2行或1行省略，鼠標懸浮氣泡展示全部，如商品標題
字段過多。一行展示不下，需將信息分類每類分列。將動態(tài)信息，如狀態(tài)、操作單獨列出，一般置于列表右側(cè)。右側(cè)主要適用右利人群，使用鼠標和手機右手居多，用戶距離近方便操作
2. 線性卡片：「十」形瀏覽、
應(yīng)用場景和特點
兼具卡片和表格的特性。既有利于展示各個對象的特性，又可高效縱向閱讀或?qū)Ρ取?/span>
用戶瀏覽習(xí)慣
- 首選會縱向瀏覽關(guān)鍵信息進行對比
- 人后鎖定目標對象后查看詳情
行與行展示小技巧
- 單卡片內(nèi)一般無縱向分割線
- 行之間間距分割需明顯，線或卡片間距
- 垂直對齊，對齊方式與表格一致
- 需對比的信息可突出，且對齊
- 行高度克制，過高閱讀效率會降低
3. 矩陣式卡片：「F」形瀏覽
應(yīng)用場景和特點
適用于富文本信息，網(wǎng)格布局，一行超過2個。用于突出各個對象的服務(wù)和特點，對比其次或不需要對比。
用戶瀏覽習(xí)慣
- 首段距離小范圍內(nèi)橫向瀏覽
- 在內(nèi)容區(qū)的左側(cè)做快速的縱向瀏覽
- 用戶并不會瀏覽頁面上所有內(nèi)容
- 營銷場景中，頭圖使用戶聚焦于某卡片
展示小技巧
- 建議一行不要超過5個
- 若有將重要的信息放在頭兩行
- 每個卡片內(nèi)容布局模式保持一致，居左
- 卡片內(nèi)將關(guān)鍵詞和信息放在段首
4. 時間軸「十」形瀏覽、
應(yīng)用場景
垂直展示時間流信息，以時間為主軸，內(nèi)容可有主題、用戶名、圖片、類型、詳細內(nèi)容等等。比如用戶操作日志、物流軌跡、待辦事項等
用戶閱讀習(xí)慣
從上到下縱向閱覽，一般第一條用戶重點關(guān)注
展示小技巧
- 已發(fā)生的事情為時間倒序展示
- 將要發(fā)生的時間正序，如待辦事項
- 第一條重點展示
- 時間縱向?qū)R
5. 樹形組件「十」形瀏覽、
應(yīng)用場景
通過逐級大綱的來展現(xiàn)信息的層級關(guān)系，高效、整體框架一目了然。適用于任何需要通過層級組織的信息場景，如文件夾、組織架構(gòu)、生物分類、國家地區(qū)、功能權(quán)限等等。
用戶閱覽習(xí)慣
用戶可同時瀏覽與處理多個樹狀層級的內(nèi)容。
6。 更多創(chuàng)意展示提高信息獲取效率
根據(jù)信息的特性，從信息展示閱讀高效性出發(fā)，充分發(fā)揮設(shè)計師的創(chuàng)意。
- 多學(xué)習(xí)數(shù)據(jù)圖表展示形式，如antv；
- 各類網(wǎng)站搜索「數(shù)據(jù)可視化」拓展思維庫
如亨利設(shè)計的倫敦地鐵路線圖，一直沿用至今。
△ 地理模式的地鐵路線圖
△ 電路板抽象模式的地鐵路線圖
將信息組裝排序好后，「分主次」這一步很多設(shè)計師會忽略。當用戶看到頁面，需要頁面會「自己說話」，除考慮用戶的F型視覺閱覽習(xí)慣外，設(shè)計師有意識的引導(dǎo)設(shè)計：
- 視覺焦點在哪里？
- 主次關(guān)系邏輯順序是什么？
1. 主次方法：主要、次要、焦點
通過文字的大小、粗細變化、深淺變化、顏色變化等來表現(xiàn)文字之間的信息層次。用戶在短時間內(nèi)獲取關(guān)鍵信息。
主次注意點
- 避免顏色過多，強調(diào)重點多反而無重點
- 主次對比層級不能過多，最多3個層級：主要、次要、焦點信息
- 區(qū)分采用的形式不能過多
2. 狀態(tài)顏色使用實例狀態(tài)類
事件狀態(tài)分為
to do-即將要做的事eg：待發(fā)貨、待處理退款等 ，若需要優(yōu)先及時處理的可置頂
doing-正在執(zhí)行的事 eg：退款中、申請中
done-已經(jīng)發(fā)生的事，分為
- 已成功的-是否需要后續(xù)的操作，不需則勿強化，如使用灰色的成功
- 已失敗-告知失敗原因、該怎么做解決
- 已過期-系統(tǒng)原因?qū)е碌男枰居脩，如店鋪授?quán)過期；不需關(guān)注可置灰置底
- 已停用-系統(tǒng)原因?qū)е碌男枰居脩簦挥脩羰謩佑|發(fā)，不再關(guān)注,使用淺灰色，或整個條目都置灰置底
△ B端常用色彩原理（勿轉(zhuǎn)載）
色彩使用要克制，可以將信息準確傳達給用戶即可。不一定以上5個色都用到，盡量用最少的顏色表達。減少色彩的方法：將差異不大的狀態(tài)使用相同顏色
1. B端信息特點
信息量大、關(guān)聯(lián)關(guān)系復(fù)雜、用戶需要理解成本
2. 信息設(shè)計目的
用戶高效率的理解信息并完成任務(wù)
- 這是什么？（信息與角色）
- 對應(yīng)我要做什么？（狀態(tài)+操作）
- 會達成怎樣的結(jié)果？(信息引導(dǎo))
3. B端信息的「超級整理術(shù)」六步走
第一步：信息顯性化
主要是產(chǎn)品經(jīng)理輸出。設(shè)計師需要了解用戶原聲、需求評審、五要素（場景/角色/目的/工具/行為），便于后續(xù)設(shè)計
第二步：羅列
「工匠死磕」精神，將信息全面羅列，并理解每個信息，有理有據(jù)
第三步：分類
除根據(jù)業(yè)務(wù)信息屬性分類，可重點考慮將靜態(tài)、動態(tài)信息分開，便于用戶get到重點信息。
動態(tài)信息包括：狀態(tài)、操作、數(shù)據(jù)、相關(guān)字段信息、標簽類。
第四步：組裝 第五步：排序
明確畫布尺寸，避免出現(xiàn)橫向滾動條
形式主要有：表格、線性卡片、矩陣式卡片、時間軸、樹形組件、更多創(chuàng)意形式
第六步.確定主次
信息有主次，且重點突出。文字信息通過大小、粗細變化、深淺變化、顏色變化 層次。
承擔因您的行為而導(dǎo)致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。