首页

用户体验大小事—数据可视化设计五点论

seo达人

1.数据可视化为主的APP分类

常使用数据可视化的APP大致分为这几类:「天气类」「生理健康类」「财务记账类」「数据分析类」「运动健身类」等。下面为大家介绍一些代表性的APP。

 

「天气类」

「墨迹天气」和「天气通」根据城市实景和当下天气对实时景观图进行模糊处理,增强产品的关联性和代入感。

「生理健康类」

Clue会根据不同阶段的心情做可视化,比如易孕期会用一些生理图形提醒用户你的状态。这或许会给我们做自己的产品带来一些思考。

你今天真好看是一款人工智能测肤美妆的应用,会使用各图表阐明你的肤质水平。

「财务记账类」

记账类APP和理财类APP几乎囊括了所有图表样式,折线图、饼状图、条形图都不在话下。

「专业数据分析类」

移动端设备的高速发展,使专业的数据分析平台不再局限于PC端展示,于是移动端的数据分析软件也应运而生。以下为友盟和神策商店图。

「运动健身类」

移动设备在消费市场得到很大的变化——从手机到可穿戴设备。移动设备越来越实惠,实现了前所未有的大面积普及。

大家对步数、饮食、体重等数据也更加看重。市面上做的比较好的APP有:keep、薄荷健康、小米运动等。

同事给我推荐了一个应用—garmin connect(佳明),它的界面缤纷、数据丰富、但是却不会让人感受到焦躁,这里面包含了一些设计原理。

介绍这么多数据可视化为主的APP,相信大家对数据可视化已经有了初步的感受。想要做好数据可视化应该怎么着手呢?以下结合实际案例进行说明。

 

2.可视化数据图的配色

在上篇文章我们了解到,颜色是有温度和进退性的,不同的配色带来不同的体验。因此,可视化设计也需要考虑到配色对数据的影响。

 

「深色底」

深色底图表通常为了营造一种氛围和感觉,展示出的数据信息一般不会特别繁杂,数据选用亮度较高的色彩,这样数据信息容易从深色中跳出来。

「浅色底」

如果需要清晰展示大量的数据,建议选用浅色底,浅色底上识别度相对较高。但需要注意的是:如果数据信息量太小,浅色底上会显得页面太空,这会让用户觉得你的平台没有内容或者热度。当然,有经验的设计师可以通过图形质感、颜色等优化。

下面就以小米运动为例:我们对2个页面的阅读效率进行比较。在以数据分析为主、有大量数据的页面中,浅色底的页面可读性更高,阅读效率也更高。

「彩色底」

有时为了让页面更加生动,我们将数据信息展示在大面积色块上。商务金融类APP可采用用蓝色、绿色系作为底色。运动类APP可选用的色彩自由度更高,偏活力的色彩,如橙色、黄色、橘色等都可以。

「图片底」

图片底:为了让数据更有可信度和关联度,在一些天气类APP中经常会使用这种方式,图片内容与数据信息产生关联,提升可读性。

 

3.各类图表的使用场景

每种图表都会对应它适合的数据类型。作为设计师一定要了解它们之间的对应关系,使得设计有理有据。

 

「折线图」

显示为一组由单个线条连接的点;用于表示在一段连续时间内发生的大量数据波动,有单折线图和多折线图之分。

「曲线图」

显示为光滑的曲线;如果数据是连贯的,且点与点之间的数据具有分析价值,用曲线图比用折线图合适。

「饼图&环形图」

环形图可以理解为空心的饼状图。常用于显示部分相对总体的百分比。还可用来显示进度加载等。

「条形图&柱状图」

条形图可以理解为横着的柱状图。常用于展示同属性的数据、可以对比其数值。

「热度图 / 热力图」

常用于地理位置分布统计,进而可以分析景区、站点、高速等的人流分布状况。另外APP界面的点击热力图可以清晰展示哪个功能被点击的次数最多,给我们带来体验优化的依据。

「雷达图」

在比较多个类别程度和查看整体情况很适合,既可以查看自身整体情况,也可以对比多个方面的数据。这是一种展示效果不错的数据表达方式,在展示整体综合信息上很直观。

 

「仪表盘」

仪表盘设计最初来源于工业设计的车辆控制台,由于其专业、科技感的内核,现在多被一些强调科技、专业的产品所借鉴、例如网络监控、金融信用等。

 

4.图表运用到界面中去

了解基本的图表类型后,接下来的重点是图表的界面设计。移动设备的屏幕较之PC端小,用户每次可接收的数据信息量小,所以如何有效运用图表的设计是我们需要掌握的一项很重要的部分。

 

「单个数据」

页面中就展示一个比较重要的数据,如何设计?圆形是一个不错的选择,因为它可以在页面中形成视觉中心。不管是饼状图,还是环形图,或是拥有视觉中心的雷达图,都会让页面上呈现一个视觉重点。

上图的案例,为了让页面更加丰富,采用重色将界面撑满,求得视觉上的饱满。

 

「多组数据」

手机屏幕空间有限,多组数据在展示的时候一定要尽量让主次数据的图表类型不一致。曲线图、饼图、环形图、柱状图等基础图表,交替使用,这样使得整个页面层次清晰,内容丰富。最常见的错误就是设计师没有对信息区分层级,所有的内容看起来都一样重要。

当设计师面对几大模块展示大量的数据信息时,建议每个模块单独采用一种图表类型,各个模块的图表类型均不同,这样会减轻用户对数据展示的疲劳度。

 

5.可视化数据的动效

动效可以提升产品趣味性,尤其在展示大量数据信息时,使用动效能缓解阅读压力。数据图表中常见的动效有以下几种:

 

「动态呈现数据」

「导航切换」

「功能动态切换(点击按钮切换形态)」

「屏幕横纵向切换数据」

 

写在最后:希望我们都能好好把握数据可视化,把握数据时代,真正让数据驱动业务,驱动发展。不过我们也不要为了使自己的设计看起来炫酷而加上各种发光渐变,过分的动效导致加载无能,因为完美的方案不是没什么可以加,而是没什么可以减。


作者:一个辛普森

 转载请注明:学UI网》用户体验大小事—数据可视化设计五点论

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



数据可视化必修课 – 图表篇

seo达人

一  什么是图表

图表的定义:可直观展示统计信息的属性,对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地可视化的手段。

英文叫法:Chart。

用户对图形的敏感程度远远大于文字,所以产品就需要把数据信息可视化,用简单的图形表示出更多的信息量,而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图表的具体构成及元素解析。

 

二  图表的构成

图表是由:标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成,每一个元素都有他存在的意义。在实际使用中不一定非得把元素全部展示出来,精简化显示想要展示的内容即可。

图片

 

三  图表元素解析

3.1  标题

顾名思义,标题就是图表的名字,标题是必不可少的元素。标题的内容一定要言简意赅,不要太长,能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个:左上角、顶部居中、底部居中

图片

一般情况下,标题字号 / 色值要突出一些,用户第一眼看到 chart 的时候,要清晰的看到这个图表是做什么的。

特殊情况下,如果需要对标题有额外解释的话,两种展现形式:

  • 增加提示图标;
  • 增加提示语。

图片

 

3.2  图例

3.2.1  图例的组成

颜色、名称、数值、单位。

图片

 

3.2.2  图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

图片

 

3.2.3 图例的位置

从左至右、从上至下。

图片

 

3.2.4  图例的作用

  • 标识出每个颜色所代表的的类别;
  • 开启 / 隐藏数据显示;
  • 图例显示的数值一般为当前值。

 

3.2.5  图例的颜色选择

同一组图例中,不要出现相近的颜色,否则在图表显示中分不清彼此。

图片

产品使用中,要规范图例颜色使用,一般分为两种:

  • 常用的图例颜色(颜色本身代表着行业中的某种含义),此类颜色需要是固定色值,无论哪个 chart 中,都是这个颜色;
  • 无特殊含义的图例,可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色,图例整齐划一。

 

3.2.6  图例过多时如何展示

  • 如果图例可整合前提下,展示主要图例 / top n 图例,其他的图例做整合,增加个详情页来展示完整的;
  • 如果图例不可整合/省略,则需要给出足够的展示空间。

 

3.2.7  共用图例

如果多个 chart 的图例一样,可进行合并,减少冗余图例。

图片

 

3.2.8  图例省略

如果 chart 中只有一个图例的话,可省略。

图片

 

3.2.9  图例名称限制

根据不同使用场景,为了更好的展示效果,要给图例名称设置一个最大值,超过最大值后省略展示。

图片

 

3.3  坐标轴

坐标轴分为 X 轴和 Y 轴,常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到2X+Y 或 X+2Y。

图片

 

3.3.1  刻度值代表的意义

  • 时间点:12:00;
  • 时间段:周一、周二。

图片

 

3.3.2  坐标轴使用规则

是否带单位:

  • 如果刻度值的含义明确的情况下,可以不用带单位,比如:2018、2019、2020…;
  • 如果刻度值含义有歧义的情况下,必须加上单位(具体是统一一个位置加单位,还是每个刻度值上加单位,则需要根据场景来判断)。

图片

对齐方式(常用,但非必须):

  • X 轴:居中对齐;
  • Y 轴:右对齐。

图片

刻度值过多时如何显示:

  • 可选择规律性省略刻度名称;
  • 倾斜文字以显示更多的文案。

图片

 

刻度值的选用一定要是同一个规律,禁止同距离的刻度值代表不同数据。

刻度点的样式使用规则:刻度的线朝外。

图片

 

3.4  数据展示

数据的展示是 chart 中最为明显的地方,可以说如果只显示一个元素的话,就是他了。

数据展示的使用规则:

  • 边界要清晰,不可虚化;
  • 多个数据同时显示的时候,要保证每个数据都能清晰的看到,可以采用透明度来保证所有数据的显示。

 

3.5  网格线

3.5.1  网格线的作用

呼应坐标轴,美观度。

3.5.2  网格线的使用规则

  • 线的颜色要弱化,不要喧宾夺主;

图片

  • 网格线使用实线居多,尽量不用虚线。

 

3.5.3  使用场景

横、纵、横纵结合、无网格线。

图片

 

3.6  提示信息

通常情况下,提示信息用来标识出 chart 中重要点的数据信息,需要注意的是:重要信息尽量简化,信息量不要太大,言简意赅就好。

图片

 

3.7  水位线

根据不同产品的使用场景,有的时候会用到阈值,当达到某个阈值后,就会触发某种联动。这个时候就需要有个水位线了,它起到警示的作用。

形式有两种,实线和虚线,颜色的选取则取决于产品的警告级别。

水位线可以是一个,也可以是多个,视情况而定。

 

3.8  时间轴

时间轴可以灵活地调节刻度值的上下限,从而更精确的看到自己想看的数据。

时间轴的功能及限制不是很复杂,所以就不过多解释了,需要用的话就用。

 

四  图表使用建议

4.1  折线图 line

4.1.1  定义

折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。

折线图是通过线条的波动来表示数据的波动,主要体现的是数据随着时间的推移而变动的图表。

图片

 

4.1.2  使用场景

常用于观察一段时间内数据波动的浮动变化,比如:一天内内存的使用情况。

 

4.1.3  使用建议

  • Y 轴刻度值选择要合理,当前显示的数据波动要最大化的显示;

图片

 

  • 重要节点可以单独做重点标注;

图片

 

  • 数据拐点要平滑,不要太锋利。

图片

 

4.2  面积图 area

4.2.1  定义

面积图和折线图比较类似,区别在于面积图把数据区域做了个面积划分,让数据的显示更加清晰。

图片

 

4.2.2  使用场景

面积图展示尽量不要超过 3 个图例,否则数据多的情况下,数据的展示会特别乱,影响观看。

 

4.2.3  使用建议

  • 面积区域要和折线的颜色用统一色系,不要换色系;

图片

 

  • 面积区域一般要比折线颜色浅一些,这样视觉上更加让人舒适;

图片

 

  • 如果多条数据情况下也用面积图的话,面积区域尽量使用透明度,否则有的数据会被遮挡看不到。

图片

 

4.3  柱状图 bar

4.3.1  定义

柱形图,又称长条图、柱状统计图。用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常用于较小的数据集分析。

图片

 

4.3.2  使用场景

  • 柱状图分为横向和纵向两种展现形式。
  • 用于在同一维度下不同数据的对比,用柱状图更能清晰的对比出数据的差异化。

 

4.3.3  使用建议

  • 柱状图的厚度不要是固定值,要做成自适应来应对不同尺寸的分辨率显示;

图片

 

  • 厚度与间距的对比要合理设计;

图片

 

  • 可使用小圆角,千万不要用大圆角,太丑了……

图片

 

  • 如果想要强调某个柱子的话,可以进行颜色区分,但是柱子颜色不要超过 2 个(同一维度下);

图片

 

  • 如果想要在柱子上显示数值的话,使用建议(下面的顺序为推荐顺序):
    • hover 的时候出现数值;
    • 数值默认在柱子上显示;
    • 数值在柱子顶部 / 右侧显示。

 

4.4  饼图 pie

4.4.1  定义

饼图仅排列在工作表的一列或一行中的数据,它是有一个总和数据,方面查看每个类别分别占总数据的百分比的一种图表。

图片

 

4.4.2  使用场景

  • 常用于做总结、年度汇报等;
  • 所有数据相加必须是 100% 才可用。

 

4.4.3  使用建议

  • 每个数据要使用单独的颜色来表示,不要有相同颜色;
  • 饼图中不能有负值;
  • 图例数量没有限制,但是如果遇到可以合并的图例,可以进行合并;
  • 饼图的开始点为 0/12 点位置。

图片

 

4.5  环形图

4.5.1  定义

环形图是由两个不同大小的圆叠在一起,切割中心部分得到的一种图形。

图片

 

4.5.2  使用场景

  • 环形图有一个独有的特点,就是可以在中心圆的位置突出某一项指标的数值。
  • 它常用于做数据的监控,监控某一类指标是否正常。

 

4.5.3  使用建议

  • 环形图的开始点为 0/12 点位置;
  • 环的粗细要合理,不要太粗和太细;

图片

 

  • 环形图的两个圆要从中心对齐。

图片

 

4.6  堆叠面积图

4.6.1  定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

图片

 

4.6.2  使用场景

常用于不同资源中流量 / 容量的使用。

 

4.6.3  使用建议

  • 不要有重复的颜色;
  • 尽可能的把数据量按大小的顺序,由下至上的堆叠。

 

4.7  堆叠柱状图

4.7.1  定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。

图片

 

4.7.2  使用场景

常用于不同维度下相同几个指标的展示。

 

4.7.3  使用建议

  • 不要有重复的颜色;
  • 按重要等级由下至上排序。

 

4.8  非常用图表

上面介绍了常用的图表的使用建议,但是图表类型远远不止于此,还有很多非常用的图表类型,这次我先给大家列出来,如果大家感兴趣的话,我后面再写一期冷门图表的使用建议:

雷达图,散点图,K线图,盒须图,热力图,旭日图,桑基图,树图,漏斗图,仪表盘

 

图片

 

五  常用的图表开源网站

5.1  echartsecharts

https://echarts.apache.org/zh/index.html

图片

 

5.2  highcharts

https://www.highcharts.com.cn/

图片

 

5.3  antv

https://antv-g2.gitee.io/zh/examples/gallery

图片

 

总结

Chart 是数据可视化必修课中最重要的模块之一,不可忽略。只有了解每个 chart 的定义及使用场景,才能在产品中用到最合适的那一个。


作者:Luckgg

转载请注明:学UI网》数据可视化必修课 – 图表篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



数据可视化必修课 – 表格篇

seo达人

一  什么是表格

表格是一种数据可视化的一种形式,可以查看和处理大量数据,它主要承载了数据的收集、整理、组织、展示、对比归纳

 

二  表格的设计原则

图片

2.1  易读性

表格的层级一定要划分的非常清晰,层级分明。你要让用户更关注的是数据本身,而不是花里胡哨的样式。

2.2  可寻性

列表以易于浏览的逻辑排序,提供合适的搜寻组件帮助用户快速查找信息。

2.3  高效性

表格要用最短的时间告诉用户想要得到的信息。

2.4  灵活性

可以让用户根据自己的习惯及兴趣自定义自己的表格展示,比如排序、筛选、调整表头顺序等功能。

 

三  表格的构成

外部区域:标题、操作区、筛选区

内部区域:表头、表体、表尾

图片

介绍完表格的构成,我们再来把每一个元素拆解出来详细介绍。

 

四  表格元素解析

4.1  标题

标题是整个表格内容概述的名称,此名称尽量简洁明了,不要太长,能两个字写清楚绝对不用三个字。

如果标题名称难以理解的话,可以加二级提示,有两种常用样式:tooltips(常用)、二级提示语

标题的位置一般在左上角。

 

4.2  操作区

对表格内容的增删改等操作的区域。

使用建议:

4.2.1  有且只有一个主操作

特殊情况下可以没有主操作,但不能有两个主操作。

图片

4.2.2  样式统一

同一个产品中,操作区样式规范要保持一致。

图片

4.2.3  操作的优先级

根据使用的优先级,把常用的操作放到一级展示,不常用的收到二级展示。

4.2.4  不同操作状态区分要明确

不是所有的操作都是可以直接用的,比如有的操作在没有选择内容的时候是 Disable 状态,那这时候就要和其他可操作的有明显的样式区别,否则容易让用户分不清可不可以操作。

图片

4.2.5  刷新按钮

有很多同学对这个操作是不是有些疑惑?有人觉得浏览器都有刷新功能啊,干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的,这个刷新只针对于列表内的内容。

在有的后台管理界面中,因为数据量很大,如果每次刷新都用浏览器自带刷新的话,他会重新加载整个页面的内容,很不好用。很多情况下,用户只想重新加载一下列表的内容,那这个刷新就很好用啦。

同时刷新后要有即时反馈,告诉用你他点完操作后目前处于哪个阶段中。

4.2.6  导出功能

此功能可以把列表内容导出为你想要的格式(一般为 word / pdf)。

数据量较大的列表中,导出功能可以很方便的把自己过滤的内容下载到本地进行其他需求的查看。

导出内容的范围是哪些一定要事先想好,一般下载内容的范围以下几种:

  • 当前页所有列表内容(常用,而且实现难度很低);
  • 经过二次过滤后,导出所有页上的列表内容;
  • 所有页的列表内容(不常用,而且实现及数据处理难度会非常大,慎重选择)。

4.2.7  导入功能

既然可以导出,就有导入。导入报表对文档会有要求,一般都是固定格式的文档,而且文档与列表中的字段都可以一一对应上,才可以完美导入。导入功能中 word 和 excel 是最常用的格式。需要注意的是,导入文档后最好有二次确认提示,告诉用户上传了哪些内容,同时该内容是否与现有的列表字段有冲突。

4.2.8  自定义内容

自定义分两种:

  • 可以设置某列内容是否展示(需要注意的是:列内容展示数量可以不设置上限,但必须设置下限);
  • 可以设置每一列内容的左右排序。

如果表格内容比较多的情况下,这两个功能是很有必要的,如果内容少,则可忽略这两个功能。

那怎么区分内容的多与少呢?

我的理解:常用分辨率下,一屏可显示完整内容的话为内容少;反之则内容多。

 

4.3  Tab(标签切换)

可以快速切换不同维度下的表格内容。

使用建议:

  • 不同状态区分要明显;
  • Tab 数量不宜过多,如果不可避免的数量过多的话,一般有两种方案:
    • 最多显示出 5 个 Tab,超过 5 个 Tab 放在“更多里面”;
    • 交互上支持左右滑动 / 切换 Tab。
  • Tab 只放文本,最多可以放个 icon,尽量避免其他干扰信息;
  • Tab 信息要精简。

 

4.4  筛选区

筛选区是对表格数据的主观再处理,用户根据筛选功能可以得到更精准的信息。

4.4.1  搜索功能:

4.4.1.1  模糊搜索 or 精准搜索

搜索首先要确定哪几个字段可以被搜索到,名称?编号?等等…

模糊搜索使用的频率居多,毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的,两者皆可选择,根据产品选择即可。

4.4.1.2  单字段搜索

输入单字段进行搜索,比较常用的方式之一。

图片

4.4.1.3  多字段组合搜索

可以输入多个字段进行组合搜索(取并集),一般交互方式为回车完成书写。此方式比单字段搜索更加精准,数据量过大的时候优势就很明显了。

图片

4.4.1.4  切换类别搜索

可以设置几个常用的类别来快速切换搜索的维度,方便用户使用。

图片

4.4.1.5  多类别组合搜索

多类别组合搜索适合更加复杂的列表内容,并且类别名称会展示出来,可以比较清晰的看到用户用的哪种类别名进行搜索的。

图片

4.4.2  筛选的样式

输入框、下拉选择、日期选择器、单选、多选。

 

4.5  表头

每一列列表的小标题,是对整列内容的描述。

表头区域比较常用的几个功能:排序、过滤、进一步解释/说明、拖拽排序、拖拽增加 / 缩小列宽

 

4.6  表体

表体承载了表格的主要内容,它的内容形式有很多:文本、icon、进度条、标签等等。表体样式分为两种:斑马线和线条分割。

使用建议:

  • 内容决定表格的高度,一般设置 2~3 种行高就可以满足大部分场景了;
  • 把全局唯一且最重要的字段放在第一列,比如:名称。同时可以把名称固定在列表左侧,就算列表横向内容过多的时候,也可以第一时间看出区别;
  • 要设置最大宽度和最大高度,避免特殊情况下的内容展示;
  • 对齐方式:普通文本左对齐,数字类右对齐(记住就行,这是规范);
  • 最多支持二级列表,不可再多;
  • 可以把一些常用的操作放出来,放在列表最后一列。

 

4.7  表尾

表尾主要是展示表格的统计信息、分页、跳转页面等。每页显示条数常规情况下默认为 10/页,最多 200/页,再多的话加载速度会变慢,影响使用体验。

 

五  列表详情交互展现

5.1  弹窗

  • 模态对话框:用户在当前页面弹出一个弹窗,除此弹窗内容外不可操作其他区域内容,产品的主观意识较强。
  • 非模态对话框:也是弹出个弹窗,但是与模态对话框不同的是它不打扰其他用户操作,此弹窗存在的时候,用户同时也可以操作其他区域,产品的主观意识较弱。

5.2  抽屉

抽屉现在使用的频率也是蛮高的,它的好处很明显:在当前页面弹出个抽屉,可展示的内容区域比弹窗多了很多,同时如果区域不够用的话,还可以增加 Tab 来展示更多信息。而且不同资源的抽屉切换也比较方便。

缺点就是:并不能完全让用户的聚焦于某个信息的详情,存在一定程度的信息干扰。

5.3  跳转页面

直接跳转个新页面作为详情,好处就是可以展示更多的内容信息以及可以让用户更聚焦于当前内容。

缺点就是:新开页面这种操作本身就比较重,如果在当前页面可解决的事情,切记不要让用户新开页面。

5.4  嵌套

嵌套就是上面提到的二级列表,它一般用于一级列表的内容补充,并且内容不宜过多。

 

在最后

在数据可视化中,表格是最常见的一种,它的知识点有很多,本篇文章只是到目前为止我的一些认知,如果有漏掉的知识点欢迎指教,我们都是学生,都要学习。


作者:Luckgg

转载请注明:学UI网》数据可视化必修课 – 表格篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



深度解析B端数据可视化-信息图表篇

seo达人


 

那么我们还是老规矩,想要了解一个事物首先需要知道的是它的定义

 

1.1 数据可视化的定义

较为笼统的来说数据可视化是一种由图形、图像、数字等元素组成的语言用于解释、呈现目标数据之间的关系。从这个定义上来看,数据可视化从外观层面来说是与图形、图像这些视觉元素密不可分,这也是数据可视化最为明显的特征

而结合我们实际的生活与工作来说,数据可视化是一种以图形符号为主要表现形式,将不可见的、抽象的、复杂的、枯燥的、专业的、不直观的数据内容,有趣的、浅显的传递给用户的有效手段。用户可以通过这样的手段在数据完成自己的目标(例如对选定范围内的数据进行分析发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下研究对象的情况等)这也是数据可视化最为明显的价值

 

1.2 可视化发展简史

关于可视化的发展史上可追溯至1950年,当时人们利用计算机创建出了首批图形图表,可以说是数据可视化图表最为早期的雏形,而在50-60年代的可视化中又以查尔斯·约瑟夫·米纳德的《1812-1813对俄战争中法军人力持续损失示意图》为代表

 

该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后军力损失的状况,也是后世分析拿破仑对俄战争的重要数据分析资料,后来这种带状图被称为“桑基图”用来解释能量的流动

而可视化真正被提到一个应用理论的高度是到了1987年布鲁斯·麦考梅克和马克沁·布朗所编写的美国国家科学基金会报告《Visualization in Scientific Computing》(科学计算之中的可视化),其意在强调了基于计算机的可视化技术方法的必要性,此时的概念已经与现在我们所接触的工作中的数据可视化是非常接近

到了90年代初人们发起了一个称为“信息可视化”的研究领域旨在为许多应用领域(科学、商业、行政、财务、数字媒体)之中对于抽象的异质性数据集的分析工作提供支持,与前面提到的“科学可视化”交叉形成了现在耳熟能详的“数据可视化”,此时这个词汇才慢慢的被更多的专业领域的人所接受,并在之后互联网的不断发展中扩充着自己的分支

 

1.3 为什么会使用数据可视化

 

目前大量开始使用视觉可视化的原因其实非常简单大致的原因可以分为需要处理的数据量太大了和人脑不够用了

据不完全统计IBM公司每天有2.5亿字节数据的吞吐量,麻省理工学院的研究科学家Andrew McAfee和Erik Brynjolfsson教授指出,如今在互联网上传递的数据量比过去20年的总和还多,而且根据IDC预测,到2025年将有163万亿GB的数据

这是非常惊人的,而这么多需求的数据量单凭人脑的计算能力和处理能力来说是完全无法与之匹配的,研究表明人脑很难同时处理5组以上的抽象数据,所以这种单线程的处理方式就决定了需要借助外力

而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过5组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求,数据可视化设计氤氲而生

 

1.4 数据可视化的优势

 

基于数据可视化的需求来看,数据可视化的优势是显而易见的,可以概括为两点认知减负和传递赋能

认知减负是使用者在使用数据可视化工具时候的最直观感受,当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时我们会本能的放下对于面对再面对冰冷数据时候的抗拒和戒备,这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候会更为亲切和愿意去主动理解

而且被处理过、规划过的简洁直观表现形式能更为直接的让使用者看到数据与数据之间的关联,进而分析出其潜在关系,在人对数据的认知这个环节上降低了识别成本和分析成本

传递赋能上图像传递更接近人类最本能的获ju取信息的方式,比起文字来说图像更像是一个解密的步骤,通过解开文字描述这重“密码”将最本质的信息进行呈现,而且对比文字,图像所能够承载的信息其实更为广泛,而且人类读图的效率要远远高于阅读文字

无论是一个约定俗成的语义符号形象还是符合语境的配色都能够起到比文字直白表述更为强烈的深入人心效果,并且图解的形式并不受限于语言的障碍,极大的降低了沟通成本

 

1.5 使用目标

 

基于用户的使用目标来说,使用数据可视化其实就像是一个侦探用“蛛网图”辅助自己梳理思绪进行破案的过程:将一些有关的,但是较为零散信息数据用一根根线索线穿插起来,形成体系化的联系,方便使用者迅速把握各个节点之间的关系进行推导

所以说我们在设计数据可视化的时候并不是对我们拿到的数据的无脑映射,而是要基于用户的目标经过一定的处理和优化后才能进行呈现,随时记住我们是给用户在打辅助,所以我们每一步的设计一定要基于用户的思考

 

用户的期望是能够高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互,提升自己的工作效率,降低自己的学习和使用成本

 

1.6 应用场景

数据可视化的应用领域较为广泛涉及医疗、统计、管理、金融、娱乐、人工智能等一系列领域,在UI的设计中我们最常接触到的包括:PC后台的数据概览、数据可视化大屏、游戏UI、后台实时监控等。

 

当我们大致了解了数据可视化的历史、使用原因、优势、用户目标、应用领域后下面就要切入我们设计师最为关心的话题:我们在设计中的任务

 

2.1 设计难点

 

数据可视化作为一门跨领域的学科,本身对于从业者而言就有着一定的综合素质要求,但由于国内教育并没有垂直教学学科所以在现在的阶段从业人员一部分由纯视觉设计专业的同学组成另一部分由纯工科类型的专业的同学组成

于是这就导致了非视觉设计师在进行设计时,会将全副精力放在强数据的准确性、合理性上,从而让视觉的易读性上有一定的损失,表现形式也较为单一枯燥,视觉感官较差,反观视觉设计师通常会将数据可视化在视觉表现形式上过度用力,虽然营造了很好的视觉体验,但是从其实用度、可用性上来说会大打折扣

于是设计的难点很多时候就会集中在平衡视觉与实用之间的关系 

 

2.2 设计目标

 

通过以上分析,不难看出设计的主要目标,而面对这句较为抽象的“把握设计与实用之间的平衡”其实无外乎也就是拆解到功能和视觉这两个方面

从功能上来说,我的目标是提升用户的数据阅读效率、让用户能够迅速Touch到目标信息,提升交互效率,一切都是以结果为导向,以解决用户问题为导向,一定记住人们不愿意接受未处理过的数据

 

而从视觉上来说,我们的目标是处理好在视觉上各个模块之间的统一、透气关系,同时将数据进行可视化的同时尽量提升感官上的审美体验与传达上的有趣

以上会作为后文中我们每一步设计的指导和检验和理性的方式,从实际操作的维度上来说二者也并不是五十比五十的分配,遵循的原则是:体验一定要让位于功能,所以在视觉的层面发挥的空间其实需要比较克制

 

了解了数据可视化的设计难点,明确了数据可视化的设计目标,那么我下面进入我们最重点的环节:可视化页面案例制作,由于数据可视化的形式较多,这次我们以工作中经常接触得到的PC页面数据概览页为例

 

3.1 明确性质

同样的细化到数据概览这个分支项目我们同样需要明确了解其基础定义和性质,严格意义上来说数据概览部分属于Dashboard design(仪表盘设计)的一种,其主要的目的和功能可分为分析和操作两块

 

所以从综合的角度来说数据概览部分可以理解为:1.其他模块的摘要视图,并显示来自应用程序各个部分的关键信息,从这点上来说建议此模块可以在其余模块设计完后再进行设计,如此有利于设计师从一个全局的视角切入进行设计,理解上也会更加透彻,否则很可能会陷入在你设计其他模块的时候不断地返回对其进行修改的怪圈

2.他也是核心功能、常用功能的快速操作助手和快捷页面跳转(有点类似于导航),交互功能的排布和关键信息的显示其共同的要求点是显而易见的,即明确各个模块之间的层级,做好顺序、优先级排布这就需要你对业务目标有一定的了解,记住对业务目标不了解你的设计将毫无意义

你可以通过查询一些内部资料、报告、也可以询问产品经理等相关负责人,还可以通过用户调研得出,这里不展开说,具体可以去参考我的另一篇关于用户画像的文章,在动手之前你需要搞清楚:各模块之间优先级如何、你需要在一张单独的图表内展示多少变量、想展示一段时间内的值还是项目和项目之间嗨是组与组之间、每段变量中有多少关键数据需要展示等问题

 

3.2 定义模块优先级

如下图所示,在工作中我们经常接到需求的时候是面对一堆冗杂的数据集,组成了若干个模块,但是正如上文所说我们并不能对其进行无脑的可视化映射,所以首先要做的就是要对各个模块进行优先级的梳理排序

 

明确了各个模块的优先级排布之后我们开始对每一个单独模块进行可视化转化,即哪一个部分分别用什么类型的可视化形式表现,这一步非常类似于土地使用规划,当你在将土地划分完后,为每一块土地定义其使用类型

 

3.3 明确图表选择

想准确的将图表与所要表现的数据进行对应现需要了解图表本身所包含的基本元素

 

在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域

知道了这些重要的基础信息了,那么在面对这么多图表的时候我们该如何正确的选择来进行使用呢

 

其实和之前说的一样:基于目的来进行思考,所谓的基于目的来进行思考也就是要明确你所确立的数据指标需要分析的维度,而日常使用的数据需要分析的维度无外乎:比较、构成、分布联系

 

3.3.1 比较类图表

比较类图表应该是大家最为熟悉的范畴,第一时间能够想到的就是柱状图,这也是运用最为广泛的图表之一,经常出现在PC端之中,用于描述分类数据之间的对比,描述的数据可以是地区、品类甚至一个时间周期,但由于其扩展能力有限,所以一般不建议项目超过12条

 

条形图与柱状图类似,看上去只是交换了X轴与Y轴,功能和承载数据种类较为类似,但不同的是,条形所能承载的项目数量相对于柱状图而言更多,由于其优良的纵向延展性一般用于手机端较多,而且从上到下的阅读方式符合人眼阅读习惯,所以也会经常用于排行榜的设计中

 

分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量关系,比如当想比较同样一款衣服和鞋子在四个门店中的一个季度的营业额时就可以使用分组条形图

 

双向条形图表适合比较两组以上的分类数据比较,和分组条形图较为类似,但是由于自身外观特征更适合用于比较两组意义相反的数据,也正是如此,双向条形图的组内二级分类数量一般不要超过3条最好

 

折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念,数据基于时间等因素变得动态了起来,注重变化趋势的展现

 

面积图是折线图的延伸,除了表示变化趋势之外还能比较所选范围内积累的值

 

玫瑰图应该算是可视化图表中的“网红”,因为我们从小学的课本中就知道它还有一个别称叫“南丁格尔玫瑰图”它是一种圆形的直方图,使用半径长短表示数值大小,其特点就在于因为其独特的外观可以将数值之间的差距在视觉层面进行放大,和将坐标轴范围缩小来提升视觉上数值的碾压是一个道理,发布会吹水最爱,但是要注意的是这不是一个表示占比构成的图,因为玫瑰图的每一份角度是一样的,一定要和饼状图等图区分开来,它用来表示的还是数值与数值之间的大小

 

雷达图经常用于分析一些多维的性能数据、评分数据,经常打游戏的朋友应该不陌生,有多少五边形选手可以扣个1,每一项指标越接近圆心说明状态越差,越向外说明越佳

 

子弹图用于比较当前数值与目标之间的关系,比如看当前业绩是否达标,也可以通过标记划分区域来进行更好的评估

 

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单项分析,一定要有清晰的环节,比如监控买家从浏览到最后下单的数量统计以求得转化率,不适合无逻辑、无流程的分类对比

 

3.3.2 构成类图表

构成类图表整体上来说主要用于观察部分和整体的占比关系,最经典的莫过于饼状图,这个不用多说,通过每一份半圆角度所占整个圆的大小来表示部分和整体的关系,但是由于其所占面积较大,经常会让视觉过于集中,影响注意力

 

相对于饼状图而言,环状图十分有效的避免的干扰视觉的问题,其本质是将饼图中间掏空,功能与饼图基本一致,但是视觉上做到了轻量化,目前在日常设计中较为常用

 

旭日图相当于前面二者的结合,适用于展示多层级数据的占比关系,距离圆心越近代表层级越高,下一层级的总和构成上一层级,存在一定的父子层级关系

 

堆叠面积图出了可以表达趋势外,其优势在于能够表达总量和分量的构成关系,堆叠面积图上的最大的面积代表了所有的数据量的总和,是一个整体。各个叠起来的面积表示各个数据量的大小

 

堆叠柱状图的优势在于它既可以表达一级分类的比较,同时还能看出二级分类在各其一级分类中的占比,但是缺点在于二级分类并不是按照同一基准线对齐的,相比于堆叠面积图更为常用

 

瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程值为负的时候向下减

 

3.3.3 分布联系类图表

分布联系类地图在这两年在国人的心中其实已经非常熟悉了,因为疫情今年的地图可视化的应用经常出现在我们的生活中,地图可以结合不同的表达方式:

可以结合散点、可以结合动画、还可以结合引导线以及热力图的方式,图的形式使用视具体的业务需求来定

最后就是气泡图,这是在查看分布关系中最为经典的视觉模型,用气泡的面积大小表示数量,结合辅助线可以更好地观察分布情况

 

3.4 匹配图表 重构布局

 

当我们对每种图表的功能和使用范围有了一个较为明确的认知之后,下面我们就可以对我们之前所规划好的优先级的模块进行可视化形式(图表)的匹配了

进行匹配过后,我们将对布局进行重构,整体重构需要遵循的原则是

  • 1.布局层级明确,首屏尽量曝光更多内容
  • 2.统一透气,具有呼吸感 

 

3.4.1 布局层级明确,首屏尽量曝光更多内容

从首屏曝光更多内容来说主要是因为基于分析类的数据概览工作场景和Analytical dashboard自身特征决定的,用户希望能够通过仅仅一屏的的大小进行对各类信息的情况有基本的把控达到一眼全局的目的,其主要注意力都会放在首屏,所以我们需要尽可能的在首屏安排更多的信息

 

当然首屏内容也并不是越多越好,一般建议也尽量不要超过7组模块,而在层级明确这块儿主要是根据人眼阅读习惯所产生的优先级排布:正常情况下都是左上为优先级最高,而右下优先级较低,这是无数经典的眼动测试和设计总结产生的最常用结论,就不展开叙述了,所以当我们按照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局

 

3.4.2 统一透气 具有呼吸感

 

这主要是视觉层面的问题,统一透气的要求在首页概览中可以依靠栅格系统来来解决,它可以有效的帮助页面布局的对其保持页面布局一致性,为页面建立基础布局框架,将页面中的所有元素都捆绑在一个体系之中,同时还能有效解决适配问题

 

3.5 模块拆解

完成了大规划之后,下面我们开始对一个一个的模块进行拆解同样的以目标指导设计,边设计边验证

 

3.5.1 层级明确 突出重点

 

和大规划一样,单独到每一个图表同样要时刻注意层级的梳理,销售渠道部分很明确应该是运用一个折线图的形式,由于业务目标上来说更关注销售额而不是销售额和订单数的比较,所以我们选用了一个带有切换选项的折线图形式

但是我们会很容易发现的在读图时会出现较大的视觉干扰,并没有能够很好地突出重点信息,视觉层级不清晰、混乱

于是我们对没有重点的视觉层级进行梳理,像之前划分模块那样,对视觉元素进行高、中、低的P0、P1、P2的设定,提升易读性

 

P0:层级最高的自然是重点信息突出部分,所以我们需要在其之上做加法,给予内容异形悬停样式进行具体强调,配合投影加强视觉效果,有效传递用户,拉开与别的元素的层级,同时数据部分用特殊字体并适当加大字号进行设计,方便用户第一时间能够看到所要强调的数据具体值

P1: 其次就是主体图形部分,这是用户需要看到的重要部分,在使用场景中会长时间盯视,所以采用更低的明度与更高的饱和色颜色确保易读性,但是也不致于会让用户太晃眼产生视觉疲劳,最后考虑到该模块所处位置属于页面中较为核心的地带,给予一定的颜色透明度渐变装饰,在强化主体图形的同时不致于太显单薄

P2:前两者都是一定程度的做加法,那么层级最低的元素比那需要开始做减法,此时轴线、刻度、切换选项等元素需要弱化视觉层级,降低透明度,尤其是背后的刻度线与背景的明度对比大概控制在1.6:1上较为合适

 

销售总额、订单数、渠道数同属于一个数据统计的范畴,最忌讳的就是把以上提供的三个信息给做平,让用户抓不住重点,面对这样的情况还是一样,确立需要突出的重点信息给予特殊文字和大小的设计,选择合适的主体图形

 

但在这里需要注意的是由于在这个模块中P0是金额数、订单数、渠道数这些重要值,所以可视化图形需要适当为其让步,不要放在阅读中心位置,按照P1来进行处理,而订单数、转换率这样的标题就成了P2需要适当降低透明度和文字大小,不干扰主要信息的表达

 

3.5.2 统一营造

说到统一,最先想到的一定是色彩,无非也就是需要处理好对立统一关系,而这其中统一的比例又要大于对立,配色上尽量选用同类色系,不宜太过花哨,尤其是对于B端而言,建议在可能的情况下不要超过5种,而且主色、辅助色,对比色的比例建议控制在6:3:1的比例(但不绝对),既能做到有所区别又不致于过于绚丽干扰视觉

 

你的主色不一定要迁就你的品牌色,但是一定要是如上文说的尽量低明度高饱和,以适应于长时间的注视

 

颜色过后就是字体,字体字体的使用需要极为谨慎,如果可以尽量只出现一种字体(但不要超过三种),并且只采用基础字体,正常情况下都是将其作为一个需要被降噪了的视觉元素来对待(比如降低透明度),在PC端中尽量也不要出现较多不同的字号,字重,造成没有必要的视觉干扰

 

除了字体之外,在统一感的营造上卡片的布局结构也需要尽量保持一致,这是为了提升易用性,同一个产品内,相同布局会给予用户相同交互、相同功能的暗示,也更容易培养用户习惯,提升操作效率

 

3.5.3 呼吸适中

呼吸感是留白的艺术,很考验设计师的排版能力,在单独的模块内,元素与元素之间尽量不要用实线进行间隔,可以的话利用亲密性原则通过元素间距的远近进行布局

而柱状图的设计上,柱与柱之间的间距最好大于柱宽的1.5倍,这样才显得视觉上较为透气,不致于太臃肿

 

最后就是模块中的边距留白部分,这点一定要重视,不然不仅你的版心会变散,还会严重影响你的页面呼吸感

 

3.5.4 细节处理

细节上首先要说的就是横纵坐标轴上的文字,上面的文字一定不要过长,最好的方式是将文字进行精简。然后横、竖排对齐处理,如果实在不能精简那么再进行斜排的方式

 

第二点就是横纵坐标轴有的时候会因为需要展示的数据过多而过于密集影响阅读,这个时候可以采用适当增加一个值域的划定的方式来进行坐标间距的缩放

 

第三点就是,在排行榜等模块可以适当增加一些小设计,比如金、银、铜的设计,提升情感化元素的融入

 

第四点就是,尽量不要选用一些3D的酷炫效果来做可视化,因为这种效果很容易对数据进行遮挡和扭曲,不是非常适用于高效阅读,也不适合PC页面上的交互,而且也不利于开发,比较得不偿失

 

3.6 组装自检

当所有的模块设计完成后,像拼高达一样进行组装,组装完成后适当调整其过于干扰视觉的地方,然后进行自检

自检不只是从检查你的视觉、你的模块间的布局,更重要的是带入使用角色来进行检查,你可以模用户使用中的各种需求场景,对已经制作好的页面进行交互和阅读,看是否能够快速高效地完成使用目标

当然除了自己之外,你还能在有条件的情况下找专家用户进行使用,即使记录使用中存在的问题并及时进行调整,当初步使用大致无问题后便可以交付

1

好了以上就是在B端设计中对于数据可视化尤其是PC端数据概览的设计探讨,当然其实关于数据可视化的范围还远远不止于此,感谢你能够耐心看到最后,如果这对于你的工作有一点帮助那么备感荣幸,也很感谢留下你的交流,我们下一期见

参考:

《10 rules for better dashboard design》Taras Bakusevych

《Data Visualization-Best Practives and Foundation》Cameron Chapman

且曼B端产品设计 美芳老师 《数据可视化设计之视觉篇》

知网文库

维基百科等 

作者:核糖bro

1转载请注明:学UI网》深度解析B端数据可视化-信息图表篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



数据可视化设计常出现的错误,你一定要避免!

seo达人

1.三维图形使用不当

虽然三维图形带来的立体感很强,但用在可视化设计中,很容易出现问题。

一方面,三维图形具有X、Y和Z坐标,容易造成图表间的遮挡关系,遮挡会掩盖一部分的数据,让精准比较数据信息变得困难。

另外,透视使对象看起来像是位于三维空间中,但在数据可视化中,它会造成错误的层次结构:前景图形看起来很大,背景图形很小,数据关系被不必要地扭曲。

图片

 

设计要点:

三维图形很有吸引力但可能会遮挡重要的数据信息,并扭曲数据间的比例关系;

如果没有绝对需要尽可能使用二维图形样式。

 

2.数据太多

在设计中,很多人总想在一张图表中尽可能多地展现内容,把各种数据信息聚合在一起。

这样的想法本身没什么错误,但重要的前提是要有清晰的认知,明确知道到底要展示哪些数据。

如果可视化中包含太多数据,信息的展现会变得不堪重负甚至难以理解,这样的话包含的数据再多也没有任何意义。

图片

 

设计要点:

避免数据可视化的信息过载,如果一张图表中包含的信息过多,反而会让用户混乱;

灵活结合多种可视化方式,让数据的展现变得更有效。

 

3.省略基线

一组数据往往各不相同,数据差值的大小也不确定。为了使可视化效果看着更舒服,有的设计师通过改变坐标轴比例来展示数据关系。

最常见的例子就是让Y轴代表的数据不是从0开始,借此夸大数据之间的差异,让数据的变化更加明显。

图片

 

设计要点:

图表的美感再怎么重要,也要服务于精准的数据表现;

避免通过省略基线来故意夸大或缩小数据差异,造成用户误解。 

 

4.选择错误的可视化方法

每个数据可视化方法都有自己的特点。例如饼图适合用来比较一个整体中的不同部分,但不适合用来比较几组不同的数据。

通过饼图的比例划分,虽然可以直观地显示三家企业的收益,但使用条形图会让这三家企业之间的差异更加明显。

如果目的是为了显示一段时间内的收入,那么折线图会是比条形图更好的选择。

图片

 

设计要点:

数据可视化方法并非一刀切;明确可视化传达的变量及最终目的。

 

5.混淆关联

数据可视化更高的价值在于探索和发现不同数据间的相关性,通过比较几组不同的数据关系,找出其中的关联性,从而得到一个更有根据的验证结果。

显示相关性最常用的方法是将几组不同的数据叠加在同一个图表上,但当叠加的数据数量过多时,图表会变得难以识别。

另外一旦强行关联几种相似的数据,有可能造成结果的混乱。一个有意思的例子是冰激凌销量的增加与暴力犯罪的激增有关,因为这两者都是因为气候变化造成的结果。

图片

 

设计要点:

透过数据间的关联性发现事物本质是有意义的,但要考虑数据间的关联是否有依据、是否合理;

数据有相关性并不等于有因果关系。

 

6.放大有利数据

数据的增长或下降和时间是不可分割的。放大时间范围是很多公司经营中投机取巧的方法。

比如只在图表上向用户展示业绩增长的4-6月份(上图),这样看起来公司业绩增长幅度特别大,但如果将X轴的时间缩小到一整年(下图),才会发现公司真实的经营状况,4-6月份的业绩增长仅仅代表了公司业绩持续下跌中的小幅上涨。

图片

 

设计要点:

避免放大的可视化效果与数据整体不一致;

短时间内放大的数据表现可能会让用户对信息的判断产生错误。

 

7.避开常见的视觉联想

视觉元素影响用户的心理,图标、色彩和字体都具有影响观者感知的作用。

下图的可视化描述了美国各个地区宗教信徒占所有居民的百分比,但使用的颜色与地图的设计元素(蓝色的水、绿色的植被和棕色的土地)太过相似。

图片

▲ 分析数据可视化很耗费精力。在看到这样的图表时,我们第一时间联想到的应该是国家的地形情况,可能很难在这个熟悉的认知下去重新理解这个图表代表的其他含义。

 

设计要点:

避免强迫用户重新理解常见的视觉联想,造成对数据的注意力分散。

 

8.过分纠结于数据可视化

数据可视化将难以表现的数字关系赋予了易于理解的形式。最理想的方式是可以通过可视化清晰、简洁地传达数据关系

但是并不是所有的数据都需要使用可视化来表现,有时候一个简单的数据搭配一个流行的颜色就足以说明问题。

图片

 

设计要点:

数据可视化是一种交流工具。像其他所有工具一样,有时它是合适的,有时可能另一种工具更适合。

 

为回馈一直以来关注和支持Clip设计夹的读者,将免费赠送3本《写给UI设计师看的数据可视化设计》书籍给大家,帮助大家更好地学习数据可视化设计。

参与方式:详见原文。


作者:Clippp

转载请注明:学UI网》数据可视化设计常出现的错误,你一定要避免!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



数据可视化图表设计指南:圆环图

seo达人

3种圆环图样式 

标准圆环图

图片

图表中间空心的部分用来展示数据的总数,用圆环的弧长和颜色表示不同数据的占比,图表旁边有图例用来解释说明。

 

布尔圆环图

图片

布尔圆环图就像是给圆环图做了布尔运算,只表示正负两个值

比如想重点突出完成率,就使用绿色圆环来表示68%的完成率,圆环其他部分为灰色,同理想重点突出反弹率,就使用红色圆环来表示83%的反弹率,圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

 

标签圆环图

图片

直接在对应的圆环上加入标签比使用图例更容易理解。在屏幕空间允许的情况下,可以直接在圆环上添加「名称+所占比例+数量」的标签形式。

 

圆环图交互状态分析 

悬停状态

图片

在标准圆环图中,鼠标悬停在圆环图上时,跳出分段名称+百分比+数量值的弹窗。在标签圆环图中,悬停的圆环部分突出显示,其余部分淡出处理。

 

点选状态

图片

图表段可以是交互式的,点击对应的分段时,右侧的图例也会同步高亮显示。

 

焦点状态

图片

焦点状态和上面提到的悬停状态类似,唯一的区别在于,焦点状态选中分段后有一个放大+描边的圆环效果,突出展示数据。

 

空状态

图片

当没有可用的数据时,应该在图表上表明这一点,并给出提示引导用户去点击。

 

错误状态

图片

获取数据时偶尔会出现发生错误的情况。发生这种情况时,向用户提供有用的、可操作的解释,说明发生错误的原因并告诉用户可以采取哪些措施来解决问题。

 

圆环图使用指南 

使用分类颜色

图片

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据,同色系颜色常用在直方图中。

 

最多使用五个分段

图片

当圆环图包含多个数据分段时,图标会变得难以理解,为保证图标的清晰,尽可能将分段控制在 2-3 段,不要超过5段。如果数据过多,可以考虑使用柱状图、条形图等其他形式的图表。

 

保证数据准确

图片

圆环图的所有分段加起来的数值应该始终为 100%,没有有多段数据占比过小,可以一起汇总到“其他”分段中。

 

按顺序排列数据

图片

圆环图的份分段应从12点位置开始按最大值排序,然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

 

不要将时间分段

图片

时间是一个顺序变量,不能用作圆环图中的类别。例如每个季度的时间是相同的,但是每个季度访客却不一样,使用圆环图会给用户造成一定的困扰。如果以时间作为基本单位,可以使用直方图、条形图等图表。

 

最后 

以上就是圆环图的基本介绍,在之后的分享中,会为大家介绍折线图、面积图、条形图、直方图等一系列数据可视化图表文章~

如果大家想看更多「数据可视化图表」系列内容,记得及时关注接下来的文章~

 

最后给大家分享一份最新的iPhone13样机模型源文件,有PSD、Figma和Sketch三种格式可以选择,特别适合用来包装作品集。

领取方式:关注公众号,后台回复【13样机】获取源文件

图片

慢慢来比较快,希望对你有帮助!

 


作者:Clippp

转载请注明:学UI网》数据可视化图表设计指南:圆环图

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



如何做B端体验标准化:以数据可视化场景为例

seo达人


图片

业务背景

以我们 CCO 体验设计团队为例,主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加,设计面临严峻挑战。

1、业务多:30多个产品应用

2、角色多:覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户  6大类用户群体。

3、体验复杂:设计师需兼顾用户和客户两个视角。

图片

从组织上,85% 设计师纵向支撑业务,15% 设计师横向做标准化,反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。

图片

 

图片

标准化怎么做

核心通过页面梳理、抽象、分发、衡量,保障基础体验一致性。

图片

 

图片

案例实战

以数据可视化场景为例,讲述如何做标准化。

1、业务现状

共有11个应用,涉及89个页面。

图片

2、问题

体验不一致:各个工作台页面架构、组件、样式野蛮生长,缺少规范导致体验不统一。

低效:部分场景缺失,组件重复建设,大量定制;沟通协同内耗大,成本高。

图片

3、策略

体验统一:框架、组件、样式。

提效:代码化、工具、交付机制。

4、体验统一

包括框架、组件、样式。

图片

框架

(1) 现有页面收集

图片

(2) 用户场景分析

图片

(3) 页面归类

结合用户看数内容(例:概览、分析、详情)和交互形态(例:平铺、下钻),对页面进行归类。

图片

(4) 确定典型布局

通过统计高频复用形态,确定典型布局。

图片

组件

(1) 页面结构分析

组件的收敛,需要先对页面分析,确定模块层内容。例:模块包含页头、筛选、图表、表格。

图片

(2) 模块层分类

横向收集全部业务,将模块层分类。细分模块扩展形态,放到对应的篓子里。

图片

(3) 模块专项治理

接下来,需要对每一个模块进行专项治理。比如图表模块,再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体(也就是扩展形态)分类。

图片

图片

样式

(1) 确定优化内容

围绕视觉凌乱,要做的便是完善设计语言。设计师需要结合自身技术底层,补充缺失规范。例如布局、色板、字体、动效。

图片

(2) 确定组件范围

通过统计高频复用组件,确定需要梳理的组件范围。

图片

(3) 布局

图例位置:线上有9种,通过从业务场景按阅读顺序划分,最终收敛成2种。

图片

组件高度:真实线上情况,只能看2个指标,高度规范缺失。

图片

需要根据用户分辨率调研,提炼典型分辨率。比如用户是win系统,包含菜单栏、任务栏等默认高度,再减去本身页面页头等默认高度,得到 3 档。确定组件建议默认行高 240px。

图片

轴标签旋转角度:现状有顺/逆时针两种,通过分析标签类型,结合阅读顺序、轴与标签亲密度,确定默认角度为顺时针。

图片

(4) 色板

通过场景梳理,确定不同组件使用的色板类型及缺失色板。

图片

补充语义色板:从业务里抽象2类场景,指标和柱/饼/环场景,定义颜色。例如带正面语义,用绿色,比如升、已到岗、正常。带负面语义,用红色,比如降、旷工、失败。

图片

(5) 字体

结合自身业务场景问题,从场景、版权、风格、识别、极值共5个维度选择字体。

图片

举例场景一,纵向数据场景里,将市面上数据竞品用到的字体都横向铺开尝试,做排除法。比如din没版权,苹方非等宽字体,普惠102识别性弱。

图片

举例场景二,在核心数据呈现中,helvetica 品牌风格弱,普惠在1亿以上极值过宽。

图片

最终我们根据自身业务场景特征,用普惠和普惠102,运用在对应场景里。并同前端提炼规则。

图片

(6) 动效

首先,需要确定动效价值,明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。

图片

通过动效场景链路分析,确定优化范围。

图片

加载动效:围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路,输出方案。比如这里共梳理17种组件类型,抽象成9类,包括点、线、面、饼、环、柱、文本、图标、词云,再进行组合产出方案。

图片

出场动效:通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景,有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。

图片

图片

浏览动效:通过提炼场景,来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下,围绕点击感知弱、重点不突出、缺少悬停态来优化效果。

图片

沉淀速度参数:将优化动效场景的速度参数,同前端约定规则沉淀组件库。

图片

5、提效

包含代码化提效、工具提效、机制提效。

图片

整体思路

从设计组内到技术产研的提效过程。

提效面向用户依次是:组件设计师、业务设计师、前端、产品。

搭建目前还在进行中,这里主要从交付-工具-代码化来分析。

图片

交付内容

1、业务设计师:sketch/figma物料 (样式、组件、区块、模板、规则 )

2、业务设计师:kitchen工具(样式、组件、区块、模板)

3、组件工程师:组件规范/组件官网

图片

交付机制

新需求:通过评估复用性、抽象、内审、沉淀物料。

现有业务:通过页面梳理归类、抽象、内审、沉淀物料。

图片

6、衡量

从物理到行为层,包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

图片

 

图片

总结

回归课程,在B类业务里,服务多个产品、多用户角色、体验复杂的场景下,在定制化+标准化团队阵型里,标准化实质解决的问题是保障60分基础体验一致性。

图片

总结:B端体验标准化包括物料的产出、交付以及衡量标准。

产出:包括框架、组件、样式的收敛来梳理、抽象页面。

交付:面向2类用户群体,业务设计,需交付物料和工具。组件工程师,代码化需提供组件规范,组件线上化需助力组件官网的建设。

衡量:一致性评分包括样式、组件、框架及组件交互。

图片


作者:CCO 设计

转载请注明:学UI网》如何做B端体验标准化:以数据可视化场景为例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档