跨平台技术加速智能可穿戴应用开发

技术揭秘一款时尚智能的表盘从0到上线究竟可以有多快

随着移动互联网的快速发展，智能手表越来越被大众所认识与接受。贴身特性可让用户不错过重要的通知消息，健康状态记录又可以帮助用户随时了解身体，加强锻炼。时尚则可彰显出用户的独特身份和品味。手表移动支付与公交地铁刷卡能力更加提升了生活出行的便利性。

除了硬件外观，智能手表的时尚主要体现在每天抬手可见的表盘上。与传统手表的表盘相比，智能手表表盘主要有以下两个特点：

• 一是随时更换，适应不同场合不同的搭配 。
• 二是信息丰富快捷展示，记步、心率、时间、天气、日历提醒等等应有尽有。

因此，用户在购买智能手表时，尤其关注表盘是否足够丰富足够漂亮，其重要性不言而喻。

图1 时尚智能手表PACEWEAR

本文介绍了智能手表表盘快速开发的难点并提出了有效的解决方案，以及该方案成果落地的过程

持续开发与维护之痛

智能手表的表盘在整个手表操作系统中，也是一个应用（以下简称App），其开发流程和一款普通App的流程并无太多区别。

一款普通App上线，需要经过产品策划、设计、开发、测试和发布以及后续的运营，每一个环节都不能少。人力成本、时间成本消耗都非常大。表盘是智能手表上最简单的App，它也需要经过以下这些阶段才能完成上线：

1. 需求：一款数字时间带背景动画的卡通风格表盘（1天）
2. 设计：尝试风格，评审确定最终视觉并输出资源（1天）
3. 开发：根据设计资源进行功能开发，UI还原（3天）
4. 测试：测试表盘时间显示、动画性能功耗是否ok（1天）
5. 上线：产品将测试通过的表盘上线（1天）

由此看来一款表盘大概需要7个工作日的时间，从0到完成并上线。

核心问题是表盘作为手表上用户个性化需求最强烈的一环，丰富而大量的表盘必不可少。Pacewear的表盘市场上已经有了上百款表盘，各种节日活动运营表盘该有的都有，可用户每天喊着要新的表盘，彰显个性。产品研发同学疲于奔命，这样黑暗的日子什么时候是个头？

这时候刚毕业不久的产品经理Sendy通过分析和总结，提出了一个非常关键的问题：

表盘可能是一个模式化的产品，设计效果无论如何千变万化，离不开背景、指针、 图层、动画等基本元素、典型的手表系统功能等，能不能做一个工具代替开发完成制作，直接生成App呢？

大家看到了希望，可是一系列难题出现了。

项目难点：

怎么做有几种选择：1.基于PC；2.基于Web；3.基于安卓手机app。

• 基于PC的方案跨平台门槛非常高。
• Web容易跨平台，但难点是不知道如何将Web代码（尤其是渲染与交互部分）转化成安卓表盘。
• 基于安卓手机的方式因为屏幕小，能够快速精确个性化定制的能力有限。

于是大家着手调研市面上的工具。开始的时候发现有Garmin，Ticwatch的编辑工具，这些工具就是换一下表盘背景，没有生动的动画和条件触发机制，满足不了多样性的需求。用户怎么能够在情人节那天用表盘上的玫瑰对女神表白？同学们进一步发现有一些不错的编辑工具，比如直接在手机上制作的Watchmaker，也有直接在PC端制作表盘的三星GearWatchDesigner。前者偏重用户的DIY，功能主要集中在修改时间、背景等静态元素上，实现制作，安装和预览都很麻烦。 后者不支持更多的手表系统功能，能玩的花样太少，预览和调试非常麻烦。表1 各种表盘工具的对比，打叉的居多。

表1 各类表盘工具功能对比

从表1看出行业里并没有功能强大且实用的表盘制作工具。看来做出一个神器，用统一的技术框架帮助用户快速实现个性化表盘是一件很有挑战的事情。

自下而上踏上不归路

虽然很难，但架构与方案的选择有一些内在的规律，其中一点就是“平衡”，很多功能要有优先级。当我们更看重跨平台的便捷性和用户个性化需求的时候， Web隐约就是方向。

团队中的OS渲染引擎大拿符乐安号召大家业余时间自学Web来完成这个创新和研究。Pacewear软件团队（真时科技有限公司的深圳研发团队）的前身就是腾讯TOS团队，这个团队的专研精神在腾讯移动互联网事业群是响当当的。TOS团队曾经在腾讯T4专家黄石柱的带领下，成功挑战了安卓系统锁屏的渲染性能极限。英雄联盟游戏里的3D人物形象可以栩栩如生的呈现在系统锁屏上，并有各种骨骼动画与用户解锁过程交互。研发TOS锁屏的时候，符乐安，黄彬，张罗，姚聪，晏楚男就是当时挑战极限的攻坚力量。这次他们又自发地站了出来，白天赶产品进度，晚上学习Web技术以及Webgl，力争找到高性价比的技术方案。

产品经理Sendy和设计师阿达也经常组织大家脑爆和分享思路。当同学们看了更多的编辑工具，比如小米手机主题编辑器，photoshop，AE，腾讯TOS手机主题工具之后，黄彬和Sendy抽象出了几个关键组件：图层，动画，事件触发器，系统组件等等。而这几个组件恰恰是目前行业里手表编辑工具普遍薄弱的地方。

符乐安率先找到了用libgdx快速转换java代码成为Web代码与安卓代码的方案，产品定义终于有了可以快速落地的可能性。

没有增加人力编制，没有Web硬功夫，仅靠晚上的研究和开发，初期没有明确的项目立项，只是为了解放开发和测试人力，同学们踏上了表盘工具这条不归路。路的尽头是他们的目标：制作一款无需安装，拥有强大多样的设计功能，并且可以快速在手表展示效果的表盘制作工具。

大家奋力一搏。张罗和晏楚男每天晚上学习Web与后台技术，逐步被“逼”成了全栈工程师。之前已经是安卓底层多媒体好手的姚聪，现在技术更加深厚，在表盘工具研发中攻克一个又一个的渲染引擎难题。

图2 Pacewear主动探索智能穿戴设备跨平台技术的产品设计研发同学们，其中几个同学已经成长为全栈工程师，最近他们又在挑战新的领域：运动AI算法

工具产品化之路

既然要做工具，那首先要考虑的就是用户对这个工具的安装、下载和使用的门槛。当找到了高效的打通渲染引擎、Web和安卓的方法之后，团队最终坚决地选择了Web的方式进行工具开发，这样用户可以在任何系统平台上，随时随地打开使用，用完即走。Pacewear产品与研发同学们其实就是要解决以下几个难题：工具如何实现跨Web与Android平台？工具需要支持表盘上哪些元素？工具如何准确的表达他们的状态？ 工具如何制作、展示效果以及最终百分之百的将效果还原到手表上？工具产出的是什么？是否能直接投入真机使用？

如何实现跨平台运行？

通过前期对多个跨平台项目的预研，最终决定以Libgdx这个轻量级、跨平台的开源项目为基石来架构这个应用，应用整体框架如图3 所示。

图3 工具整体框架

Libgdx层是整个应用的最底层与最关键的部份，libgdxAdapter通过实现libgdx各平台相应的标准接口来实现多平台的支持，WatchEditorModel是表盘编辑器的主业务逻辑层，它以上面两层为基础，并结合表盘编辑器的特定需求而做了进一步功能封装，这个业务层同时适用于web侧与android侧，最终Application应用层会通过WatchEditorModel来调用与管理相应的业务逻辑，在各个平台上呈现最终效果。

1、Libgdx：主要负责表盘内容的渲染显示、显示资源管理等，其于原生基础上对3D渲染性能进行了一系列优化，研发同学们在这个开源模块上做不少针对手表系统的优化，以降低功耗提升性能。

2、LibgdxAdapter：这一层是这个框架实现跨平台的关健，针对不同的运行平台，分别实现不同的基础接口，再使用各平台对应的编译工具生成其可运行的执行文件，具体原理如图4 所示。

图4 跨平台原理

• WEB平台：通过GWT来编译生成对应的 HTML+JavaScript 代码，从而可以脱离 JVM 将代码部署到 Web 服务器中，最后直接通过浏览器进行访问。
• ANDROID平台：基于Android SDK 提供的API来实现基础接口，通过ANT等编译工具将源始的 java 代码编译成android平台能识别的dex文件，并打包成相应的apk，最后直接安装到android平台的设备上即可运行。

3、WatchEditorModel：表盘编辑器主要的业务逻辑层，主要包括对表盘图层的控制、动画管理、事件处理等。

4、Application：终端应用层，其主要包括网页端与手表端上的运行逻辑，与相应平台耦合度较高。

表盘上有什么？

通过大量的收集市面上已有的智能表盘，将它们放在一起看，总结共同的元素，如：时间（数字时间、模拟时间）、日期（年、月、日、星期）、天气（温度、状态）、步数、电量等系统数据、背景图片等等。相比经典传统表盘，智能手表的表盘复杂度有了很大的变化，表2 对比了两种表盘上元素类型的差别。

表2传统表盘与智能表盘元素类型对比

他们的状态如何？

顺着元素观察他们的状态，我们同样总结出了状态分类如下：

1. 绑定了系统的某种状态信息和功能（系统组件）
2. 完全静止（图层）
3. 有动画（各种图层的动画），或者在某种情况下会动起来（事件触发器）

工具如何制作、展示效果以及最终百分之百的将效果还原到手表上？

工具采用网页的形式，直接在页面上编辑制作表盘，通过跨平台渲染引擎实时的将效果呈现，这个过程中工具可以做到所见即所得，让使用者随时查看随时调整。然而最大的难点在于如何将网页上看到的效果百分之百的还原到手表上呢？

首先将网页制作效果保存为描述文件、素材文件、特效渲染文件等，将这些文件在手表端实现加载并完整解析，还原设计效果，具体流程如图5 所示。

图5 工具设计流程

整个过程中“表盘数据压缩包”是连接两个平台的关健要素，表盘数据包中主要包含了如下几个类型的数据：

1. 表盘描述xml文件：记录图层结构、事件类型、动画属性等等；
2. 图片：各图层显示对应的图片资源；
3. Shader 脚本： Shader语言编写的文件，用于实现基础绘制、特效等，Opengl与Webgl都支持；

那表盘数据压缩包中各类型资源分别起什么作用，又是如何被客户端（网页和表盘）所使用的呢？图6 描述了应用对各类型资源的使用流程。

图6各类型资源的使用流程

特别说明一下，图中 Model（模型）主要是四边形的平面模型。Material1 与Material2 因为具有相同的材质属性(Attribute)，所以从Shader缓存（ShaderCache）中会关联到相同的Shader对象。

最终产出的是什么？是否能直接投入真机使用？

按照我们的目标，彻底解放开发，那么最终产出的一定是可以直接投入使用的App形态，并且可以在真机上直接使用。要想做到如此，工具需要在服务器上将制作的表盘打包成表盘对应的Apk，并生成其相应的二维码，手机通过扫一扫直接安装到手表上, 如图7。

图7 表盘生成二维码

这里有个小插曲，有一天晚上Pacewear CEO文博与PaceOS技术负责人黄石柱正好在讨论表盘如何更方便的制作与发布，文博想到了二维码方式，他希望任何人都可以发布自己的表盘并很容易地被其他用户使用。当石柱把文博的想法告诉Sendy的时候，Sendy说刚刚实现了这个功能，此时是晚上11点多。看来当团队足够兴奋的时候，创造力和敏捷行动的潜力是巨大的。

这些问题解决之后，工具的雏形才刚刚形成。同学们觉得可预见和需要解决的问题好像都解决了，接下来就等着开发完成，正式投入使用吧，然而事实并非如此。

实践检验，各个击破

在研发同学们开发出第一版工具Demo的时候，大家发现了不少之前没有考虑到的问题。这些问题直接决定了最终产出的表盘是否能够上线使用，是否能够和正常开发流程产出的表盘达到一样的效果，甚至更强。于是同学们开始组织Pacewear内部的表盘设计比赛，目的是通过大家对工具的反复使用，发现问题和解决问题。这里将列举三个典型问题进行简单阐述，从这三个问题中，同学们逐渐找到了让工具更成熟更易用的办法。

问题一：动态阴影

使用第一版工具做出第一个指针表盘的时候，大家发现它和真实的传统表盘有很大差距，同学们对比了2种表盘是真实体验，发现传统表盘自身和环境光的反射造成了非常真实而又强烈的立体透视感和层次感。这是平面表盘所达不到的效果。

针对这个问题，同学们主动加上了解决方案：为指针增加动态阴影，通过模拟传统表盘指针在固定光源照射下的阴影效果，让指针类型的表盘获得更真实更生动的效果。如图8。

图8 星球表盘指针动态阴影效果

问题二：字体问题

表盘当中为了不同的视觉效果，往往在数字和英文表达上，设计师会采用很多漂亮的字体，而一个字体包的大小有2-3M,更大的甚至有5-6M，除此之外如何能在工具中满足不同设计师对自己偏爱的字体的使用呢？

包大小的问题，大家发现表盘上出现的文字无外乎数字0-9，英文A-Z，很少出现汉字，因此如果能将完整的字体包仅保留数字和英文包就会小很多。而设计师希望使用的特殊字体，则可以通过加载的方式加入到工具中，也就可以投入使用了。

这样研发同学们又主动加上了 2个解决方案：1、内置并支持上传字体；2、自动裁剪字体包。让字体在表盘上得到广泛使用的同时，又保证了包的大小不会增长。

问题三：安装包大小的问题

尽管裁剪了字体的大小，但是最终导出的App，要比正常开发出来的表盘大了3-4倍。经过分析，为了让表盘能够正常运行，研发同学们在包体中加入很多的基础引擎代码。而这些代码每个表盘都会使用，于是大家开始思考，抽离公共代码，让表盘包变成可被加载的资源包存在。经过试验，最终导出的表盘由2M可以缩小到500K以内。这个问题的解决，使得工具制作的表盘，在用户真正下载使用时，下载安装的速度和开发者开发并优化后的表盘体验一致。

在收敛并克服了众多之前从未预想到的用户反馈的问题之后，工具的成熟度有了质的变化。这种变化带来的表盘质量和工具本身性能都有了明显的提升。而这个过程中，也是研发同学自身成长和对技术理解提升最快的阶段，尽管非常辛苦。

设计2小时，制作5分钟

整个工具的开发遇到问题解决问题其实是一个积累经验的过程。然而前期的清晰定义和中期的不断试错，到后期的功耗性能优化，才得以最终让工具可以真正承担起表盘开发的任务。与此同时，编辑生成的表盘App由于其公共代码的通用型，在性能上得到了很好的保证，这也进一步释放了测试的人力。

最终工具在实际使用中，需求提出之后的当天，如果设计师完成设计，只需5分钟，工具就可以完成一个表盘的开发制作，到最终自测上线，仅需1-2天的时间（绝大部分是设计构思与素材准备的时间）。所以真正可以称得上是“设计2小时 制作5分钟”的开发神器。

表盘工具体验链接：

http://watcheditor.pace.qq.com/ （复制链接在浏览器中打开）

图9 表盘工具我的表盘列表

经验总结

这个项目最终能够落地，同学们总结有几个原因：

1. 渲染绘制技术功底不错 Pacewear的研发同学在移动客户端渲染绘制技术功底扎实，基础雄厚，追求技术进步的氛围浓厚。大家平时的积累让项目少走了不少弯路。
2. 积极性高。 大家学习新技术并把表盘编辑器做成的意愿非常高。
3. 产品经理与研发一开始就深度互动。 产品和研发是一个整体，大家一起研究竞品，一起推敲技术架构方案，而非产品提需求在前，研发“接单”实现功能在后这种模式。
4. 架构设计上的“平衡“之术运用较为合理。 看了很多竞品和方案，一种架构方案很难满足所有需求，必须取舍，架构上优先考虑了跨平台能力和个性化定制的能力

关于未来

表盘工具目前大大提高了精品表盘的生产效率，但不可否认的是，目前使用门槛还相对比较高，毕竟高质量的设计稿是前提，而且制作过程也有一些学习成本。因此未来工具需要提供更多的基础素材库，让更多普通用户加入到DIY的制作中来，同时会将工具的能力进一步抽离，利用跨平台的架构优势，快速部署到移动端进行使用、预览和传播。在功能方面，工具会增加脚本语言绑定，支持更加灵活和精细化的设计还原。

很快，通过微信的扫一扫功能，用户就可以在朋友圈看到一款款完成且制作精良的表盘h5仿真效果，其能够真实地模拟表上运行的状态。并且也可以动手去用最简单的方式，DIY出自己的专属表盘。当然如果你想体验完整而又强大的全部功能，还是推荐你在电脑上亲自试用一下表盘工具，不夸张地讲，只有你想不到的效果，几乎没有它做不出来的效果。

如果您觉得我们的内容还不错，就请转发到朋友圈，和小伙伴一起分享吧~