大彩串口屏_如何制作UI素材

如何制作UI素材
工程技术笔记
广州大彩光电科技有限公司
修订历史
目录
1.适用范围 (1)
2.UI素材元素的组成 (2)
2.1背景图 (2)
2.1.1背景图的分辨率 (2)
2.1.2背景图的效果 (3)
2.2组态控件效果图 (6)
2.2.1按钮控件效果图 (6)
2.2.2文本控件效果图 (7)
2.2.3进度条控件效果图 (7)
2.2.4仪表控件效果图 (8)
2.2.5滑块控件效果图 (8)
2.2.6图标与动画控件效果图 (9)
2.2.7菜单控件效果图 (10)
2.2.8显示时间效果图 (11)
1.适用范围
文档适合基本型、商业型、经济型、物联型等所有串口屏产品。

2.UI素材元素的组成
在工程画面中，UI素材元素主要由背景图和组态控件效果图组成；
背景图是指工程画面中每个界面的显示图，背景图的样式以及效果可以根据需要添加，相应的分辨率需要和串口屏的分辨率一致；组态控件效果图是指控件在不同的状态或者动作的时候呈现出不一样的效果，同一控件的效果图需要做成尺寸、分辨率一样的，只是状态效果显示不一样。

2.1背景图
2.1.1背景图的分辨率
背景图的制作必须和屏幕里面的分辨率一致，这样可以让背景图看起来更清晰、细腻，像素点更加好看。

在创建工程的时候，在所选的型号中会有对应的分辨率，背景图应该按照该分辨率进行制作，如图2-1所示。

图2-1工程画面分辨率
如果手中有屏幕的话，可以通过查看背面的丝印层找到相应的型号，如图2-2所示。

注意：查看丝印层，例如：DC80480B070的话，分辨率是800*480的，即宽度是800，高度是480.如果是DC48270B043的话，分辨率是480*272的，这个需要特别注意，以软件里面的分辨率为准。

图2-2查看丝印层
2.1.2背景图的效果
背景图主要是指界面的不同背景，一般UI设置中都有主界面以及分界面，主界面上面有多个功能图标可供选择与设置，分界面就是在主界面选择之后进入的界面。

主界面的效果图，如图2-3所示。

图2-3主界面
按钮控件的背景图以按钮默认是弹起状态，全部按钮都是弹起的状态，分界面上要有一个返回的标识，可以用来放按钮控件来触发返回，如图2-4所示。

图2-4按钮分界面、
文本控件的背景图类似于做出一个框架，显示数据的地方进行留空，为了保证美观，相应预留的位置应该根据文本控件字体的大小以及显示的宽度来实现，如图2-5所示。

图2-5文本分界面
进度条控件的背景图可以根据需要，在相应的位置上留空位置来放置进度条控件，相应的显示效果如图2-6所示。

图2-6进度条分界面
仪表显示的背景图可以根据需要，制作美观的仪表盘，仪表控件可以设置透明，直接和圆圈的地方重叠即可，如图2-7所示。

图2-7仪表分界面
滑块控件的背景图主要显示滑块的数值以及滑块控件的状态，滑块的位置需要进行预留出来，如图2-8所示。

图2-8滑块分界面
时间的分界面的背景可以设置成一个表盘，表盘和平常的时钟一样，可以根据需要改变样式，如图2-9所示。

图2-9时间分界面
动画的分界面的背景图可以根据需要设置，留空相应的位置来放置动画控件，如图2-10所示。

图2-10动画分界面
图标控件的背景图主要实验预留相应的位置来放置图标控件，根据图标的设计大小预留相应的位置，如图2-11所示。

图2-11图标分界面
组态控件中，需要配置相应的效果的控件有：按钮控件、文本控件、进度条控件、仪表控件、滑块控件、图标与动画控件、菜单控件。

这些控件在动作或者显示时都会有不同的效果，下面一一讲述。

2.2.1按钮控件效果图
按钮控件主要有两种状态：弹起/按下，按钮控件必须有两张效果图：按钮弹起的效果图和按钮按下的效果图。

两张图除了尺寸、分辨率、按钮的大小、样式一样，但相应的状态表示不一样，效果图如图2-12所示。

图2-13和图2-14为弹起/按下元素图。

图2-12按钮控件效果图
图2-13弹起元素图
图2-14按下元素图
文本控件的效果图主要是在显示参数的位置进行相应的预留，根据要显示的字体大小以及显示的宽度留空位置，效果图如图2-15所示。

图2-16为文本背景图。

图2-15文本效果图
图2-16文本背景图
2.2.3进度条控件效果图
进度条控件效果图主要分为背景图和前景图，背景图是指进度条数值为0的时候的显示图，前景图则设计成进度条数值为100的时候的显示图，效果图如图2-17所示。

进度条控件的背景图和前景图如图2-18和图2-19所示。

图2-17进度条效果图
图2-18进度条背景图
图2-19进度条前景图
2.2.4仪表控件效果图
仪表控件效果图主要是对表盘的样式进行素材图片的添加，使得表盘可以根据客户需求去自定义样式，相应效果图如图2-20所示。

图2-20仪表控件效果图
仪表控件效果图上有两个仪表控件，构成效果图的素材图片显示如图2-21所示。

图2-21仪表素材图片
2.2.5滑块控件效果图
滑块控件效果图主要是由背景图片、前景图片以及游标的图片组成，相应的效果图如图2-22所示。

图2-22滑块控件效果图
滑块控件由背景图、前景图和游标的素材图片组成，可以根据下图来制作。

图2-23滑块控件背景图
图2-24滑块控件前景图
图2-25游标的素材图片
2.2.6图标与动画控件效果图
图标控件的素材主要需要多张不同状态显示的素材图片，相应的尺寸大小和图标控件的要一致，效果图如图2-26所示。

图2-26图标控件效果图
图标控件中的素材是很多帧不同状态的素材图片，以电量图标为例，构成里面的相应素材图片如图2-27所示。

图2-27图标素材示意图
动画控件的效果图可以是ICON文件（上述讲的就是这个方法）或者GIF文件，相应的效果图如图2-28所示。

图2-28动画控件效果图
2.2.7菜单控件效果图
菜单控件效果图是由相应的背景图加上菜单控件的背景图以及前景图构成的，相应的效果图如图2-29所示。

图2-29菜单控件效果图
下拉菜单是指按下按钮，实现弹出下拉菜单，可以对其中选项进行选择，背景图如图2-30所示。

图2-30下拉菜单背景图
当按下按钮弹出菜单的时候，会弹出菜单的样式，如图2-31所示；对菜单进行选中，相应的选中效果如图2-32所示。

图2-31弹起的素材图
图2-32按下的素材图
2.2.8显示时间效果图
显示时间是指类似于时钟显示时间，需要的素材有表盘和相应的指针，相应的效果图如图2-33所示。

图2-33时间的效果图
显示时间效果图主要需要表盘背景图和各个指针图，表盘背景图如图2-34所示。

图2-34表盘背景图
构成表盘的指针有时针、分针和秒针，都是0度的图片，如图2-35所示。

图2-35指针图。