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