大屏UI设计-看这一篇就够了

目录

前言：

一、素材库

1、借鉴

 2、大屏UI的7大元素梳理。

 二、7大元素

1、布局

 2、风格

 3、主视觉

 4、图表选择

​编辑 5、字体

6、规范

7、动效

三、总结

前言：

        本文从UI设计师与大屏开发工程师两个角度来谈谈，怎么用最小成本来完成大屏UI的设计、开发、交付等。以思维导图为抓手来谈谈怎么去做好我们的UI设计。

一、素材库

        为了提高UI素材的复用和标准化，强烈建议搭建素材库。素材库主要包括大标题背景、大屏背景图、分割线、图标、组件背景、组件标题背景等素材。

1、借鉴

项目初期我们可以引用行业内使用频率较高的UI素材，搭建自己的的1.0版本的素材库。根据后期应用情况再来丰富自己的素材库。下面推荐一些优秀的素材供下载。

大屏素材简介- 数据分析与可视化指南

 2、大屏UI的7大元素梳理。

        大屏UI主要考虑布局、风格、主视觉、字体、规范、动效7个方面。下面详细说说这几个方面该怎么去思考设计。

 二、7大元素

1、布局

        UI布局一般采用16:9比例的布局。主要包括居中结构和左右结构。然后根据具体内容进行切块。但一般大屏的切块不能超过9块，不然大屏整理效果就会大打折扣了。一般在主块的上面部分展示主要内容，重要的内容放在中间。其他的块展示次要内容。

         较好的布局结构是居中结构，如下图所示。

 2、风格

        风格一般选择科技风，然后通过增加数据卡片来体现轮廓感和科技感。

 3、主视觉

        主视觉建议使用地图、地球、行业标志风格等。集团公司的分子公司的战略地图布局，基地工厂的点地图等，这样设计会达到一个较好的主视觉。

 4、图表选择

        根据业务场景和分析指标维度来选择我们需要的图表，一般带有目标值的建议使用组合图，完成率之类的建议使用饼图，数据分布类的选择散点图等等。具体可以参考下图的思路。

 5、字体

        字体根据公司字体的版权和风格去选择，一般使用微软雅黑、方正等。数字英文推荐：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

6、规范

        一般我们按照集团官网web页面的设计规范来就比较合适了。如保证设计的一致性、提高开发效率和还原度、方便迭代 ，辅助设计和开发更好地完成设计的协作。

7、动效

        动效一般包括跑马灯、文字列表滚动、图表轮播、视频等。可参考下面的动效设计原则。

三、总结

        UI设计需要首先搭建好素材库，理清楚UI设计的骨架和思路，然后就是结合实际情况，根据可实现性来设计与开发，开发原则是参考行业UI设计风格。然后加上公司的独特的风格就能做出一个满意的大屏了。希望本文能帮助你在大屏UI上少走弯路。我将UI素材库打包好了。欢迎下载，留言讨论。 

链接：https://pan.baidu.com/s/1IdIw29Z9mJT-sEUUSsDkmg?pwd=r3t5 
提取码：r3t5