后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

3 評論 14849 瀏覽 125 收藏 9 分鐘

本文的英文原標(biāo)題是“10 Rules of Dashboard Design”,其中Dashboard如果翻譯成儀表盤的話,總覺得不大容易理解,所以我在這里把它翻譯為數(shù)據(jù)可視化。數(shù)據(jù)展示方面的設(shè)計,相信大家會經(jīng)常用到,這篇文章有很多簡單直接,立馬就能用上的干貨,一起來學(xué)習(xí)吧!

為什么數(shù)據(jù)可視化設(shè)計非常重要?

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復(fù)雜信息。

一個優(yōu)秀的數(shù)據(jù)可視化界面包含以下幾個關(guān)鍵要素:

  • 清晰:一個好的數(shù)據(jù)可視化界面一定是能夠清晰的展現(xiàn)用戶所需要的信息。當(dāng)用戶看到界面內(nèi)容時,應(yīng)該能在5秒內(nèi)了解到它的用途,而不是花費(fèi)至少幾分鐘才能理解各個數(shù)據(jù)的含義。
  • 有意義:一個有用的數(shù)據(jù)可視化界面上的每一條信息都應(yīng)該是有意義的,這些有意義的信息能準(zhǔn)確傳達(dá)設(shè)計師想要表達(dá)的內(nèi)容,每一條數(shù)據(jù)的背后,用戶應(yīng)該都是可以讀懂的。
  • 一致性:優(yōu)秀的數(shù)據(jù)可視化界面,會有一套非常嚴(yán)謹(jǐn)一致的版面,這里的一致性需要考慮到布局,結(jié)構(gòu)和內(nèi)容。
  • 簡單:復(fù)雜的界面違背了數(shù)據(jù)可視化設(shè)計的初衷,如果一個信息呈現(xiàn)不夠簡單直接,那么肯定是在設(shè)計上出現(xiàn)了問題。

如何設(shè)計一個數(shù)據(jù)可視化界面?

數(shù)據(jù)可視化界面設(shè)計最重要的步驟是需要了解目標(biāo)用戶是誰,能為他們提供什么價值。了解目標(biāo)受眾的知識背景和理解水平能幫助你做出對他們有價值的設(shè)計。

在了解目標(biāo)用戶時,有必要了解受眾感興趣的數(shù)據(jù)類型。

“專注于用戶的需求,更容易產(chǎn)生他們喜歡使用的結(jié)果?!?/p>

目標(biāo)用戶級別可能會在一級和另一級之間變化,這是一個挑戰(zhàn)性的點(diǎn)。與其他任何設(shè)計項目一樣,可以細(xì)分受眾并將信息相應(yīng)地分為基本內(nèi)容和高級內(nèi)容。

在界面中表示一組信息有多種方法,選擇正確的數(shù)據(jù)指標(biāo)是設(shè)計數(shù)據(jù)可視化的另一個關(guān)鍵元素。這也與目標(biāo)用戶的偏好有關(guān),即他們希望看到什么樣的信息。

“根據(jù)需要設(shè)計數(shù)據(jù)可視化界面,為不同的業(yè)務(wù)使用不同類型的展示方式。”

下面是為目標(biāo)用戶設(shè)計數(shù)據(jù)可視化界面時需要考慮的一些重要規(guī)則。

1. 區(qū)分層級

一個非常常見的錯誤就是設(shè)計師沒有對信息區(qū)分層級,所有的內(nèi)容看起來都一樣重要。

可以嘗試使用組件的大小和位置來區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。

  • 通過定義信息層級,讓用戶清楚什么是最重要的;
  • 在左上角顯示更重要的信息,沿著對角線方向,信息的重要程度應(yīng)該依次減弱,右下角的信息重要性最弱;
  • 還可以將信息劃分為不同類別,并在不同的視圖中顯示它們。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

2. 簡單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解,更簡單的形式來傳達(dá)復(fù)雜信息。

  • 不要放一些大多數(shù)用戶都難以理解的信息
  • 使用更少的列來顯示信息
  • 刪除冗余內(nèi)容來減少混亂

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

3. 一致性

使用一致性布局設(shè)計的數(shù)據(jù)可視化界面看起來更好。

  • 為了使界面更容易閱讀,可以在信息組之間使用類似的可視化效果。
  • 把相關(guān)的信息放的更近一些。
  • 對相關(guān)內(nèi)容進(jìn)行可視化分組。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。

  • 把相關(guān)的信息放的更近一些
  • 不要將相關(guān)信息分散在界面上
  • 對相關(guān)內(nèi)容進(jìn)行可視化分組

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

5. 對齊

可視化組件元素需要在視覺上對齊,并保持視覺平衡。

  • 將可視化組件元素在視覺上進(jìn)行對齊,可以將界面組織的更好;
  • 嘗試將組件元素進(jìn)行網(wǎng)格布局設(shè)計;
  • 不對齊的界面會給用戶帶來糟糕的體驗。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

6. 留白

留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時能夠有出喘息的空間。

  • 當(dāng)用戶查看需要的信息時,界面中的留白能夠吸引用戶的目光,提升用戶體驗;
  • 減少留白會使用戶的界面變得混亂;
  • 使用留白能對信息進(jìn)行可視化分組。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

留白太少簡直就是在鼓勵你的用戶盡快離開

7. 顏色

使用有效的配色方案來吸引用戶的注意力,幫助他們輕松地瀏覽信息。

  • 仔細(xì)選擇顏色,目標(biāo)是使內(nèi)容易于閱讀。
  • 使用大對比度來顯示背景上的視覺元素。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

避免使用低對比度和低效的漸變

8. 字體

標(biāo)準(zhǔn)字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。

  • 使用標(biāo)準(zhǔn)字體,因為它們更容易閱讀和掃描。
  • 特別和美術(shù)字體可能看起來不錯,但很難理解
  • 避免所有的大寫字母文字,因為它很難閱讀,人類的大腦需要時間來消化它。
  • 使用合適的字體大小和風(fēng)格,有效地傳達(dá)信息。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

不要使用影響可讀性的字體

9. 數(shù)字排版

顯示精度超過要求的數(shù)字使它們難以閱讀和理解。

  • 必要時使用整數(shù),因為長數(shù)字會使用戶混淆;
  • 省去不必要的信息;
  • 讓用戶能夠容易地比較簡單的差異細(xì)節(jié)。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

10. 標(biāo)簽

使用能夠快速有效地向用戶傳達(dá)所需信息的標(biāo)簽。

  • 避免使用帶旋轉(zhuǎn)的標(biāo)簽,因為很難閱讀;
  • 盡可能的使用標(biāo)準(zhǔn)的縮寫。

后臺數(shù)據(jù)可視化界面設(shè)計的10條經(jīng)驗法則

避免旋轉(zhuǎn)標(biāo)簽

總結(jié)

數(shù)據(jù)可視化旨在節(jié)省時間和精力,將復(fù)雜和抽象的數(shù)據(jù)以更簡單的形式表示,目的是以用戶能夠理解的方式將關(guān)鍵信息傳達(dá)給他們,確保自己理解用戶所需,并給他們需要的信息。

 

原文:https://medium.muz.li/10-rules-of-dashboard-design-f1a4123028a2

作者:Saadia Minhas

譯者:彩云sky,公眾號:彩云譯設(shè)計

本文由 @彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 總結(jié)的四要素很不錯,杜絕了很多看起來高大上卻沒有意義的東西

    來自廣東 回復(fù)
  2. 是用的帆軟嗎

    來自江蘇 回復(fù)
  3. 最近正好在做可視化設(shè)計,根據(jù)文章中的內(nèi)容作了部分優(yōu)化,感謝

    來自江蘇 回復(fù)