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

Neblua是一個專為數(shù)據(jù)分析師/數(shù)據(jù)分析小白打造的一款一站式智能大數(shù)據(jù)分析平臺，平臺通過便捷的數(shù)據(jù)導入、清洗，智能可視化推薦輔助分析。幫助企業(yè)或者個人洞察數(shù)據(jù)價值，快速做出決策。

本次優(yōu)化迭代主要完善可視化儀表板主題體驗升級，新增儀表板的風格切換功能，滿足多樣場景下用戶展示需求。

一、根據(jù)角色使用場景確定主題

1. 產(chǎn)品問題&用戶調研

我們對Neblua可視化視圖進行了一輪內部用戶體驗反饋和調研，發(fā)現(xiàn)：可視化組件存在眾多體驗問題、可視化展示主題單一，我們的用戶希望有多樣化的儀表板主題來滿足不同場景展示的需要。

2. 項目設計目標

基于現(xiàn)平臺問題和用戶調研結果，對優(yōu)化方向進行了歸納分類,最終確定可視化儀表板主題體驗升級的項目設計目標：增加多種主題，提升主題的美觀性和可用性。除了常規(guī)淺色常用風格外，新增深色主題，滿足大屏展示需求。

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

1）使用場景環(huán)境

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

2）硬件規(guī)格

數(shù)據(jù)可視化展示的硬件有：大屏、拼接屏、LED大屏、DLP大屏、LCD、PDP（3mm拼接縫隙），雖市場占有率較高的為無縫隙拼接屏，但也存在拼接而成的液晶屏。拼接屏幕會有深色的拼接縫隙，因此用深色背景更具有包容性。

3）炫酷的視覺效果

大屏數(shù)據(jù)可視化由不同的可視化圖表組件構成，深色背景給人高端的氣質，更容易做出炫酷和沉浸的效果。

大屏可視化設計（圖片來源網(wǎng)絡）

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

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

一般可視化大屏幕用色類型總結，根據(jù)色彩呈現(xiàn)可以分為三種：

1. 體現(xiàn)“智慧”“健康”“醫(yī)療”領域：綠色；
2. 體現(xiàn)“科技”表達：藍色；紫色（藍紫）；
3. 體驗“運營活動”：橙色；紅色；

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

不同色彩風格的大屏可視化設計（圖片來源于網(wǎng)絡）

三、根據(jù)調研確定四種風格

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

1. 淺色（匯報、下載、打?。?/h3>

淺色為最常用風格風格，針對淺色模式我們從基礎布局和組件樣式上進行優(yōu)化調整。

• 基礎布局：圖表由文字和圖形元素構成，如標題區(qū)、操作區(qū)、圖表區(qū)、圖例區(qū)、單位區(qū)。合理的基礎布局增強圖表的一致性，體現(xiàn)秩序感。
• 圖表細節(jié)：圖表的整體細節(jié)做了統(tǒng)一調整，從整體布局、字體、字號、顏色、描邊粗細、數(shù)據(jù)軸等多方面進行視覺優(yōu)化設計，讓更改圖表看起開更加清晰。

2. 深色風格

深色風格我們嘗試了兩種色相，體現(xiàn)紫色品牌的暗黑主題和體現(xiàn)綠色色相的星云主題。

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

【深色風格設計原則】：

1. 展示數(shù)據(jù)清晰/視覺舒適；
2. 體現(xiàn)品牌感；
3. 防止疲勞；

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

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

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

主題模版切換

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

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

1. 投屏測試

由于大屏設備成像和分辨率差異較大、使用場景各異，有時和設計稿會存在加大色差。 因此我們需要進行投屏測試，查看不同終端設備上顯示效果。

?投屏測試

2. 工具走查

我們通過工具查看用色是否滿足無障礙設計。

3. 對比度測試

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

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

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

文本對比度：文本的視覺呈現(xiàn)以及文本圖像至少要有4.5:1的對比度（AA級）。

推薦測試工具：Color Oracle

WebAIM’s Color Contrast Checker

五、規(guī)范制定、跟蹤走查

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

以上規(guī)范僅限于通用組件的視覺方面，對于數(shù)據(jù)展示層面的極端案例和適配規(guī)則，我們后續(xù)待做討論。

總結：本文介紹了儀表板主題風格的設計過程，后續(xù)有機會將繼續(xù)完善可視化圖表組件應用經(jīng)驗的沉淀及分享。

本文由@小設計? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協(xié)議。