首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

干货满满!移动数据可视化的图表设计

只缺一个UED

1

前言

1.概念

图表泛指在屏幕中显示的,可直观展示统计信息属性(时间性、数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地“可视化”的手段。

2.使用场景

(1)比较数据差异情况。基于分类的数据,可以通过比较数据来了解不同分类的差异,比如柱状图。基于流程的数据,可以通过比较数据了解数据的变化趋势,比如折线图。

(2)分析数据关联情况。展现数据间相互关系和数据的流向。

(3)查看数据分布情况。对于错综复杂的变量之间关系,可以通过图表来找出规律。

(4)了解数据构成情况。发现各变量的占比情况,比如饼图。

3.原则

(1)轻量。众所周知表格是可以承载数据的全面性,但将相同的数据用可视化展示时,设计师总想将所有的信息堆砌在图表上,显得图表非常笨重,因此增加了用户的思考时间。在此建议明确你图表类型的特点,将主要信息呈现在图表上或者分层展示图表,比如数据钻取功能。

(2)直观。设计师应该将数据信息清晰而直观地表达出来,使用户一眼就能洞察事实,更快地发掘商业价值并作出决策。

(3)美感。缺乏美感的数据可视化仅仅是数据展示。美感包括两个部分,第一个部分是整体协调美,比如对图表中的各个元素(标题、网格、坐标轴、缩略轴、图例、提示信息、预警线和辅助线等)进行合理的排版和使用协调的配色。第二部分是局部细节美,比如设计师根据流行趋势给图表加上渐变色。

2

功能

1.标题。包括左对齐、居中对齐和右对齐。在选择某种对齐方式前,请兼顾图例的摆放位置。

2.栅格。包含点状、线状和斑马线。

(1)根据数据特点选择横纵向辅助线,横向引导线增强水平方向的导视。纵向引导线增强垂直方向的导视。

(2)线状建议用虚线,因为不是用户确定指向值。

3.坐标轴。坐标轴包括X坐标轴、Y坐标轴和次坐标轴。

4.缩略轴。包括滑面和滑柱。

(1)拖动滑柱滑动,增加或较少滑面,从而改变查看密度。

(2)拖动滑面滑动,保持滑面长度,进行前后移动。不改变查看密度,只改变查看范围。

5.图例。离散型数据包括横向排列和纵向排列,连续型数据包括连续图例。

6.提示信息。包括查看单个数据点和多个数据点。

(1)单变量的浮层提示内容为相同维度下选择的变量。多变量的浮层提示内容为相同维度下所有的变量。

(2)提示内容遵从表单规范,按照冒号对齐。

(3)拓展:直联表的图例是展示所有变量,但是交叉表不是,是“变量+列维度”的排列组合。

7.预警线。数据超过阈值就会报警,帮助用户监控数据。

(1)预警线建议用实线,并用警示的颜色引起用户的注意,最好用邮件或短信通知用户。

8.辅助线。用户设置某值作为数据参考进行比较,比如设置平均分为参考数值。

(1)辅助线建议用虚线,仅起参考作用。

3

图表组织

移动设备最大的特点是屏幕小,用户每次可接收的数据信息量小,所以如何有效组织图表信息是一个重要的设计点。

1.如何展示单个数据?

鉴于APP屏幕小,单个页面中就展示一个重要数据,如何设计?

此时选用圆形,会是一个不错的选择,因为它在页面中形成视觉中心。不管是饼状图,还是环形图,或是拥有视觉中心的雷达图,都会让页面上呈现一个视觉重点。

单个数据未免有些单调,为了让页面更加丰富,可采用深色、彩色、图片为背景辅以纯色的图形(如芝麻信用分),或者将像Clue一样,用重色将图形撑满,求得视觉上的饱满。

2.如何展示主次数据?

要在页面中展示两到三种类型的数据,如何设计?

此时要注意以稍大的篇幅突出重点数据,弱化次要数据,尽量让主次数据的图表类型不一致,曲线图、饼图、环形图、柱状图等基础图表,交替使用,这样使得整个页面层次清晰,内容丰富。

3.如何展示大量数据?

还有一种类型,整个页面要分几大模块展示大量的数据信息,如何设计?

用户可能要刷几屏才能把所有的数据阅读完,此时,建议每个模块单独采用一种图表类型,各个模块的图表类型均不同,这样会减轻用户对数据展示的疲劳度。

4

UI

1.颜色

(1)颜色主题

1)深色背景。适合较少信息内容。

优点:可以通过布局建立良好的视觉层次,深层次地反映内容,而且视觉吸引力强,给人以高端的视觉感受。

缺点:可读性低。页面太过聚焦所以对留白的平衡要求较高。

2)浅色背景。适合较多信息内容。

优点:可读性高,增加了页面空间。

缺点:内容不聚焦,信息过少则页面显得太空。

3)彩色背景。

有时,为了让页面更加生动,可以将数据信息展示在大面积色块上。

商务类APP可采用用蓝色、绿色系作为底色。

运动类APP可选用的色彩自由度更高,偏活力的色彩,如橙色、黄色、橘色等都可以。

4)图片背景。

为了让数据阅读更加轻松,可采用图片底。在一些天气类APP中,这种使用方式比较常见,图片内容与数据信息产生关联,提升可读性。

(2)配色方案。首先要确保颜色数量足够满足数据系列在图表中的展示。

1)使用成熟的色板,比如Flat UI Colors和Material Design Colors。

2)使用流行的元素,比如渐变色。

3)使用情绪板,情绪板是一种借助于图像,启发和探索用户的体验,然后再作用于视觉设计的研究方法。 可以调查并形成具有指导意义的“风格感受”和“设计元素”。

(3)颜色生成规则。一个变量统一用一种颜色,再按配色方案依次出每个变量的颜色。 使得同一图表的色彩搭配和谐且具有美感。

2.布局

视觉层级要符合逻辑层级,利用信息深度引导用户阅读。每个元素要保持一致,保证布局的整体协调。

3.动效

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

(1)以时间先后动态呈现数据

(2)导航切换

(3)展示更多功能

(4)屏幕横纵向切换数据

(5)增加趣味性

4.字体

避免有个性的衬线字体,字体要保证清晰可见。字体大小适中,太小影响阅读,太大容易占用图表控件。

一款字体使用的好,能彰显整个APP的气质,让整个APP特立独行。CityGuides是一款特别出色的APP,其图表设计很棒,字体选用也与整个风格设计相得益彰,非常出彩。有兴趣的可以网上下载这个字体(Optigiant),非商业用途的情况很受用。

5

总结

1.先懂数据,再谈可视化

为此我们要了解图表类型的适用场景和局限,可以帮助大家通过UI设计更好地展现图表的特点。

2.真实数据,友好可视化

数据产品不要试图去掩盖问题,而要反映真实数据,暴露问题,并且和用户一同解决。比如对数据阈值进行监测,预警线就是很友好的可视化方式。

3.适配移动端,有效传达

移动设备最大的特点是屏幕小,用户每次可接收的数据信息量小,所以如何有效组织图表信息是一个重要的设计点。

最后给面给大家安利一个能带来无限灵感的数据可视化网站

datavizproject.com

关注我们

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180803G1JKWW00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券