如何做好數(shù)據(jù)可視化設(shè)計(jì)，國(guó)外大神給出了十條實(shí)用建議

本期由Bravert（一個(gè)正在養(yǎng)成、修煉中的設(shè)計(jì)師，對(duì)世界滿滿地好奇心和熱忱）為大家?guī)?lái)一篇精選譯文(文章由Taras Bakusevych原創(chuàng)，Bravert原創(chuàng)翻譯，彩云協(xié)助優(yōu)化及版式編輯)。

第一次嘗試這種新的模式（詳細(xì)內(nèi)容請(qǐng)見上一周推文彩云譯設(shè)計(jì)招募合作譯者），有很多朋友加我希望能與我合作翻譯（這其中有在校英語(yǔ)專業(yè)學(xué)生，有翻譯過視頻的字幕組成員，甚至還包括好幾位在國(guó)外的留學(xué)生，真沒想到公眾號(hào)的影響力居然能遠(yuǎn)銷海外，有點(diǎn)小開心），也希望這種形式能讓大家看到一些更優(yōu)質(zhì)的內(nèi)容！

以下是譯文部分

前言

現(xiàn)如今，后臺(tái)界面的設(shè)計(jì)需求很常見。商業(yè)活動(dòng)中，人們希望通過一個(gè)數(shù)據(jù)可視化界面來(lái)展示所有的信息、趨勢(shì)和風(fēng)險(xiǎn)，并實(shí)時(shí)更新，助力于財(cái)務(wù)分析預(yù)測(cè)。

當(dāng)用戶在瀏覽數(shù)據(jù)界面時(shí)，最好一眼就能對(duì)關(guān)鍵信息有一個(gè)大概的了解，也就是說(shuō)，后臺(tái)界面應(yīng)該是一種引人注目、簡(jiǎn)單直接的導(dǎo)航方式。（后臺(tái)界面）Dashboard這個(gè)術(shù)語(yǔ)來(lái)自汽車儀表盤的比喻，也叫cockpit-area，通常是指飛機(jī)或航天器的駕駛艙，也就是控制飛行器的儀表盤。

我做了很多年To B（針對(duì)企業(yè)）的項(xiàng)目，設(shè)計(jì)了不計(jì)其數(shù)的后臺(tái)管理界面。每一次的設(shè)計(jì)任務(wù)，對(duì)我來(lái)說(shuō)都是新的挑戰(zhàn)，為了設(shè)計(jì)出優(yōu)秀的后臺(tái)界面，我常感到壓力山大。為了幫助大家設(shè)計(jì)出更好的后臺(tái)界面，我根據(jù)自己的經(jīng)驗(yàn)，提出了以下幾點(diǎn)建議，不管是對(duì)初學(xué)者還是經(jīng)驗(yàn)豐富的設(shè)計(jì)師，應(yīng)該都會(huì)有所收獲。

1、定義目標(biāo)

后臺(tái)界面首先是要有明確的目標(biāo)以滿足用戶需求，就像產(chǎn)品中其他界面一樣。如果把目標(biāo)搞錯(cuò)了，那么接下來(lái)的努力就毫無(wú)意義！不同的使用場(chǎng)景，界面的設(shè)計(jì)方法也會(huì)不一樣。為了簡(jiǎn)化分析，這里主要介紹2種最常見的形式：

1）運(yùn)營(yíng)型后臺(tái)界面

運(yùn)營(yíng)型后臺(tái)界面通常出現(xiàn)在時(shí)效性很強(qiáng)的任務(wù)場(chǎng)景中，旨在高效地為用戶提供關(guān)鍵信息。運(yùn)營(yíng)型后臺(tái)界面主要為用戶快速清晰地呈現(xiàn)異常數(shù)據(jù)、當(dāng)前資源情況和所處狀態(tài)。運(yùn)營(yíng)型后臺(tái)界面的數(shù)據(jù)控制中心可以幫助用戶高效敏捷地盡管運(yùn)營(yíng)管理。

2）分析型后臺(tái)界面

與運(yùn)營(yíng)型后臺(tái)界面相比，分析型后臺(tái)界面通過提供更為全面的信息，主要用于分析和決策，對(duì)時(shí)效性要求不高。分析型后臺(tái)界面主要是為幫助用戶更好地了解數(shù)據(jù)，分析趨勢(shì)和助力決策。

用戶需求決定了要設(shè)計(jì)哪一種后臺(tái)界面。產(chǎn)品可能具有很多功能，不同的管理者也有不同的訴求，設(shè)計(jì)需要因地制宜。設(shè)計(jì)師經(jīng)常容易混淆這兩種類型，為期望得到快速響應(yīng)和采取行動(dòng)的用戶卻提供一大堆的分析數(shù)據(jù)。反之亦然。

2.正確地展示數(shù)據(jù)

后臺(tái)界面中的數(shù)據(jù)展示是一項(xiàng)復(fù)雜的設(shè)計(jì)，尤其在后臺(tái)界面上展示多種類型數(shù)據(jù)時(shí)，不管是靜態(tài)還是實(shí)時(shí)變化的信息，都具有很強(qiáng)的挑戰(zhàn)性。如果選錯(cuò)了圖表類型或者直接默認(rèn)為通用的數(shù)據(jù)可視化模版，可能會(huì)使用戶感到困惑或誤讀數(shù)據(jù)。根據(jù)用戶需要查看的內(nèi)容，我提供了一些可視化建議：

散點(diǎn)圖主要用于相關(guān)性和分布性的分析；氣泡圖將第三維度引入圖表；網(wǎng)絡(luò)圖也很方便，數(shù)據(jù)間的節(jié)點(diǎn)越大越重要。

在比較一組或多組數(shù)據(jù)時(shí)，使用可視化的圖表要比看網(wǎng)格中的數(shù)字簡(jiǎn)單多了。柱形圖和折線圖是最常用的類型。我的建議是：

- 時(shí)間維度應(yīng)始終用X軸展示，時(shí)間從左向右

- 當(dāng)使用水平或垂直條形圖時(shí)，嘗試按最大值比例設(shè)計(jì)條形而不是隨意設(shè)計(jì)  

- 使用折線圖時(shí)，不要顯示超過5個(gè)值；使用條形圖時(shí)，不要顯示超過7個(gè)值

在數(shù)據(jù)可視化方面，餅圖和環(huán)形圖不容易使用。這類圖表最常用到，但同時(shí)也最容易被誤用。因?yàn)轱瀳D和環(huán)形圖的組件太多，相似值很多，所以閱讀體驗(yàn)很差。人們?cè)跒g覽餅圖和環(huán)形圖的角度和區(qū)域時(shí)，并不能輕易看出差值。

分布圖可以幫助你了解數(shù)據(jù)中的異常值，正態(tài)分布和信息范圍。

要避免使用某些圖表類型。過去，圖表數(shù)據(jù)展示對(duì)于后臺(tái)界面設(shè)計(jì)很重要，但現(xiàn)在擬物化設(shè)計(jì)已經(jīng)過時(shí)了。3D圖表和過度設(shè)計(jì)的圖表可讀性很差，分散了人們對(duì)數(shù)據(jù)的注意力，并且很難開發(fā)，所以沒必要這樣設(shè)計(jì)。

選擇圖表時(shí)，可以考慮幾個(gè)問題：

- 在一個(gè)圖表中，要顯示幾個(gè)變量？

- 要顯示不同時(shí)間的值，還是不同項(xiàng)目或者不同組的值？

- 每個(gè)變量要顯示幾個(gè)數(shù)據(jù)點(diǎn)？

3.命名規(guī)范、日期格式和數(shù)值劃分要統(tǒng)一清晰

后臺(tái)界面主要為了快速獲得信息，所以每個(gè)細(xì)節(jié)都很重要。使用清晰框架的最大好處是數(shù)據(jù)一致性。如果數(shù)據(jù)在每個(gè)工具中以相同的方式命名，則可以更輕松地使用這些工具。一個(gè)框架，就可以解決所有問題。

4.定義布局、順序和優(yōu)先級(jí)

網(wǎng)格可以幫助您輕松實(shí)現(xiàn)對(duì)齊和統(tǒng)一，在設(shè)計(jì)中創(chuàng)建基本結(jié)構(gòu)和骨架。它們由“隱形”線組成，在線上可以放置設(shè)計(jì)元素。網(wǎng)格可以將所有元素整合在一個(gè)系統(tǒng)的體系中，并且使界面更有條理。這對(duì)后臺(tái)界面設(shè)計(jì)至關(guān)重要，因?yàn)榫W(wǎng)格可以將大量的信息布局地更為緊湊。

在布局信息時(shí)，要注意：

通常，人們最先關(guān)注到屏幕左上角的區(qū)域，所以可以把關(guān)鍵信息從左到右布局。當(dāng)然有些地區(qū)人們的閱讀習(xí)慣可能是相反的。人們讀完一行后，會(huì)繼續(xù)下一行的閱讀。所以當(dāng)一段信息基于另一段信息時(shí)，要注意它們的前后順序，方便用戶更好地前后查閱信息、快速瀏覽。

5.使用結(jié)構(gòu)統(tǒng)一的組件

定義網(wǎng)格后，就可以用多種組件來(lái)承載信息、圖表和控件了。卡片是一種非常簡(jiǎn)單好用的排版方式。卡片最大的優(yōu)勢(shì)在于可以無(wú)限地修改、操作和擴(kuò)展。對(duì)于響應(yīng)式設(shè)計(jì)，卡片是不錯(cuò)的選擇，因?yàn)榭ㄆ且环N易于擴(kuò)展或縮小的內(nèi)容容器。

卡片的一個(gè)重要特點(diǎn)是所有卡片的控件和數(shù)據(jù)的排版統(tǒng)一。將名稱放在左上角，將視圖控件或操作放到卡片右上角，剩下的就是內(nèi)容。當(dāng)所有卡片結(jié)構(gòu)統(tǒng)一時(shí)，用戶就更容易使用界面，輕松找到想要的內(nèi)容。

涉及響應(yīng)式設(shè)計(jì)或者用戶定制時(shí)，使用以上推薦的排版就有不錯(cuò)的靈活性。當(dāng)卡片放大或縮小時(shí)，所有主要的控件仍然在特定的位置。這對(duì)開發(fā)和設(shè)計(jì)的整體可擴(kuò)展性來(lái)說(shuō)，十分有幫助。

6.擴(kuò)大留白

白色區(qū)域，也就是負(fù)空間，指的是在設(shè)計(jì)布局中元素之間的區(qū)域。用戶可能并不了解負(fù)空間，但是設(shè)計(jì)師需要特別注意。如果負(fù)空間不平衡，這個(gè)界面的易讀性就很差。因此負(fù)空間和其他排版元素一樣重要。

7.不要隱藏信息或過分依賴交互

后臺(tái)界面主要為了快速的了解大概信息，但如果涉及滾動(dòng)或過多的交互事件，就會(huì)拖慢用戶的使用效率。

設(shè)計(jì)師最常犯的錯(cuò)誤，就是設(shè)計(jì)可滾動(dòng)的、長(zhǎng)后臺(tái)界面。他們想用簡(jiǎn)潔的方式展示更多的信息，就會(huì)從上到下排版，以防太多的信息堆積到一起，讓用戶難以理解。但這會(huì)導(dǎo)致只有屏幕上的信息是可見的，不滾動(dòng)頁(yè)面就看不到下面的信息，所以用戶很難注意到下面的信息。既然這樣，干嘛還要放這些很難注意到的信息呢？

解決辦法是對(duì)信息進(jìn)行優(yōu)先級(jí)排序，在進(jìn)行充分的研究和訪談后，應(yīng)該能夠識(shí)別關(guān)鍵內(nèi)容，只用屏幕可見區(qū)域來(lái)顯示關(guān)鍵內(nèi)容。不要長(zhǎng)篇大論地講故事，要展示提煉的關(guān)鍵信息。額外的交互可以作為容納更多內(nèi)容的一種方式，而不是讓用戶被過多的數(shù)據(jù)壓垮。

交互有助于界面上次要信息展示。但完全依賴交互，以此作為使用后臺(tái)界面的主要方式，就是大錯(cuò)特錯(cuò)的。在以上的示例中，用戶不得不在多個(gè)選項(xiàng)卡中痛苦地切換，來(lái)獲取完整的圖表。那些在隱藏選項(xiàng)卡上的信息可讀性就很差，就像屏幕下方被隱藏的信息一樣。

后臺(tái)界面上，設(shè)計(jì)的信息過多，就會(huì)適得其反。一定要知道，人類對(duì)于多個(gè)事物的記性很差。不要對(duì)用戶期望過高，不要讓用戶對(duì)太多數(shù)據(jù)應(yīng)接不暇。最多用5-7個(gè)組件來(lái)創(chuàng)建頁(yè)面。否則，用戶很難專注獲取清晰的信息概覽。

8.個(gè)性化而不是自定義

用戶希望看到與他們個(gè)人需求相關(guān)的內(nèi)容。個(gè)性化和自定義可以使用戶看到對(duì)他們自身重要內(nèi)容。個(gè)性化由系統(tǒng)自身設(shè)定。系統(tǒng)ID用于識(shí)別用戶，并為用戶提供與其角色匹配的內(nèi)容、體驗(yàn)或功能。自定義則是由用戶自身完成。為了滿足特定需求，用戶可以在系統(tǒng)里配置布局、內(nèi)容或系統(tǒng)功能來(lái)定制或改變體驗(yàn)。

在界面足夠個(gè)性化的基礎(chǔ)上，可以給用戶更多的選擇自定義后臺(tái)界面。但通常，設(shè)計(jì)多種自定義的方式是一個(gè)借口，逃避枯燥的用戶調(diào)研過程，不去真正挖掘每一個(gè)用戶角色真正的需求。最后，就把一切都甩給用戶，讓他自己去創(chuàng)建頁(yè)面。

9.融合數(shù)據(jù)表或列表時(shí)，確保可交互且數(shù)據(jù)對(duì)齊

展示多項(xiàng)目的大量信息時(shí)，數(shù)據(jù)表是不錯(cuò)的解決方案。例如客戶列表里姓名、狀態(tài)、聯(lián)系人和最近活動(dòng)等等，這些用數(shù)據(jù)表展示是最好的辦法。數(shù)據(jù)表有很多優(yōu)點(diǎn)，空間利用好、擴(kuò)展性好、開發(fā)簡(jiǎn)便。用戶也很習(xí)慣和網(wǎng)格打交道，因?yàn)榇蠖鄶?shù)用戶使用excel很多年了，容易查找和修改數(shù)據(jù)。查閱以下文章，了解數(shù)據(jù)表的更多內(nèi)容。

https://medium.com/@taras.bakusevych/data-tables-design-3c705b106a64

10.最后才是考慮視覺效果

由于數(shù)據(jù)可視化界面是視覺沖擊力最強(qiáng)的后臺(tái)界面，因此通常對(duì)設(shè)計(jì)師來(lái)說(shuō)視覺效果成了設(shè)計(jì)的首要任務(wù)。相反，我建議最后再設(shè)計(jì)數(shù)據(jù)可視化界面總覽全局。數(shù)據(jù)可視化是其他所有內(nèi)容的摘要視圖，顯示應(yīng)用各個(gè)部分的關(guān)鍵信息，最后設(shè)計(jì)它更切實(shí)可行。

否則，在處理其他頁(yè)面時(shí)會(huì)不斷返回并更新數(shù)據(jù)可視化界面。此外，一旦設(shè)計(jì)完大部分界面了，再做數(shù)據(jù)可視化就可以使用大量的組件了。

原文：https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c

作者：Taras Bakusevych

譯者：Bravert

本文翻譯已獲得作者的正式授權(quán)