車載導航應用中基於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
- 專案需求:
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定製,以及其他各項擴充定製能力等。
關注高德技術,找到更多出行技術領域專業內容
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69941357/viewspace-2661405/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Flutter中App的主題和導航FlutterAPP
- 開源一款基於 Typecho 開發的導航主題
- WWDC 2018:車載(CarPlay)在音訊和導航 APP 中的應用音訊APP
- 地下停車場怎麼導航,停車場導航技術怎麼實現
- (基礎)用於頁內導航的ID
- 停車場室內導航怎麼用,停車場尋車是怎麼實現的
- 應用於網站導航中的 15 個 jQuery 外掛網站jQuery
- Spark UI (基於Yarn) 分析與定製SparkUIYarn
- 高德車載導航的差分更新最佳化實踐
- 實現B/S環境的UI定製UI
- CustomTkinter:基於Tkinter的現代且可定製的Python UI庫PythonUI
- 商場導航怎麼實現?怎樣製作商場導航圖?
- 高德車載導航自研圖片格式的探索和實踐
- 基於三維地圖的智慧園區視覺化解決方案,用於智慧園區的導航地圖怎麼繪製?地圖視覺化
- WordPress愛導航主題原始碼原始碼
- 安卓中如何實現滑動導航安卓
- 室內導航用什麼來實現?通過什麼可以實現導航功能?
- Web前端AR技術探索-導航中的應用Web前端
- 如何利用六西格瑪解決車載導航研發問題?
- 定製化你的ReactNative底部導航欄React
- 基於任務的導航設計
- 一種基於園區電子地圖的導航方法,怎樣製作智慧導航園區導覽圖?地圖
- js實現的響應式導航選單效果JS
- java實現Excel定製匯出(基於POI的工具類)JavaExcel
- 基於"堆"的底層實現和應用
- 實現基於Nuxt.js的SSR應用UXJS
- 實現左側導航和橫向導航
- CARDS主題 & 導航欄樣式修改
- 乾貨:基於scss的主題配色解決方案CSS
- 可以應用於移動端的頂部導航固定效果
- 可以任意定製導航欄背景的一個思路
- 智慧園區地圖導航解決方案,智慧工業園區導航如何實現?地圖
- 一個超讚的智慧園區地圖導航解決方案,如何解決園區內地圖導航應用問題?地圖
- 基於XML的購物車的實現(轉)XML
- 地下停車場導航方案,智慧反向尋車系統怎麼做
- Tablayout實現導航欄TabLayout
- 幫助你實現響應式導航的 jQuery 外掛jQuery
- 基於鴻蒙ArkUI封裝標題欄TitleBar導航元件鴻蒙UI封裝元件