2021-3-23 ui設計分享達人
QQ主題自2013年誕生，至今7年時間，保持了整個營收的Top3的成績，受到了廣大用戶的喜愛。隨著QQ數年來版本的迭代，我們也漸漸傾聽到了一些用戶對主題的反饋，為了給用戶帶來更好的體驗，我們決定對QQ主題從上游到下游進行一次全面的優化。
我們對QQ主題進行了兩輪用戶體驗反饋和調研，發現：目前的外網主題存在機型適配效果差、素材制作質量差、缺少全局美化等體驗問題；而同時，用戶調研的結果表明我們的用戶希望體驗到更好更高品質更全面個性化的主題。
基于現網產品問題和用戶調研結果，對優化方向進行了歸納分類,最終確定QQ主題體驗升級的項目設計目標：增加主題覆蓋范圍 ，提升主題的美化質量 ，提升主題的可用性。
為了達成上面的三個目標，一開始我們根據QQ主題的實現邏輯制定了初步的優化方案：通過新增素材增加主題覆蓋范圍，通過修改舊素材提升主題可用性和質量。
但在進行執行評審的時候，我們意識到，這樣的方案雖然可行，但落地成本非常的巨大，需要每個主題包內新增兩端共1800多張切圖，花耗多家cp公司至少四個月的時間和人力。
我們不得不推倒開始的方案，開始思考：是否有更好的解決方案？
在對主題制作流程、客戶端呈現邏輯、日常運營維護工作等問題進行深入的溯源挖掘后發現：QQ主題目前實現個性化的方案是后臺下發素材包替換本地客戶端資源實現個性化。而這就導致了素材包本身是固定的內容，只能被動的接受版本更新帶來的種種問題。
在這樣的情況下，即使我們按照一開始的方案執行落地，多個版本后我們仍需大量的人力去進行維護和更新才能保證用戶的體驗。
所以，我們必須打破舊方案帶來的弊端，要讓素材活起來。
在綜合設計思維，開發思維，運營思維去思考問題后，我們提出了一個嶄新的實現方案：終端染色（使用Color-filter,對png進行染色的技術）+分色映射（將資源與色值進行映射，用一套有限色板去管理無限資源的概念）。
在這套新的個性化實現方案支持下，設計師簡單的對色板進行配色，就能夠對QQ客戶端的全局顏色進行變化。而當版本更新發生資源變更時，僅需維護通用的線上映射關系，資源即可自動適配到應有的顏色。
針對主題方案的變革新方案，分別從優點、變化、難點3個維度進行綜合評估：
- 優點：
（1） 整體學習，制作，運營，維護的成本降低
（2） 美化范圍變大，下載資源變小，用戶體驗得到改善
（3） 效率得到優化，難度降低，設計師有更多時間提升主題質量
- 變化：
（1） CP學習新的制作方式
（2） 產品運營省去了過往定期維護素材的工作
（3） 設計師在版本迭代時候進行新資源的分色映射關系
（4） 開發人員進行統一的分色映射表維護管理
- 缺點：
（1） 方案工作量大，多達120+的界面檢驗，上千個客戶端資源，大量的代碼需要修改。
（2） 方案執行難度大，包括如何用有限的色板兼容更多的設計需求，資源如何在不同場景得到更有效的復用，設計與開發未來如何進行映射表的對接，以及版本的上下兼容。
設計師提出“終端染色+分色映射”的新方案后，通過積極拉動會議，向主題業務相關的多角色進行新舊方案的優劣討論，方案得到一致認同后，多方聯動形成項目組。
其次進行可行性評估，與開發結對緊密協作，共同討論難點攻克新方案落地要點。
最后基于前期可行性評估，以及難點預研，項目組規劃出階段性的落地方案。
方案的落地主要為三部分工作： 梳理標記->歸納轉化->編譯覆蓋。
梳理標記：
前端開發逐個查找界面的資源和代碼并標記，交付給設計師進行資源色值的規劃
歸納轉化：
設計師根據ui的配色規則以及個性場景需要，進行ui色板的構建及資源的顏色映射分配。
在這一過程使用騰訊文檔進行設計語言與開發代碼的轉化。
編譯覆蓋：
修改代碼，讓資源支持個性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進行實機的染色編譯并和設計師共同檢驗效果。
而在上述工作中，設計師的任務難點就在于色板的設計和染色規則的構建。
首先設計師根據QQ的ui規范，建立初步的色板；下一步，創建界面demo，模擬資源與色板的映射關系；然后替換多個不同的色板檢驗主題染色后多場景下的效果，再對色板和染色規則進行反復的調整；最后在效果符合預期的時候，再輸出色板和染色規則并最終在真機上進行驗證。
QQ舊主題：僅覆蓋6個界面、素材包內涵400+切圖、日常需要花費巨大成本維護1000多套主題。
主題新方案落地后：覆蓋范圍從6個界面擴展到60+界面、素材切圖降低至48張、600多個資源得到梳理優化、60+個舊主題存在的可用性問題得到解決、維護成本得到大大降低。
主題新方案落地后，考慮到舊主題制作時間長，難度大，設計費用高的問題，產品側希望設計師能配合新的染色方案去優化主題制作、上架、驗收的流程。
根據舊流程里各個角色反饋的問題點，第2階段的目標可提煉為：提升制作效率、打包效率、驗收效率。考慮到舊流程中效率低、出錯率高的步驟大多是人工操作部分，我們計劃設計一個智能化的主題編輯器來實現工業化的主題生產。
以提升效率為目標，首先深入制作流程勘察，挖掘制作流程的關鍵核心點，并提煉關鍵觸點、痛點問題；基于各個觸點關鍵問題，逐一給出解決方案，并全局的回顧整個流程，從全局去統領優化方案；繼而以落地為導向，明確問題解決的優先級，穩步前進規劃方案落地。在解決方案中，本地編譯體驗已實現，其他能力落地優先級如下：
- 首先解決智能切圖和智能配色，優先級最高
- 其次解決規范優化和多界面預覽，優先級居中
- 最后是直連后臺，運營做審核，優先級最低
傳統的主題制作中往往最費時間和最易出錯的就是切圖，在這里我們使用了雙重保險。
保險1:編輯器將內置一套智能化的切圖合成處理方案，設計師僅需上傳極少量的必須切圖。編輯器還會對上傳的切圖會進行命名、尺寸、格式的檢測。
保險2:官方設計師預設主題的PSD/SKETCH設計模板,附帶切圖命名尺寸格式等，畫完后一鍵即可導出全套切圖資源。
新主題的染色規則中，色板存在21個顏色需要配色。對CP來說，即使有設計規范進行學習，也存在著出錯的可能。為了讓制作通過率達到最高，我們計劃通過編輯器內置的智能配色，將復雜的配色操作簡化為2步操作，達到快速穩定地輸出合格的配色的效果。
新主題色板中，顏色可分為主色系和背景色系，兩大色系下的色值再各有不同的色值要求。
從設計師的理想角度來看，如果只進行主色和背景色的選擇，即可輸出實現21個顏色的話，無疑效率和通過率都會得到大大提升。
為了實現理想效果，我們設計了一套方案：
在選擇主色、背景色后，首先對它們進行一個檢測，在這里我們引入了WCAG2.0的標準，檢測主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們再把QQ設計規范中，對21個顏色的不同微小要求，通過HSB顏色模型轉換為數據化的代碼條件并內置在編輯器中。
這樣，CP選擇的兩個顏色，通過顏色檢測、顏色模型轉換、預設條件的微調，就變成了符合我們視覺層級規范要求和可用性要求的21個顏色。
在實現了智能切圖、智能配色、導入設計稿、在線預覽、結構化打包、手機實際預覽等能力后，編輯器的能力基本得到滿足，我們接下來對編輯器進行框架設計，在多方案權衡后，最終采用了元素作導航，右邊區域保持全局預覽的交互框架，并設計了編輯器的ui界面。
使用編輯器前：從制作到上架需要約4周時間，每月上架主題平均為12個。
接入編輯器后：僅需一天即可完成素材的制作到上架，并且得益于制作難度的降低，可制作主題的CP得到了擴充，目前每月上架主題穩定在2000+個。
在完成了主題效果優化、主題制作優化后，我們把注意力放在了制作上架之后的流程-適配維護。
舊的主題適配維護涉及到cp/設計師/運營/開發四個角色的大量人力成本。
而新主題優化后，僅需要設計師&開發工程師兩位角色進行低成本的操作。
但在實際工作中，版本中的不同更新都是由不同的設計師&開發負責的，適配工作往往很難執行。所以為了保證適配的效果，除了在產品的工作流程中增加適配規定外，我們還希望能幫助到不同業務方降低適配的成本。
新適配流程中，設計師其實僅僅需要根據染色規則對新增資源去定映射關系，而實際映射的寫入是開發操作的。那如果兩個角色的工作能合并，并且省去學習新適配規則以及溝通的成本呢？
從幫助開發去理解分色染色的層面，我們把資源元素和顏色進行了場景化的匹配應對，并且把規則關系整理成了目錄，搭建了Q-Element適配規范網站；開發同學在進行適配時候僅需根據設計稿的新增部分，尋找對應目錄下的規則關系，即可對元素進行適配。
優化前：主題的版本適配需要設計開發產品的多方配合，花費數天時間去完成適配。
優化后：僅需開發1個小時的時間即可完成適配和驗證。
通過3個階段的努力，QQ主題美化初步完成了主題效果、主題制化、主題維護成本的三大優化。上線半年后，目前QQ新主題已經達到1萬八千個，并且借助QQ美化平臺完成了外部創作人、QQ、QQ用戶三者之間的生態搭建，正源源不斷的提供給用戶更多更好的個性化主題。我們也會進一步努力，由QQ主題開始對個性化進行新一輪的優化，帶給用戶更好的體驗。
最后，廣大設計師的機會來了！如果您擅長插畫或者動畫，點此鏈接https://ycg.qq.com/qcc，報名參與我們的原創空間和QQ美化平臺項目。按照頁面引導提交作品審核，經原創館審核后，就可以獲得創作權限。 您的原創作品將被QQ及QQ空間數億用戶付費使用，并獲得相應比例分成。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務