圖表選擇與用戶認(rèn)知的關(guān)系

蘭亭妙微的圖表選擇經(jīng)驗(yàn)

案例分享

權(quán)限系統(tǒng)的設(shè)計(jì)挑戰(zhàn)

蘭亭妙微的交互優(yōu)化思路

案例實(shí)踐

權(quán)限系統(tǒng)的設(shè)計(jì)挑戰(zhàn)

蘭亭妙微的交互優(yōu)化思路

案例實(shí)踐

以設(shè)計(jì)規(guī)范為協(xié)同語言

在可實(shí)現(xiàn)性范圍內(nèi)進(jìn)行設(shè)計(jì)

設(shè)計(jì)與開發(fā)的雙向迭代

利用工具和組件庫提升協(xié)同效率

案例分享

• 直接套用模板建站，快速上線，成本低。
• 定制化設(shè)計(jì)開發(fā)，周期更長，投入更高。

一、模板站的問題：同質(zhì)化嚴(yán)重

二、高端網(wǎng)站設(shè)計(jì)的價(jià)值：品牌的延伸

三、蘭亭妙微的高端網(wǎng)站設(shè)計(jì)方法

四、案例對比：模板站 vs 高端定制

五、結(jié)語

模板站解決“有沒有”，高端設(shè)計(jì)解決“好不好”。

一、視覺現(xiàn)代化：跨平臺的一致性與品牌感

二、交互優(yōu)化：效率驅(qū)動(dòng)的桌面端體驗(yàn)

三、數(shù)據(jù)可視化：讓信息更直觀

四、總結(jié)

QT 不等于老舊。通過合理的 UI/UE 設(shè)計(jì)，QT 桌面端應(yīng)用同樣可以具備現(xiàn)代感、高效率和高可用性。

• 數(shù)據(jù)量太大，難以快速理解；
• 數(shù)據(jù)形式太雜，容易淹沒關(guān)鍵信息；
• 決策者沒時(shí)間看一堆報(bào)表，只想要一眼洞察。

1. 結(jié)構(gòu)：從數(shù)據(jù)到故事的邏輯框架

① 明確主題

• 數(shù)據(jù)可視化不是“全量展示”，而是要回答一個(gè)問題。
• 例如：電商數(shù)據(jù)是要突出“銷售額增長”，還是“用戶留存”？

② 建立層次

• 全局 → 局部 → 細(xì)節(jié)，像講故事一樣逐步展開。
• 在BI儀表盤中，首頁顯示總體趨勢，點(diǎn)擊后進(jìn)入某個(gè)業(yè)務(wù)維度，再下鉆到單個(gè)數(shù)據(jù)點(diǎn)。

③ 突出對比

• 數(shù)據(jù)故事的核心往往是對比：同比 vs 環(huán)比，目標(biāo) vs 實(shí)際。
• 通過對比，用戶自然會(huì)問：“為什么會(huì)這樣？”

2. 視覺：讓重點(diǎn)躍然紙上

① 選擇合適的圖表

• 折線圖：趨勢變化
• 柱狀圖：對比分析
• 餅圖：比例分布（但不建議信息多時(shí)使用）
• 散點(diǎn)圖：關(guān)聯(lián)關(guān)系
• 熱力圖：區(qū)域?qū)Ρ?/div>

② 突出重點(diǎn)

• 通過色彩區(qū)分主次（例如關(guān)鍵指標(biāo)用高亮色）。
• 避免“信息平均化”，否則用戶找不到關(guān)鍵點(diǎn)。

③ 留白與簡潔

• 界面不是信息越滿越好，合理留白讓數(shù)據(jù)更容易被消化。
• 一屏只傳達(dá)一個(gè)核心信息，避免認(rèn)知過載。

3. 交互：讓用戶主動(dòng)探索數(shù)據(jù)

① 篩選與下鉆

• 提供多維度篩選（時(shí)間、地域、產(chǎn)品線）。
• 用戶能從宏觀趨勢鉆到微觀細(xì)節(jié)。

② 動(dòng)態(tài)反饋

• 鼠標(biāo)懸停顯示詳細(xì)信息，點(diǎn)擊跳轉(zhuǎn)到更深層數(shù)據(jù)。
• 讓用戶在探索過程中自然獲得“答案”。

③ 個(gè)性化定制

• 支持不同角色的需求：管理層需要概覽，運(yùn)營人員需要細(xì)節(jié)。
• 同一份數(shù)據(jù)，呈現(xiàn)方式因角色而異。

4. 案例啟示

• 金融風(fēng)控可視化 從總體風(fēng)險(xiǎn)指數(shù) → 分行業(yè)風(fēng)險(xiǎn) → 單筆交易詳情，形成層層遞進(jìn)的風(fēng)險(xiǎn)畫像。
• 零售BI可視化 從銷售額趨勢 → 各品類貢獻(xiàn) → 單一門店表現(xiàn)，讓管理層一眼看到“錢從哪里來”。
• 大數(shù)據(jù)監(jiān)控平臺 實(shí)時(shí)監(jiān)控指標(biāo)波動(dòng)，異常值自動(dòng)高亮提示，讓系統(tǒng)“主動(dòng)講故事”。

5. 結(jié)語

• 結(jié)構(gòu)化：讓用戶知道先看什么，再看什么。
• 視覺化：讓重點(diǎn)自然凸顯。
• 交互化：讓用戶主動(dòng)探索和追問。

不用解釋，也能自己講故事。

一、B端界面設(shè)計(jì)的三大難點(diǎn)

1. 業(yè)務(wù)邏輯復(fù)雜

• 涉及到多個(gè)角色（管理員、審核員、操作員等）。
• 權(quán)限體系繁瑣，不同角色界面不同。
• 流程鏈條長，一個(gè)任務(wù)可能包含提交、審批、回溯、存檔。

2. 信息密度大

• B端界面常見“大表格、大圖表”，幾十列字段同時(shí)展示。
• 用戶既要看整體趨勢，又要關(guān)注某個(gè)細(xì)節(jié)。
• 很多系統(tǒng)習(xí)慣把所有信息堆在首頁，結(jié)果導(dǎo)致界面“爆炸”。

3. 用戶目標(biāo)以效率為先

• C端追求“愉悅感”，B端追求“效率感”。
• B端用戶一天可能要重復(fù)數(shù)百次操作，他們最怕路徑冗長、反饋模糊。
• 任何一點(diǎn)“多余點(diǎn)擊”，都會(huì)被放大成效率損耗。

二、讓復(fù)雜變清晰的三類解決思路

4. 信息分層與漸進(jìn)披露

• 核心原則：先給主信息，再讓用戶主動(dòng)展開細(xì)節(jié)。
• 設(shè)計(jì)手法：折疊面板、標(biāo)簽頁（Tab）、表格列篩選。
• 示例：在供應(yīng)鏈管理系統(tǒng)中，默認(rèn)展示“訂單編號、狀態(tài)、負(fù)責(zé)人”，細(xì)節(jié)如“物流單號、審批記錄”可以點(diǎn)擊后查看。

5. 流程可視化

• 用 步驟條 / 流程圖 / 時(shí)間軸 把抽象業(yè)務(wù)流程直觀化。
• 示例：在金融風(fēng)控系統(tǒng)中，用戶提交申請后，系統(tǒng)用流程條清晰展示 “提交 → 初審 → 復(fù)審 → 放款”，并標(biāo)記當(dāng)前所在節(jié)點(diǎn)。
• 好處：用戶不必猜“下一步是什么”，操作更有安全感。

6. 智能交互與效率優(yōu)化

• 即時(shí)反饋：輸入錯(cuò)誤時(shí)即時(shí)提示，而不是提交后才報(bào)錯(cuò)。
• 默認(rèn)值 & 推薦：為高頻任務(wù)設(shè)置默認(rèn)選項(xiàng)（比如常用篩選條件）。
• 快捷鍵 & 批量操作：為專業(yè)用戶提升操作效率。

三、設(shè)計(jì)師與業(yè)務(wù)方的協(xié)同

• 業(yè)務(wù)方擔(dān)心功能缺失 → 不斷往界面里加模塊。
• 設(shè)計(jì)師想追求簡潔 → 卻被抱怨“信息不全”。

1379. 設(shè)計(jì)師要深入理解業(yè)務(wù)，找到用戶真正的目標(biāo)。
1380. 業(yè)務(wù)方要理解“信息分層”比“信息堆疊”更高效。
1381. 雙方共同建立 設(shè)計(jì)規(guī)范 + 交互模式庫，保證不同模塊的體驗(yàn)一致。

四、結(jié)語

• 復(fù)雜的業(yè)務(wù)邏輯
• 龐大的信息展示
• 高效的用戶目標(biāo)

• 信息分層 → 降低學(xué)習(xí)成本
• 流程可視化 → 降低理解成本
• 智能交互 → 降低操作成本

“原來這么復(fù)雜的業(yè)務(wù)，也可以處理得這么順暢。”

• 只重美學(xué)：界面華麗，動(dòng)畫繁復(fù)，卻讓用戶迷失路徑，轉(zhuǎn)化率低。
• 只重功能：頁面生硬、邏輯清晰，但缺乏美感，用戶停留時(shí)間短。

一、美學(xué)價(jià)值：傳遞品牌調(diào)性

二、轉(zhuǎn)化邏輯：引導(dǎo)用戶完成目標(biāo)

• 填寫表單（線索收集）
• 下載資料（信息留存）
• 在線咨詢或購買（直接轉(zhuǎn)化）

三、美學(xué)與轉(zhuǎn)化的平衡點(diǎn)

• 高級的視覺呈現(xiàn) → 增強(qiáng)品牌信任度，提高用戶停留時(shí)間；
• 清晰的轉(zhuǎn)化邏輯 → 讓用戶更愿意完成操作，降低流失；
• 微交互和動(dòng)效 → 既增加觀感，也能引導(dǎo)用戶關(guān)注核心入口。

美學(xué)讓用戶愿意停留，轉(zhuǎn)化邏輯讓用戶愿意行動(dòng)。 這就是蘭亭妙微在高端網(wǎng)站設(shè)計(jì)中始終堅(jiān)持的思路。

蘭亭妙微(www.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。