UI設計 | 更好的儀表板設計的10條規(guī)則

如今贯要,儀表板設計是經常需要的。一種可視化的視圖冬念,該視圖可以顯示所有信息趁窃,顯示趨勢和風險區(qū)域。

對我來說刘急,儀表板-是用戶一眼就可以看到的最關鍵信息的預覽棚菊,并且是一種直接導航到需要用戶注意的應用程序各個區(qū)域的簡便方法浸踩。術語“儀表板”是汽車儀表板的隱喻叔汁,有時也稱為駕駛艙區(qū)域,通常位于飛機或太空飛船的前部检碗,飛行員從中控制飛機据块。

在企業(yè)項目上工作了多年,我設計了無數的儀表板折剃。每一個新的挑戰(zhàn)對我來說都是下一個挑戰(zhàn)另假。一個好的儀表板可能是設計中的一項艱巨任務。根據我的經驗怕犁,我整理了一系列有用的建議边篮,以在將來為你提供幫助。無論你是剛開始做設計還是經驗豐富的設計師奏甫,我都可以確保你在這里找到一些有趣的東西戈轿。

1.定義儀表板的用途。

像產品中的任何其他視圖一樣阵子,儀表板具有特定的用途思杯。弄錯了,會使你的進一步努力變得毫無意義挠进。根據儀表板的用途(分析色乾,戰(zhàn)略誊册,運營,戰(zhàn)術等)暖璧,有多種流行的方法可以對儀表板進行分類案怯。

為了簡單起見,我將它們分為兩種更一般的形式:

操作儀表板

操作儀表板的目的是在用戶參與時間緊迫的任務時漆撞,將關鍵信息快速傳遞給他們殴泰。操作儀表板的主要目標是向用戶快速清楚地顯示數據偏差,顯示當前資源并顯示其狀態(tài)浮驳。這是一個數字控制室悍汛,旨在幫助用戶快速,主動和高效至会。

操作儀表板關鍵質量

分析儀表盤

與操作儀表盤相反离咐,分析儀表盤為用戶提供了用于分析和決策的快速信息。它們對時間的敏感度較低奉件,并且不專注于立即采取行動宵蛀。這種儀表板的主要目標是幫助用戶最好地了解數據,分析趨勢并推動決策县貌。

分析儀表板關鍵質量

你需要的儀表板類型應由用戶角色確定术陶,并且需要滿足你的需求。你的產品可能具有多個角色煤痕,每個角色都應該擁有一個唯一的儀表板梧宫。下層經理可能需要操作儀表板,而上層管理人員可能對分析儀表板的需求更大摆碉。設計人員經常將這些混合在一起塘匣,為用戶提供快速反應和采取行動的假設,并進行大量分析巷帝,反之亦然忌卤。

2.選擇正確的數據表示形式。

當我們談論儀表板時楞泼,我們談論圖表驰徊。數據表示是一項復雜的任務,尤其是由于你希望在儀表板上顯示多種類型的信息堕阔,無論其是隨時間的靜態(tài)還是動態(tài)變化棍厂。這可能是非常具有挑戰(zhàn)性的。選擇錯誤的圖表類型或默認為最常見的數據可視化類型可能會使用戶困惑或導致數據誤解印蔬。

可以幫助你查看數據關系的圖形類型

散點圖主要用于相關性和分布分析勋桶。氣泡圖有助于將三維圖引入圖表。

當數據點之間即使是最細微的連接都非常重要時,網絡圖也很方便例驹。

可以幫助你比較值的圖形類型

使用可視化方法比較一個或多個值集比查看網格中的數字要容易得多捐韩。柱形圖和折線圖可能是最常用的。一些建議:

-當維度之一是時間時鹃锈,它應該始終是X軸荤胁,因為圖表中的時間從左向右流動

-使用水平或垂直條形圖時,請嘗試按最大值而不是隨機地對列進行排序對它們進行排序屎债。

-使用折線圖時仅政,圖表不應顯示超過5個值,而對于條形圖盆驹,建議不要顯示超過7個值圆丹。

可以幫助你查看構圖的圖形類型

餅圖和甜甜圈圖在數據可視化方面聲譽不佳。這些圖表是最常用的圖表之一躯喇,也是最經常濫用的圖表辫封。當組件過多或包含非常相似的值時,很難閱讀它們廉丽。當涉及到角度和面積時倦微,人類很難區(qū)分值。

可以幫助你查看分布的圖形類型

分布圖可幫助你說明異常值正压,正態(tài)趨勢以及值中的信息范圍欣福。

避免使用的圖表類型

但是應完全避免某些圖表類型。過去焦履,儀表板是大趨勢拓劝,但嘗試以數字方式復制物理對象是一個壞主意。3D圖表和樣式過大的圖表具有較低的可讀性裁良,使查看者無法看清數據凿将,甚至更難以開發(fā)校套,因此沒有理由使用它們价脾。

何時使用各種圖形類型

為了幫助你為圖表選擇正確的表示類型,請問自己以下問題:

-你想在單個圖表中顯示多少個變量笛匙?

-你會在一段時間內還是在項目或組之間顯示值侨把?

-每個變量需要顯示多少個數據點?

3.遵循清晰一致的命名約定和一致的日期格式妹孙,并截斷較大的值秋柄。

儀表板的主要目標是一目了然地傳達信息,每件事都很重要蠢正。使用清晰的框架的最大好處是數據一致性骇笔。如果你在每個工具中用相同的方式命名數據,則使用這些工具將更加容易。

4.定義布局和流程笨触。優(yōu)先排序懦傍。

網格可以幫助你輕松實現有效的對齊和一致性,并為你的設計創(chuàng)建基本結構或框架芦劣。它們由可放置設計元素的“不可見”線條組成粗俱。這樣做可以將它們捆綁在一個整體的“系統(tǒng)”中,并合理地支持你的構圖虚吟。這對于儀表板設計至關重要寸认,因為你將需要以無縫方式組織大量信息。

網格和模塊

在決定應包含哪些信息時串慰,請記住以下幾點:

-屏幕的左上角自然會吸引更多注意力偏塞,因此請嘗試從左到右放置關鍵信息。這是基于我們閱讀信息的方式邦鲫,因此它可能會因你要設計的用戶區(qū)域而異烛愧。

當讀者完成第一行時,他們將移至下一行掂碱。

-如果存在依賴關系怜姿,這將影響基于另一組信息做出的一組信息的決策,則以用戶不需要來回移動的方式創(chuàng)建布局-創(chuàng)建連續(xù)的流程以輕松在儀表板上進行掃描疼燥。

5.使用結構一致的構件沧卢。

定義網格后,我們可以使用多個“小部件”開始工作醉者,這些小部件將保存信息但狭,圖表和控件∏思矗卡片很容易安排立磁。關于卡片的最重要的事情是它們幾乎可以無限操作。它們是響應式設計的不錯選擇剥槐,因為卡片充當內容容器唱歧,可以輕松按比例放大或縮小。

卡片的一個重要特性是內部控件和數據的一致布局粒竖。將名稱放在左上角颅崩,將視圖控件或操作與卡片的右上角對齊,然后將其余內容留在卡片上蕊苗。當所有人都擁有一致的結構時沿后,用戶可以更輕松地使用該界面-他們在期望的地方找到所有東西。

在響應式設計或用戶自定義方面朽砰,使用上述建議的布局還具有靈活性的其他好處尖滚。當卡變大或變小時喉刘,所有主要組件仍固定在特定位置。這也對開發(fā)人員以及將來設計的整體可伸縮性都有利漆弄。

6.留白

空白空間饱搏,也稱為負空間,是設計合成中元素之間的區(qū)域置逻。讀者通常并不了解負空間的重要性推沸,但設計師對此非常關注。如果空白不平衡券坞,將很難閱讀鬓催。這就是為什么負空間與其他任何版式元素一樣重要的原因。

12px vs 24px邊緣視覺差異

7.不要隱藏信息或過多地依賴交互恨锚。

儀表板的主要目標之一是一目了然地顯示信息宇驾,因此依靠滾動或許多交互作用會削弱整個目的。

帝國儀表板

設計長的可滾動儀表板是設計人員最常犯的錯誤之一猴伶。他們試圖以清晰的方式顯示更多信息课舍,將它們一個接一個地放置,以避免使用戶不知所措他挎。結果筝尾,用戶可能只會發(fā)現屏幕折疊上方可見的信息。下面的所有內容都很少受到用戶的關注办桨。那有什么意義呢筹淫?

解決方案是確定優(yōu)先級。經過更多的研究和訪談之后呢撞,你應該能夠識別核心信息损姜。你應該只在折疊上方的空間上進行顯示。不要講完整的故事殊霞,而是總結一下摧阅,只顯示關鍵信息。你可以使用其他交互方式來容納更多內容绷蹲,而不會用數據淹沒用戶棒卷。

不要依賴過多的交互來獲取表面信息

交互作用有助于顯示輔助信息。完全依靠它們作為使用儀表板的主要方法是一個大錯誤瘸右。在上面的示例中娇跟,我們看到用戶將如何痛苦地在多個選項卡之間切換以獲取完整圖片岩齿。這會隱藏用戶所有其他選項卡中的信息太颤,就像折疊下的內容一樣。

數據過載的儀表板示例

試圖真正使你的儀表板提供更多信息可能會導致極端情況盹沈。我們應該永遠記住龄章,人類在一次跟蹤多個事物方面很不好吃谣。不要對用戶提出過多要求,也不要讓數據淹沒他們做裙。最多使用5–7個不同的小部件來創(chuàng)建視圖岗憋。否則,用戶將難以集中精力并獲得清晰的概覽锚贱。

8.個性化而非定制仔戈。

用戶期望他們看到的內容將與他們的個人需求相關。個性化和自定義是可以幫助你確保用戶看到對他們重要的技術拧廊。

個性化由系統(tǒng)本身完成监徘。應該設置系統(tǒng)以識別用戶,并向他們提供與其角色相匹配的內容吧碾,體驗或功能凰盔。定制由用戶完成。系統(tǒng)可以使用戶通過配置布局倦春,內容或系統(tǒng)功能來定制體驗或對其進行更改以滿足他們的特定需求户敬。

可定制的儀表板

只要視圖已被個性化,賦予用戶更多自定義儀表板的能力是一個好主意睁本。設計更多的自定義方式通常是避免真正找出每個用戶角色真正需要看什么的乏味過程的借口尿庐。最后,用戶獨自一人為自己構建視圖呢堰。

9.集成數據表或列表時屁倔,請確保它們是交互式的并且數據正確對齊。

當你需要顯示大量項目的大量信息時暮胧,數據表是一個很好的解決方案锐借。例如,最好將具有其ID往衷,狀態(tài)钞翔,聯系人,上次活動等的客戶列表顯示為數據表席舍。還有許多其他好處-充分利用空間布轿,提供容易的可伸縮性,簡化開發(fā)来颤,并且由于許多人已經習慣使用Microsoft Excel汰扭,因此用戶通常對使用網格感到滿意。這是查找和更改內容的簡便方法福铅。你可以在本文中找到有關數據表的更多信息萝毛。

10.最后設計儀表板。

由于儀表板是視覺上最令人激動的視圖之一滑黔,因此通常是要設計的第一件事笆包。我建議相反环揽。儀表板是其他所有內容的摘要視圖,并顯示來自應用程序各個部分的關鍵信息庵佣。最后設計它只會更實際歉胶。否則,在處理所有其他頁面時巴粪,你將需要不斷返回并更新儀表板設計通今。此外,在設計了大多數視圖之后肛根,將儀表板放在一起時衡创,你將擁有大量可使用的組件。

分享最新鮮的設計文章晶通!提供最優(yōu)質的設計服務璃氢!

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市狮辽,隨后出現的幾起案子一也,更是在濱河造成了極大的恐慌,老刑警劉巖喉脖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件椰苟,死亡現場離奇詭異,居然都是意外死亡树叽,警方通過查閱死者的電腦和手機舆蝴,發(fā)現死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來题诵,“玉大人洁仗,你說我怎么就攤上這事⌒远В” “怎么了赠潦?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長草冈。 經常有香客問我她奥,道長,這世上最難降的妖魔是什么怎棱? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任哩俭,我火速辦了婚禮,結果婚禮上拳恋,老公的妹妹穿的比我還像新娘凡资。我一直安慰自己,他們只是感情好诅岩,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布讳苦。 她就那樣靜靜地躺著带膜,像睡著了一般吩谦。 火紅的嫁衣襯著肌膚如雪鸳谜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天式廷,我揣著相機與錄音,去河邊找鬼。 笑死辜羊,一個胖子當著我的面吹牛寂屏,可吹牛的內容都是我干的。 我是一名探鬼主播蠕趁,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼薛闪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了俺陋?” 一聲冷哼從身側響起豁延,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎腊状,沒想到半個月后诱咏,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡缴挖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年袋狞,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片映屋。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡苟鸯,死狀恐怖,靈堂內的尸體忽然破棺而出棚点,到底是詐尸還是另有隱情倔毙,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布乙濒,位于F島的核電站陕赃,受9級特大地震影響,放射性物質發(fā)生泄漏颁股。R本人自食惡果不足惜么库,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望甘有。 院中可真熱鬧诉儒,春花似錦、人聲如沸亏掀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至温算,卻和暖如春怜校,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背注竿。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工茄茁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人巩割。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓裙顽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親宣谈。 傳聞我的和親對象是個殘疾皇子愈犹,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內容

  • 原文作者:Neil Turner。 如果你是一名專業(yè)的騎行者闻丑,那么你很可能聽過“Domestique”這個詞漩怎。對于...
    神經卡卡夕閱讀 2,207評論 0 8
  • ??首發(fā)于微信公眾號:小阿田的設計筆記~ 寫在前面 我們今天生活在技術時代每天都在發(fā)展著人工智能(AI),商業(yè)智能和...
    Tzw_n閱讀 558評論 1 7
  • 好像這世間所有的離別都是有預兆的 也許那次你給我講道理是我們最后一次那么聊了 從此以后可能也不會再見面 所以我說離...
    請喊我子木閱讀 315評論 0 3
  • 堅持星球,彼此加油 堅持星球的小伙伴們酸钦,大家晚上好!我是8月5號在能勵演說家大會上那個自問為什么來學習演講的東哥怪得。...
    東哥在江湖閱讀 210評論 0 0
  • 我寫下這些文字,一是借此告誡自己卑硫,你今天的所有一切來之不易徒恋,務當且行且珍惜;二是想告訴我的兒子晴谷欢伏,不管生活有多難...
    蔣坤元閱讀 1,764評論 18 72