工作用小屏，决策用大屏，数据驱动「智能」时代( 二 ) 随着工业4.0变革的推进

文章插图
3.根据大屏尺寸，规划页面布局，确立交互稿确立图表类型后，下一步要进入到布局具体的信息位置，确立交互稿的步骤。确立交互稿的第一步就是要确定大屏的尺寸。客户的大屏尺寸不用会影响到整体的布局和效果，设计的时候也要考虑下是否有拼接大屏接缝的问题，尽量以拼接屏尺寸来确立栅格化布局。
尺寸确立后，接下来要对设计稿进行布局和页面的划分。布局这里我们就要参考第一项的业务需求优先级来布局画面分割面积。核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。
一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。视觉上要尽量规避文字罗列或图表罗列，注意方圆图表的面积比例问题等，也是布局期间需要注意的事项。
4.确定设计风格与设计进行
文章插图
设计风格的确定主要以下几点来确定：
设计风格的选择切勿追求效果炫酷而不符合业务需求，选择最合适的而不是选择最绚烂的尤为重要。因为设计中涉及的范围比较广，我们在后两章节单独着重讲解。下面展示部分我们做的不同行业对应的不同构图布局与元素的应用案例：
发动机的可视化以突出发电机产品为主，周围 UI 以大圆角形式设计，使视觉由四周向中间包围，集中于中心。
文章插图
地铁站的可视化以写实风格为主，再现了真实地铁站的样貌，以及身临其境的动画交互体验。
文章插图
车间可视化案例以工业风与写实风格的车间模型浓缩了工业的运作场景，色调以贴近工业的灰色为主，设计出制造专业感十足的可视化效果。
文章插图
同时在设计时因为使用的设备不同，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo ，反复测试多次来修改协调最终上屏效果。在测试时从设计上可以重点注重以下几点：
1、之前确立的布局在放入设计内容后是否依然合适
2、确立的图表类型带入数据后是否仍然客观准确
3、根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受
4、已有的样式、数据内容、动效等在开发实现方面是否存在问题
5、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象
文章插图
【工作用小屏，决策用大屏，数据驱动「智能」时代】在信息时代发展迅速的前提下，数据是当今重要的信息载体，可以通过数据的捕获，通过监管和维护去了解一个行业下关于工业管控下的数据可视化系统。