UI_RD协作开发流程

时间:2023-03-08 17:30:15

1. 背景

由于android端需要进行多屏幕适配,这就给UI&RD之间的沟通产生了一些困难。我下面将会对这两种角色的沟通,说明了一下我们项目中沟通的方式和规则。

原则:客户端跟UI约定了各种库(字体、距离、颜色),库的实际值根据各种屏幕等信息提前适配,但名字跟UI给的标注图保持一致。

后文分别对字体、距离和颜色进行解释:

2. 字体库和距离库

UI给出的效果图&标注均在720下面标注的。客户端针对720的标注来生成代码。如图:

UI_RD协作开发流程

为什么需用720下进行标注呢?

android官方文档建议选用320的屏幕作为标准屏幕进行适配,但当前主流机型的屏幕已经升级为720。且UI同学做的效果图就为720下的效果,综上所述,我们采用720的标注。

2.1 距离

针对所有距离,直接使用字体距离库font_distance_pool.xml中的dsxx, 比如:@dimen/ds50。

UI_RD协作开发流程

如何适配的?

针对ds50,分别在xh和h下对应不同的大小,分别为25dip和22dip。

为什么在xh下是25dip?

xh下的密度为2,所以设置为25dip,刚好为25*2=50

为什么在h下是22dip?

这是UI单独设置的规则。h的文件夹一般对应480的屏幕,720与480屏幕等比换算后,50px应该折算成33px,那33px在h下对应的值就大约为22dip了。

一共多少距离?

根据这个规则,已经把100px以下的距离都已经换算好,生成了xh和h的font_distance_pool.xml文件。超过100px的距离为不常用距离,当需要使用时,按照上面的规则,自行添加到距离库中。

2.2 字号

针对所有字号,直接使用字体距离库font_distance_pool.xml中的fontsizexx,比如:@dimen/fontsize22。

UI_RD协作开发流程

一共多少字号大小?

由于跟UI同学的规划,我们把整个应用的所有字号都进行了收敛,控制到7个字号。如上图。

为什么字号的单位的dp而不是sp?

由于android系统可以在设置中更改字体大小。比如在10sp的大小,如果选择大号字体,该字体大小就可能达到了15px。用户随意更改了字体大小,就跟UI设计图中的字体大小发生了差距。这样就很难保证效果图了。所以我们采用了dip,使用了dip就使得系统设置字号大小对本应用无效了。同时,我们本地应用提供了更改字号的功能,这样使得字号的变化处于可控状态。

如何适配不通屏幕?

同样的,字号也会针对xh和h下有适配关系,跟距离的一致。 同样参考:font_distance_pool.xml文件

4. 颜色库

对于颜色,我们做了相应的努力,也跟UI同学一起收敛了一下UI的使用,生成了颜色库,控制整个应用的颜色在30种以内。所有在应用中的颜色都能从该库中找到。

UI_RD协作开发流程

对应颜色,我们有存在日间和夜间模式,但我们只需要日间标注,就知道了夜间的信息,如何做到?

首先,定义了规则:所有日间和夜间的颜色对应关系全部在颜色库colors_pool.xml 里面,并且根据名字的微笑变化来进行匹配。比如: 日间是color,那夜间是color_1。 用_1来区分是否为夜间资源。并且通过代码,根据当前状态自动寻找对应资源。

UI_RD协作开发流程

其次,在日间标注上面,颜色使用颜色库里面的名字。

这样做有什么优势?

RD看见标注很清晰,并且不需要关心夜间信息。更加专心的处理业务功能。

UI只需要一次投入来规划颜色库,以后不需要再做夜间效果图。减少工作量。

5.后续

通过以上努力我们把字号、距离、颜色搞定了。针对android的适配,我们前进了一大步,也方便了一大步。后续,我们可以考虑在布局上做些文章。由于UI和RD在布局上的理解不一致,我们需要通过一些手段来化解理解上的鸿沟。期待后面的探索。