大屏界面设计文章及欣赏

大屏数据可视化设计指南

分享达人

可能是目前大屏数据可视化设计介绍最详尽的一篇文章了,可以当做设计手册使用的一篇经验分享

Image title


一、基础概念


1、什么是数据可视化


把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。


在当前新技术支持下,数据可视化除了“可视”,还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

Image title


数据可视化作品《launchit》

作者:Shane Mielke 

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数

Image title


数据可视化作品《world-drawn-by-travelers》

作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两国家的人们互动越频繁

Image title


2、什么是大屏数据可视化


大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

Image title

Image title


利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论、决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。


数据分析类

图片来源:必应;图片作者:帆软软件有限公司

Image title


二、大屏数据可视化设计原则:设计服务需求、先总览后细节


设计服务需求


大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。


先总览后细节


大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。



三、大屏可视化设计流程


规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

Image title


1、根据业务场景抽取关键指标


关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。


确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

Image title



2、确立指标分析维度


“横看成岭侧成峰”。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

Image title

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。


联系:数据之间的相关性

分布:指标里的数据主要集中在什么范围、表现出怎样的规律

比较:数据之间存在何种差异、差异主要体现在哪些方面

构成:指标里的数据都由哪几部分组成、每部分占比如何


当然,上图例举的示例图表都比较传统,在大屏数据可视化中常还有另一类地理信息(常以2/3D地图、地球呈现)出现。上图虽未包含这类图形,但它提供给我们的确定数据分析维度的思路和方法是相通的,可借鉴。


3、选定可视化图表类型


当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。


选定图表注意事项:易理解、可实现;


易理解就是可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

Image title


可实现


1、我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现

2、我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计!一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放

Image title


4、了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率

Image title

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率;此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。



5、页面布局、划分


尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

Image title


6、定义设计风格


很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有APP或者Web风格定义的经验。我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢?情绪版!

大屏虽酷炫,但实际上也是运行在浏览器里的Web页面,所以大屏设计风格定义方法也同样可以是用情绪版来做,这种方法也是目前比较科学的风格定义手段

Image title

上图提供了情绪版应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料哈。

情绪版的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方爸爸做大屏,这个流程也可以让我们提出的方案更有说服力



7、可视化设计


根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

Image title


8、样图沟通确认


这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。

Image title

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个“低保真”原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。


因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

1、之前确立的布局在放入设计内容后是否依然合适

2、确立的图表类型带入数据后是否仍然客观准确

3、根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受

4、已有的样式、数据内容、动效等在开发实现方面是否存在问题

5、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象


跟大屏“沟通”是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出demo,反复测试多次。



9、页面定稿、开发


事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

Image title

切图与标注

由于大屏实际就是一个web页面,所以开发阶段的切图与标注是少不了的。


切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。


标注

Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用rem作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。



10、整体细节调优与测试


这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。


视觉方面的测试(有点像APP的UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。


性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在奔溃、卡死等情况;后台控制系统能否正常切换前端页面显示。



四、大屏设计的注意事项


1、字体使用


字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

Image title

如果页面是云端部署,需要嵌入字体包时,我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

Image title

关于字体版权获取相关问题,公众号回复“可视化”获取



2、颜色搭配


 1、色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色

Image title

2、使用深色暗色背景:深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容、做出一些流光、粒子等酷炫的效果,


3、渐变色慎重使用:大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。



3、页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各小的显示单元,并尽量避免关键数据被拼缝分割

Image title



五、Q&A


1、设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。



2、大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以



3、1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会发虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下。

大屏逻辑分辨率(设计稿尺寸)——显卡输出分辨率——视频矩阵切换器(DVI)支持分辨率——大屏实际物理分辨率。


一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率,传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于DVI支持分辨率时显示效果最佳。输出分辨率低于DVI支持分辨率,DVI会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。


离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰



4、设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。



5、除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云DataV、腾讯云图、百度Sugar等



6、数据可视化的图表样式可以在那些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览产看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础修改

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的,所以彼此多沟通交流是在太重要了

Image title


总结:数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流

转自UI中国-BYMD


医疗院感可视化

分享达人


可视化是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论、方法和技术。面对医疗行业,如何将行业数据,转化为视觉可视化中的点线面,是在这个项目中需要思考的问题。


本文将带来设计师在医疗院感可视化项目中的设计过程及思考,讲述如何在业务场景下对数据进行抽取表达。通过可视化打破传统院感系统的表单呈现,使院感场景具备互动性、观赏性,满足不同角色的使用需求。同时院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析,从而控制院感发生和预防。

本项目以浙江省建德市第一人民医院为案例,地理数据以建德医院坐标为准。



项目背景
院感是什么?院感为医院感染,入院48小时内都有可能感染到院感细菌。在医院里有专门的院感医生职位,对医院感染进行有效的预防与控制。而传统院感管理的工作流:医护人员及院感医生 > 院感系统分析疑似病例 > 得出结论预防或治疗。这种偏人工的方式数据获取方式,无法更的获取院感发生的原因、定位、以及未来的院感预测。


P1 因此我们通过对医院数据的整理,抽离出影响院感的数据,将院感发生、发展、管控、治疗、预测全流程进行整合。


P2 通过医院>楼层>人员三个层面,空间和时间两个维度对院感展示。打破传统院感系统的表单呈现,使院感场景具备互动性、观赏性,满足不同角色的使用需求:如院长的展示性需求。院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析,从而控制院感发生和预防。


P3 同时在这样的设计场景下,可以覆盖的医疗业务场景和数据单位也会更多元,具有一定的商业化价值。


P4 设计流程
整个项目的设计流程可以分为4个阶段:信息收集、可视化、线上搭建、效果调试。在此项目实践中,重点投入在前三大部分。


P5 Part1信息收集
我们基于项目背景,梳理要展现的数据指标,对整体业务场景进行故事脚本的规划(即如何展现前期的数据收集,并把其串联在整体业务场景中),设定动作摄像机语言,同时也需要了解最终呈现的硬件设备与使用环境。


P6 Part2可视化

1.交互信息框架
首先梳理院感的信息框架和交互方式。


整个大屏分为院楼层,呈现整体院感数据的统计;楼层屏,作为重点病区的监测预测;个人屏,分析病例回溯病程,从而预测院感。三屏之间相互跳转, 交互演示方式从医院的外部跳转内部结构、再到患者的个人维度,三屏都分别展示相关的数据指标。


P7 2.视觉风格
在大屏视效风格探索上,期初的目标是希望可以打造不一样行业视觉语言,所以选择不同于以往的设计大屏风格,选择白色的风格,符合大家对医护行业的认知。但到中期发现,在硬件设备上展示发是过曝的。因此对设计风格进行调整改为X光片的风格,色系上偏冷绿的感觉。这是在这个项目中的试错经验之一。


P8 3.建模设计
在可视化部分中遇到的难点:建筑模型的高还原。下图为建德第一人民医院实拍图。在大屏项目中,必须真实还原地理位置。而在此医院没有清晰的CAD图纸提供的;在Google的卫星地图下也没有的建筑结构的,所以我在建模的过程中,是踩了坑的,先盲画了一版,但是精细度不够,过于粗糙。


P9 因此我反复看得到的资料,通过在确定地理氛围内,去丰富场景。这样的好处是使业务场景更加丰富,包括扩展到院外的车流数据,为业务场景提供更多可能性 当然后期也摇到了建筑内部的消防图,根据消防图绘制内部结构。


P10 4.数据面板
对可视化组件的组件进行设计:时间筛选、数据统计、占比关系、趋势分析。设计之前也参考了很多概念版的可视化设计,希望在院感屏上可以呈现一种科技概念的感觉。



P11 Part3线上搭建
1.获取地理数据
这部分是非常耗时的,datav是数据驱动的可视化产品,在搭建部分,是全程依靠datav平台的。
首先需要明确地理数据,通过高德数据通过点线成面,可以作为场景定位,也就是物理模型的经纬度数据 后面还原数据效果,造虚拟数据,是非常依赖于这个坐标数据的。
119.291724 , 29.472365
这是建德医院的坐标,医院在地图上的数据是很简化的,颗粒度很大,具体位置无法显示。

P12 因此我们需要建立与地理数据绑定的建模,先对位置。

P13 在这个过程中我发现,如果最开始没有对准位置,也不用紧张,可以在DATAV平台增加hook数据过滤器,解决地理数据与世界坐标无法对齐的问题。

2.线上场景还原
根据对确定过位置模型进行烘焙还原。这个过程中遇到了一些不知名的原因烘焙失败,原因可能是命名有中文/位置数据错误/模型块面复杂等,遇到这样的问题就需要重新从头检查烘焙流程每一步。

P14  3.数据维度展示还原
这一步我们需要把前期做好的数据可视化效果,还原到线上模型中。在这一步我遇到的问题是因建德医院内部具体结构的缺失,使一些可视化效果无法精准匹配到模型上。所以设计过程中只能依赖于在对的地理位置上丰富的场景内造数据,这个过程是比较吃力的。


P15 这个问题的解决办法是通过开发工具和导出的结构俯视图,对位置,然后转化出LEGO的数据



P16 在数据效果还原的过程中,也发现我在前期设计的数据效果,不能全部实现,有些是依赖于开发的 。这时可以通过其他组件效果代替尝试,比如热力的效果用粒子放大,通过参数调节得到热力 再比如局部房间的扫管,通过设计部分多次烘焙模型,不断叠加扫光层,得到房间监测的效果
P17 设计小结
综合以上的经验,院感可视化从设计到落地,整体结构应该是这样从物理基础坐标的获取、到场景搭建、再到数据展示的过程。在这个过程中会用到DATAV、C4D、数据库、简单的代码等技术来实现。

P18 这个项目虽然这只是医疗行业中一个小的业务场景,但我们的业务数据提取及可视化设计思路,他不仅限于医疗行业,同时也可以成为场馆类大屏解决方案的一部分,是具有一定商业化价值的。同时在这过程中沉淀下来的人体结构模型,和一些设计经验,是可以复用到对应行业解决方案中,达到提效。

转自:

实战经验!可视化大屏设计案例全方位复盘!

雪涛

随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。所以数据可视化设计,绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化设计,肯定是一头雾水,不知从何入手。本文结合最近设计案例,分享大屏可视化设计过程中遇到的一些问题以及设计思路,供大家一起交流与学习。

>

△ 最终动态效果图

案例分解

首先放的是项目改版前的页面:

1. 需求介绍

某某应用云,分为五大云平台模块:云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。

可视化⼤屏首页需要展示的内容包括:

  • 全局数据:云平台的数据总量,以及 4 个重要关注数据项,2 个次要关注数据项;
  • 云平台的五⼤大模块:云端综合调度、数据查询通道、数据应用处理理、数据存储管理、管理运行维护(只有两个 tab 切换链接);
  • 搜索功能:搜索类型分为 6 个,默认选中「综合」类型进行搜索;
  • 重点关注数据信息按指标分多维度展示:原始图上的维度包括指标、地图、地域排名、部⻔排名、类别;
  • 云导航:展示场景在公司展厅,材质为 Led 拼接屏,设计尺寸为 1920×1080。

2. 需求分析

分析大屏可视化的一些共性:

  • 屏幕大:大屏一般都是多屏拼接,整体屏幕面积大。
  • 观距远:用户需要远处观看屏幕,要保证数据文字清晰可见。
  • 交互弱:通过电脑已经无法满足大屏交互需求,现在也有部分开始采用 ipad、手机、激光笔等方式。
  • 视觉强:背景色多采用重色,衬托凸显数据,更好地为观者传达数据信息。
  • 一屏一内容:一屏内容,说明一件主要事情,统计好它的相关数据,避免其他的干扰。

结合大屏的一些共性特点针对看到的线上旧版本设计,分析存在的问题。

  • 布局混乱,导致视觉不平衡,看不出页面层次。
  • 蓝色为主色调,黄色点缀颜色显得比较单一没有规则。
  • 图表比较单一,不能有效传达数据信息。

3. 布局

整合数据,分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局,可以先在纸上画一画,然后脑子里有大概思路以后再用电脑绘制,如下图:

采用栅格化对称布局,让整体视觉左右平衡。

4. 风格

一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。

了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择,确定一个大致的风格,然后结合具体的业务场景进行设计。

5. 颜色

颜色上结合产品使用场景,以及整个产品调性还是以蓝色为主,背景选用深色调,让视觉更好聚焦,内容部分采用比较透亮的蓝色系,保证内容与背景有一定的对比关系,便于业务信息传达。

6. 主体地图

地图为大屏的主要展示内容,首先分析展示的目的是为了看清各个城市间的不同分布情况,和城市数据的汇集效果。

如图:

改版前:地图过于单薄,没有立体感,太平缺乏层次,颜色黄色不符合产品调性。

改版后:主色调改为科技蓝,在原有地图上增加外发光和多层阴影叠加,增加地图的立体感,地图上增加科技线条上升的效果代表每个城市数据变化的提升,地图背景采用比较弱化的转动线条圆形,衬托地图主体,使得画面更加丰富。

7. 地图效果的实现方法

首先用 ps 拉框助手新建一个山东的地图(拉框助手的使用获取方法可以参照上篇文章)。

完成后会得到一个叫 map 文件夹的地图分层文件,如图所示。这里需要对每个城市的颜色进行调整,为了区分每个城市之间的数据不同关系。

调整完块之间的颜色后,就需要给地图整体增加立体效果。

首先,是整体给地图加了一个描边和外发光。描边是为了强化地图边缘,外发光是为了地图与背景有一个区分。

其次为了增加地图立体感,需要给地图增加多层阴影叠加的效果。复制现有形状层,拼合成一个山东省的地图,如下图:

最后,把拼合好的图层移动到 map 文件夹下面,阴影可以添加多层,这里针对每一层进行不同颜色大小的调整,就是下面的这种效果了,地图的体积厚度感也就出来了。这里只是提供一个大概的思路,大家可以多去尝试。

整体地图效果调整完成后,就是给地图增加些纹理,和上升线条这些细节上的效果了。纹理可以用图案叠加,或者找一张纹理图剪切蒙版实现,最后再添加上升线条的效果,地图的效果就完成了。

最后加上线条上升的动态效果:

8. 数据图表拆分

在选定数据图表之前,首先要确定图表之间的关系,可以从以下四个维度进行思考分析:

  • 联系:数据之间的相关性;
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律;
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面;
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何。

可以参照下面这个图:

△ 图片来自于网络,侵删

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看,可根据选择的图表在其基础之上进行美化设计,总之选定图表最重要的两个点就是:易理解、可实现。

易理解:就是要考虑最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。

可实现:主要是跟开发前期沟通好实现方式,一般都采用开源组件库的居多,比如 echarts 组件库,我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放。

案例中在图表选择上,强化科技感元素,条形图打破传统条形图的展示形式,采用电池晶格的展示形式,在保持图表功能的同时更加凸显科技感。

从页面的整体看,已经有两处用到了条形图、柱状图,如果这里还是条形图,那么页面看起来会很单调,图表也没有表现出多样性,所以现在设计要体现图表的多样性也能够有排名的直观呈现。以下图表采用科技圆盘的形式,运用科技线条的上升状态代表排名的先后顺序,所有图表都采用数据降序来展示排名更加直观。

改版前的图标样式比较单一,改版后针对每组数据不同的对比形式,采用比较贴合的图表进行展示,篇幅原因就不一一做展示了。

附上最终视觉效果图:

总结

大屏设计需要注意的点:

  • 需求分析:对需求进行梳理,分清数据间的主次关系以及对比指标,跟客户沟通清楚细节。
  • 确认布局:布局上根据数据主次关系,采用栅格化布局(可以在纸上画一下理清思路)。
  • 情绪板定义设计关键词,确定风格。找参考图给客户确认大致的设计方向。
  • 颜色贴合业务。
  • 图表易理解可实现。

以上是我对数据可视化大屏的案例总结,希望能帮助到你。除此之外还有很多地方没有涉及到,包括具体设计的操作方式、选取图形元素的具体方法,以及在各种大屏中所需要的相对应的组件等,在庞大的可视化大屏设计系统中,还有很多值得学习参考和优化的知识,欢迎沟通交流,大家一起努力。

文章来源:优设   

数据可视化设计师如何建立灵感库?

分享达人

 


一、前言

 

与其他相对成熟的设计领域(UI、插画等)相比,数据可视化尚显小众,在一个细分、小众、不成熟的领域里做设计,“怎么去找灵感”确实是一些小伙伴经常遇到的问题。本文以本人工作经验为基础,系统性分析了该问题及对应的解决方法,并将其整理成文与大家分享,这在数据可视化行业内尚属首次。当然了,本文虽面向数据可视化设计师群体,但其中的方法是通用的,运用在其他设计领域也完全事半功倍。

 

二、本文结构概览


本文围绕“搜什么——去哪儿搜——怎么搜——素材的整理——灵感的迭代与更新” 五大块展开。下图向展示了这篇文章的知识结构,大家可根据思维导图,选择自己感兴趣的部分阅读,也可把这张图作为知识卡片收藏,帮助自己梳理建立灵感库的思路和方法。


  

三、灵感库建立的基础


灵感库的建立大体上分主动与被动两种。主动,是我们有意识的收集、整理相关作品素材形成灵感库的过程;被动,指通过朋友圈好友分享、同行推荐等获取灵感的方法。因为后者更不可控,影响因素较多,比如你所处的圈子、社交网络使用习惯等都会影响被动获取的质量。所以今天,我跟大家分享的主要是第一种主动建立灵感库的方法,而这个方法的核心我把它归纳为两个字 :搜索。

 

搜索是现在这个时代我们主动获取信息的最主要手段,每天我们通过各类关键词在各类APP上获取各样的服务、产品和资源。灵感的主动收集就是一个通过关键词搜索,然后分类、整理、研究、再利用的过程。所以影响灵感收集的主要因素其实就是我们能不能用好搜索。不同的搜索方法、渠道、关键词极大的影响着我们获取到的信息的质量,这也是本篇文章为何一搜索核心展开的原因。

 

如下图所示,同样的关键词在不同的搜索渠道,得到的内容质量是不一样的。

 

 

四、灵感库建立的第一步:搜什么?

 


互联网很大,如果没有明确的目标,找灵感的过程就跟刷抖音一样,恍恍惚惚几个小时,好像点了不少赞,收藏了不少干货,回头看其实并没有什么特别有价值的东西,所以找灵感要有目标,有KPI才行,有目标就有标准,有标准才有方向和效率。



如上图所示,我对数据可视化这个行业术语做了分析和拆解,这样做的目的是为之后搜索关键词的提取做思路的拓展。很多小伙伴在搜索可视化相关内容时,思路总是局限在“可视化”这个关键词上,但是直接使用这个关键词搜索,大多数时候并不能找到我们心里预期的结果,或者搜索多次后,看到的都是之前见过的作品,很难突破边界,获取更多新的灵感。造成的这个结果的原因显而易见,就是关键词的匮乏,不知道搜什么。而对“大屏数据可视化”进行解析之发现,以往的搜索,我们只使用了四个方向里的其中一个,其它三个方向并没有很好的利用。现在,我们以每个方向上的核心关键词为基础,去丰富它的下一级关键词,这样就会像枝桠新生一样,在各个节点延伸出丰富的词汇。



媒介就是数据可视化设计最终落地在什么平台,一般来讲,大屏数据可视化设计落地的媒介当然就是大屏了,以它为核心做关键词的发散,可以产生其它几个二级关键词


数据类型是主要数据的特征或来源,不同的数据类型,在可视化设计时有不同的视觉特征。比如地理信息的数据可视化,一般会与道路、河流、人造建筑、某区域内地标等一起出现,会有丰富的3D场景、动效,而图表信息相对较少;报表类信息的数据可视化,则主要以更好的展示报表内大量数据为主,所以强调信息的层级、主次,设计的目标是要减少用户认知负担、引起用户阅读兴趣,促进数据内容的有效传达,因而会较少使用动画,其次,因数据较多,也很难对应到某个具体的物理场景,故3D模型等也较少使用。

 

所以以数据类型为核心,拓展的二级关键词会让搜索结果更精准,更有针对性。


设计风格就是视觉设计整体上给人的想象和感受,好的设计就跟一个人一样,一定是有自己鲜明的个性和气质,能够引起人的共鸣和向往的,唯有如此,设计才能吸引人,从而影响人,并最终传递自己的观点给观者。所以设计风格的定义是视觉设计中最重要的一环,也是最需要灵感和创造力的部分。

 

作为数据可视化设计师,我们想要找到的参考是那些具有数据可视化风格的作品,但这些作品本身并不一定是在讲数据可视化的内容,只要作品某部分的设计有我们想要的那种“感觉”,就可以了,而这个作品可能是某段影片、某个动效、某种图形、某个元素或声音。基于这样的思路,我归纳了一些具有数据可视化风格但不一定都是数据可视化作品的关键词。这就是一个特别有意思的点,我门想要找到某个内容,但当我们用最贴切它的那个名字去找时,却不一定能找到最能代表它风格的作品。所以当我们跳出数据可视化这样一个具体的点,而从更抽象的设计风格这个层面去看待它的时候,就能更好的的发散思维、拿到了更多好的关键词,找到更多的刺激点。



以设计风格为例,我们从它的节点上找到任意一个关键词:SCI-FI,然后搜索这个关键词,我们看看搜索到的结果。

 


业务场景简单理解就是在什么情况下要解决什么问题,它是数据可视化的落脚点,也是数据可视化的商业价值所在。每个公司或团队,都会有自己专注的业务方向,所以在工作中找这方面的灵感,从业务场景入手效果最好。



简单回顾下,通过上部分文章的分析,我们从媒介、数据类型、设计风格、业务场景四个方面形成了一个数据可视化的关键词的矩阵。这个矩阵是建立灵感库的基础,之后我们每当我们有新的关键词要加入,或者有效果不好的关键词需要剔除,只需修改、迭代这个关键词矩阵即可。有了这个关键词矩阵后,我们如何利用它完成一次基于实际需求的灵感搜集?下面给大家举个小栗子来看一下怎么用。

 

一句话描述业务需求

首先用尽可能简短的一句话描述业务方诉求。

一句话描述业务诉求后,我们把业务需求带到关键词矩阵中,就会获得如下图的结果:

 

可以看到,带入需求后,按树状结构去匹配与需求相吻合的关键词,就可拿到明确的搜索指引目录,然后我们按搜索指引,开始灵感收集即可。

 

这里有个小小的点,就是为什么要尽可能用简短的一句话来描述业务方诉求,

 

1、这样做可以把那些优先级低的干扰因素都过滤掉,留下真正核心的诉求,越是能简短的概括,越能真正把握需求的核心。我个人一直以来与业务方沟通需求后,都会尝试用一句话概括,若需求方认可,开始设计工作;不认可,则继续沟通。

 

2、对于数据可视化设计师来讲,明确自己在工作流中的角色、承担的责任、要解决的问题以及最终交付怎样的产出尤为重要,因为只有清楚了这些,这样我们才能有效分配自己的时间、确定跟上下游的协作策略,避免盲目的没有KPI的设计。

 

 

五、灵感库建立的第二步:去哪儿搜?


合适的关键词是第一步,它保证了我们搜索结果的有效性,而去哪儿搜决定了我们搜索结果的质量。如下图,针对数据可视化设计师,我对“去哪儿搜”这个问题按我自己的从业经验做了梳理。

 

从我的归纳里大家可以发现,我把数据可视化设计师的灵感来源分为了四大块(其它行业的设计也大体上就这四块),分别是:设计网站、产品或服务提供方、独立设计师或工作室、视频网站。

 

第一部分:设计网站

 

设计网站部分列出的都是设计师们都熟悉的几个站点,在之前,大多数灵感的收集都可在花瓣完成,但花瓣最近几次改版之后,已经没有以前那么好用了。对数据可视化方面的素材搜索,个人经验下,强烈推荐大家去behance,虽然behance访问方面也面临一些困难,但是,但凡你想真的了解一些好的设计,这个网站,是你一定要想办法去经常逛逛的。至于为啥不推荐其它几个网站,倒并不是说其它网站不能用,只是搜索的结果相对局限。针对这块的具体分析,我会在文末的Q&A里进行。

 

 

第二部分:产品或服务提供方

 

我们知道,任何商业设计,一定是有一个业务或应用场景来支撑的,一定程度上设计就是在围绕业务场景提供视觉、交互、用户体验、品牌等方面的解决方案,也就是说设计是服务于业务场景的,反过来讲,服务于这个业务场景的就只有设计师么?当然不是。在市场条件下,服务的提供方除了像设计师这样的个体外,更多的是我们熟悉的另一个机构(组织),这个组织的名字叫“公司”。公司把大量专业的人员组织在一起,通过优势互补、强力协作,提供服务、解决需求方问题。对于数据可视化设计来讲,企业当然也参与其中。所以我们找灵感去服务提供方也是一个的方法。企业要证明自己的实力、要让潜在客户了解自己,必然会花大量的资源做营销做推广,而最常见的推广的落脚点就是企业官网。很多做数据可视化的公司,会在官网展示一些能体现自己业务特点、业务实力的案例,而这些案例就是这些企业最好的数据可视化设计作品了,没有人会在自己的脸上放垃圾上去,对不? 所以但凡有案例展示的官网,案列基本都是最典型最好的设计,所以从这些案例中找灵感,也是一个有意思且有效的方法和途径。

 

阿里DataV


Hightopo



 Tob.Design



第三部分:独立设计师或工作室

独立设计师一般给人的感觉是什么呢?就是在自己垂直的领域内牛逼,近乎神一样的存在。独立设计师要能顺利“独立”,当然是在设计能力、个人品牌建设、客户维护、运营管理等方面都有比较硬核的水准,所以这部分设计师作品一般不会差。而工作室一般都是一个或者几个知名设计师组成的团队,在管理方面更“公司化”一些,这样的工作产出也会比较稳定,水平较高。就可视化(包括类可视化)领域来讲,个人比较认可和喜欢的工作室有以下几个(欢迎大家评论里补充,或参与文末问卷调查),Ta们的作品风格鲜明,找灵感也是不错的参考

 

dennisschafer



huds+guis


以上对于“去哪儿搜”的分析,我相信可以给大家很好的启发:我们设计师寻找好的作品并不一定要通过设计相关网站进行,你看大家都能看到的东西,即使有突破,那也是大家所熟悉的样子,你只有从圈子里跳出去,看80%的人看不到的东西,你的灵感才有机会与众不同,标新立异。



 

 

六、灵感库建立的第三步:怎么搜?


前面两部分,我们介绍了搜什么(关键词的定义),去哪儿搜(合适的素材来源),接下来以behance为例跟大家聊聊怎么搜,介绍一些具体的方法。我们的目标是尽可能少的点击搜索按钮,且尽可能多的找到符合自己预期的有质量的作品。要做到这点,首先我改掉自己以往的不好的搜索习惯。

 

我知道我很多小伙伴都是输入一个关键词,然后看结果页,没有满意的就换一个关键词继续,这样做很低效,容易漏掉结果页中符合你预期的好作品,并且也容易造成关键词的浪费,通过第一部分关键词矩阵的介绍,大家都知道,关键词是被定位推导而来的,若不停的换关键词,很快就会出现关键词用完了但是依然没有找到好灵感的囧局,所以榨干每一个关键词是搜索的重要手段,具体怎么做到这一点,我个人有以下思路给大家参考:

 

1、直搜关键词:快速浏览、标记自己感兴趣的项目,稍后再做整理


通过这个结果页面我们看到,搜索结果包含“所有结果、项目、人物、情绪板”四个选项,默认显示所有结果,但这个意义不大,重点在项目跟情绪板。

 

项目

切换到项目标签,项目标签下展示的都是完整的项目作品,这是可以快速浏览,看到感兴趣的内容就把它标记到新的页面,等所有浏览查看结束后再细看每个项目,并对项目做进一步的分类和整理。

 

项目标签下提供的筛选项很实用,分类依据推荐“好评最多+本月”的组合,以月为单位既可选到大家都比较认可的新作品也避免了因数据波动造成部分作品质量差的情况。“已策展”类似站酷或UI中国的首页推荐,是被官方编辑认可和推荐的作品,一般都会有很高的质量,但时间上可能会比较旧。


 

在筛选器里面,有另一个比较实用的功能叫做“按色彩筛选”,如果客户或者业务方对主色调有要求,就可以通过色彩的筛选,找到更符合我们业务需求的相关作品借鉴,或者设计师自己对某类颜色的搭配总是调整不好,也可以通过筛选,看看其它同行是如何处理这类色彩的,这也是一个有针对性训练和学习的方法。


 

情绪版

情绪版就是花瓣里的画板,它是其Ta设计师采集的同类主题的作品合集,用法也跟花瓣一模一样,唯一的不同是花瓣可以采集站外的内容到画板,而behance只能采集站内的内容,其余两者完全一致。

 

 

情绪版默认是按时间的先后顺序排列的,所以可以通过筛选项,将排列顺序调整为“关注人数最多”,正常来讲,关注人数越多的情绪版收集的作品质量也越高。

 

 

2、利用作品标签聚合同一主题作品,并集中浏览

我们知道,像站酷、UI中国等平台,用户上传作品时,都需要给作品添加一些标签,这些标签的作用就是帮助网站做人工的作品分类,我们点击某一标签就能看到使用了同一标签的所有作品,可以说标签是比搜索关键词的内容检索手段。每一个作品下,都显示了作者上传作品时填写的标签,通过点击这些标签我们将搜索结果引入到了另一个更纯粹有效的内容领域。

 

更有趣的是,标签同样支持项目、情绪版这两个层面的进一步分类,同时也支持之前介绍过得分类筛选功能。也就是说,在最开始搜索时找准一个关键词,之后通过情绪板、作品标签等方式就能关联起来海量的内容。

 


3、按图索骥:Ta推荐的作品

通过前两步,我们已找到了一些比较不错的作品,而优秀作品的背后当然是优秀的设计师或团队。所以点进作者的主页看,一般都会有惊喜的。除了能看到作者自己的作品外,我想说的是另一个标签“好评”,好评这个标签其实体现了作者的审美和职业方向,如果作者本人在领域内已经足够专业,那么能被Ta欣赏和点赞的作品大概率也不会差,所以好评这个按钮,是借助行业大咖的手帮我们做了一次作品的筛选和收集,点这个标签进去大多数时候是不会让你失望的,一般都惊喜满满。


4、Ta关注的设计师:顺藤摸瓜,串起一个行业的大咖

在今天,每个设计师离自己领域里最顶尖的大咖,只隔着3.75个人,通过点击作者的“正在关注”,你可以看到设计师本人还关注了行业里的哪些设计师,通过这样的操作3到4次,你会发现总有那么几个人,会在这个略显复杂的网络中被不同的大咖同时关注,那么Ta就是这个行业里比较顶尖的人才了。

 

在“正在关注”下面会显示作者所在团队,因为好多项目其实一个人是很难完成的,大都是好几个设计师协作的结果,所以如果你找到的这个设计师作品足够牛逼,那说明他的团队也是很不错的,顺便关注一波就好。

 

当你习惯这样摸瓜,一段时间后这个行业里几乎的大咖就都在你的关注列表里了,做到这一步后你就会有一个新的收获,这点我们后面再聊。


 


七、搜索结果的整理与优化


利用前面的搜索方式,我们已经找到了不少较为满意的作品,接下来我们需要再对这些作品做简单的筛选整理,把真正符合我们需求的作品整理出来。

 

我习惯用网站自带的收藏功能及部分精品资源本地收藏的方式来整理自己的灵感库。网站的情绪板我把它看作是一个各个终端通用的网盘。behance提供了两个收藏作品的功能:点赞与保存到情绪版。站酷跟ui中国也有同样的功能。

 

点赞的作品,会统一收集到个人主页“点赞”标签下,所有作品按时间排列,比较乱,所以推荐把喜欢的作品收集到情绪板。建立情绪板可以按类别将作品整理到不同画板,由于情绪板是可以分享和被搜索的,所以使用情绪板整理灵感,不仅方便了自己,也益于同行。目前来看,情绪板在behance这个产品中已经跟花瓣中的画板非常像了,不仅可以采集一个完整的作品到情绪板,也可以采集作品中某个单独的图片或视频到情绪板,这样的灵活性跟花瓣完全一致,且behance将情绪板被放到了用户非常容易触达的位置,所以在大家的共同努力下,各类情绪板会越来越丰富,这个功能也会更有价值。



八、资源的自我更新与迭代


资源的自我更新

经常玩抖音的小伙伴都知道,抖音会根据你的点赞、浏览等行为,为你推荐符合个人口味的视频,而这样的推荐功能在behance也有,behance会根据你点赞收藏的作品、你关注的人,给你推荐相应作品,并且推荐作品是直接显示在首页的,每次打开behance,你都会在网站最直观的位置看到behance为你推荐的内容,这里的内容大体上分为两类,一类是你关注的设计师的作品更新,另一部分基于已经关注的作者推荐相似的作品给你,就我个人使用体验来讲,推荐还是相当准确的。

 

behance的推荐功能是资源自我更新的一个重要手段,你关注的同一领域作者越多,收藏的作品越多,它的推荐就越准确,这样就节省了一些资源搜索的时间成本。要想获得好的推荐结果,我建议你的behance上只关注一个领域的作者和作品,以我自己为例,我只关注数据可视化方向的作者和作品,虽然我也喜欢摄影、插画等,但我主业是数据可视化,所以为了提高首页推荐作品质量,其它两类我会去500px等更垂直的网站浏览,而不会在behance上关注。当然,网站只是个工具,你也可以有自己的用法,与我而言,我关注的核心是效率。

 


资源的迭代

如果把我们收藏的内容比作是云盘里的资源,那么资源并不是越多越好,无论哪种类型的内容,当内容很多的时候找起来都会比较麻烦的。我们需要坚持做一些工作来不断减少资源的数量提高资源的质量,少而精是最好的状态,如此我们就不需要花很多时间去找某个内容,而已有的内容又都能很好的满足需求。要做到这点,我们需要给资源做迭代,所谓迭代就是去掉旧的过时的内容,添加新的更好的。每隔一段时间,回来翻一翻自己之前收藏的作品,会发现有些作品自己已经看不上了,因为在做灵感收集的过程中,我们的审美会自然有所提高,当输入的作品样本越来越多,我们对作品评价的维度也会更多,之前那些觉得好的作品,现在看来也就会有缺陷和不满,这是一个很正向的结果,成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品,添加更符合自己当前审美的作品到各个情绪版。

 

迭代还意味着我们需要对那些情绪版的标签做维护,对那些命名跟内容不大匹配的情绪板,要及时更新更恰当的命名。同时,也要对情绪板内容的类别做维护,比如动画、视频类素材最好不要跟图片类素材放一起,因为列表的封面图并不能体现作品详情里是否包含视频等内容,所以作品很多时找起来就比较麻烦,按内容的不同类型把内容分别收纳进不同的情绪版可以给我们后续的应用节省不少时间。


 

 

九、Q&A


1、behance在国内访问受限,为何要以它为例做灵感收集的方法介绍?

 

首先,Behance国内访问不畅,并不影响它是世界范围最优秀的设计师聚集平台的事实。对于数据可视化而言,并不是一个新兴的领域,在国外早已有之,并且相对成熟,而国内相关作品、经验尚少,所以从获取知识的角度来看,behance上你能获取到的数据可视化相关作品或内容,不管是数量还是质量上,都要比国内的好。

 

其次,正如文章刚开始我说的那样,文中介绍的方法对国内的大部分设计网站同样适用,尤其是关键词的定义、标签的使用、收藏及情绪板(画板)的使用技巧。综上,我当然是要介绍“更好”的灵感获取网站给大家,而不是揪着大家熟悉的聊。

 

2、我自己也收集研究了不少优秀作品,为何做的时候还是不知道如何下手?


毋庸置疑,优秀的作品建立在良好的审美基础之上,好的作品看多了审美自然会有提升,但审美有了为啥还是做不出符合自己期望的作品来。这块有两个问题,一个是刻意练习的度没到,另一个是不会分析别人好的作品。刻意练习听名字就知道是什么意思,而作品分析就是我们要知道一个作品之所以让人眼前一亮,它“亮”在什么地方,就是要具体到细节,我们越是能够细致的指出那些让你觉得好的点,就越能模仿和借鉴,之后再辅以大量的刻意练习,才会有效果明显的提升。那么到底如何去拆解、分析一个数据可视化作品?有几步?有哪些方面?怎么做?如何应用?这一系列问题留待下篇文章继续聊。当然了,下篇文章能否顺利发出,还是看大家是否喜欢和支持!

 转自:站酷-BYMD 

数据可视化设计师如何建立灵感库?

雪涛

与其他相对成熟的设计领域(UI、插画等)相比,数据可视化尚显小众,在一个细分、小众、不成熟的领域里做设计,「怎么去找灵感」确实是一些小伙伴经常遇到的问题。本文以本人工作经验为基础,系统性分析了该问题及对应的解决方法,并将其整理成文与大家分享,这在数据可视化行业内尚属首次。当然了,本文虽面向数据可视化设计师群体,但其中的方法是通用的,运用在其他设计领域也完全事半功倍。

本文结构概览

本文围绕「搜什么——去哪儿搜——怎么搜——素材的整理——灵感的迭代与更新」 五大板块展开。

灵感库建立的基础

灵感库的建立大体上分主动与被动两种。主动,是我们有意识地收集、整理相关作品素材形成灵感库的过程;被动,指通过朋友圈好友分享、同行推荐等获取灵感的方法。因为后者更不可控,影响因素较多,比如你所处的圈子、社交网络使用习惯等都会影响被动获取的质量。所以今天,我跟大家分享的主要是第一种主动建立灵感库的方法,而这个方法的核心我把它归纳为两个字 :搜索。

搜索是现在这个时代我们主动获取信息的最主要手段,每天我们通过各类关键词在各类 APP 上获取各样的服务、产品和资源。灵感的主动收集就是一个通过关键词搜索,然后分类、整理、研究、再利用的过程。所以影响灵感收集的主要因素其实就是我们能不能用好搜索。不同的搜索方法、渠道、关键词极大地影响着我们获取到的信息质量,这也是本篇文章为何以搜索核心展开的原因。

如下图所示,同样的关键词在不同的搜索渠道,得到的内容质量是不一样的。

灵感库建立的第一步:搜什么?

互联网很大,如果没有明确的目标,找灵感的过程就跟刷抖音一样,恍恍惚惚几个小时,好像点了不少赞,收藏了不少干货,回头看其实并没有什么特别有价值的东西,所以找灵感要有目标,有 KPI 才行,有目标就有标准,有标准才有方向和效率。

如上图所示,我对数据可视化这个行业术语做了分析和拆解,这样做的目的是为之后搜索关键词的提取做思路的拓展。很多小伙伴在搜索可视化相关内容时,思路总是局限在「可视化」这个关键词上,但是直接使用这个关键词搜索,大多数时候并不能找到我们心理预期的结果,或者搜索多次后,看到的都是之前见过的作品,很难突破边界,获取更多新的灵感。造成的这个结果的原因显而易见,就是关键词的匮乏,不知道搜什么。而对「大屏数据可视化」进行解析之发现,以往的搜索,我们只使用了四个方向里的其中一个,其它三个方向并没有很好的利用。现在,我们以每个方向上的核心关键词为基础,去丰富它的下一级关键词,这样就会像枝芽新生一样,在各个节点延伸出丰富的词汇。

媒介就是指数据可视化设计最终落地在什么平台,一般来讲,大屏数据可视化设计落地的媒介当然就是大屏了,以它为核心做关键词的发散,可以产生其它几个二级关键词。

数据类型是主要数据的特征或来源,不同的数据类型,在可视化设计时有不同的视觉特征。比如地理信息的数据可视化,一般会与道路、河流、人造建筑、某区域内地标等一起出现,会有丰富的 3D 场景、动效,而图表信息相对较少;报表类信息的数据可视化,则主要以更好地展示报表内大量数据为主,所以强调信息的层级、主次,设计的目标是要减少用户认知负担、引起用户阅读兴趣,促进数据内容的有效传达,因而会较少使用动画,其次,因数据较多,也很难对应到某个具体的物理场景,故 3D 模型等也较少使用。

所以以数据类型为核心,拓展的二级关键词会让搜索结果更精准,更有针对性。

设计风格就是视觉设计整体上给人的想象和感受,好的设计就跟一个人一样,一定是有自己鲜明的个性和气质,能够引起人的共鸣和向往,唯有如此,设计才能吸引人,从而影响人,并最终传递自己的观点给观者。所以设计风格的定义是视觉设计中最重要的一环,也是最需要灵感和创造力的部分。

作为数据可视化设计师,我们想要找到的参考是那些具有数据可视化风格的作品,但这些作品本身并不一定是在讲数据可视化的内容,只要作品某部分的设计有我们想要的那种「感觉」,就可以了,而这个作品可能是某段影片、某个动效、某种图形、某个元素或声音。基于这样的思路,我归纳了一些具有数据可视化风格但不一定都是数据可视化作品的关键词。这就是一个特别有意思的点,我们想要找到某个内容,但当我们用最贴切它的那个名字去找时,却不一定能找到最能代表它风格的作品。所以当我们跳出数据可视化这样一个具体的点,而从更抽象的设计风格这个层面去看待它的时候,就能更好地发散思维、拿到了更多好的关键词,找到更多的刺激点。

以设计风格为例,我们从它的节点上找到任意一个关键词:SCI-FI,然后搜索这个关键词,我们看看搜索到的结果。

业务场景简单理解就是在什么情况下要解决什么问题,它是数据可视化的落脚点,也是数据可视化的商业价值所在。每个公司或团队,都会有自己专注的业务方向,所以在工作中找这方面的灵感,从业务场景入手效果最好。

简单回顾下,通过上部分文章的分析,我们从媒介、数据类型、设计风格、业务场景四个方面形成了一个数据可视化的关键词的矩阵。这个矩阵是建立灵感库的基础,之后每当我们有新的关键词要加入,或者有效果不好的关键词需要剔除,只需修改、迭代这个关键词矩阵即可。有了这个关键词矩阵后,我们如何利用它完成一次基于实际需求的灵感搜集?下面给大家举个小例子来看一下怎么用。

一句话描述业务需求

首先用尽可能简短的一句话描述业务方诉求。

一句话描述业务诉求后,我们把业务需求带到关键词矩阵中,就会获得如下图的结果:

可以看到,带入需求后,按树状结构去匹配与需求相吻合的关键词,就可拿到明确的搜索指引目录,然后我们按搜索指引,开始灵感收集即可。

这里有个小小的点,就是为什么要尽可能用简短的一句话来描述业务方诉求,

  • 这样做可以把那些优先级低的干扰因素都过滤掉,留下真正核心的诉求,越是能简短的概括,越能真正把握需求的核心。我个人一直以来与业务方沟通需求后,都会尝试用一句话概括,若需求方认可,开始设计工作;不认可,则继续沟通。
  • 对于数据可视化设计师来讲,明确自己在工作流中的角色、承担的责任、要解决的问题以及最终交付怎样的产出尤为重要,因为只有清楚了这些,我们才能有效分配自己的时间、确定跟上下游的协作策略,避免盲目地没有 KPI 的设计。

灵感库建立的第二步:去哪儿搜?

合适的关键词是第一步,它保证了我们搜索结果的有效性,而去哪儿搜决定了我们搜索结果的质量。如下图,针对数据可视化设计师,我对「去哪儿搜」这个问题按我自己的从业经验做了梳理。

从我的归纳里大家可以发现,我把数据可视化设计师的灵感来源分为了四大块(其它行业的设计也大体上就这四块),分别是:设计网站、产品或服务提供方、独立设计师或工作室、视频网站。

第一部分:设计网站

设计网站部分列出的都是设计师们都熟悉的几个站点,在之前,大多数灵感的收集都可在花瓣完成,但花瓣最近几次改版之后,已经没有以前那么好用了。对数据可视化方面的素材搜索,个人经验上,强烈推荐大家去 behance,虽然 behance 访问方面也面临一些困难,但是,但凡你想真的了解一些好的设计,这个网站,是你一定要想办法去经常逛逛的。至于为啥不推荐其它几个网站,倒并不是说其它网站不能用,只是搜索的结果相对局限。针对这块的具体分析,我会在文末的 Q&A 里进行。

第二部分:产品或服务提供方

我们知道,任何商业设计,一定是有一个业务或应用场景来支撑的,一定程度上设计就是在围绕业务场景提供视觉、交互、用户体验、品牌等方面的解决方案,也就是说设计是服务于业务场景的,反过来讲,服务于这个业务场景的就只有设计师么?当然不是。在市场条件下,服务的提供方除了像设计师这样的个体外,更多的是我们熟悉的另一个机构(组织),这个组织的名字叫「公司」。公司把大量专业的人员组织在一起,通过优势互补、强力协作,提供服务、解决需求方问题。对于数据可视化设计来讲,企业当然也参与其中。所以我们找灵感去服务提供方也是一个的方法。企业要证明自己的实力、要让潜在客户了解自己,必然会花大量的资源做营销做推广,而最常见的推广的落脚点就是企业官网。很多做数据可视化的公司,会在官网展示一些能体现自己业务特点、业务实力的案例,而这些案例就是这些企业最好的数据可视化设计作品了,没有人会在自己的脸上放垃圾上去,对不? 所以但凡有案例展示的官网,案例基本都是最典型最好的设计,所以从这些案例中找灵感,也是一个有意思且有效的方法和途径。

△ 阿里DataV

△ Hightopo

△ Tob.Design

第三部分:独立设计师或工作室

独立设计师一般给人的感觉是什么呢?就是在自己垂直的领域内牛逼,近乎神一样的存在。独立设计师要能顺利「独立」,当然是在设计能力、个人品牌建设、客户维护、运营管理等方面都有比较硬核的水准,所以这部分设计师作品一般不会差。而工作室一般都是一个或者几个知名设计师组成的团队,在管理方面更「公司化」一些,这样的工作产出也会比较稳定,水平较高。就可视化(包括类可视化)领域来讲,个人比较认可和喜欢的工作室有以下几个(欢迎大家评论里补充,或参与文末问卷调查),Ta 们的作品风格鲜明,找灵感也是不错的参考

△ dennisschafer

△ huds+guis

以上对于「去哪儿搜」的分析,我相信可以给大家很好的启发:我们设计师寻找好的作品并不一定要通过设计相关网站进行,你看大家都能看到的东西,即使有突破,那也是大家所熟悉的样子,你只有从圈子里跳出去,看 80% 的人看不到的东西,你的灵感才有机会与众不同,标新立异。

灵感库建立的第三步:怎么搜?

前面两部分,我们介绍了搜什么(关键词的定义),去哪儿搜(合适的素材来源),接下来以 behance 为例跟大家聊聊怎么搜,介绍一些具体的方法。我们的目标是尽可能少的点击搜索按钮,且尽可能多的找到符合自己预期的有质量的作品。要做到这点,首先我改掉自己以往的不好的搜索习惯。

我知道很多小伙伴都是输入一个关键词,然后看结果页,没有满意的就换一个关键词继续,这样做很低效,容易漏掉结果页中符合你预期的好作品,并且也容易造成关键词的浪费,通过第一部分关键词矩阵的介绍,大家都知道,关键词是被定位推导而来的,若不停的换关键词,很快就会出现关键词用完了但是依然没有找到好灵感的囧局,所以榨干每一个关键词是搜索的重要手段,具体怎么做到这一点,我个人有以下思路给大家参考:

1. 直搜关键词

快速浏览、标记自己感兴趣的项目,稍后再做整理

通过这个结果页面我们看到,搜索结果包含「所有结果、项目、人物、情绪板」四个选项,默认显示所有结果,但这个意义不大,重点在项目跟情绪板。

项目

切换到项目标签,项目标签下展示的都是完整的项目作品,这是可以快速浏览,看到感兴趣的内容就把它标记到新的页面,等所有浏览查看结束后再细看每个项目,并对项目做进一步的分类和整理。

项目标签下提供的筛选项很实用,分类依据推荐「好评最多+本月」的组合,以月为单位既可选到大家都比较认可的新作品也避免了因数据波动造成部分作品质量差的情况。「已策展」类似站酷或 UI 中国的首页推荐,是被官方编辑认可和推荐的作品,一般都会有很高的质量,但时间上可能会比较久远。

在筛选器里面,有另一个比较实用的功能叫做「按色彩筛选」,如果客户或者业务方对主色调有要求,就可以通过色彩的筛选,找到更符合我们业务需求的相关作品借鉴,或者设计师自己对某类颜色的搭配总是调整不好,也可以通过筛选,看看其它同行是如何处理这类色彩的,这也是一个有针对性训练和学习的方法。

情绪版

情绪版就是花瓣里的画板,它是其 Ta 设计师采集的同类主题的作品合集,用法也跟花瓣一模一样,唯一的不同是花瓣可以采集站外的内容到画板,而behance 只能采集站内的内容,其余两者完全一致。

情绪版默认是按时间的先后顺序排列,所以可以通过筛选项,将排列顺序调整为「关注人数最多」,正常来讲,关注人数越多的情绪版收集的作品质量也越高。

2. 利用作品标签聚合同一主题作品,并集中浏览

我们知道,像站酷、UI 中国等平台,用户上传作品时,都需要给作品添加一些标签,这些标签的作用就是帮助网站做人工的作品分类,我们点击某一标签就能看到使用了同一标签的所有作品,可以说标签是比搜索关键词的内容检索手段。每一个作品下,都显示了作者上传作品时填写的标签,通过点击这些标签我们将搜索结果引入到了另一个更纯粹有效的内容领域。

更有趣的是,标签同样支持项目、情绪版这两个层面的进一步分类,同时也支持之前介绍过得分类筛选功能。也就是说,在最开始搜索时找准一个关键词,之后通过情绪板、作品标签等方式就能关联起来海量的内容。

3. 按图索骥:Ta推荐的作品

通过前两步,我们已找到了一些比较不错的作品,而优秀作品的背后当然是优秀的设计师或团队。所以点进作者的主页看,一般都会有惊喜的。除了能看到作者自己的作品外,我想说的是另一个标签「好评」,好评这个标签其实体现了作者的审美和职业方向,如果作者本人在领域内已经足够专业,那么能被 Ta 欣赏和点赞的作品大概率也不会差,所以好评这个按钮,是借助行业大咖的手帮我们做了一次作品的筛选和收集,点这个标签进去大多数时候是不会让你失望的,一般都惊喜满满。

4. Ta关注的设计师:顺藤摸瓜,串起一个行业的大咖

在今天,每个设计师离自己领域里最顶尖的大咖,只隔着 3.75 个人,通过点击作者的「正在关注」,你可以看到设计师本人还关注了行业里的哪些设计师,通过这样的操作 3 到 4 次,你会发现总有那么几个人,会在这个略显复杂的网络中被不同的大咖同时关注,那么 Ta 就是这个行业里比较顶尖的人才了。

在「正在关注」下面会显示作者所在团队,因为好多项目其实一个人是很难完成的,大都是好几个设计师协作的结果,所以如果你找到的这个设计师作品足够牛逼,那说明他的团队也是很不错的,顺便关注一波就好。

当你习惯这样摸瓜,一段时间后这个行业里几乎的大咖就都在你的关注列表里了,做到这一步后你就会有一个新的收获,这点我们后面再聊。

搜索结果的整理与优化

利用前面的搜索方式,我们已经找到了不少较为满意的作品,接下来我们需要再对这些作品做简单的筛选整理,把真正符合我们需求的作品整理出来。

我习惯用网站自带的收藏功能及部分精品资源本地收藏的方式来整理自己的灵感库。网站的情绪板我把它看作是一个各个终端通用的网盘。behance 提供了两个收藏作品的功能:点赞与保存到情绪版。站酷跟 ui 中国也有同样的功能。

点赞的作品,会统一收集到个人主页「点赞」标签下,所有作品按时间排列,比较乱,所以推荐把喜欢的作品收集到情绪板。建立情绪板可以按类别将作品整理到不同画板,由于情绪板是可以分享和被搜索的,所以使用情绪板整理灵感,不仅方便了自己,也益于同行。目前来看,情绪板在 behance 这个产品中已经跟花瓣中的画板非常像了,不仅可以采集一个完整的作品到情绪板,也可以采集作品中某个单独的图片或视频到情绪板,这样的灵活性跟花瓣完全一致,且 behance 将情绪板被放到了用户非常容易触达的位置,所以在大家的共同努力下,各类情绪板会越来越丰富,这个功能也会更有价值。

资源的自我更新与迭代

1. 资源的自我更新

经常玩抖音的小伙伴都知道,抖音会根据你的点赞、浏览等行为,为你推荐符合个人口味的视频,而这样的推荐功能在 behance 也有,behance 会根据你点赞收藏的作品、你关注的人,给你推荐相应作品,并且推荐作品是直接显示在首页的,每次打开 behance,你都会在网站最直观的位置看到 behance 为你推荐的内容,这里的内容大体上分为两类,一类是你关注的设计师的作品更新,另一部分基于已经关注的作者推荐相似的作品给你,就我个人使用体验来讲,推荐还是相当准确的。

behance 的推荐功能是资源自我更新的一个重要手段,你关注的同一领域作者越多,收藏的作品越多,它的推荐就越准确,这样就节省了一些资源搜索的时间成本。要想获得好的推荐结果,我建议你的 behance 上只关注一个领域的作者和作品,以我自己为例,我只关注数据可视化方向的作者和作品,虽然我也喜欢摄影、插画等,但我主业是数据可视化,所以为了提高首页推荐作品质量,其它两类我会去 500px 等更垂直的网站浏览,而不会在 behance 上关注。当然,网站只是个工具,你也可以有自己的用法,于我而言,我关注的核心是效率。

2. 资源的迭代

如果把我们收藏的内容比作是云盘里的资源,那么资源并不是越多越好,无论哪种类型的内容,当内容很多的时候找起来都会比较麻烦的。我们需要坚持做一些工作来不断减少资源的数量提高资源的质量,少而精是最好的状态,如此我们就不需要花很多时间去找某个内容,而已有的内容又都能很好的满足需求。要做到这点,我们需要给资源做迭代,所谓迭代就是去掉旧的过时的内容,添加新的更好的。每隔一段时间,回来翻一翻自己之前收藏的作品,会发现有些作品自己已经看不上了,因为在做灵感收集的过程中,我们的审美会自然有所提高,当输入的作品样本越来越多,我们对作品评价的维度也会更多,之前那些觉得好的作品,现在看来也就会有缺陷和不满,这是一个很正向的结果,成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品,添加更符合自己当前审美的作品到各个情绪版。

迭代还意味着我们需要对那些情绪版的标签做维护,对那些命名跟内容不大匹配的情绪板,要及时更新更恰当的命名。同时,也要对情绪板内容的类别做维护,比如动画、视频类素材最好不要跟图片类素材放一起,因为列表的封面图并不能体现作品详情里是否包含视频等内容,所以作品很多时找起来就比较麻烦,按内容的不同类型把内容分别收纳进不同的情绪版可以给我们后续的应用节省不少时间。

总结

1. behance在国内访问受限,为何要以它为例做灵感收集的方法介绍?

首先,Behance 国内访问不畅,并不影响它是世界范围最优秀的设计师聚集平台的事实。对于数据可视化而言,并不是一个新兴的领域,在国外早已有之,并且相对成熟,而国内相关作品、经验尚少,所以从获取知识的角度来看,behance 上你能获取到的数据可视化相关作品或内容,不管是数量还是质量上,都要比国内的好。

其次,正如文章刚开始我说的那样,文中介绍的方法对国内的大部分设计网站同样适用,尤其是关键词的定义、标签的使用、收藏及情绪板(画板)的使用技巧。综上,我当然是要介绍「更好」的灵感获取网站给大家,而不是揪着大家熟悉的聊。

2. 我自己也收集研究了不少优秀作品,为何做的时候还是不知道如何下手?

毋庸置疑,优秀的作品建立在良好的审美基础之上,好的作品看多了审美自然会有提升,但审美有了为啥还是做不出符合自己期望的作品来。这块有两个问题,一个是刻意练习的度没到,另一个是不会分析别人好的作品。刻意练习听名字就知道是什么意思,而作品分析就是我们要知道一个作品之所以让人眼前一亮,它「亮」在什么地方,就是要具体到细节,我们越是能够细致的指出那些让你觉得好的点,就越能模仿和借鉴,之后再辅以大量的刻意练习,才会有效果明显的提升。

文章来源:优设

如何做好数据可视化设计?

雪涛

本文的英文原标题是「10 Rules of Dashboard Design」,其中 Dashboard 如果翻译成仪表盘的话,总觉得不大容易理解,所以我在这里把它翻译为数据可视化。数据展示方面的设计,相信大家会经常用到,这篇文章有很多简单直接,立马就能用上的干货,一起来学习吧!

为什么数据可视化设计非常重要?

数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。

一个优秀的数据可视化界面包含以下几个关键要素:

  • 清晰:一个好的数据可视化界面一定是能够清晰的展现用户所需要的信息。当用户看到界面内容时,应该能在 5 秒内了解到它的用途,而不是花费至少几分钟才能理解各个数据的含义。
  • 有意义: 一个有用的数据可视化界面上的每一条信息都应该是有意义的。这些有意义的信息能准确传达设计师想要表达的内容。每一条数据的背后,用户都是可以读懂的。
  • 一致性:优秀的数据可视化界面,会有一套非常严谨一致的版面。这里的一致性需要考虑到布局,结构和内容。
  • 简单: 复杂的界面违背了数据可视化设计的初衷。如果一个信息呈现不够简单直接,那么肯定是在设计上出现了问题。

如何设计一个数据可视化界面?

数据可视化界面设计最重要的步骤是需要了解目标用户是谁,能为他们提供什么价值。了解目标受众的知识背景和理解水平能帮助你做出对他们有价值的设计。

在了解目标用户时,有必要了解受众感兴趣的数据类型。

「专注于用户的需求,更容易产生他们喜欢使用的结果。」

目标用户级别可能会在一级和另一级之间变化,这是一个挑战性的点。与其他任何设计项目一样,可以细分受众并将信息相应地分为基本内容和高级内容。

在界面中表示一组信息有多种方法,选择正确的数据指标是设计数据可视化的另一个关键元素。这也与目标用户的偏好有关,即他们希望看到什么样的信息。

「根据需要设计数据可视化界面,为不同的业务使用不同类型的展示方式。」

下面是为目标用户设计数据可视化界面时需要考虑的一些重要规则。

1. 区分层级

一个常见的错误就是设计师没有对信息区分层级,所有的内容看起来都一样重要。

可以尝试使用组件的大小和位置来区分数据的层次结构。

  • 通过定义信息层级,让用户清楚什么是最重要的
  • 在左上角显示更重要的信息,沿着对角线方向,信息的重要程度应该依次减弱,右下角的信息重要性最弱
  • 还可以将信息划分为不同类别,并在不同的视图中显示它们

2. 简单易懂

数据可视化的真正目的是用一种更方便理解,更简单的形式来传达复杂信息。

  • 不要放一些大多数用户都难以理解的信息
  • 使用更少的列来显示信息
  • 删除冗余内容来减少混乱

3. 一致性

使用一致性布局设计的数据可视化界面看起来更好。

  • 为了使界面更容易阅读,可以在信息组之间使用类似的可视化效果。
  • 把相关的信息放的更近一些
  • 对相关内容进行可视化分组

4. 临近原则

在界面中把相近的信息放在一起可以帮助用户快速理解。

  • 把相关的信息放的更近一些
  • 不要将相关信息分散在界面上
  • 对相关内容进行可视化分组

想更深入了解接近原则,看这篇:

5. 对齐

可视化组件元素需要在视觉上对齐,并保持视觉平衡。

  • 将可视化组件元素在视觉上进行对齐,可以将界面组织的更好
  • 尝试将组件元素进行网格布局设计
  • 不对齐的界面会给用户带来糟糕的体验

6. 留白

留白是为了让界面有呼吸感,它使得用户在使用你的界面时能够有喘息的空间。

  • 当用户查看需要的信息时,界面中的留白能够吸引用户的目光,提升用户体验。
  • 减少留白会使用户的界面变得混乱
  • 使用留白能对信息进行可视化分组

△ 留白太少简直就是在鼓励你的用户尽快离开

7. 颜色

使用有效的配色方案来吸引用户的注意力,帮助他们轻松地浏览信息。

  • 仔细选择颜色,目标是使内容易于阅读
  • 使用大对比度来显示背景上的视觉元素

△ 避免使用低对比度和低效的渐变

8. 字体

标准字体是可视化界面中的最佳字体,除非有特别的理由,一般不要用其他字体。

  • 使用标准字体,因为它们更容易阅读和扫描
  • 特别和美术字体可能看起来不错,但很难理解
  • 避免所有的大写字母文字,因为它很难阅读,人类的大脑需要时间来消化它。
  • 使用合适的字体大小和风格,有效地传达信息

△ 不要使用影响可读性的字体

9. 数字排版

显示精度超过要求的数字使它们难以阅读和理解。

  • 必要时使用整数,因为长数字会使用户混淆
  • 省去不必要的信息
  • 让用户能够容易地比较简单的差异细节

10. 标签

使用能够快速有效地向用户传达所需信息的标签。

  • 避免使用带旋转的标签,因为很难阅读
  • 尽可能的使用标准的缩写

△ 避免旋转标签

总结

数据可视化旨在节省时间和精力,将复杂和抽象的数据以更简单的形式表示,目的是以用户能够理解的方式将关键信息传达给他们,确保自己理解用户所需,并给他们需要的信息。

文章来源:优设

双11大屏——情绪的超级机器

雪涛

双11所带来的巨大能量与共振,需要一块巨大的屏幕来承载这份共情——这并不是一条统计数据,抑或一张图表就可以完成的。

数据大屏的设计有什么不同?

数据大屏的设计,并非是传统意义上的设计师或产品经理就能完成的。它需要将艺术家、科学家与企业家的能力集于一身,需要拥有对动态数据的把握能力、对产业经济与供应链的结构方法、对社会议题的捕捉与构造,以及宏观的视野和细致入微的匠人用心。可视化让冰冷的数据产生温度。


1.双11为什么需要数据大屏?


数据大屏是一个凝聚情绪的超级机器。

数据大屏不讲述传奇,它就是传奇本身。



在这块巨幕上,数据是公开透明的,它的变化在实时的体现着每一笔消费的数字。每个人都能看到,也会被传递到全世界每个角落。双11所带来的巨大能量与共振,我们需要一块巨大的屏幕来承载这份共情——这并不是一则新闻播报、一条统计数据,抑或一张图表就可以完成的。在这样一个狂欢的日子里,手机、个人电脑、电视机这些面向个人的设备,全都需要融入到这个巨型的超级情绪机器之中。


2.导演、故事与设计


从宣传与商业作战的角度讲,数据大屏需要兼顾故事性和震撼性两重特点。通过故事脚本与内容框架的设计,让观众层层抽丝拨茧,从表层的情绪,看到内核的战略。


1. 内容规划:故事与脚本设计

2019数据大屏的内容框架大致分为三个层次。


情绪层:GMV的节节攀升满足了媒体不断推升的情绪高潮。在日益萧条的国际环境中,中国的经济仍能屡创新高,每一位在双11买买买的中国人背后是一种爱国主义与中国信心的体现。


业务层:阿里的自我表达。阿里经济体在城市中继续深化的服务我们的消费者,数据成为城市可持续发展的新资源;而商业操作系统随着数字经济时代的到来,开始系统的服务我们的品牌与商家,在新的时代续写“让天下没有难做的生意”。


战略层:企业与国家发展同行。阿里的改变,反射了社会关系和社会结构。点击购物车就能买到全世界的东西,而对于国内市场,精准的人群定位、产业带的建设都让拉动内需变成一个大众都能参与的事情。


2. 情绪规划:情绪链路与镜头设计

依据数据表现,双11当天的情绪高潮会集中0点和24点前后。24小时内,情绪的跌宕起伏,媒体向世界专递着这种情绪。现场,根据数据和情绪的变化,我们开始导演数据大屏在不同的时间段出现的镜头:GMV的弯道超车紧张窒息,晚饭过后是观看城市夜经济的最佳时机,还有“买遍全球的购物车”、“小镇青年”等进20个镜头。


3. 核心理念:新商业文明是中国的弯道超车

为什么是弯道超车?

大航海时代是贸易全球化的开端,也是当代中国继续扩大开放,用一带一路、进博会等等新模式,承接人类当今世界发展的新格局所在。互联网与移动互联时代的到来,让中国得以弯道超车占据世界领先地位,而随之到来的数字经济时代正式开始了人类历史上的新商业文明。马老师说:打造新商业文明的时机已经到来。数字时代是我们面临的最大机遇,这个新时代最大的风险就是错失机会。



我们将这个核心理念融入GMV大屏的设计,正如逍遥子所说的那样“消费不是商业的终点,通过消费者来提升生产端生产契机,优化生产决策。”为此,我们导演了新商业文明的数据大戏:GMV屏中的赛道,3个镜头穿越了大航海时代、互联网时代,数字经济时代弯道超车的新商业文明,快进了商业文明的发展。

11.11当天的数据也被融入其中,赛道上奔跑着饿了么、盒马配送线和菜鸟的物流线,空中飘散的气泡是实时产生的交易热力。


△2019双11数据大屏-GMV弯道超车&3个视角切换


3.双11数据大屏设计概览


1. GMV:11剁手铸就中国信心

2019年,即使是在国际经济大环境衰退的今天,阿里的双11仍旧创造了新的商业奇迹:2684亿人民币的GMV的背后,是中国人为了家庭与自己而欢乐剁手,也是中国消费者面对全球大环境下对中国的强大信心。从2009年的电商大促,到11年后的全球狂欢节,阿里伴随着中国经济海洋的形成而不断掀起巨浪。李克强总理就曾经用双11的销售数据,来解答那些对中国经济感到不解的人们,让他们瞬间懂得中国经济是汪洋大海。


△2019双11数据大屏-历年GMV增速


2. 全球化:买遍全球的购物车

中国经济与中国消费者的贡献,是对全球经济的贡献。消费者购物车里藏着美好生活的愿景,打开了世界消费的新空间。天猫国际把来自全球78个国家和地区的品牌和商品带进中国,满足消费者的品质消费需求。买遍全球的购物车,更为世界经济增长贡献拉动力。越来越多国际品牌青睐中国市场,通过天猫国际满足中国消费者的需求。


△2019双11数据大屏-全球化


3. 服务夜生活点亮城市夜经济地图

随着政策的推动,全国经济进入夜生活消费时代,大量的城市开始准备成为一座座不夜城。在这个新的消费增长领域,新商品、新商机、新消费模式、新空间与新玩法都层出不穷。在未来,理解夜晚的中国,或许比理解白天的中国更为重要。


△2019双11数据大屏-杭州经济体服务网络


△2019双11数据大屏-天猫商超网络


△2019双11数据大屏-杭州城市夜生活


4. 相信不起眼的改变:小镇青年与那些你不知道的族群

14亿的中国人口、巨大的地域差异与文化差异意味着,每一种类型的消费人群都是海量的,都拥有现有经济理论所无法囊括的巨大潜力。小镇青年、银发一族、95后作为新消费崛起的代表族群,正悄悄改变着社会的消费结构。通过数据我们清晰看到:族群的喜好千差万别,数字化的新消费使得商家能针对消费者需求创造新供给。


△2019双11数据大屏-新人群,新消费


5. 品牌榜:千里江山图

天猫创造的价值是真正支持品牌的数字化转型,不仅仅赢得今天的业务,更在于决胜未来。国潮席卷而来,智能商业魅力无限,全球供应链在动荡与智能化中全面转身。全方位重构产品创新、品牌建设,强化天猫与品牌之间的合作,这便是我们想在双11这天展现的万里品牌江山画卷。


△2019双11数据大屏-品牌榜


4.结束语


当GMV越来越逼近2684亿人民币时,炸裂感给每个人的冲击是:中国又诞生了一个新的奇迹!即使在全球经济放缓的今天,中国人民对于天猫双11全球狂欢节的热情丝毫不减。在这背后,是数字经济时代下的阿里巴巴,向新商业文明迈进了一大步。

文章来源:站酷

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档