来源:zcool 作者:yjmbingyan
信息可视化界面设计侧重点
2018-04-24 杨佳淼
就在我准备这篇稿子的时候，在5月15日的早上看到昨天“川航航班备降成都”的新闻，机长在遇到挡风玻璃破碎的突发状况时沉着的应对，向离他最近的机场发出7700紧急代码，成功备降双流国际机场二跑道，川航和地面的指示也密不可分，能够备降到本不属于它的机场，双流国际机场应急处置地面情况，给川航开出绿色通道，配合川航成功着陆。
空中的情况我不敢猜测，但对于地面上的情况，应该是有类似大屏幕数据分析的参与吧，这种地面设备的使用情况，要通过数据收集进行分析显示，所以当有紧急情况出现时，我们的大数据就会发挥出作用来，供决策者参考指挥。这种信息传递是建立在通讯畅通的情况下，即便是空中的航班信号不良，但地面的指挥还是通畅的。所以地面设备的使用率及调度也是需要有大数据支撑才能做分析决策的，类似双流国际机场应急突发状况时，机场自行配合空中航班备降的准备工作，从大数据的参与中，给备降机最大力度的地面支持。双流国际机场地面上的一些设备使用的数据展示，对数据信息转换为可视化设计的兴趣也日渐浓厚。
一、信息可视化的范围
百度词条对信息可视化的解释为：旨在研究大规模非数值型信息资源的视觉呈现，通过利用图形图像方面的技术与方法，帮助人们理解和分析数据。
信息可视化设计常见的有两种形式：信息解读型、大数据分析决策型。
信息解读型：即图文解读，把大篇幅文字型信息，配合图画阅读文字内容，便于人们理解传播。好的图文解读生动形象，一般的图文解读就是排个版式，没有真正理解文字想说的内容。
大数据分析决策型：数据量大、类型多，通过对大量数据分析挖掘出更多商业价值，降低成本提升效率，供使用者做出更明智的业务决策来。
二、大数据分析决策的大屏设计
“大数据”时代已经降临，在商业、经济及其他领域中，决策将日益基于数据和分析而作出，而并非基于经验和直觉。---《纽约时报》2012年2月的一篇专栏
大数据是如此重要，以至于其获取、储存、搜索、共享、分析，乃至可视化地呈现及大屏幕的应用，都成为了当前重要的研究课题。
对大数据的理论性知识，太多了只做了解，大数据重要的是数据和其将产生的结果，不管数据类型怎样复杂繁多，通过设计后让数据变得更直观易理解，并产生其该有的价值，是设计的重要研究课题。
网上有关于大数据设计的文章，大多是把种类繁多的数据，以哪种图表展示更合理化进行分析，对于数据来说图表固然是基础的表现形式，可这些图表有时并不适合一些特殊数据类型，当遇到无法用图表展示的数据类型时，设计应该怎样表现该数据呢？
带着这个问题，也借助最近做的一个项目，把我对数据信息可视化的理解，做了一份梳理，分享给大家参考，并一定正确，只是提供一种设计思路，也请各位轻拍或加以斧正。
三、数据大屏界面设计工作的开展顺序
从设计层面来看，数据信息可视化以传递信息为主，把各类数据信息做可视化处理，传递给决策者直观准确的信息，决策者有时不需要有执行类操作行为，只阅读各方数据显示情况，来做出有益于公司的决策，由此设计者则需要读懂数据，并改变数据的表现形态，合理的传递清晰有效信息给决策者。
由此可见，界面中涉及到的交互效果不多，关键在于对数据信息的理解和排版。以“智慧机场”为例，设计分三个阶段：
1.需求确认
需求整理，如下：
1.界面尺寸：1920*1080
2.应用场景：PC端、投影大屏
3.设计风格：科技感、大气
制作思考点：尺寸是已知条件，结合第二和第三点思考，因有大屏幕的成份，用浅色系容易造成刺眼现象；而科技感也是冷色系居多，最后决定采用深蓝色系为主要色调制作。（参考图）
2.版式设计
版式的设计是在原型的内容上制定的，来两张原型图看看：
原型图
原型分析：从原型上看，信息内容分为三大块，版式就制定为三栏式布局（上图）；其中每栏内又有多个信息模块，分为大模块和小模块（下图）
内容划分清晰后，进行版式的分割，第一步，整体大版块与边距的分割，预留标题位置，顶边距为90px，左、右、下边距为40px（下图）：
第二步：三栏式布局的分割，分割原则为版块间的间距30px，各自版块的大小视页面内容而定，例图中的尺寸是按首页的内容分割的（下图）。
宽=40+540+30+700+30+540+40=1920px
高=90+950+40=1080px
版块间的间距要小于页面外边距的间距，即30px<40px，要维系版块内的亲密关系。且每一像素都是精确计算才得出来的，精确利用有限空间展示有效信息给使用者，是设计的基本规则。< p="">
第三步：内容间距的规范
① 标题和内容的间距为10px；
② 版块1和版块2的间距为36px；
③ 内容块间距为16px；
规范基本制定完成，其它间距可视排版时的情况而定，此规范约束80%的版式，可自行调整，不做过多约束，留出自由发挥的空间。
3.元素表现
信息的可视化设计是为了更好的阅读、传递有效信息，做为设计者要善于把文字型、数值型信息加工成可视化图形或示意图，帮助决策者理解信息内容，提供决策者严谨、清晰的传递速度，这就要求设计者首先要理解信息内容。
① 数值型信息加工设计：
可视化设计分析：“开箱检查数量”和“开箱率”是对应的信息，“随身行李数量”为总量，从而得出它们的关系为“随身行李数量”包含“开箱检查数量”，既然有个“开箱率”，那可以采用百分比的环形图做可视化设计。
从环形图上可以看出，15%的行李都开箱检查过，从总量上看，开箱率的范围很小，信息呈现出理性而严谨的感觉，数据直观又清晰。
② 信息组加工设计：
可视化设计分析：数据间的关系：门禁的总数=已处理+未处理，但我们要清楚的知道，决策者在使用信息时所关注的点是什么，信息对于决策者来说有提示、警示的作用，提示的是那些未完成事件，处理信息的时候，“门禁”是关键字，“未处理”和数值是主要表现内容，之后是“已处理”和数值，“总数”排在最后，总数是可以两者相加得出，所以可写可不写，只要把关系表示清楚即可，版面空间大可以用图表展示，版面空间小可以用其它方法，但要突出重点信息，如下图：
③ 信息延展型加工设计：
可视化设计分析：看到同比和环比我总是很模糊，认真的做了研究，并做图方便理解；同比，是2017年3月与2016年3月对比；
环比，是2017年4月与2017年3月对比。
理解了同比的意思后，根据原型提供的信息，做延展性的设计，
货运日报的同比，是今年今日与去年今日的对比，对比就要有涨幅，同时提供其同比增长的数据值；
货运月报的同比，是今年本月与去年本月的对比，同理，同时提供其同比增长的数据；
这样把两个信息做了延展思考，既然是对比关系，可以采用柱状图进行直观对比，如下图：
从图表上可以看到直观的对比信息，还可以得知详细的增长率，对于决策者来说，对比信息单独出现没有可比性，全面的数据信息才能给决策者来做判断，所以信息的完整性很重要，理解并完善原型图信息，也是设计者应具备的能力。
④ 图表的完整、适用性设计：
可视化设计分析：图表有多种多样的，根据需求用合适的图表，原型图上没有说明物品有几种，可以想像得到机场里的物品数量堪比商场，所以要把可能多的情况表现出来（也可以跟项目方确认种类数量），如图：
给开发者和决策者提供最严谨的数据信息，在有限的空间表现准确的信息，还要保持界面整体风格的一致性，也是设计者的挑战。
⑤ 示意图帮助理解信息的设计：
可视化设计分析：文字型的信息，要阅读理解后，可以用示意形式帮助理解信息内容。这条信息是说“有9件货物，在5月25号20：19时从大连始发，到达北京；后又在5月26号从北京始发到达深圳。”
理解了信息要说的内容后，画出飞机的飞行轨迹示意图，直观的表达出飞机的轨迹，下面是货物信息，物品的名称：9件货物，飞机的航班，起飞日期、时间，始发地及目的地，转机的信息等，都直观的将信息可视化，比阅读文字信息更快速的传递理解。
诸如此类的信息有很多，挑了几种少见的信息，帮助理解并分析其设计方法特点，为信息可视化展示设计做基础素材，它的制作方法就是要先于使用者之前，把信息都理解透彻，然后设计出可以直观表达信息的图形或示意图，传递给使用者正确清晰的信息。
四、风格刻画：设计润色
前面用很大篇幅介绍了怎么制版，怎么制定设计规范，怎么转化信息为可视化设计，是因为前面是整个工作的重心，把前面所说的内容都理解了，就可以很快的完成风格的刻画。根据前面的设计，我们得到一张编排好的纯可视化信息界面，如下图：
整体编排都按照设计规范来排版制作，在刻画风格时，就只需要考虑用色及背景图的设计，对风格的刻画上，采用科技感的样式，营造页面的光感，及星空的感觉，页面使用深蓝色，多次调整背景图，定稿后：
背景图确定好，和排版信息进行合成，合成的过程当中，信息排版不需要做二次设计，如有需要修改也是极少的情况；调整后带润色的界面如下图：
清晰明了，信息直观的数据可视化界面，就是这么制作完成的，中间最需要费时费心思的就是开篇说的那套长篇大论，只要掌握好前面的基础，接下来就轻车熟路的做排版设计，快速完成页面的编排及润色工作，展示下其它页面成果：
4. 提升效率的关键点
提升效率不止是完成速度的快慢，还有对数据信息理解的程度，理解到位就能提供给使用者直观准确的信息；如果没有理解到位就需要返工制作，所以在设计的时候，设计者的角色有两个，一个是设计者本身，要考虑排版和可视化信息的转化形式；另一个就是转换成使用者视角，真正的在使用这些数据信息去判断实际情况，才能深刻体会到使用者的心态，了解到使用者使用的目的所在，就能帮助使用者完成第一次的信息整理及筛选任务，让使用者在阅读查看界面信息时有清晰的思维，引导使用者做出更明智的业务决策，可见设计师要具备的能力不止是设计本身，更多的是思维逻辑及对信息的理解能力。
