B端中后台Dashboard设计分享

用户头像
成都/设计爱好者/5年前/766浏览
B端中后台Dashboard设计分享
用户头像
乔七菌

本文主要分享Dashboard是什么?以及设计dashboard的步骤

Dashboard是什么?

在《Information Dashboard Design》一书中对dashboard的解释:Dashboard对重要信息做视觉呈现,这些重要信息是为了达成一个或者多个目标而被统一组织在一屏内,以便能够一眼就得到监控。

简单的用一句话来说就是:帮助用户监控和分析数据,快速获取重要信息。


关于dashboard的误区

首先聊一下关于dashboard的认知误区,当我们打开各类搜索引擎搜索到的dashboard

大多如下图所示

(侵删)

这些视觉图看起来很漂亮,但在实际使用中……

1、感官超负荷

数据可视化过度设计,用户不容易看到他们需要的信息,反而增加了用户的负担。 

2、性能下降

仪表板从数据库提取数据负担变大,长时间的数据加载会影响用户体验。

3、关键信息显示区域变小

页面被大面积的图形元素占据,一屏内得不到多少内容。


设计dashboard的步骤


我将dashboard的设计步骤分为四步:

  • 第一步:确定用户角色

  • 第二步:分析用户场景

  • 第三步:选定dashboard内容

  • 第四步:信息展示


第一步:确定用户角色

谁使用,决定了Dashboard呈现的内容。

我们知道“用户角色”在C端产品中尤其重要,对于一个B端产品用户角色的创建相对更加简单清晰点,大部分情况下我们能够很清楚的知道Dashboard的目标用户是谁。


第二步:分析用户场景

知道了目标用户,我们就可以了解他们的目标需求和工作流程

to B的dashboard用户使用场景主要可以分为四大类

1、分析类

分析类的Dashboard主要是可视化的进行数据的分析,让我们进行分析时有依据,这种类型的Dashboard可以让看到整体运行的情况。

(小鱼易连CRM系统dashboard)

2、监控类

监控类的Dashboard主要提供关键指标的实时监测,特点是数据是实时更新的,方便及时告知用户异常状态。典型的如股票看板

(东方财富网股票看板)

3、工作台类

工作台类集中呈现业务分散的重点信息,用户还可以通过提供的入口快速跳转至相关模块。

(阿里云操作台dashboard)

4、综合类

很多实际使用场景中三大类型的dashboard是配合使用的,比如有赞的概览页,依次是分析、监控、工作台


第三步:选定Dashboard内容

清楚目标:

对于一个页面,设计师应该是清楚该页面的目标是什么,用户如何实现他们的目标,从而如何设计信息架构来达到这个目标。


分清主次:

业务数据必然有核心指标和细分维度指标,即各数据间有主次关系。我们需要挖掘出用户关心的数据,通过视觉设计,以吸引人的方式优先传达给用户。

这就要求设计师能熟悉业务数据,或者能访谈到用户,真实的从用户的需求出发,提炼的核心数据能够精确精准的反映业务水平。当然核心指标也不可过多,根据乔治米勒的7+2原则,人的短期记忆一般一次只能记住5~9个事物,因此核心指标在7个左右即可。


分步引导:

通过了解用户角色和分析产品需求,设计师对用户的工作流和数据的逻辑关联是有一定了解的。如果数据信息过多,可以重新梳理逻辑模块,分步引导,简化任务,让决定更加简单。


冗余信息:

当版面内容过少时,也可以增加些冗余的可视化信息来帮助用户提高认知。但是要记住可视化只是辅助用户认知和理解数据的工具,不可为了可视化而可视化,要能给用户带来价值。



五、小结

关于图表形式,需要特别说明几点细节问题,《information Dashboard Design》一书中有提到:

人对于面积和角度的敏感度不如对长度的感觉。饼图通常不是一个好的选择,除非很强调个体在整体中的比例,此时也可以用堆积条形图;

人对于横向长度的敏感度又高于纵向;

3D的数据图表又增加了纵深的维度会影响阅读和记忆;

要做到图表上每个像素都是有用不多余的,一般折线或柱状图已经足够用了。


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

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


2
举报
|
11
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
手表表盘UI系列
智能家居中心 简约 UI设计组件库
Security Camera UI kit
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
钱包ui模板
【新年UI图标】体育icon
【新年UI图标】秒杀icon
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
拟物风质感写实UI卡片合集源文件
【新年UI图标】30个图标
【新年UI图标】汽车icon
UI界面 组件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】会员icon
【新年UI图标】钱包icon
户外旅行飞机情侣假日出行
【新年UI图标】礼物/活动icon
3D渐变流体抽象矢量UI背景图
盲盒APP UI设计
我的钱包-UI界面设计-app
UI 登录界面设计模板包
新能源APP应用UIKit
你可能喜欢
相关收藏夹
大家都在看
登录注册