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

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

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

我做了很多年To B（針對企業(yè)）的項目，設(shè)計了不計其數(shù)的后臺管理界面。每一次的設(shè)計任務(wù)，對我來說都是新的挑戰(zhàn)，為了設(shè)計出優(yōu)秀的后臺界面，我常感到壓力山大。

為了幫助大家設(shè)計出更好的后臺界面，我根據(jù)自己的經(jīng)驗，提出了以下幾點建議，不管是對初學(xué)者還是經(jīng)驗豐富的設(shè)計師，應(yīng)該都會有所收獲。

1. 定義目標(biāo)

后臺界面首先是要有明確的目標(biāo)以滿足用戶需求，就像產(chǎn)品中其他界面一樣。如果把目標(biāo)搞錯了，那么接下來的努力就毫無意義！不同的使用場景，界面的設(shè)計方法也會不一樣。

為了簡化分析，這里主要介紹2種最常見的形式：

1.1 運營型后臺界面

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

運營型后臺界面主要特點

1.2 分析型后臺界面

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

分析型后臺界面主要特點

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

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

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

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

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

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

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

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

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

這類圖表用于展示組成部分

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

這類圖表用于展示分布情況

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

避免使用的圖表類型

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

選擇不同圖表類型

選擇圖表時，可以考慮幾個問題：

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

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

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

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

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

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

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

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

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

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

卡片可以包含信息、圖表和控件

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

排版統(tǒng)一

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

6. 擴大留白

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

12px和24px間距的視覺差異

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

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

高樓大廈的既視感

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

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

不要依賴過多交互顯示信息

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

后臺界面上信息過多

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

8. 個性化而不是自定義

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

自定義后臺界面

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

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

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

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

由于數(shù)據(jù)可視化界面是視覺沖擊力最強的后臺界面，因此通常對設(shè)計師來說視覺效果成了設(shè)計的首要任務(wù)。相反，我建議最后再設(shè)計數(shù)據(jù)可視化界面總覽全局。

數(shù)據(jù)可視化是其他所有內(nèi)容的摘要視圖，顯示應(yīng)用各個部分的關(guān)鍵信息，最后設(shè)計它更切實可行。

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

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

作者：Taras Bakusevych

譯者：Bravert，公眾號：彩云譯設(shè)計

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

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