車載導航應用中基於Sketch UI主題訂製方案的實現

• 2019 年 10 月 21 日
• 筆記

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
• 項目需求：

1. 不同項目的不同渠道有不同的主題訂製需求
2. 出包時就有對應主題，無需下載
3. 項目周期短，需要能快速訂製
4. 項目需要維護，主題也需要方便維護、管理

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訂製，以及其他各項拓展訂製能力等。

關注高德技術，找到更多出行技術領域專業內容