妙妙

数据可视化的目的在于节省用户的时间精力,使复杂的数据用便于理解的图形传达给用户。正确设计可视化数据可以提升产品的易用性,也可以增强产品的趣味性。

 

本文大纲:

 

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

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

 

「天气类」

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

「生理健康类」

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

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

「财务记账类」

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

「专业数据分析类」

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

「运动健身类」

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

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

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

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

 

2.可视化数据图的配色

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

 

「深色底」

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

「浅色底」

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

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

「彩色底」

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

「图片底」

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

 

3.各类图表的使用场景

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

 

「折线图」

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

「曲线图」

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

「饼图&环形图」

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

「条形图&柱状图」

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

「热度图 / 热力图」

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

「雷达图」

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

 

「仪表盘」

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

 

4.图表运用到界面中去

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

 

「单个数据」

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

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

 

「多组数据」

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

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

 

5.可视化数据的动效

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

 

「动态呈现数据」

「导航切换」

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

「屏幕横纵向切换数据」

 

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

 

原文地址:站酷

作者:一个辛普森

 

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

登录收藏
 
你可能喜欢的:
时间还能这么玩?这些设计也太6了时间还能这么玩?这些设计也太6了
P了两个圆,价值800万?P了两个圆,价值800万?
导航栏篇 | 帮你全方位掌握导航栏设计知识点!导航栏篇 | 帮你全方位掌握导航栏设计知识点!
百家号品牌视觉语言焕新-源于发现 体验美好百家号品牌视觉语言焕新-源于发现 体验美好
在UI布局排版中,让界面快速出彩的7个技巧在UI布局排版中,让界面快速出彩的7个技巧
不就是一个头像吗?你个交互还能怎么去优化它...不就是一个头像吗?你个交互还能怎么去优化它…
京东APP11.0深度解读·如何基于生态进行一次体系化大改版京东APP11.0深度解读·如何基于生态进行一次体系化大改版
注意这些页面设计细节,有效提升使用体验!注意这些页面设计细节,有效提升使用体验!
用上这24个UI体验优化经验,果然做出来的设计更高级了!用上这24个UI体验优化经验,果然做出来的设计更高级了!
标签篇 | 打造独特视觉标记、精准传达信息标签篇 | 打造独特视觉标记、精准传达信息