项目中出现的监控大屏功能频率越来越多，对功能合理性和美观要求越来越高，而美观又是一种非常抽象的感觉，怎么在设计功能和美化的过程有章可循呢？
功能确认
项目经理设计的功能板块改了又改，好不容易做出了一个初稿，拿到客户那里又被调整的面目全非，整个过程有些虐人。如果可以，最好先和客户沟通，确定客户关注那些数据板块。
板块布局
需求确认以后，就可以根据需求设计界面板块，我们可以粗略估算大小，用方框填充版面，使界面骨架、层次明显
展示形式
选用合理表达形式：根据功能，使用汇总文字、图片、表格、图表等。文字部分尽量简要，突出重点。
选用合理图表：这里需要熟悉一些图表组件支持的类型、能做到的效果。
空间整体布局
尽可能的占满整个版面，不要有太多空隙。1.板块占用空间：简单的一个方法就是通过边框、背景色来凸显板块占用空间，板块之间设置合理间距。2.减少过多的边线，如果出现表格，要使板块的边框和表格的最外层边框重合。3.如果出现较多空白的地方，增加间距、行距，想法填充一些内容，比如贴合功能相关的图片、显示图表Legend、备注文字。4.如果内容放不下了，可以通过优化间距、行距、文字换行等
突出重点
重点内容可以放到中心部分。重要的数据信息可以通过突出设计、动画等体现，比如通过高亮背景容器凸显数据，大号的字体、LED数字效果展示数据。
色系和渐变颜色运用
在设计大屏统计监控界面时，如果颜色过少，界面呆板，缺少色彩。颜色过多，花里胡哨，没有重点。
同一种颜色如果出现的面积比较大，会忒别醒目，扰乱界的重点部位。可以通过使用渐变色，或者渐变透明，具体实现可参考Echarts的Gallery。
字体颜色建议不要过多，特别是深色背景下，字体颜色和背景给人很大的反差感觉。
中文字体和数字字体
统一字体效果，保证美的前提下还兼容不同系统。如果使用webfont需要注意字体文件的大小，可以采用阿里的在线字体，只把标题部分的文字生成webfont。
为了体现更有科技感，可以使用LED效果的数字字体。
让画面动起来
一方面监控大屏的版幅有限，不能像普通界面向下自动延伸。另一方面为了使界面更加生动，我们可以适当的做一些动画效果。
中间热力图表部分采用轮播方式展示3种不同统计维度的热力效果，标题后面的数字采用了滚动变化效果的动画。定时切换后，热力图颜色更换，数字滚动变化。
其他的一些优化
自适应：需要兼容主流屏幕打下，更要兼容实际大屏的真实大小。在设计板块的时候，有些内容固定，可以固定板块高度，图表类型的可以自动计算高度。
最终效果图如下：
（本人后端转前端，非美工出身，有不妥的地方请见谅）
