车载导航应用中基于Sketch UI主题定制方案的实现

2020 年 3 月 04 日

车载导航应用中基于Sketch UI主题定制方案的实现

1. 导读


关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类:


  • 内置主题(应用内自定义style)

  • 外部加载方式(资源apk形式、压缩资源、插件等)


其实,针对不同的主题定制实现思路,没有绝对的好坏,每种实现方案都有其利弊,重要的是如何去权衡、选择,根据实际的项目需求,痛点,制定一个符合实际项目需求,能够解决主题定制过程中痛点的方案才是好的方案。


由于我和团队一直是做车载导航应用开发,面向的对象是客户。不同的客户对于应用的 UI 或者主题是有不同需求的,也就是说针对不同客户,不同渠道的版本,需要有不同的应用主题。


随着项目的增多,如果没有一个灵活,易管理,低成本的主题定制方案,那么实现将变得非常困难。


2. 过去主题定制的实现方案


  • 针对需要定制的UI,研发增加对应的自定义主题控件;

  • 布局由这些自定义主题控件搭建而成;

  • UED修改对应主题控件xml中对应的色值实现主题的定制;

  • 研发集成UED配置的文件,实现主题定制;

  • 研发出包,UED进行主题定制还原度验证。


基本思路就是界面中需要主题定制的 UI,通过自定义主题控件实现,而自定义主题控件可以通过替换布局 xml 的方式实现主题色值等的替换,从而实现主题定制,但这种方案的缺点非常明显:



  • 成本高:主题定制需要UED手动去修改xml,但一般UED对于xml格式内容不是很了解,这样无疑学习及修改成本都非常高,其次也容易产生错误的修改,导致稳定性很差;

  • 效率低:主题定制需要UED修改完xml后,发给研发,然后由研发替换xml,流程多,效率低;

  • 维护难:之前的主题定制,没有统一的东西管理,主题对于UED来说就是一堆的xml文件,很难进行维护;

  • 复用性差:由于主题定制是通过xml,如果主题控件修改了,xml也就跟着修改,主题的复用就很难实现。


3. 新方案的设计与实现



从上图中我们可以看出在主题定制的整个过程中,UED 参与了大部分的流程,只有在主题集成的时候,研发需要参与,其实说到底,UED 才是主题定制的 Owner,对于主题定制最理想的状态是研发提供一定的工具平台,UED 设计完主题后,可以直接集成到应用内验证回归,中间无需研发干预处理,整个主题定制流程都由 UED 走完。


3.1 方案要素


基于 UED 参与就能完成主题定制的理念,同时考虑项目对于主题定制的需求,在新主题定制方案的设计中,应当围绕核心角色,服务好核心角色,以最大限度降低核心角色的成本,提高整个定制过程的效率,同时兼顾项目核心需求为目标来设计、搭建新方案,以下是方案中应该关注的角色及要解决的关键问题:


  • 主题定制主角:UED

  • UED、UI设计工具:Sketch

  • 项目需求:

  • 不同项目的不同渠道有不同的主题定制需求

  • 出包时就有对应主题,无需下载

  • 项目周期短,需要能快速定制

  • 项目需要维护,主题也需要方便维护、管理



3.2 方案雏形


基于以上分析,主题定制的大体流程,方案如下:


  • 首先,方案应当围绕着UED建设,由于UED是基于Sketch进行UI界面设计,因此如果主题定制也能基于Sketch,UED就能很方便的基于Sketch设计UI的同时也设计主题;

  • 同时,不同的渠道会有不同的主题定制,并且需要快速定制,方便管理、维护,同时出包时就需内置主题,因此需要有一个主题管理平台能管理,维护主题资源,并且支持主题复制,使得主题资源能基于现有项目的主题进行少量修改,就能形成一个新的主题;

  • 接着,需要在Jenkins打包时,能根据不同的渠道打包不同的主题资源到apk中;

  • 最后,需要将打包好的apk快速安装到真机上进行还原度验收。


最终主题定制方案也就基本成型,基于 Sketch 的 UI 主题定制方案:



4. 方案详解


基于 Sketch 的 UI 主题定制,主要分成四大步骤:


  • UED在Sketch中制作主题资源及上传云端(主题制作)

  • UED在WEB主题平台管理主题资源(主题管理)

  • Jenkins拉取主题资源打包到应用(主题集成)

  • 真机预览效果(主题验证)


以上流程主要针对主分支,第一次界面开发,针对后续不同项目的主题定制,只需要在 WEB 平台中 copy 主题资源,然后进行对应的主题修改,即可快速定制出一套对应的主题出来。


以下详细介绍主要关键步骤:


4.1 主题资源制作


主题资源制作一般在界面设计前就需要提前设计好,UED 在 Sketch 中将主题控件设计好之后,我们提供了一个快捷的主题输入界面,方便 UED 能快速编辑对应控件的主题属性,并一键上传到云端,如下所示,在 Sketch 中进行主题控件制作:



4.2 WEB 主题平台管理主题资源


WEB 主题平台,保存了项目中所有可定制的主题资源,包含主题控件、插画、iconfont、文字大小等,在这里可以快速基于母版主题,copy 出新的主题资源,然后进行个性化定制,或者基于其他项目快速 copy,主题的定制不再是繁琐、耗时的操作,而变成了直观、易操作。


4.3 真机预览


在 WEB 主题平台编辑完主题资源后,通过 Jenkins 或服务器将主题资源打包到 apk 中,最后通过车机设备集群管理平台,将 apk 安装到不同的真机上,实现真机预览主题定制效果,UED 可快速回归还原度,发现问题,并快速在主题平台上修复。



5. 方案对比


针对业内几种比较常用的主题定制方案与基于 Sketch 的 UI 主题定制方案进行了几个方面的对比:



以上三个方案的对比:


内置主题:优点在于实现简单、配置方便,缺点是主题定制不灵活。


外部加载方案(apk):优点在于扩展性很高,但由于该方案需要在代码中设置所有的可变资源,软件实现周期较长,写代码时容易出错。而且第一版耗时较长,一旦界面布局改变,需要较长的时间进行代码的编写。


基于 Sketch 的 UI 主题定制方案,它的优势在于:


  • 基于UED的UI设计工具Sketch,能在设计UI的时候,同时设计主题资源,并且能快捷的预览主题资源在整体界面上的显示效果;

  • 可以通过Sketch插件的能力,快速将主题资源上传到后台,方便主题资源的统一管理及维护;

  • 在后台配置修改完主题资源还能回流Sketch中进行查看。


这个方案的最大优势在于与 UED 的 UI 设计工具 Sketch 无缝的衔接在一起,极大的提高了主题的制作效率及成本,使得 UED 能够独立完成主题资源制作、管理、集成、应用、验证,形成一个主题小闭环。



6. 小结


该方案的特点在于与 Sketch 很好的结合在一起,通过插件的能力,无缝的与云端进行资源相互同步,能力的实现主要通过 WEB 主题平台进行主题的管理、编辑,实现主题的快速复制,方便修改,然后再通过 Jenkins 的打包能力,实现主题的快速应用,最终实现 UI 主题定制。


能力建设完成后,以上的每个环节,只需要 UED 参与就能完成不同项目的主题定制,极大减少了 UED 及研发的成本,大大提高了效率,同时在定制能力上,从只能定制颜色、圆角、大小等,到能支持插画、iconfont 定制,以及其他各项拓展定制能力等。


2020 年 3 月 04 日 14:4970

评论

发布
暂无评论
发现更多内容

GitHub SSH免密登录

jiangling500

GitHub SSH 免密登录

架构师训练营 -week08-总结

大刘

极客大学架构师训练营

第八周作业一

天天向上

极客大学架构师训练营

架构师训练营第 1 期 - 第八周作业

Todd-Lee

极客大学架构师训练营

第四周学习总结

晴空万里

极客大学架构师训练营

第四周作业

Griffenliu

LeetCode题解:169. 多数元素,排序,JavaScript,详细注释

Lee Chen

算法 LeetCode 前端进阶训练营

第八周

Geek_fabd84

架構師訓練營 week8 總結

ilake

架构师训练营第 1 期 week8

张建亮

极客大学架构师训练营

一个 32 岁「老」码农的复盘:初出茅庐

欧雷

前端开发 工作经历

大型互联网系统技术架构模式

Mars

架构模式 大型互联网应用系统

架构师训练营第一期第八周作业

Leo乐

极客大学架构师训练营

匠心、携手、深耕:5G Capital展现出的无线产业新范式

脑极体

架构师训练营第八周课后作业

Gosling

极客大学架构师训练营

性能优化二第八周作业「架构师训练营第 1 期」

天天向善

第四周作业

晴空万里

第八周作业

极客大学架构师训练营

在GitHub中如何进行PR(Pull Request)

jiangling500

GitHub PR

它是世界上最好的语言,吊打PHP那种

MySQL从删库到跑路

php 少儿编程 scratch

网上如何精确分别百家电投台子真假靠谱方法(LGF微7998)

InfoQ_ba4217df53b1

高交会:前沿科技“二维码报警系统”为你保驾护航

WX13823153201

架构师训练营第八周学习总结

Gosling

极客大学架构师训练营

架构师训练营第 1 期第八周总结

Leo乐

极客大学架构师训练营

Netty源码解析 -- PoolChunk实现原理(jemalloc 3的算法)

binecy

源码 Netty 内存管理

深度学习-框架之 pytorch

Dreamer

框架

架构师训练营 - 第八周 - 作业一

行者

第四周学习总结

Griffenliu

【第八周】性能优化(二)

云龙

架構師訓練營 week8 作業

ilake

三步实现SSH免密登录Linux服务器

jiangling500

SSH 免密登录 Linux服务器

车载导航应用中基于Sketch UI主题定制方案的实现-InfoQ