起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端項目復盤：數據可視化儀表板風格設計
編輯導語：可視化儀表板主題體驗升級對于滿足多樣場景下用戶展示需求起著重要作用，本文從多個方面介紹了Neblua平臺其中儀表板主題風格的設計過程，一起來學習一下。
Neblua是一個專為數據分析師/數據分析小白打造的一款一站式智能大數據分析平臺，平臺通過便捷的數據導入、清洗，智能可視化推薦輔助分析。幫助企業或者個人洞察數據價值，快速做出決策。
本次優化迭代主要完善可視化儀表板主題體驗升級，新增儀表板的風格切換功能，滿足多樣場景下用戶展示需求。
一、根據角色使用場景確定主題
1. 產品問題&用戶調研
我們對Neblua可視化視圖進行了一輪內部用戶體驗反饋和調研，發現：可視化組件存在眾多體驗問題、可視化展示主題單一，我們的用戶希望有多樣化的儀表板主題來滿足不同場景展示的需要。
2. 項目設計目標
基于現平臺問題和用戶調研結果，對優化方向進行了歸納分類,最終確定可視化儀表板主題體驗升級的項目設計目標：增加多種主題，提升主題的美觀性和可用性。除了常規淺色常用風格外，新增深色主題，滿足大屏展示需求。
3. 可視化大屏都用深色原因
1）使用場景環境
大屏一般室內展示用，光線較暗且屏幕尺寸較大，有的甚至十幾米，工作人員需要時時盯著屏幕對數據進行跟蹤，在這種場景下深色比白色更不易視覺疲勞。并且深色也更加節能省電。
2）硬件規格
數據可視化展示的硬件有：大屏、拼接屏、LED大屏、DLP大屏、LCD、PDP（3mm拼接縫隙），雖市場占有率較高的為無縫隙拼接屏，但也存在拼接而成的液晶屏。拼接屏幕會有深色的拼接縫隙，因此用深色背景更具有包容性。
3）炫酷的視覺效果
大屏數據可視化由不同的可視化圖表組件構成，深色背景給人高端的氣質，更容易做出炫酷和沉浸的效果。
大屏可視化設計（圖片來源網絡）
二、可視化大屏的視覺調研
觀察市場上可視化大屏方案，它們有個共性就是主色調不管傾向于哪個顏色，背景通常是對應顏色的暗色系。背景雖然是“黑”色，但帶有某種色彩傾向的“黑”。這樣處理視覺上會比較“和諧” 且給人舒服的感受。因為可視化大屏使用環境通常是在室內、展廳等這種外部環境比較暗的地方，這樣避免觀賞者視覺上的不適應。
一般可視化大屏幕用色類型總結，根據色彩呈現可以分為三種：
- 體現“智慧”“健康”“醫療”領域：綠色；
- 體現“科技”表達：藍色；紫色（藍紫）；
- 體驗“運營活動”：橙色；紅色；
藍色、紫色、綠色為可視化大屏設計常用顏色，更容易體現出科技、炫酷感。橙色、紅色象征熱情、活潑的氣息，屬于偏暖色調，更容易體現活動運營中的熱鬧氛圍，常在促銷等節日活動場景，作為點綴烘托熱鬧氛圍。
不同色彩風格的大屏可視化設計（圖片來源于網絡）
三、根據調研確定四種風格
根據調研和組內討論，本期迭代確定四種畫布風格：淺色、暗黑、 星云、科技藍。
1. 淺色（匯報、下載、打?。?/h3>
淺色為最常用風格風格，針對淺色模式我們從基礎布局和組件樣式上進行優化調整。
- 基礎布局：圖表由文字和圖形元素構成，如標題區、操作區、圖表區、圖例區、單位區。合理的基礎布局增強圖表的一致性，體現秩序感。
- 圖表細節：圖表的整體細節做了統一調整，從整體布局、字體、字號、顏色、描邊粗細、數據軸等多方面進行視覺優化設計，讓更改圖表看起開更加清晰。
2. 深色風格
深色風格我們嘗試了兩種色相，體現紫色品牌的暗黑主題和體現綠色色相的星云主題。
暗黑風格整體用色在品牌色相基礎上，運用帶有品牌色相的深色。
【深色風格設計原則】：
- 展示數據清晰/視覺舒適；
- 體現品牌感；
- 防止疲勞；
【深色風格設計注意事項】：
1. 深色風格設計背景避免用純黑色，而是采用帶有主色色相的深色。
2. 文字避免用純白色，深色背景下文字用純白色就會顯得突兀，長時間看容易視覺疲勞，因此深色背景用色文字顏色最好加上透明度。
主題模版切換
我們在不同主題下配置畫布和組件背景，如果用戶完全自定義，最終效果不可控。因此平臺在不同風格下給予用戶背景顏色的選擇，滿足多樣畫布需求。
四、利用投屏測試和顏色工具進行整體調整
1. 投屏測試
由于大屏設備成像和分辨率差異較大、使用場景各異，有時和設計稿會存在加大色差。 因此我們需要進行投屏測試，查看不同終端設備上顯示效果。
?投屏測試
2. 工具走查
我們通過工具查看用色是否滿足無障礙設計。
3. 對比度測試
顏色的選擇屬于「易于感知的」無障礙設計范疇。
如果高對比度，那么長時間閱讀容易導致視覺疲勞。
如果低對比度：閱讀性和識別性差。
文本對比度：文本的視覺呈現以及文本圖像至少要有4.5:1的對比度（AA級）。
推薦測試工具：Color Oracle
WebAIM’s Color Contrast Checker
五、規范制定、跟蹤走查
我們針對不同畫布風格做了視覺規范，包括組件規范和畫布風格用色規范。規范制訂好后一定要召集組內人員開會，落實到組內人員知曉。
以上規范僅限于通用組件的視覺方面，對于數據展示層面的極端案例和適配規則，我們后續待做討論。
總結：本文介紹了儀表板主題風格的設計過程，后續有機會將繼續完善可視化圖表組件應用經驗的沉淀及分享。
本文由@小設計? 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
- 目前還沒評論，等你發揮！
