《白》一書(shū)提及了茶道中“留白”的力量，這種力量讓設(shè)計(jì)者更貼近設(shè)計(jì)初衷，通過(guò)對(duì)必要差異的控制，保留最重要的信息，脫離浮夸且無(wú)意義的設(shè)計(jì)。

本文借鑒這種力量，思考了后臺(tái)產(chǎn)品Dashboard設(shè)計(jì)。

在后臺(tái)業(yè)務(wù)場(chǎng)景中，我們常常看到令人崩潰的龐大數(shù)據(jù)量。

作為設(shè)計(jì)師，我們?cè)诒姸嗟臄?shù)據(jù)及信息間斟酌著，篩選著，為了能夠給用戶(hù)呈現(xiàn)更清晰的界面、一目了然的數(shù)據(jù)。下面是一組未經(jīng)優(yōu)化過(guò)的后臺(tái)場(chǎng)景數(shù)據(jù)圖表：

我們從需求、設(shè)計(jì)、數(shù)據(jù)三方面來(lái)看走查大盤(pán)中的問(wèn)題，可以簡(jiǎn)稱(chēng)之為數(shù)據(jù)大盤(pán)3D問(wèn)題分析。例如以上圖表可以從這三個(gè)角度查找問(wèn)題：

排列在工作表的列或行中的數(shù)據(jù)可以繪制到折線圖中。

折線圖可以顯示隨時(shí)間（根據(jù)常用比例設(shè)置）而變化的連續(xù)數(shù)據(jù)，因此非常適用于顯示在相等時(shí)間間隔下數(shù)據(jù)的趨勢(shì)。

我們使用折線圖是為了展示數(shù)據(jù)的一個(gè)變化趨勢(shì)，如果在設(shè)計(jì)過(guò)程中丟失了趨勢(shì)變化的閱讀性那么就和設(shè)計(jì)目標(biāo)背道而馳。

一、折線圖的小細(xì)節(jié)

1. 圖表展示空間過(guò)小

想在非常小的空間里展示過(guò)多的數(shù)據(jù)，導(dǎo)致數(shù)據(jù)點(diǎn)太密集，繪制出的線圖丟失了數(shù)據(jù)變化的細(xì)節(jié)。

2. X軸跨度及數(shù)據(jù)頻率

監(jiān)控場(chǎng)景中x軸一般為時(shí)間，設(shè)計(jì)師需要在設(shè)計(jì)中協(xié)調(diào)好數(shù)據(jù)頻率和數(shù)據(jù)展示時(shí)間跨度。

常見(jiàn)的實(shí)時(shí)數(shù)據(jù)更新頻率有1秒、5秒、10秒、30秒、1分鐘、5分鐘。當(dāng)數(shù)據(jù)為秒級(jí)更新(如下圖)，數(shù)據(jù)線上的點(diǎn)則為1秒1個(gè)點(diǎn)，那么可以換算1分鐘為60個(gè)點(diǎn)，數(shù)據(jù)量隨數(shù)據(jù)頻率暴增。

這個(gè)時(shí)候需要結(jié)合圖表展示的空間大小調(diào)整時(shí)間跨度，原則為不損失折線圖的波動(dòng)細(xì)節(jié)。

3. Y軸刻度設(shè)置

當(dāng)Y軸刻度設(shè)置跨度過(guò)大，那么趨勢(shì)圖會(huì)呈現(xiàn)一條非常平緩的曲線；反之，當(dāng)Y軸跨度過(guò)小，則會(huì)呈現(xiàn)一條過(guò)于陡峭的曲線。這兩種情況都不能很好地反應(yīng)趨勢(shì)的變化。

正確的做法是：Y軸刻度應(yīng)使得折線在整個(gè)圖表區(qū)域內(nèi)占據(jù)2/3的位置，且圖表的X軸長(zhǎng)度應(yīng)根據(jù)業(yè)務(wù)對(duì)比需求以進(jìn)行參照。

例如監(jiān)控場(chǎng)景中，一般使用1天的時(shí)間作為跨度，其中包括整個(gè)波動(dòng)中的最高點(diǎn)（一般發(fā)生在白天）或最低點(diǎn)（一般出現(xiàn)在晚上），使得數(shù)據(jù)有較好的對(duì)比。這需要和前端同學(xué)配合進(jìn)行規(guī)則的設(shè)置，以此讓Y軸數(shù)值根據(jù)需求進(jìn)行動(dòng)態(tài)計(jì)算。

在這里特別要說(shuō)明，折線圖不同于條形圖，它不需要從0基線開(kāi)始。當(dāng)我們使用面積圖，尤其是迷你面積圖時(shí)，要明確的讓用戶(hù)感知到基線。

4. 折線粗細(xì)及平滑度

過(guò)細(xì)的折線會(huì)降低數(shù)據(jù)閱讀性，過(guò)粗的折線會(huì)損失折線中的數(shù)據(jù)波動(dòng)細(xì)節(jié)。正確做法是使用適當(dāng)?shù)拇旨?xì)，和網(wǎng)格輔助線形成鮮明對(duì)比，但又不損失波動(dòng)。

折線圖若將波動(dòng)尖刺進(jìn)行優(yōu)化則會(huì)變?yōu)榍€圖。在實(shí)際使用過(guò)程中，如果折線圖數(shù)據(jù)點(diǎn)過(guò)于密集，則曲線圖的尖刺優(yōu)化效果變得微弱且這種優(yōu)化會(huì)讓數(shù)據(jù)波動(dòng)不清晰。

5. 數(shù)據(jù)項(xiàng)

在數(shù)據(jù)之間重合點(diǎn)不多的情況下，應(yīng)將數(shù)據(jù)項(xiàng)的個(gè)數(shù)控制在四個(gè)左右。當(dāng)數(shù)據(jù)項(xiàng)過(guò)多時(shí)，就無(wú)法達(dá)到比較和對(duì)比的設(shè)計(jì)目標(biāo)了。

人類(lèi)在一個(gè)視覺(jué)區(qū)域內(nèi)能夠識(shí)別的顏色在6個(gè)左右。當(dāng)我們使用多種顏色去區(qū)分?jǐn)?shù)據(jù)項(xiàng)時(shí)，肉眼已經(jīng)非常難分辨。

當(dāng)數(shù)據(jù)項(xiàng)非常多時(shí)，圖注數(shù)量增多，在空間一定的情況下也會(huì)壓縮圖表的展示空間。正確的做法是當(dāng)數(shù)據(jù)項(xiàng)非常多時(shí)，可以使用聯(lián)動(dòng)圖表，或者圖表組。

二、從折線圖說(shuō)到數(shù)據(jù)信息的組合

在這么多的約束下，設(shè)計(jì)需求卻不會(huì)因此減少，PD總是想把很多的內(nèi)容塞進(jìn)一個(gè)頁(yè)面里。 這個(gè)時(shí)候僅僅聚焦在單一的圖表上是難以解決問(wèn)題的，要從大盤(pán)的整體布局和結(jié)構(gòu)出發(fā)去考慮。

當(dāng)我們進(jìn)行一個(gè)數(shù)據(jù)大盤(pán)設(shè)計(jì)時(shí)，一定是圍繞一個(gè)設(shè)計(jì)主題展開(kāi)的，這個(gè)設(shè)計(jì)主題下一般包含各種模塊，可能是子業(yè)務(wù)板塊或者各種維度板塊。

為了更好的布局，站在用戶(hù)的視角去解讀數(shù)據(jù)，設(shè)計(jì)師需要更進(jìn)一步的了解業(yè)務(wù)邏輯和數(shù)據(jù)間的運(yùn)算方法。

明確清晰的設(shè)計(jì)主題，能夠幫助決策不同模塊間及模塊內(nèi)容的層級(jí)關(guān)系：誰(shuí)應(yīng)該被強(qiáng)調(diào)，誰(shuí)應(yīng)該弱化。模塊間的邏輯關(guān)系及模塊內(nèi)數(shù)據(jù)間的邏輯關(guān)系則決定了內(nèi)容和布局形式。

譬如下圖中包含兩個(gè)數(shù)據(jù)：庫(kù)存及庫(kù)存預(yù)測(cè)。需求方提供給你的時(shí)候可能是兩個(gè)折線圖表，但當(dāng)你了解了兩個(gè)信息其實(shí)都是指的一個(gè)內(nèi)容，那自然需要將其合并展示。

我認(rèn)為數(shù)據(jù)可視化不僅僅是將數(shù)據(jù)轉(zhuǎn)化為圖表，同時(shí)也是對(duì)數(shù)據(jù)間邏輯關(guān)系的合理詮釋。

單個(gè)數(shù)據(jù)總是單薄的，只有在橫向和縱向的對(duì)比中，才能發(fā)生化學(xué)反應(yīng)產(chǎn)生可視化價(jià)值。這種組合方式多種多樣，下文就后臺(tái)監(jiān)控場(chǎng)景常使用的方式進(jìn)行舉例說(shuō)明。

1. 輔助信息就近標(biāo)注

圖表是可視化的基本，不是全部。沒(méi)有對(duì)比和參照，折線圖只是展示的數(shù)據(jù)的基本。

例如下圖，在條件允許的情況下，我們可以考慮將圖注或數(shù)值直接標(biāo)注在圖表上，這樣能夠減少用戶(hù)反復(fù)對(duì)比及對(duì)應(yīng)關(guān)系弱的問(wèn)題。

這里所說(shuō)的條件允許是指數(shù)據(jù)展示的極端情況，如末尾處標(biāo)注實(shí)時(shí)數(shù)據(jù)的方案在多條線圖時(shí)會(huì)出現(xiàn)重疊現(xiàn)象。

例如在后臺(tái)監(jiān)控場(chǎng)景下，通過(guò)用研發(fā)現(xiàn)用戶(hù)關(guān)注數(shù)據(jù)的達(dá)標(biāo)情況、波峰波谷情況，那么我們可以在圖標(biāo)上更直觀的標(biāo)注出來(lái)。再譬如，一般變更會(huì)引起數(shù)據(jù)波動(dòng)，這種關(guān)聯(lián)性的信息也可以直接標(biāo)注在圖表上：

2. 雙軸線圖及組合圖表

關(guān)系非常緊密的兩個(gè)數(shù)據(jù)圖表，當(dāng)數(shù)據(jù)單位不同時(shí)，可以采用雙軸圖表或雙軸線柱圖。

雙軸圖表的使用需要注意：x軸維度必須一致；Y軸數(shù)據(jù)刻度及單位要標(biāo)注清楚，以免混淆；兩個(gè)數(shù)據(jù)的基線選擇需要謹(jǐn)慎，基線的不同會(huì)導(dǎo)致兩條線的視覺(jué)關(guān)系相去甚遠(yuǎn)。

3. 圖表交互及其他

數(shù)據(jù)內(nèi)容很多難以取舍時(shí)，可以嘗試通過(guò)交互來(lái)減少頁(yè)面信息負(fù)擔(dān)。譬如下圖中，通過(guò)縮放圖表來(lái)查看不同時(shí)間跨度的數(shù)據(jù)。

三、 基于視覺(jué)工作模式選擇圖表展示方式

上文中說(shuō)到了很多圖表繪制過(guò)程中易觸及的錯(cuò)誤，那么有沒(méi)有一種通用的感知判斷標(biāo)準(zhǔn)？

早期，工作于AT&T貝爾實(shí)驗(yàn)室的統(tǒng)計(jì)學(xué)家William S. Cleveland及Robert McGill曾發(fā)表過(guò)《圖像感知：研究圖像化方法的理論、實(shí)踐和應(yīng)用》。

文章的重要性在對(duì)于如何根據(jù)功能選擇最佳圖表形式提出了指引。作者設(shè)計(jì)了一個(gè)包含10項(xiàng)基本感知任務(wù)的列表，每項(xiàng)任務(wù)代表展示數(shù)據(jù)的一種方法并進(jìn)行了排序。

有的時(shí)候并不是精確的判斷數(shù)據(jù)值間的比較關(guān)系，可能是整體的分布感知等，這個(gè)時(shí)候認(rèn)知判斷的準(zhǔn)確性就不是越高越好了。

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

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議