當(dāng)用戶(hù)在瀏覽數(shù)據(jù)界面時(shí)，最好一眼就能對(duì)關(guān)鍵信息有一個(gè)大概的了解。而數(shù)據(jù)可視化能夠更好的幫助來(lái)展示所有的信息、趨勢(shì)和風(fēng)險(xiǎn)，并實(shí)時(shí)更新。

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

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

我做了很多年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)以滿(mǎn)足用戶(hù)需求，就像產(chǎn)品中其他界面一樣。如果把目標(biāo)搞錯(cuò)了，那么接下來(lái)的努力就毫無(wú)意義！不同的使用場(chǎng)景，界面的設(shè)計(jì)方法也會(huì)不一樣。

為了簡(jiǎn)化分析，這里主要介紹2種最常見(jiàn)的形式：

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

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

運(yùn)營(yíng)型后臺(tái)界面主要特點(diǎn)

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

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

分析型后臺(tái)界面主要特點(diǎn)

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

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

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

根據(jù)用戶(hù)需要查看的內(nèi)容，我提供了一些可視化建議：

這類(lèi)圖表用于展示數(shù)據(jù)關(guān)系

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

這類(lèi)圖表用于比較數(shù)據(jù)

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

1. 時(shí)間維度應(yīng)始終用X軸展示，時(shí)間從左向右
2. 當(dāng)使用水平或垂直條形圖時(shí)，嘗試按最大值比例設(shè)計(jì)條形而不是隨意設(shè)計(jì)
3. 使用折線圖時(shí)，不要顯示超過(guò)5個(gè)值；使用條形圖時(shí)，不要顯示超過(guò)7個(gè)值

這類(lèi)圖表用于展示組成部分

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

這類(lèi)圖表用于展示分布情況

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

避免使用的圖表類(lèi)型

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

選擇不同圖表類(lèi)型

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

1. 在一個(gè)圖表中，要顯示幾個(gè)變量？
2. 要顯示不同時(shí)間的值，還是不同項(xiàng)目或者不同組的值？
3. 每個(gè)變量要顯示幾個(gè)數(shù)據(jù)點(diǎn)？

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

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

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)格可以將大量的信息布局地更為緊湊。

網(wǎng)格與模塊
在布局信息時(shí)，要注意：

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

閱讀習(xí)慣和優(yōu)先級(jí)布局

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

定義網(wǎng)格后，就可以用多種組件來(lái)承載信息、圖表和控件了?？ㄆ且环N非常簡(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)一。將名稱(chēng)放在左上角，將視圖控件或操作放到卡片右上角，剩下的就是內(nèi)容。當(dāng)所有卡片結(jié)構(gòu)統(tǒng)一時(shí)，用戶(hù)就更容易使用界面，輕松找到想要的內(nèi)容。

排版統(tǒng)一

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

6. 擴(kuò)大留白

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

12px和24px間距的視覺(jué)差異

7. 不要隱藏信息或過(guò)分依賴(lài)交互

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

高樓大廈的既視感

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

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

不要依賴(lài)過(guò)多交互顯示信息

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

后臺(tái)界面上信息過(guò)多

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

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

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

自定義后臺(tái)界面

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

9. 融合數(shù)據(jù)表或列表時(shí)，確?？山换デ覕?shù)據(jù)對(duì)齊

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

10. 最后才是考慮視覺(jué)效果

由于數(shù)據(jù)可視化界面是視覺(jué)沖擊力最強(qiáng)的后臺(tái)界面，因此通常對(duì)設(shè)計(jì)師來(lái)說(shuō)視覺(jué)效果成了設(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，公眾號(hào)：彩云譯設(shè)計(jì)

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

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