To B 端的 Dashboard 设计方法

时间:2023-01-19 | 标签: | 作者:Q8 | 来源:网络

小提示:您能找到这篇{To B 端的 Dashboard 设计方法}绝对不是偶然,我们能帮您找到潜在客户,解决您的困扰。如果您对本页介绍的To B 端的 Dashboard 设计方法内容感兴趣,有相关需求意向欢迎拨打我们的服务热线,或留言咨询,我们将第一时间联系您!

如何用最准确的媒介来清晰、直接地传达数据和其所表示的信息?Dashboard可以帮到你。

一、Dashboard的含义

早期dashboard是指汽车等产品上的信息面板,中文译名即仪表盘。



在Mac的OS系统内,dashboard是指包含各类小widget的面板。

目前我们说的dashboard承袭了仪表板的核心概念——通过图表、列表等形式,直接、高效、准确地向用户传递重要信息。

在dribble等网站上可以搜到很多作品(如下图)。不过除非是用于对外展示,否则dashboard的形式不必特别华丽。

因为对于To B用户而言,它的核心始终是传递信息。界面上的内容都应有存在的理由,一些额外的装饰可能会造成干扰。

我们要做的事情是:少做没意义的我国网络营销发展的概括事情,多把有用的信息呈现并突显出来。

二、设计步骤

设计dashboard时,可以按照以下四项逐步推进:

2.1 用户场景

进行用户场景分析时,需要明确“用户”和“任务”“数据内容”这三个要素。

用户需要通过(监测、分析、评估)内容去完成(一些特定的)目的。

对于用户:需要了解其身份、在公司内的职位、工作内容等。

对于目的:需要弄清是什么触发了用户使用dashboard的行为?用户访问dashboard的原因是什么?为了达到目的需要以什么频率访问dashboard?

对于内容:需要明白用户使用dashboard后需要做出哪些决定?哪些关键信息辅助自己做出决定?有哪些情况需要提醒用户等。

2.2 展示形式

根据数据内容选择不同形式或形式组合,例如dashboard内常用的图表、表格或列表等。其中,图表的特点是可以方便看出趋势但是难以索引 ,表格与列表反之。

同时,并不是所有内容都要以可视化的形式展现,只可视化必要而且能迅速看出端倪的东西。

关于图表形式,印象中初中的数学课就已经介绍过,在此就不赘述了。需要特别说明几点细节问题,信息设计大牛Stephen Few在他的《information Dashboard Design》一书中有提到:

  • 人对于面积和角度的敏感度不如对长度的感觉。饼图通常不是一个好的选择,除非很强调个体在整体中的比例,此时也可以用堆积条形图;
  • 人对于横向长度的敏感度又高于纵向;
  • 3D的数据图表又增加了纵深的维度会影响阅读和记忆;
  • 要做到图表上每个像素都是有用不多余的,一般折线或柱状图已经足够用了。

2.3 数据排布

要通过对业务的了解、对用户的访谈等对界面内各项内容的重要森宇控股集团有限公司性进行区分。用户必须看到或者必须去做的事情要放在醒目的位置,或者要给与强烈的视觉暗示,避免用户因为数据的不起眼而错过重要信息。

ToB产品内涉及的数据信息通常也很多,要对各部分内容进行有逻辑地分组。在排版上给与用户分组的暗示,让用户能更快速定位到需要的信息。在《Information Dashboard Design》这本书里,作者也在一直强调,设计dashboard即要让重要的信息一目了然。(关于数据排布的部分,还会再写一篇格式塔心理学的应用~之后奉上)

10.31更新:

数据排布主要涉及到三个心理学小知识:格式塔原则、短时记忆和神奇的X

2.3.1 格式塔原则

设计方法上,利用视觉感知的格式塔原则可以更合理地进行排布,以便用户高效获取信息。具体可以运用到以下几点:

接近性

通常我们认为彼此靠近的物体是属于同一组的。这个是最简单常用的分组的方式。

同时,可以灵活应用空格来引导用户浏览数据的方向。下图是作者在书中的例子,可以感受到因为间距的不同,会自动形成不同的浏览顺序。

相似性

相似性 – 我们倾向于将大小、形状、颜色热风的网络营销策划书 联、方向等一致的元素归为一组。可以通过这些特征来区分这些数据的集合,或者加强某一数据的集合。当我们想要表现的元素在dashboard中不得不分散的时候,可以用相似性来加强彼此的联系。

封闭性

视觉边界使我们将物体归为一组。通过使用边界,无论是颜色填充还是边框,可以圈定出一个区域,这是最直接有效的对信息进行分组的方式。

闭合性

很多时候我们会将开放的/不完整/不常见的结构视为闭合的/完整的/常规的。这一原则有助于减少dashboard内视觉元素的数量。

连续性

如果数据是连续出现的,那容易认为它们是作为一个整体的一部分,相邻的数据是彼此的延续。用这个原理来展示数据之间的关系,也可减少类似于网格线这样的视觉元素。

2.3.2 短时记忆

短时记忆(STM)储存的是当前最新的经验或思索内容,是刚刚产生的记忆。信息进入短时记忆,人们可以毫不费力地回忆起来,但这种记忆的容量非常有限。

在进行信息设计时,为了增强短时记忆,可以从视觉上对数据进行加工。例如运用颜色( 结合亮度与饱和度)、空间位置、外形(方向、长度、大小、形状、标记等)、还有运动等。这些都可用于dashboard来强化分组或强调某信息。这些特征不光能让用户注意到该信息,还可以让用户对该信息的印象更深。

此外,干扰信息可能会打断当前任务,并影响短时记忆。可以通过弱化干扰的方式来减轻其影响,例如将弹窗状态改为非模态;或者转换干扰的形式,用不同的感官模式呈现不同的信息,例如下载完毕的提示音,对视觉信息也不会有过多干扰。

2.3.3 神奇的X

神奇的7(Magic 7)是指人的短时记忆是有局限性的,能够记住的模块上限通常为72个。

这个理论由G.Miller在1956年提出,教育和设计领域都有很多应用。例如在教育领域中,我们在记单词时,可以将长单词划分为几个小模块进行记忆。在设计领域中常见的例子是手机号。如果直接显示十一位数字,既不利于识别,也不利于记忆。iPhone就采用了xxx xxxx xxxx的形式进行展示,可读性提升,记忆难度降低。当然,344的划分结构我猜可能和运营商与归属地也有关系,应该是综合考量后的结果。

Magic 7是流传比较广泛的一种说法。查找了一些资料后发现,其实学界有人提出了更进一步的观点,将短时记忆的容量定位在4个模块左右。具体到个例的话,每个组块所包含内容的复杂程度、间接干扰等对记忆的难度都会有影响。但总的来说,在进行信息设计时,可以试着将重要的模块控制在4个左右,以获得更好的信息传达效果。

2.4 交互方式

在完成以上几步后,需要根据内容细化交互方式。

例如信息关系是否有层级?如果有,那么是用什么形式去展现这个层级,下拉列表还是弹窗?还是会在图表内有进一步的交互动作(如下图)?



有哪些内容需要进行说明或者提醒?采用hover还是toast?

相似控件的交互方式是否保持一致?

……

三、小结

总而言之,dashboard是与用户进行信息展示与沟通的媒介,要用最准确的媒介来清晰、直接地传达数据和其所表示的信息。

Steven Few在书中提出,评价dashboard的好坏要看其组织是否合理、内容是否简洁、对相应用户群体或领域是否有针对性的定制化内容。我们在设计时也可以参考下这些标准。

Reference:

Stephen Few. (2006). Information Dashboard Design.

George Miller. (1956).

Nelson Cowan. (2001).

 

本文由 @鱼丸子 于。,

题图来自 Pexels ,基于 CC0 协议



To B 端的 Dashboard 设计方法

上一篇:80%的用户时间停留在前三屏,然而八年前完全不
下一篇:社交产品方法论(七):交互设计的二三事


版权声明:以上主题为“To B 端的 Dashboard 设计方法"的内容可能是本站网友自行发布,或者来至于网络。如有侵权欢迎联系我们客服QQ处理,谢谢。
相关内容
推荐内容
扫码咨询
    To B 端的 Dashboard 设计方法
    打开微信扫码或长按识别二维码

小提示:您应该对本页介绍的“To B 端的 Dashboard 设计方法”相关内容感兴趣,若您有相关需求欢迎拨打我们的服务热线或留言咨询,我们尽快与您联系沟通To B 端的 Dashboard 设计方法的相关事宜。

关键词:1年, dashboard, 初级,

关于 | 业务 | 案例 | 免责 | 隐私
客服邮箱:545321@QQ.com
电话:400-021-1330 | 客服QQ:545321
沪ICP备12034177号 | 沪公网安备31010702002418号