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

1. 區(qū)分層級

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

2.簡單易懂

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

3. 一致性

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

4. 臨近原則

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

5. 對齊

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

6. 留白

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

7. 顏色

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

8. 字體

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

9. 數(shù)字排版

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

10. 標(biāo)簽

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

總結(jié)

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

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

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

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