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