恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
数据可视化的那些事儿
0.0°
2018-03-02 原创文章 经验/观点 举报 6574 18 16 0

当我们谈论数据可视化,我们在谈什么……

最近数据可视化方面的声音不绝于耳,慢慢有更多的设计师开始关注这个领域,今天就跟大家来了解下这个很多设计师们陌生的领域。


人工智能的挑战


Image title

做 Banner 的人工智能系统鲁班


今年4月28日阿里巴巴 UCAN 论坛在西溪园区召开。大会上阿里对外公布了会做 Banner 的鲁班,鲁班同学在去年双十一期间设计了1.7亿张 Banner,1.7亿张 Banner 什么概念?满打满算需要100个设计师不吃不喝连续做300年,设计师们听了这个消息纷纷表示瑟瑟发抖,饭碗不保。

Image title

江湖上流传着一句话,上帝为你关上一扇门的同时,还会顺便夹了你的脑袋,并且带上了窗户,合上了天窗,还锁住了后门,甚至填上了墙缝……

实际上人工智能对设计的挑战已经不仅限于做 Banner 了。我们来盘点一下我们的工作有哪些领域受到人工智能的挑战。

Image title

自适应不同尺寸的广告模板


广告模板,来自阿里妈妈UED。输入文案和素材,输出多种排版方案,调整尺寸自动调整排版和布局。


Image title

AUTO LAYOUT 阿里国际 UED 和阿里 iDTS 视觉计算团队


AUTO LAYOUT 来自阿里国际 UED 和阿里 iDST 视觉计算团队。网上资料较少没找到更多有价值的信息。


Image title

Google AutoDraw ( autodraw.com ) 如打不开请科学上网


Google AutoDraw 只需要画出简单的线条就可以画出图形小图标。利用机器学习技术识别我们随手涂鸦出来的内容,然后「自动重画」成插图。如果你对自己的画作很满意,也可以关闭自动提示。


Image title

ARKie 来自 ARK Design ( arkie.cn )


ARKie 来自国内著名的设计服务团队 ARK Design,ARKie 今年四月份的时候拿到4千万的A轮融资。使用方法是输入文案和图片,点击“生成图片”,得到的结果是这样的。


Image title

简单试用 ARKie 的成果


8月21日 ARKie 更新了版本,上一个版本生成的结果很多文字可读性不好,这个版本至少生成的图片大部分文字可读了,希望ARKie下个版本能更聪明更好用。


Image title

去年刷爆朋友圈的滤镜APP Prisma


去年在朋友圈刷屏的滤镜APP Prisma,Prisma 的原理是用卷积神经网络算法学习知名画作的画风,然后再对图片进行智能风格化。相信很多同学都用过或见过这款 APP 吧。


Image title

Painting Fool 来自英国的法尔茅斯大学


Painting Fool 是一个大学实验室里面做的产品。这些画乍一看跟人画的差不多(比我画的好)。值得注意的是本来程序设定是用彩色绘画的,本来输出的画应该像老师背后屏幕上这两张一样,但是有一次程序智能选择了全部用灰色去画出这样一幅画,就是杨澜手中灰色的这张,这个画风不是事先编入程序的,这就有点智能了。这幅画后来还拿去巴黎的画展展出了。


Image title

自动上色 http://paintschainer.preferred.tech


PaintsChainer 是一个自动上色的服务,上传线稿点“上色”按钮就会自动上色,如果对自动上色的结果不满意可以手动给这些区域画上有颜色的点,重新按“上色”按钮输出上好颜色的图片。喜欢画漫画的同学可以去尝试一下这个服务。(手绘稿来自Pixiv.net 画师 Alexander Zazil )


看到人工智能能做这么多设计工作,设计师们是不是瑟瑟发抖了啊,嘿嘿嘿!其实不用慌,根据热力学第二定律,这个世界总体上会变得越来越复杂。曾经汽车取代马车消灭了一些工种,但是产生了更多的工作机会。人工智能可能以后也会取代一些设计工作,但会产生更多我们发挥价值的地方。数据可视化就有可能就是设计师们未来发挥价值的地方之一。


数据可视化热潮


数据可视化不是新出现的事物,实际上一百多年前就有了,我们在学生时代就学过柱形图、折线图和扇形图,最近的数据可视化是随着大数据行业的火热起来的 。


2015年全球大数据市场规模接近1500亿人民币,同比增长24.2%;我国大数据市场规模为160亿元,仅占全球总市场规模的10.7%,但同比增长率为65.3%,是全球增长率的2.7倍。2016年增长58%(数据来自36kr 大数据行业研究报告)。


数据可视化是大数据产业链中的基础支撑产业,是数据服务中针对海量数据提供服务的部分。其价值在于从海量数据中提取有用信息,以方便企业针对市场及自身用户开展市场营销活动、进行市场预测与生产优化、通过风险控制最终实现经营活动的利润能最大化。


在大数据行业中,数据可视化起到的作用是更好的分享和传达数据信息,通过设计之美有效地缩短信息传达的距离,这也是数据可视化存在的原因。通过数据可视化的设计我们希望达到的目的是让数据通过视觉形式使信息更容易被接受,让数据的内容更容易被理解,让数据结论更容易被记忆。


现在我们知道为什么要做数据可视化了,具体来讲数据可视化的工作应该怎么开展呢?


我们来看一下数据可视化的工作流,第一步是获得原始数据,这些数据如果没有前面的职能给我们提供的话,有可能需要我们从数据库查询获取,所以这里有可能需要我们写一些简单的代码。获取到数据之后需要做初步的分类、筛选、排序。然后再整理排列,在这一步要整理清楚数据和数据之间的相互关系,对应关系,数据的展现形式是柱形图、折线图还是扇形图,各个轴用的数据类型也在这一步确定。最后是视觉展示,在图形和数据上建立关系,加上颜色,或者对图形进行一些具象化地处理,这一步也是我们设计师主要的工作内容。


Image title

数据可视化工作流


这四步是设计的工作部分,实际上我们在设计开始之前就需要介入。在设计开始之前需要我们了解项目的需求,了解用户的特征。在设计完成之后也需要把设计成果推进,比如让前端用代码实现,最后测试验证,发现问题再返回去修改优化。跟UI设计的工作流很类似。


看了这么多理论大家可能脑子有点晕了,我们来放松一下看几个有意思的案例。

Image title

能看出来这个图表示什么意思吗?


这个图表示的是一瓶果汁里每种水果的含量。这个案例整体用了扇形图的形式,作者在扇形图的基础上,用水果切块的角度来表示扇形的角度。非常形象,让人一看就明白。在满足数据可视化的目的(容易接受、容易理解、容易记忆)基础上,这个形式还表达了果汁用的水果都很新鲜不含反腐剂的感觉,这就很厉害了,这个设计可以作为线下地铁、电梯广告投放。


Image title

星巴克咖啡类型介绍


这张图是说明星巴克不同种类咖啡的不同成分含量的,不同种咖啡的组成和比例不一样,这里作者用了柱形图的形式,整个柱子的形状用咖啡杯表示,用不同的颜色高度表示不同成分的含量。


Image title

这张图是的意思是1/4的高中生有吸烟习惯,四根烟里面有一根烟是抽过的。其中80%的人进社会后继续抽烟,烟灰缸80%的区域面积被使用。其中有一半人比同龄人寿命短13年以上,火柴有一半已经熄灭了,有一半还未使用。


Image title

左边这个图一看,2013年2百万比2012年1百万高了一倍,业务做得很棒棒哦!但是看右边的图,加入2010年、2011年的数据后发现,11年是4百万,12、13年业务显著下滑。左边的设计让用户对事实错误地理解,右边的设计才能让用户正确理解事实真相。


Image title

左边这个图一看,二月数据比一月增长一倍,三月比二月增长50%。实际上每个月的增长率微乎其微。


数据可视化的应用场景


数据可视化应用场景主要是这四大类大屏、触摸屏、网页、文档/视频。


Image title

大屏,双十一交易大屏


Image title

触摸屏,有数据展示的 APP 和工业产品


Image title

网页,管理后台的数据统计


Image title文档,截取自 2017 IXDC 用户体验行业调查报告


行业报告和调查研究报告,会用数据图直观地表达结论和观点,很有说服力。


大数据时代的数据可视化具有直观、实时、交互性的特征。基于3D 动效等技术我们可以用更直观更有冲击力的方式去表现数据,使数据更符合真实物理世界特征,加强用户对数据的感知能力。允许用户选择感兴趣的内容或者改变数据的展示形式,更好的促进用户和数据之间的交流。如今依托高速通信网络,在诸如监控这样的快速决策场景,数据的时效性显得尤为重要。复杂的数据和用户的接受能力之间的矛盾使得数据可视化的交互性变得尤为重要,允许用户选择和改变数据的呈现将更好的促进用户与数据之间的互动。


Image title

数据可视化设计技能树


数据可视化设计需要的技能首先对业务和用户有理解,清楚我们要展示的数据和需要从数据中获取的结论。数据分析和统计的能力,这一块可能需要简单的编程能力,从数据库中调取和计算。另外就是设计能力,除了色彩、布局、字体、层次这些平面的基础外,还需要具备三维、动画、交互设计的能力。另外是对可视化结果检验测试,沟通、团队合作等软实力。


市面上有一些现有的可视化组件可供选用,国内用的比较多的是 e-charts 和 DataV ,用这些现有组件设计和开发可以较大地提升设计和开发效率,优势是使用简单、效率高,降低初创团队的开发成本。缺点也很明显,可视化的形式受组建局限,无法用自己设计的有创意的自定义样式。


目前数据可视化的挑战是更全面地理解数据形式,更细化地数据表达形式探索,还有对更美的呈现方式的探索。未来随着数据的大量增加,数据可视化的复杂程度和难度也会增加,未来面对更复杂更多样的数据,对数据可视化的美学提出越来越高的要求。纵观历史,随着人们接受并习惯了一种新的发明后,接下来就是对其进行一步步的优化和美化,以配合时代的要求, 数据可视化也是如此,因为它正在变得司空见惯,良好的阅读体验和视觉表现将成为其与竞品所区分的特征。这需要我们这一代设计师去探索更全面更美的数据可视化形式。


Image title

数据可视化概念设计


除特殊说明外其他图片均来自互联网。

感谢好友@费辉 在数据可视化设计经验方面的帮助。

更多设计+人工智能案例推荐 https://zhuanlan.zhihu.com/p/27206222

更新:2018-03-02

收藏

18人已收藏

  • 3

    作品

  • 10

    粉丝

  • 25

    关注

  • 竞品调研:离不开的登录注册
  • 网易云音乐4.0.0首页更新了些啥

    猜你喜欢

      2018-03-02 原创文章 经验/观点 举报 6574 18 16 0

      数据可视化的那些事儿

      0.0°

      你确定要举报数据可视化的那些事儿

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      18
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录