企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

建站知识

Website development

上海网站设计开发云智APP数据图表设计的办法全面总结

发布时间:2015-12-28 09:26:24

TAGS:国外网站设计公司,公司网站设计合同

做APP的数据图表设计之前,你考虑过移动端屏幕大小与属性吗?考虑过可视化数据图表,提升APP气质吗?考虑过在APP和WEB端,数据图表的展示有何不同吗?也许你都考虑过,但作为一篇科普文,还是要从基础的说起。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

以数据图表为主的APP有哪些?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

前期,yoyo通过App Store、MobilePattern、Dribbble疯狂搜图,积累了以下丰富的案例。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

10ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

通常,我们见到有数据图表的APP无外乎下面这几类:0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

天气类0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

20ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

到App Store随手一搜“天气”,搜索列表中展示的APP无一不是在风景图上添加了天气温度等。以下推荐了一个名为“Fresh Air”的APP,从设计上区别于常规天气APP,可以根据时间和温度背景色有调整。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

运动类0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

30ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

随着各种手环的流行,各位对步数、睡眠质量等数据也更加看重。国外除了Fitbit、Jawbone、MisfitShine手环外,国内的科技公司也相继推出各种价格上更占优势的手环,例如小米手环。鉴于这类APP各位都比较熟悉,以下就列举了一个各位或许不太知晓的APP,界面以深色底为主:FitPort,它的数据比较丰富,除了记录步数外,还对体重和能量消耗有记录。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

健康类0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

40ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

健康类的APP除了关注身心健康外,还有一些智能硬件能检测环境的安全、舒适性,例如下面的NEST,是一款家庭恒温器,它可以通过记录客户的室内温度数据,智能识别客户习惯,并将室温调整到舒适的状态。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

50ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Clue是一款姨妈助手,在数据展示上比美柚等做得更轻松,它会根据不同阶段的心情做可视化,例如临近姨妈期用一些爆炸云朵表达烦躁的心情。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

财务类0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

60ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

各种记账类APP和理财类APP几乎囊括了所有图表样式,趋势图、饼状图、柱状图应有尽有。以下列举的Spendee在图表设计上算是行业翘楚。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

专业数据分析类0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

70ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

随着移动办公的必需,有一些专业的数据分析平台精炼了产品功能,必需在移动端展现。以下列举的Google Quicklytics 便是Google Analytics在移动端的产品体现。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如何制作数据图表?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

看了以上这些APP,基本对数据图表有了直观的感受。假如你的APP也必需呈现数据图表,那yoyo接下来的分享期望对你有所帮助。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一、配色0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

A)深色底0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

深色底上的图表通常为了营造一种氛围,展示数据信息一般较少,此时可以选用鲜亮的色彩,这样图表信息容易从深色中跳出来。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

80ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

B)浅色底0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

假如必需清晰展示大量的数据信息,提示选用浅色底,数据信息在浅色底上的识别度相对较高。但必需留意的是:假如数据信息量太小,浅色底上会显得页面太空,这会让客户觉得你的平台没有内容或者热度。当然,这可以通过图形质感、颜色等优化。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

90ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 左(Google Analytics)中(Clue)右(Spendee)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下面就深色底和浅色底的阅读效率进行比较:0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在以数据分析为主、有大量数据的页面中,浅色底的页面可读性更高,阅读效率也会更高。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

100ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

110ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

C)色彩底0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

有时,为了让页面更加生动,可以将数据信息展示在大面积色块上。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

商务类APP可采用用蓝色、绿色系作为底色。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

运动类APP可选用的色彩自由度更高,偏活力的色彩,如橙色、黄色、橘色等都可以。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

120ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 左(Apple Health)中(支付宝)右(Dribbble)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

D)图片底0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

为了让数据阅读更加轻松,可采用图片底。在一些天气类APP中,这种使用方式比较常见,图片内容与数据信息产生关联,提升可读性。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

130ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

健康类APP,让阅读数据时能有更加轻松的心情。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

140ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Misfit Shine0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

天气类APP,首页呈现会根据当时天气情况自动拉取背景图片。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

150ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 左(天气通)中(墨迹天气)右(Yahoo天气)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

二、图表类型0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

接下来会简单介绍我们通常在APP中见到的图表类型。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

A)折线图0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[折线图] 将序列显示为一组由单个线条连接的点;用于表示在一段连续时间内发生的大量数据。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

160ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 左(Dribbble)右(Apple Health)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

B)曲线图0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[曲线图] 使用光滑的曲线来连接。假如数据是连贯实时的,且任意两点间的数据具有分析价值,用[曲线图] 比用[折线图] 更合适,如24小时数据。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

170ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

C)饼图0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[饼图] 常用于显示每个组成成分的数值相对总体的百分比。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

180ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

D)环形图,表现进度0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[环形图] 即中心为空的饼图。除了显示占比,还可用来显示进度加载,拟钟表/ 计时器设计。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

190ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

200ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

E)条形图&柱状图0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[条形图] 将序列显示为若干组水平图条。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[柱形图] 将序列显示为按类别分组的垂直图条。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

210ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

F)热度图0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[热度图] 常用在基于地理位置,对一段时间的数据(常常是离散量)累积量进行分布统计的图表,进而可以分析数据密集区域/稀疏区域。这是一种展示效果较好的表达方式。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

220ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

G)雷达图0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

[雷达图] 在比较多个类别数据序列以及查看整体情况很有用,既可以查看自身整体发展的均衡情况,也可以对比两个序列整体的优劣势。这也是一种展示效果不错的数据表达方式,在展示整体综合信息上很直观。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

230ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 左中(Dribbble)右(支付宝)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

H)列表0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

列表是一种常见的表达方式,通常我们见到的列表往往是如下右的Spendee的界面,但也有一些APP做了可视化尝试,在列表中通过对数据可视化做一些分区,详见如下左和中Elevate的界面。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

240ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 左中(Elevate)右(Spendee)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

三、图表组织0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

知晓基本的图表类型后,接下来的要点是进行图表的组织。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

移动设备大的优点是屏幕小,客户每次可接收的数据信息量小,所以如何有效组织图表信息是一个重要的设计点。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

A)如何展示单个数据?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

鉴于APP屏幕小,单个页面中就展示一个重要数据,如何设计?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

此时选用圆形,会是一个不错的选择,因为它在页面中形成视觉中心。不管是饼状图,还是环形图,或是拥有视觉中心的雷达图,都会让页面上呈现一个视觉要点。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

单个数据未免有些单调,为了让页面更加丰富,可采用深色、彩色、图片为背景辅以纯色的图形(如芝麻信用分),或者将像Clue一样,用重色将图形撑满,求得视觉上的饱满。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

250ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 中(Clue)右(支付宝)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

B)如何展示主次数据?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

要在页面中展示两到三种类型的数据,如何设计?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

此时要留意以稍大的篇幅突出要点数据,弱化次要数据,尽量让主次数据的图表类型不一致,曲线图、饼图、环形图、柱状图等基础图表,交替使用,这样使得整个页面层次清晰,内容丰富。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

260ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 上:中右(Dribbble) 下:中(FitPort)右(Spendee)0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

C)如何展示大量数据?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

还有一种类型,整个页面要分几大模块展示大量的数据信息,如何设计?0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

客户或许要刷几屏才能把所有的数据阅读完,此时,提示每个模块单独采用一种图表类型,各个模块的图表类型均不同,这样会减轻客户对数据展示的疲劳度。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

270ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ City Guides0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

四、动效0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

动效可以提升产品趣味性,尤其在展示大量数据信息时,使用动效能缓解阅读压力。数据图表中常见的动效有以下几种:0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

A)以时间先后动态呈现数据0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

280ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Spendee0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

B)导航切换0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

290ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

C)展示更多功能0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

300ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

D)屏幕横纵向切换数据0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

310ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Dribbble0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

五、字体0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一款字体使用的好,能彰显整个APP的气质,让整个APP特立独行。但鉴于APP字体版权及字体包大小,多数APP开发者都不把字体作为考虑范畴。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

CityGuides是一款特别出色的APP,其图表设计很棒,字体选用也与整个风格设计相得益彰,非常出彩。有兴趣的可以网上下载这个字体(Optigiant),非商业用途的情况很受用。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

320ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ CityGuides by National Geographic0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

APP中数据图表设计远不止于此,还是实践出真知。0ZZ上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,6290,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!