大屏可视化设计总结
最近由于工作需要，接触学习了一些大屏数据可视化设计的相关知识，也看了一些作品。此作为整理扎记。
个人最近简单接触了一些大屏项目的设计工作，虽然流程上并不是很深入，也没有探索很多技术手段来实现出比较高质量的作品，但是还是总结整理一些现阶段的思考和自我感受。
毕竟，反思、总结才有出路——对于设计而言。
（文中图有部分引用他人作品，均给出原链接，侵删）
大屏设计核心和特点在于数据可视化的表现，这里主要想对其主要特征进行总结，以及提出在设计过程中需要规避注意的细节。主要分析视觉设计上的工作，技术、数据搭建、产品类型上暂不赘述。
分为以下维度：
布局
配色
点缀
其他
一、布局
由于大屏观看方式（距离较远、环视、总览）决定，需要在展示信息上突出主信息，通常位于屏幕中央。如果应用屏幕不是巨大的宽屏和带鱼屏，也可以将主要信息优先在屏幕左上方展示。
除了主要信息，还有次要信息和辅助信息来丰富整体界面的内容和视觉。
参考结构布局：
复杂较多图标的次要信息放置在一侧。简单的数据信息可以混合辅助信息放在另一侧。注意在设计中保持视觉平衡。
更均衡的布局，辅助信息较为零碎，不需要足够高度空间呈现可置于底部。
信息过于拥挤，可以试着将辅助信息收纳到一些次要信息中以节省空间（通常只能同时展开一个辅助信息窗口）。同理也可以多个图标信息进行轮播/tab切换来处理。
屏幕宽度较窄，主要信息放置在一侧依然方便浏览。能给出更整合的空间，不至于两侧都过于零碎。
在策划布局时，重要的是应该提前了解拼接屏的规格，设计注意避免重要和整体性强的内容（折线图等）被缝隙分割。层级的安排通常如下（尽量不要出现重合遮挡）：
二、配色
深色——便于观看。大屏亮度高视觉容易疲劳（同PPT演示），容易做光效，拼接屏幕的割裂感很小。
主色调——通常蓝绿青色为主色调，比较有科技感。大屏为了展现统一性，通常主色调应用较多。
辅助色——主要为了凸显情况和点缀页面，因此采用对比角度较高的颜色，主要为黄红等暖色。出现在重要、需要警示的部分指标中。不宜出现一片区域对比色。以点线方式布置在页面中。
参考：
@聂永真 作品
https://www.zcool.com.cn/work/ZMzY4NjM2NDA=/2.html
@Ning xiao dong
三、点缀
版块框边：
次要信息的图标应避免过多装饰的框线，会产生与背景的拼凑感，应该将数据版块融合在背景中。可以设计具有透明度渐变的线条。单独跳出的情况，如弹窗等可设计高亮度和稍微复杂的边框。
底纹：
底图——通常由主要内容版块延生出，为保证周边内容易读性，其四周应压暗，并减少信息，加强过渡性。整个页面的底图应突出主要内容，有细节的渐变。
https://dribbble.com/shots/6123911-Visualization-Design-of-Large-Screen
版块底纹——1.不设置底纹，突出标题即可；2.深色60-80%的透明;3.图示和信息密度较小的版块，可以设置线条等纹理。
渐变：
主要体现层次的处理方式。主要为透明和接近色的渐变。
光效+动效：
1.数据表格出现的动效；2.hover数据点的反馈；3.点击出现收起新内容的动效；4.数据切换的动效。主要这四个部分。
应该保持适量、简洁，同样也是对开发成本的考虑。
丰富性主要体现在设计多种图表和数据表现形式，也尽量配合有一定区分的动效。大屏的主要内容区域动效较多，并且常常自动播放，应区分主次。 主要动效持续时间可以适当延长。
此外，部分情况下，数据量较大，注意设计loading状态下的动效。
四、其他
可视化图表选用：基于适合可用的基础上，尽量不采用单一的可视化形式。柱状、堆叠柱状、折线、散点等。也可以改善一些单一的数字展示。
可视化数据可参考
echarts：https://echarts.baidu.com/feature.html
highcharts：https://www.highcharts.com.cn
dataV：https://helpcdn.aliyun.com/product/43570.html?spm=a2c4g.11186623.3.1.6ff724db7ASxq1
小屏适应：有些情况需要考虑小屏幕输出的版式情况，可能个别界面需要重新设计，需要对底图位置、次要信息区域进行变化。原有设计点击的弹窗在低分辨率屏幕情况下可能会遮挡住部分重要区域，需要检查并规避。
地图设计：中间区map设计中要考虑如果没有异常、警告和数据点漂浮的视觉观感。可以用3D做部分建筑主体突出，主要道路设定一些流线来适应视觉空间（如果能够用地图高度数据生成3D图更好）。
图表规范：在注重视觉表现、空间利用同时，应该给出表格的单位、所指、图例。（非极端情况均不可省）
