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

2 評論 12949 瀏覽 92 收藏 16 分鐘

當(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ù)控制中心可以幫助用戶高效敏捷地盡管運營管理。

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

運營型后臺界面主要特點

1.2 分析型后臺界面

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

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

分析型后臺界面主要特點

用戶需求決定了要設(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ù)可視化設(shè)計,國外大神給出了十條實用建議

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

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

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

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

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

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

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

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

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

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

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

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

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

避免使用的圖表類型

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

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

選擇不同圖表類型

選擇圖表時,可以考慮幾個問題:

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

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

后臺界面主要為了快速獲得信息,所以每個細節(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)格可以將大量的信息布局地更為緊湊。

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

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

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

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

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

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

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

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

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

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

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

排版統(tǒng)一

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

6. 擴大留白

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

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

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

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

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

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

高樓大廈的既視感

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

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

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

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

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

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

后臺界面上信息過多

后臺界面上,設(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)功能來定制或改變體驗。

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

自定義后臺界面

在界面足夠個性化的基礎(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 同問,這些圖是用哪個工具畫出來的?謝謝

    來自北京 回復(fù)
  2. 請問,這個是用的哪個可視化的工具

    來自浙江 回復(fù)