2024年2月25日发(作者：)

如何制作UI素材工程技术笔记类别关键词摘要UI素材内容广州大彩光电科技有限公司

广州大彩光电科技有限公司如何制作UI素材修订历史版本V1.0日期2018/03/16原因创建文档编制谢岢成审查

广州大彩光电科技有限公司如何制作UI素材目录1.适用范围...................................................................................................................素材元素的组成..................................................................................................22.1背景图..................................................................................................................................22.1.1背景图的分辨率......................................................................................................22.1.2背景图的效果..........................................................................................................32.2组态控件效果图.................................................................................................................62.2.1按钮控件效果图......................................................................................................62.2.2文本控件效果图......................................................................................................72.2.3进度条控件效果图..................................................................................................72.2.4仪表控件效果图......................................................................................................82.2.5滑块控件效果图......................................................................................................82.2.6图标与动画控件效果图..........................................................................................92.2.7菜单控件效果图....................................................................................................102.2.8显示时间效果图....................................................................................................11

广州大彩光电科技有限公司如何制作UI素材1.适用范围文档适合基本型、商业型、经济型、物联型等所有串口屏产品。1/12

广州大彩光电科技有限公司如何制作UI素材素材元素的组成在工程画面中，UI素材元素主要由背景图和组态控件效果图组成；背景图是指工程画面中每个界面的显示图，背景图的样式以及效果可以根据需要添加，相应的分辨率需要和串口屏的分辨率一致；组态控件效果图是指控件在不同的状态或者动作的时候呈现出不一样的效果，同一控件的效果图需要做成尺寸、分辨率一样的，只是状态效果显示不一样。2.1背景图2.1.1背景图的分辨率背景图的制作必须和屏幕里面的分辨率一致，这样可以让背景图看起来更清晰、细腻，像素点更加好看。在创建工程的时候，在所选的型号中会有对应的分辨率，背景图应该按照该分辨率进行制作，如图2-1所示。图2-1工程画面分辨率如果手中有屏幕的话，可以通过查看背面的丝印层找到相应的型号，如图2-2所示。注意：查看丝印层，例如：DC80480B070的话，分辨率是800*480的，即宽度是800，高度是480.如果是DC48270B043的话，分辨率是480*272的，这个需要特别注意，以软件里面的分辨率为准。图2-2查看丝印层2/12

广州大彩光电科技有限公司如何制作UI素材2.1.2背景图的效果背景图主要是指界面的不同背景，一般UI设置中都有主界面以及分界面，主界面上面有多个功能图标可供选择与设置，分界面就是在主界面选择之后进入的界面。主界面的效果图，如图2-3所示。图2-3主界面按钮控件的背景图以按钮默认是弹起状态，全部按钮都是弹起的状态，分界面上要有一个返回的标识，可以用来放按钮控件来触发返回，如图2-4所示。图2-4按钮分界面、文本控件的背景图类似于做出一个框架，显示数据的地方进行留空，为了保证美观，相应预留的位置应该根据文本控件字体的大小以及显示的宽度来实现，如图2-5所示。图2-5文本分界面3/12

广州大彩光电科技有限公司如何制作UI素材进度条控件的背景图可以根据需要，在相应的位置上留空位置来放置进度条控件，相应的显示效果如图2-6所示。图2-6进度条分界面仪表显示的背景图可以根据需要，制作美观的仪表盘，仪表控件可以设置透明，直接和圆圈的地方重叠即可，如图2-7所示。图2-7仪表分界面滑块控件的背景图主要显示滑块的数值以及滑块控件的状态，滑块的位置需要进行预留出来，如图2-8所示。图2-8滑块分界面4/12

广州大彩光电科技有限公司如何制作UI素材时间的分界面的背景可以设置成一个表盘，表盘和平常的时钟一样，可以根据需要改变样式，如图2-9所示。图2-9时间分界面动画的分界面的背景图可以根据需要设置，留空相应的位置来放置动画控件，如图2-10所示。图2-10动画分界面图标控件的背景图主要实验预留相应的位置来放置图标控件，根据图标的设计大小预留相应的位置，如图2-11所示。图2-11图标分界面5/12

广州大彩光电科技有限公司如何制作UI素材2.2组态控件效果图组态控件中，需要配置相应的效果的控件有：按钮控件、文本控件、进度条控件、仪表控件、滑块控件、图标与动画控件、菜单控件。这些控件在动作或者显示时都会有不同的效果，下面一一讲述。2.2.1按钮控件效果图按钮控件主要有两种状态：弹起/按下，按钮控件必须有两张效果图：按钮弹起的效果图和按钮按下的效果图。两张图除了尺寸、分辨率、按钮的大小、样式一样，但相应的状态表示不一样，效果图如图2-12所示。图2-13和图2-14为弹起/按下元素图。图2-12按钮控件效果图图2-13弹起元素图图2-14按下元素图6/12

广州大彩光电科技有限公司如何制作UI素材2.2.2文本控件效果图文本控件的效果图主要是在显示参数的位置进行相应的预留，根据要显示的字体大小以及显示的宽度留空位置，效果图如图2-15所示。图2-16为文本背景图。图2-15文本效果图图2-16文本背景图2.2.3进度条控件效果图进度条控件效果图主要分为背景图和前景图，背景图是指进度条数值为0的时候的显示图，前景图则设计成进度条数值为100的时候的显示图，效果图如图2-17所示。进度条控件的背景图和前景图如图2-18和图2-19所示。图2-17进度条效果图图2-18进度条背景图7/12

广州大彩光电科技有限公司如何制作UI素材图2-19进度条前景图2.2.4仪表控件效果图仪表控件效果图主要是对表盘的样式进行素材图片的添加，使得表盘可以根据客户需求去自定义样式，相应效果图如图2-20所示。图2-20仪表控件效果图仪表控件效果图上有两个仪表控件，构成效果图的素材图片显示如图2-21所示。图2-21仪表素材图片2.2.5滑块控件效果图滑块控件效果图主要是由背景图片、前景图片以及游标的图片组成，相应的效果图如图2-22所示。图2-22滑块控件效果图8/12

广州大彩光电科技有限公司如何制作UI素材滑块控件由背景图、前景图和游标的素材图片组成，可以根据下图来制作。图2-23滑块控件背景图图2-24滑块控件前景图图2-25游标的素材图片2.2.6图标与动画控件效果图图标控件的素材主要需要多张不同状态显示的素材图片，相应的尺寸大小和图标控件的要一致，效果图如图2-26所示。图2-26图标控件效果图图标控件中的素材是很多帧不同状态的素材图片，以电量图标为例，构成里面的相应素材图片如图2-27所示。图2-27图标素材示意图动画控件的效果图可以是ICON文件（上述讲的就是这个方法）或者GIF文件，相应的效果图如图2-28所示。9/12

广州大彩光电科技有限公司如何制作UI素材图2-28动画控件效果图2.2.7菜单控件效果图菜单控件效果图是由相应的背景图加上菜单控件的背景图以及前景图构成的，相应的效果图如图2-29所示。图2-29菜单控件效果图下拉菜单是指按下按钮，实现弹出下拉菜单，可以对其中选项进行选择，背景图如图2-30所示。图2-30下拉菜单背景图当按下按钮弹出菜单的时候，会弹出菜单的样式，如图2-31所示；对菜单进行选中，相应的选中效果如图2-32所示。10/12

广州大彩光电科技有限公司如何制作UI素材图2-31弹起的素材图图2-32按下的素材图2.2.8显示时间效果图显示时间是指类似于时钟显示时间，需要的素材有表盘和相应的指针，相应的效果图如图2-33所示。图2-33时间的效果图显示时间效果图主要需要表盘背景图和各个指针图，表盘背景图如图2-34所示。图2-34表盘背景图11/12

广州大彩光电科技有限公司如何制作UI素材构成表盘的指针有时针、分针和秒针，都是0度的图片，如图2-35所示。图2-35指针图12/12