UI设计 | 更好的仪表板设计的10条规则

如今,仪表板设计是经常需要的。一种可视化的视图,该视图可以显示所有信息,显示趋势和风险区域。

对我来说,仪表板-是用户一眼就可以看到的最关键信息的预览,并且是一种直接导航到需要用户注意的应用程序各个区域的简便方法。术语“仪表板”是汽车仪表板的隐喻,有时也称为驾驶舱区域,通常位于飞机或太空飞船的前部,飞行员从中控制飞机。

在企业项目上工作了多年,我设计了无数的仪表板。每一个新的挑战对我来说都是下一个挑战。一个好的仪表板可能是设计中的一项艰巨任务。根据我的经验,我整理了一系列有用的建议,以在将来为你提供帮助。无论你是刚开始做设计还是经验丰富的设计师,我都可以确保你在这里找到一些有趣的东西。

1.定义仪表板的用途。

像产品中的任何其他视图一样,仪表板具有特定的用途。弄错了,会使你的进一步努力变得毫无意义。根据仪表板的用途(分析,战略,运营,战术等),有多种流行的方法可以对仪表板进行分类。

为了简单起见,我将它们分为两种更一般的形式:

操作仪表板

操作仪表板的目的是在用户参与时间紧迫的任务时,将关键信息快速传递给他们。操作仪表板的主要目标是向用户快速清楚地显示数据偏差,显示当前资源并显示其状态。这是一个数字控制室,旨在帮助用户快速,主动和高效。

操作仪表板关键质量

分析仪表盘

与操作仪表盘相反,分析仪表盘为用户提供了用于分析和决策的快速信息。它们对时间的敏感度较低,并且不专注于立即采取行动。这种仪表板的主要目标是帮助用户最好地了解数据,分析趋势并推动决策。

分析仪表板关键质量

你需要的仪表板类型应由用户角色确定,并且需要满足你的需求。你的产品可能具有多个角色,每个角色都应该拥有一个唯一的仪表板。下层经理可能需要操作仪表板,而上层管理人员可能对分析仪表板的需求更大。设计人员经常将这些混合在一起,为用户提供快速反应和采取行动的假设,并进行大量分析,反之亦然。

2.选择正确的数据表示形式。

当我们谈论仪表板时,我们谈论图表。数据表示是一项复杂的任务,尤其是由于你希望在仪表板上显示多种类型的信息,无论其是随时间的静态还是动态变化。这可能是非常具有挑战性的。选择错误的图表类型或默认为最常见的数据可视化类型可能会使用户困惑或导致数据误解。

可以帮助你查看数据关系的图形类型

散点图主要用于相关性和分布分析。气泡图有助于将三维图引入图表。

当数据点之间即使是最细微的连接都非常重要时,网络图也很方便。

可以帮助你比较值的图形类型

使用可视化方法比较一个或多个值集比查看网格中的数字要容易得多。柱形图和折线图可能是最常用的。一些建议:

-当维度之一是时间时,它应该始终是X轴,因为图表中的时间从左向右流动

-使用水平或垂直条形图时,请尝试按最大值而不是随机地对列进行排序对它们进行排序。

-使用折线图时,图表不应显示超过5个值,而对于条形图,建议不要显示超过7个值。

可以帮助你查看构图的图形类型

饼图和甜甜圈图在数据可视化方面声誉不佳。这些图表是最常用的图表之一,也是最经常滥用的图表。当组件过多或包含非常相似的值时,很难阅读它们。当涉及到角度和面积时,人类很难区分值。

可以帮助你查看分布的图形类型

分布图可帮助你说明异常值,正态趋势以及值中的信息范围。

避免使用的图表类型

但是应完全避免某些图表类型。过去,仪表板是大趋势,但尝试以数字方式复制物理对象是一个坏主意。3D图表和样式过大的图表具有较低的可读性,使查看者无法看清数据,甚至更难以开发,因此没有理由使用它们。

何时使用各种图形类型

为了帮助你为图表选择正确的表示类型,请问自己以下问题:

-你想在单个图表中显示多少个变量?

-你会在一段时间内还是在项目或组之间显示值?

-每个变量需要显示多少个数据点?

3.遵循清晰一致的命名约定和一致的日期格式,并截断较大的值。

仪表板的主要目标是一目了然地传达信息,每件事都很重要。使用清晰的框架的最大好处是数据一致性。如果你在每个工具中用相同的方式命名数据,则使用这些工具将更加容易。

4.定义布局和流程。优先排序。

网格可以帮助你轻松实现有效的对齐和一致性,并为你的设计创建基本结构或框架。它们由可放置设计元素的“不可见”线条组成。这样做可以将它们捆绑在一个整体的“系统”中,并合理地支持你的构图。这对于仪表板设计至关重要,因为你将需要以无缝方式组织大量信息。

网格和模块

在决定应包含哪些信息时,请记住以下几点:

-屏幕的左上角自然会吸引更多注意力,因此请尝试从左到右放置关键信息。这是基于我们阅读信息的方式,因此它可能会因你要设计的用户区域而异。

当读者完成第一行时,他们将移至下一行。

-如果存在依赖关系,这将影响基于另一组信息做出的一组信息的决策,则以用户不需要来回移动的方式创建布局-创建连续的流程以轻松在仪表板上进行扫描。

5.使用结构一致的构件。

定义网格后,我们可以使用多个“小部件”开始工作,这些小部件将保存信息,图表和控件。卡片很容易安排。关于卡片的最重要的事情是它们几乎可以无限操作。它们是响应式设计的不错选择,因为卡片充当内容容器,可以轻松按比例放大或缩小。

卡片的一个重要特性是内部控件和数据的一致布局。将名称放在左上角,将视图控件或操作与卡片的右上角对齐,然后将其余内容留在卡片上。当所有人都拥有一致的结构时,用户可以更轻松地使用该界面-他们在期望的地方找到所有东西。

在响应式设计或用户自定义方面,使用上述建议的布局还具有灵活性的其他好处。当卡变大或变小时,所有主要组件仍固定在特定位置。这也对开发人员以及将来设计的整体可伸缩性都有利。

6.留白

空白空间,也称为负空间,是设计合成中元素之间的区域。读者通常并不了解负空间的重要性,但设计师对此非常关注。如果空白不平衡,将很难阅读。这就是为什么负空间与其他任何版式元素一样重要的原因。

12px vs 24px边缘视觉差异

7.不要隐藏信息或过多地依赖交互。

仪表板的主要目标之一是一目了然地显示信息,因此依靠滚动或许多交互作用会削弱整个目的。

帝国仪表板

设计长的可滚动仪表板是设计人员最常犯的错误之一。他们试图以清晰的方式显示更多信息,将它们一个接一个地放置,以避免使用户不知所措。结果,用户可能只会发现屏幕折叠上方可见的信息。下面的所有内容都很少受到用户的关注。那有什么意义呢?

解决方案是确定优先级。经过更多的研究和访谈之后,你应该能够识别核心信息。你应该只在折叠上方的空间上进行显示。不要讲完整的故事,而是总结一下,只显示关键信息。你可以使用其他交互方式来容纳更多内容,而不会用数据淹没用户。

不要依赖过多的交互来获取表面信息

交互作用有助于显示辅助信息。完全依靠它们作为使用仪表板的主要方法是一个大错误。在上面的示例中,我们看到用户将如何痛苦地在多个选项卡之间切换以获取完整图片。这会隐藏用户所有其他选项卡中的信息,就像折叠下的内容一样。

数据过载的仪表板示例

试图真正使你的仪表板提供更多信息可能会导致极端情况。我们应该永远记住,人类在一次跟踪多个事物方面很不好。不要对用户提出过多要求,也不要让数据淹没他们。最多使用5–7个不同的小部件来创建视图。否则,用户将难以集中精力并获得清晰的概览。

8.个性化而非定制。

用户期望他们看到的内容将与他们的个人需求相关。个性化和自定义是可以帮助你确保用户看到对他们重要的技术。

个性化由系统本身完成。应该设置系统以识别用户,并向他们提供与其角色相匹配的内容,体验或功能。定制由用户完成。系统可以使用户通过配置布局,内容或系统功能来定制体验或对其进行更改以满足他们的特定需求。

可定制的仪表板

只要视图已被个性化,赋予用户更多自定义仪表板的能力是一个好主意。设计更多的自定义方式通常是避免真正找出每个用户角色真正需要看什么的乏味过程的借口。最后,用户独自一人为自己构建视图。

9.集成数据表或列表时,请确保它们是交互式的并且数据正确对齐。

当你需要显示大量项目的大量信息时,数据表是一个很好的解决方案。例如,最好将具有其ID,状态,联系人,上次活动等的客户列表显示为数据表。还有许多其他好处-充分利用空间,提供容易的可伸缩性,简化开发,并且由于许多人已经习惯使用Microsoft Excel,因此用户通常对使用网格感到满意。这是查找和更改内容的简便方法。你可以在本文中找到有关数据表的更多信息。

10.最后设计仪表板。

由于仪表板是视觉上最令人激动的视图之一,因此通常是要设计的第一件事。我建议相反。仪表板是其他所有内容的摘要视图,并显示来自应用程序各个部分的关键信息。最后设计它只会更实际。否则,在处理所有其他页面时,你将需要不断返回并更新仪表板设计。此外,在设计了大多数视图之后,将仪表板放在一起时,你将拥有大量可使用的组件。

分享最新鲜的设计文章!提供最优质的设计服务!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容

  • 原文作者:Neil Turner。 如果你是一名专业的骑行者,那么你很可能听过“Domestique”这个词。对于...
    神经卡卡夕阅读 2,128评论 0 8
  • 👆首发于微信公众号:小阿田的设计笔记~ 写在前面 我们今天生活在技术时代每天都在发展着人工智能(AI),商业智能和...
    Tzw_n阅读 530评论 1 7
  • 好像这世间所有的离别都是有预兆的 也许那次你给我讲道理是我们最后一次那么聊了 从此以后可能也不会再见面 所以我说离...
    请喊我子木阅读 296评论 0 3
  • 坚持星球,彼此加油 坚持星球的小伙伴们,大家晚上好!我是8月5号在能励演说家大会上那个自问为什么来学习演讲的东哥。...
    71d3c008fdd9阅读 186评论 0 0
  • 我写下这些文字,一是借此告诫自己,你今天的所有一切来之不易,务当且行且珍惜;二是想告诉我的儿子晴谷,不管生活有多难...
    蒋坤元阅读 1,758评论 18 72