现在版本的皮肤资源的2个问题
2018-10-08 本文已影响9人
凌霄光
ui的呈现是通过样式,皮肤就是样式的子集。最近开发皮肤的功能,首先要做的就是确定皮肤的范围,也就是修改的样式的范围。
需求中只要求改登录页、考勤页、顶部菜单。设计给的设计稿中也只包括这三部分,开始没觉得有问题,但在开发的过程中我发现了一些问题。
1. 皮肤的范围不够大
先看下设计稿



主要改变了背景颜色、背景图片、字体颜色和一些小图片。这部分划为皮肤的话,那么有一些东西是没有涉及到的,比如选择课次页、设备绑定页、奖章榜、课前课后测试的页面、各种浮窗等。






只改一部分页面的样式是可以,但是会使得整个产品的ui不统一,这样用户体验肯定会下降的。
2. 皮肤中包含一些之前没有的东西
皮肤其实就是一部分样式,除了改动各种颜色、图片,改动布局也是可以的,但是必须在之前的版本中能找到对应的内容。
我发现考勤页和之前的相比多了设备图标和名字下面的一行文字,这样的改动就不只涉及到样式了,需要去改动内容,而且这里有设备图标也不应该,设备管理页面的样式也不是这样的。



设备图标和下面的一行文字需要去掉,因为在之前的考勤页找不到对应的内容,没法只通过样式修改来切换皮肤。涉及到具体的内容修改就不应该叫皮肤了。
总结
皮肤是样式的子集,划分范围的原则是尽量不改动布局的前提下去替换一些样式和资源,现在的皮肤有两个问题,一是范围划分的不够大,导致ui的不统一,二是有些设计稿中出现了找不到之前版本对应内容的部分。