如何制作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所示。
ui素材网站图2-3主界面
按钮控件的背景图以按钮默认是弹起状态，全部按钮都是弹起的状态，分界面上要有一个返回的标识，可以用来放按钮控件来触发返回，如图2-4所示。
图2-4按钮分界面、
文本控件的背景图类似于做出一个框架，显示数据的地方进行留空，为了保证美观，相应预留的位置应该根据文本控件字体的大小以及显示的宽度来实现，如图2-5所示。
图2-5文本分界面

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。