被客户虐了十几遍后，总结了一些大屏背景设计要点
可视化大屏背景这样设计，保证不会出错！
上周一个实施经理反馈回来说，客户对我们的数据大屏有点不满意，希望给调一调。一开始觉得是个小问题，分分钟就能搞定，然而我还是太年轻了。最后一共调了十几遍，花费了整整一天！
擦干泪水之后，我去网上看了几十个优秀的数据大屏，分析一下别人家的设计师都是怎么设计的，今天来给大家看看我的总结。
我们从以下2个方面依次介绍吧。
背景色
辅助元素
1.背景色
可视化数据大屏的背景通常有2种表现手法，分别是：纯色，渐变。
纯色背景，主要以深色为主，显得非常商务和正式，也适用于极简风格，经常被用于政府、金融、监控等场景中。比如今年的疫情数据，就可以采用深色纯色背景。
深色背景的颜色取值范围通常为低饱和度、低亮度，用HSB模型来说，S＜40，B＜25。色相H的选择可以根据主色选取，如蓝色的大屏通常H取值范围为200-240之间，这样最终出来的颜色会和整个大屏风格和谐统一。
浅色背景则相对少见，通常会显得比较清爽和轻量化，会用于政府，自然环境等场景中。也在客户有特殊要求，接受不了深色背景时采用。
浅色背景的选择也比较简单，通常都是浅灰色。用HSB模型来说，S＜5，B＞95。色相H的选择可以稍稍带有一点倾向性，最终的效果清晰、简洁。
渐变背景，是可视化大屏中用到最多的。它会营造出科技感和光感的整体氛围，因此非常适合科技、工业、物联网等场景。根据渐变方式有线性渐变和径向渐变两种。
线性渐变通常用于布局比较规整的情况，整体没有明确的视觉焦点，用渐变来给整体效果带来一些变化，增加光感。 线性渐变方向一般为从上到下，可以是由深到浅，也可以由浅到深，具体情况要根据整体的光效来定。如果上端标题区域是高亮的效果，渐变效果就应该是由浅到深，营造一种光线从页面顶部射入的感觉；如果上端标题区域采用了投影等效果，渐变效果就应该是由深到浅。
径向渐变则多用于页面中心位置有明确视觉焦点的情况下，通常是地球或者地图等。径向渐变可以使中心焦点更亮更突出，增加整体的科技感。 径向渐变的方向为从中心向外，中间部分浅，四周深。
渐变背景的取值范围通常为高饱和度、低亮度。用HSB模型来说，通常S＞80，B＜40。色相H需要根据主色来选择，蓝色的大屏最为常见，因此一般为200＜H＜240。
在渐变颜色的取值上，H在原来的数值上可以增加一个增量，S在原来的数值上增加一个增量，B在原来的数值上减少一个增量。这个增量的取值范围为5-15，具体根据最终效果调整。
2.辅助元素
设置完背景色之后，还需添加一些辅助元素，这些辅助元素起到烘托气氛，增加质感的作用。没有辅助元素，整个页面就会显得单调。
常用的辅助元素有：网格，网点，粒子，线条和光效。
网格最为常见，通常有垂直网格和变形网格。
在背景上叠加垂直网格，会让整体界面更加整齐，同时增加科技感。
而变形网格一般用来营造空间感，利用近大远小的原理制造一个平面，可用于地图上。
网点也是比较常用的辅助元素。排列规整的点会让人联想到大数据，可以很好的营造科技感。
同样的道理，粒子也常被用来烘托科技氛围。不同于网点排列规整，粒子的分布更加随机一些，效果也更加灵动。
线条也是用来增加页面层次感的主要方式。可以是曲线，也可以是直线，在页面的空白处增加线条，可以丰富画面效果。
最后是光效，在线条和粒子上叠加光效，让最终效果更加科幻。
总结
最后总结一下。
背景色：
纯色背景适用于商务和政府项目，深色背景最为常见，浅色背景较少。
渐变背景则适用于工业，科技，物联网等场景，可以采用线性渐变和径向渐变，线性渐变适用于比较规整的排版，径向渐变适用于有画面焦点的情况，焦点一般为地球或地图。
辅助元素：
常用的辅助元素有网格，网点，粒子，线条和光效，通过这些元素的合理搭配，可以增加画面的层次感，纵深感和科技感。
以上就是我对大屏背景的设计要点总结，希望对大家有所帮助。
文中的图片均来自互联网，版权归原作者所有。
