可视化界面设计语言(手机可视化数据app介绍)

可视化界面设计语言(手机可视化数据app介绍)

在做APP设计的时候,难免会遇到一些需要展示数据的场景。使用传统的表格和文档展示数据不仅难看,也影响用户理解数据的含义。而数据可视化设计能将数据以更加直观的方式展现出来,使数据更加客观、更有说服力。

※以数据可视化为主的APP有哪些?※

通过大量的浏览收集,小编总结出使用数据可视化的APP无外乎下面这几类:天气类、运动类、健康类、财务类、专业数据分析类。感兴趣的设计师可以直接在App Store搜索相应关键词,就能够找到许多。以下为大家准备了一些有代表性的APP。

天气类

“Fresh Air”的APP,从设计上区别于常规天气APP,可以根据时间和温度背景色有调整。

↑Fresh Air

运动类

随着各种手环的流行,大家对步数、睡眠质量等数据也更加看重。国外除了Fitbit、Jawbone、MisfitShine手环外,国内的科技公司也相继推出各种价格上更占优势的手环,比如小米手环。鉴于这类APP大家都比较熟悉,以下就列举了一个大家可能不太了解的APP,界面以深色底为主:FitPort,它的数据比较丰富,除了记录步数外,还对体重和能量消耗有记录。

↑FitPort

健康类

Clue是一款姨妈助手,在数据展示上比美柚等做得更轻松,它会根据不同阶段的心情做可视化,比如临近姨妈期用一些爆炸云朵表达烦躁的心情。

↑Clue

财务类

各种记账类APP和理财类APP几乎囊括了所有图表样式,趋势图、饼状图、柱状图应有尽有。以下列举的Spendee在图表设计上算是行业翘楚。

↑Spendee

专业数据分析类

随着移动办公的需要,有一些专业的数据分析平台精炼了产品功能,需要在移动端展现。以下列举的Google Quicklytics 便是Google Analytics在移动端的产品体现。

↑Quicklytics

※ 如何做好数据可视化?※

看了这么多的竞品,相信大家对数据可视化已经有了直观的感受。如果你想要做好数据可视化应该怎么切入呢?大家从以下几个方向进行尝试:配色、图表类型、图表组合方式、动效、文字。下面将结合实际案例为大家进行详细说明。

配色

大家在做设计的时候,一定都知道不同的配色会带来不同的情感体验。同样的可视化设计也需要考虑到配色对数据的影响。

1、深色底

深色底上的图表通常为了营造一种氛围,展示数据信息一般较少,此时可以选用鲜亮的色彩,这样图表信息容易从深色中跳出来。

↑图片来自网络,仅供参考

2、浅色底

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

↑左(Google Analytics)中(Clue)右(Spendee)

下面就深色底和浅色底的阅读效率进行比较:在以数据分析为主、有大量数据的页面中,浅色底的页面可读性更高,阅读效率也会更高。

↑深色和浅色底比较

3、色彩底

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

↑图片来自网络,仅供参考

4、图片底

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

↑图片来自网络,仅供参考

健康类APP,让阅读数据时能有更加轻松的心情。

↑Misfit Shine

天气类APP,首页呈现会根据当时天气情况自动拉取背景图片。

↑左(天气通)中(墨迹天气)右(Yahoo天气)

图表类型

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

1、折线图

将序列显示为一组由单个线条连接的点;用于表示在一段连续时间内发生的大量数据。

↑图片来自网络,仅供参考

2、曲线图

使用光滑的曲线来连接。如果数据是连贯实时的,且任意两点间的数据具有分析价值,用曲线图比用折线图更合适,如24小时数据。

↑图片来自网络,仅供参考

3、饼图&环形图

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

↑图片来自网络,仅供参考

4、条形图&柱状图

条形图可以理解为横着的柱状图。常用于展示对应的数据、可以对比多维度的数值。

↑图片来自网络,仅供参考

5、热度图

常用在基于地理位置,对一段时间的数据(常常是离散量)累积量进行分布统计的图表,进而可以分析数据密集区域/稀疏区域。这是一种展示效果较好的表达方式。

↑图片来自网络,仅供参考

6、雷达图

在比较多个类别数据序列以及查看整体情况很有用,既可以查看自身整体发展的均衡情况,也可以对比两个序列整体的优劣势。这也是一种展示效果不错的数据表达方式,在展示整体综合信息上很直观。

↑图片来自网络,仅供参考

除了以上列出来的这比较传统的六种图表类型,细心的设计师可能还会发现一些比较新颖的图表,比如和弦图、字符云、力导向布局图等等。在这里就不一一列举,感兴趣的设计师可以继续总结归纳它们的使用场景。

图表组织

了解基本的图表类型后,接下来的重点是进行图表的组织。移动设备最大的特点是屏幕小,用户每次可接收的数据信息量小,所以如何有效组织图表信息是一个重要的设计点。

1、单个数据

鉴于APP屏幕小,单个页面中就展示一个重要数据,如何设计?此时选使用圆形,会是一个不错的选择,因为它在页面中形成视觉中心。不管是饼状图,还是环形图,或是拥有视觉中心的雷达图,都会让页面上呈现一个视觉重点。

↑中(Clue)右(支付宝)

比如上图的案例,为了让页面更加丰富,可采用深色、彩色、图片为背景辅以纯色的图形。或者用重色将图形撑满,求得视觉上的饱满。

2、多组数据

鉴于手机屏幕空间有限,多组数据在展示的时候一定要突出重点数据,弱化次要数据,尽量让主次数据的图表类型不一致。曲线图、饼图、环形图、柱状图等基础图表,交替使用,这样使得整个页面层次清晰,内容丰富。

↑图片来自网络,仅供参考

3、大量数据

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

↑图片来自网络,仅供参考

动效

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

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

↑图片来自网络,仅供参考

2、导航切换

↑图片来自网络,仅供参考

3、展示更多功能

↑图片来自网络,仅供参考

4、屏幕横纵向切换数据

↑图片来自网络,仅供参考

字体

一款字体使用的好,能彰显整个APP的气质,让整个APP特立独行。但鉴于APP字体版权及字体包大小,多数APP开发者都不把字体作为考虑范畴。

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

↑CityGuides

随着信息大爆炸时代的到来,用户的时间越来越宝贵。如何让用户快速的获取数据想表达的内容,成为设计师们进行数据可视化设计的重点。当然上面总结的只是数据可视化设计的冰山一角,作为设计师的我们还需要不断总结实践,才能真正掌握!最后希望本文能对你有所帮助。

– END –

花火圆桌

花火圆桌是由一群热爱设计的BAT设计师发起的分享交流社群,目前已聚集了近4000来自五湖四海的小伙伴,一起分享、解惑,并常有线上线下活动共同成长进步。

| 手绘 | sketch | C4D | 交互 | 字体 |

加群:Fire_Lady9还能得到更多

发表评论

登录后才能评论