后臺(tái)數(shù)據(jù)可視化界面設(shè)計(jì)的10條經(jīng)驗(yàn)法則

2022-12-5    seo達(dá)人

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

 

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

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

 

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

數(shù)據(jù)可視化界面設(shè)計(jì)最重要的步驟是需要了解目標(biāo)用戶是誰(shuí)，能為他們提供什么價(jià)值。了解目標(biāo)受眾的知識(shí)背景和理解水平能幫助你做出對(duì)他們有價(jià)值的設(shè)計(jì)。
在了解目標(biāo)用戶時(shí)，有必要了解受眾感興趣的數(shù)據(jù)類(lèi)型。
“專(zhuān)注于用戶的需求，更容易產(chǎn)生他們喜歡使用的結(jié)果?！?/section>
目標(biāo)用戶級(jí)別可能會(huì)在一級(jí)和另一級(jí)之間變化，這是一個(gè)挑戰(zhàn)性的點(diǎn)。與其他任何設(shè)計(jì)項(xiàng)目一樣，可以細(xì)分受眾并將信息相應(yīng)地分為基本內(nèi)容和高級(jí)內(nèi)容。
在界面中表示一組信息有多種方法，選擇正確的數(shù)據(jù)指標(biāo)是設(shè)計(jì)數(shù)據(jù)可視化的另一個(gè)關(guān)鍵元素。這也與目標(biāo)用戶的偏好有關(guān)，即他們希望看到什么樣的信息。
“根據(jù)需要設(shè)計(jì)數(shù)據(jù)可視化界面，為不同的業(yè)務(wù)使用不同類(lèi)型的展示方式?！?/section>
下面是為目標(biāo)用戶設(shè)計(jì)數(shù)據(jù)可視化界面時(shí)需要考慮的一些重要規(guī)則。

 

1. 區(qū)分層級(jí)

一個(gè)非常常見(jiàn)的錯(cuò)誤就是設(shè)計(jì)師沒(méi)有對(duì)信息區(qū)分層級(jí)，所有的內(nèi)容看起來(lái)都一樣重要。
可以嘗試使用組件的大小和位置來(lái)區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。
  • 通過(guò)定義信息層級(jí)，讓用戶清楚什么是最重要的
  • 在左上角顯示更重要的信息，沿著對(duì)角線方向，信息的重要程度應(yīng)該依次減弱，右下角的信息重要性最弱
  • 還可以將信息劃分為不同類(lèi)別，并在不同的視圖中顯示它們

 

2.簡(jiǎn)單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解，更簡(jiǎn)單的形式來(lái)傳達(dá)復(fù)雜信息。
  • 不要放一些大多數(shù)用戶都難以理解的信息
  • 使用更少的列來(lái)顯示信息
  • 刪除冗余內(nèi)容來(lái)減少混亂

 

3. 一致性

使用一致性布局設(shè)計(jì)的數(shù)據(jù)可視化界面看起來(lái)更好。
  • 為了使界面更容易閱讀，可以在信息組之間使用類(lèi)似的可視化效果。
  • 把相關(guān)的信息放的更近一些
  • 對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組

 

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。
  • 把相關(guān)的信息放的更近一些
  • 不要將相關(guān)信息分散在界面上
  • 對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組

 

5. 對(duì)齊

可視化組件元素需要在視覺(jué)上對(duì)齊，并保持視覺(jué)平衡。
  • 將可視化組件元素在視覺(jué)上進(jìn)行對(duì)齊，可以將界面組織的更好
  • 嘗試將組件元素進(jìn)行網(wǎng)格布局設(shè)計(jì)
  • 不對(duì)齊的界面會(huì)給用戶帶來(lái)糟糕的體驗(yàn)

 

6. 留白

留白是為了讓界面有呼吸感，它使得用戶在使用你的界面時(shí)能夠有出喘息的空間。
  • 當(dāng)用戶查看需要的信息時(shí)，界面中的留白能夠吸引用戶的目光，提升用戶體驗(yàn)。
  • 減少留白會(huì)使用戶的界面變得混亂
  • 使用留白能對(duì)信息進(jìn)行可視化分組
留白太少簡(jiǎn)直就是在鼓勵(lì)你的用戶盡快離開(kāi)

 

7. 顏色

使用有效的配色方案來(lái)吸引用戶的注意力，幫助他們輕松地瀏覽信息。
  • 仔細(xì)選擇顏色，目標(biāo)是使內(nèi)容易于閱讀。
  • 使用大對(duì)比度來(lái)顯示背景上的視覺(jué)元素。
避免使用低對(duì)比度和低效的漸變

 

8. 字體

標(biāo)準(zhǔn)字體是可視化界面中的最佳字體，除非有特別的理由，一般不要用其他字體。
  • 使用標(biāo)準(zhǔn)字體，因?yàn)樗鼈兏菀组喿x和掃描。
  • 特別和美術(shù)字體可能看起來(lái)不錯(cuò)，但很難理解
  • 避免所有的大寫(xiě)字母文字，因?yàn)樗茈y閱讀，人類(lèi)的大腦需要時(shí)間來(lái)消化它。
  • 使用合適的字體大小和風(fēng)格，有效地傳達(dá)信息。
不要使用影響可讀性的字體

 

9. 數(shù)字排版

顯示精度超過(guò)要求的數(shù)字使它們難以閱讀和理解。
  • 必要時(shí)使用整數(shù)，因?yàn)殚L(zhǎng)數(shù)字會(huì)使用戶混淆
  • 省去不必要的信息
  • 讓用戶能夠容易地比較簡(jiǎn)單的差異細(xì)節(jié)

 

10. 標(biāo)簽

使用能夠快速有效地向用戶傳達(dá)所需信息的標(biāo)簽。
  • 避免使用帶旋轉(zhuǎn)的標(biāo)簽，因?yàn)楹茈y閱讀
  • 盡可能的使用標(biāo)準(zhǔn)的縮寫(xiě)
避免旋轉(zhuǎn)標(biāo)簽

 

總結(jié)

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

 


作者：Saadia Minhas

譯者：彩云sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》后臺(tái)數(shù)據(jù)可視化界面設(shè)計(jì)的10條經(jīng)驗(yàn)法則

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




日歷

鏈接

個(gè)人資料

存檔