編輯導語：視覺化儀表板主題體驗升級對於滿足多樣場景下使用者展示需求起著重要作用，本文從多個方面介紹了Neblua平臺其中儀表板主題風格的設計過程，一起來學習一下。

Neblua是一個專為資料分析師/資料分析小白打造的一款一站式智慧大資料分析平臺，平臺透過便捷的資料匯入、清洗，智慧視覺化推薦輔助分析。幫助企業或者個人洞察資料價值，快速做出決策。

本次最佳化迭代主要完善

視覺化儀表板主題體驗升級

，

新增儀表板的風格切換功能

，滿足多樣場景下使用者展示需求。

一、根據角色使用場景確定主題

1. 產品問題&使用者調研

我們對Neblua視覺化檢視進行了一輪內部使用者體驗反饋和調研，發現：視覺化元件存在眾多體驗問題、視覺化展示主題單一，我們的使用者希望有多樣化的儀表板主題來滿足不同場景展示的需要。

2. 專案設計目標

基於現平臺問題和使用者調研結果，對最佳化方向進行了歸納分類，最終確定視覺化儀表板主題體驗升級的專案設計目標：

增加多種主題，提升主題的美觀性和可用性。

除了常規淺色常用風格外，新增深色主題，滿足大屏展示需求。

3. 視覺化大屏都用深色原因

1）使用場景環境

大屏一般室內展示用，光線較暗且螢幕尺寸較大，有的甚至十幾米，工作人員需要時時盯著螢幕對資料進行跟蹤，在這種場景下深色比白色更不易視覺疲勞。並且深色也更加節能省電。

2）硬體規格

資料視覺化展示的硬體有：大屏、拼接屏、LED大屏、DLP大屏、LCD、PDP（3mm拼接縫隙），雖市場佔有率較高的為無縫隙拼接屏，但也存在拼接而成的液晶屏。拼接螢幕會有深色的拼接縫隙，因此用深色背景更具有包容性。

3）炫酷的視覺效果

大屏資料視覺化由不同的視覺化圖表元件構成，深色背景給人高階的氣質，更容易做出炫酷和沉浸的效果。

大屏視覺化設計（圖片來源網路）

二、視覺化大屏的視覺調研

觀察市場上視覺化大屏方案，它們有個共性就是主色調不管傾向於哪個顏色，背景通常是對應顏色的暗色系。背景雖然是“黑”色，但帶有某種色彩傾向的“黑”。這樣處理視覺上會比較“和諧” 且給人舒服的感受。因為視覺化大屏使用環境通常是在室內、展廳等這種外部環境比較暗的地方，這樣避免觀賞者視覺上的不適應。

一般視覺化大螢幕用色型別總結，根據色彩呈現可以分為三種：

體現“智慧”“健康”“醫療”領域：綠色；

體現“科技”表達：藍色；紫色（藍紫）；

體驗“運營活動”：橙色；紅色；

藍色、紫色、綠色為視覺化大屏設計常用顏色，更容易體現出科技、炫酷感。橙色、紅色象徵熱情、活潑的氣息，屬於偏暖色調，更容易體現活動運營中的熱鬧氛圍，常在促銷等節日活動場景，作為點綴烘托熱鬧氛圍。

不同色彩風格的大屏視覺化設計（圖片來源於網路）

三、根據調研確定四種風格

根據調研和組內討論，本期迭代確定四種畫布風格：淺色、暗黑、 星雲、科技藍。

1. 淺色（彙報、下載、列印）

淺色為最常用風格風格，針對淺色模式我們從基礎佈局和元件樣式上進行最佳化調整。

基礎佈局：

圖表由文字和圖形元素構成，如標題區、操作區、圖表區、圖例區、單位區。合理的基礎佈局增強圖表的一致性，體現秩序感。

圖表細節：

圖表的整體細節做了統一調整，從整體佈局、字型、字號、顏色、描邊粗細、資料軸等多方面進行視覺最佳化設計，讓更改圖表看起開更加清晰。

2. 深色風格

深色風格我們嘗試了兩種色相，體現紫色品牌的暗黑主題和體現綠色色相的星雲主題。

暗黑風格整體用色在品牌色相基礎上，運用帶有品牌色相的深色。

【深色風格設計原則】：

【深色風格設計注意事項】：

1。 深色風格設計背景避免用純黑色，而是採用帶有主色色相的深色。

2。 文字避免用純白色，深色背景下文字用純白色就會顯得突兀，長時間看容易視覺疲勞，因此深色背景用色文字顏色最好加上透明度。

主題模版切換

我們在不同主題下配置畫布和元件背景，如果使用者完全自定義，最終效果不可控。因此平臺在不同風格下給予使用者背景顏色的選擇，滿足多樣畫布需求。

四、利用投屏測試和顏色工具進行整體調整

1. 投屏測試

由於大屏裝置成像和解析度差異較大、使用場景各異，有時和設計稿會存在加大色差。 因此我們需要進行投屏測試，檢視不同終端裝置上顯示效果。

投屏測試

2. 工具走查

我們透過工具檢視用色是否滿足無障礙設計。

3. 對比度測試

顏色的選擇屬於「易於感知的」無障礙設計範疇。

如果高對比度，那麼長時間閱讀容易導致視覺疲勞。

如果低對比度：閱讀性和識別性差。

文字對比度：文字的視覺呈現以及文字影象至少要有4。5：1的對比度（AA級）。

推薦測試工具：Color Oracle

WebAIM’s Color Contrast Checker

五、規範制定、跟蹤走查

我們針對不同畫布風格做了視覺規範，包括元件規範和畫布風格用色規範。規範制訂好後一定要召集組內人員開會，落實到組內人員知曉。

以上規範僅限於通用元件的視覺方面，對於資料展示層面的極端案例和適配規則，我們後續待做討論。

總結：本文介紹了儀表板主題風格的設計過程，後續有機會將繼續完善視覺化圖表元件應用經驗的沉澱及分享。

本文由@小設計？？？？ 原創釋出於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於 CC0 協議。