UI设计QQ主题风格自2013年问世，迄今七年時间，维持了全部营业收入的Top3的考试成绩，遭受了众多客户的钟爱。伴随着QQ多年来版本号的迭代更新，大家也逐渐聆听到一些客户对主题风格的意见反馈，为了更好地给客户产生更强的感受，我们决定对UI设计QQ主题风格从上下游到中下游开展一次全方位的提升。

01主题风格计划方案的转型

——————————

商品难题&用户调研

大家对UI设计QQ主题风格开展了二轮客户体验意见反馈和调查，发觉：现阶段的外网地址主题风格存有型号兼容实际效果差、素材图片制做品质差、缺乏全局性清理等感受难题；而另外，用户调研的结果显示大家的客户期待感受到更强更高质量更全方位人性化的主题风格。

项目设计总体目标

根据现网商品难题和用户调研結果，对提升方位开展了梳理归类,最后明确UI设计QQ主题风格感受升級的项目设计总体目标：提升主题风格覆盖面积，提高主题风格的清理品质，提高主题风格的易用性。

探寻解决方法

为了更好地达到上边的三个总体目标，一开始大家依据UI设计QQ主题风格的完成逻辑性制订了基本的改进方案：根据增加素材图片提升主题风格覆盖面积，根据改动旧素材图片提高主题风格易用性和品质。

但在开展实行审查的情况下，大家意识到，那样的计划方案尽管行得通，但落地式成本费十分的极大，必须每一个主题包内增加两边共1800好几张网页切图，花耗好几家cp企业最少四个月的時间和人力资源。

大家迫不得已推翻逐渐的计划方案，逐渐思索：是不是有更强的解决方法？

在对主题制作步骤、手机客户端展现逻辑性、日常经营维护保养工作中等难题开展深层次的追溯发掘后发觉：UI设计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+个旧主题风格存有的易用性难题获得处理、维护保养成本费获得大幅度降低。

02主题风格智能化在线编辑器的问世

——————————

主题风格新计划方案落地式后，充分考虑旧主题制作时间长，难度系数大，设计费用高的难题，商品侧期待室内设计师能相互配合新的上色计划方案去提升主题制作、发布、工程验收的步骤。

明确设计方案总体目标

依据旧步骤里每个人物角色意见反馈的难题点，第二环节的总体目标可提炼出为：提高制做高效率、装包高效率、工程验收高效率。充分考虑旧步骤中高效率低、错误率高的流程大多数是人力实际操作一部分，大家方案设计方案一个智能化系统的主题编辑器来完成现代化的主题风格生产制造。

探寻解决方法

以提高高效率为总体目标，最先深层次制做步骤勘测，发掘制做步骤的重要核心内容，并提炼出重要接触点、困扰难题；根据每个接触点至关重要的问题，逐一得出解决方法，并全局性的回望全部步骤，从全局性去头领改进方案；进而以落地式为导向性，确立解决问题的优先，稳中有进计划方案落地式。在解决方法中，当地编译程序感受已完成，别的工作能力落地式优先以下：

-最先处理智能化网页切图和智能化颜色，优先最大

-次之处理标准提升和多页面浏览，优先垂直居中

-最终是传送数据后台管理，经营做审批，优先最少

计划方案落地式

传统式的主题制作中通常最耗时间和容易打错的便是网页切图，在这儿大家应用了双重保险。

商业保险1:在线编辑器将内嵌一套智能化系统的网页切图生成解决计划方案，室内设计师仅需提交少量的务必网页切图。在线编辑器还会继续对提交的网页切图会开展取名、规格、文件格式的检验。

商业保险2:官方网室内设计师预置主题风格的PSD/SKETCH设计模版,附加网页切图取名规格文件格式等，画完后一键就可以导出来整套网页切图資源。

新主题的上色标准中，调色板存有21个色调必须颜色。对CP而言，即便 有设计标准开展学习培训，也存有着打错的很有可能。为了更好地让制做成功率做到最大，大家方案根据在线编辑器内嵌的智能化颜色，将繁杂的颜色实际操作简单化为2步实际操作，做到迅速平稳地輸出达标的颜色的实际效果。

新主题调色板中，色调可分为主导色调和背景颜色系，两大色调下的颜色值再各不相同的颜色值规定。

从室内设计师的理想化视角看来，假如只开展主色有背景颜色的挑选，就可以輸出完成21个色调得话，毫无疑问高效率和成功率都是会获得大大的提高。

为了更好地实现梦想实际效果，大家设计方案了一套计划方案：

在挑选基本色、背景颜色后，最先对他们开展一个检验，在这儿大家引进了WCAG2.0的规范，检验基本色原素在背景颜色原素上的表明是不是合乎大家的阅读文章规定。次之大家再把QQ设计标准中，对21个色调的不一样细微规定，根据HSB色调实体模型变换为数字化的编码标准并内置在在线编辑器中。

那样，CP挑选的2个色调，根据色调检验、色调实体模型变换、预置标准的调整，就变成了合乎大家视觉效果等级标准规定和易用性规定的21个色调。

在完成了智能化网页切图、智能化颜色、导进设计图、线上浏览、结构型装包、手机上具体浏览等工作能力后，在线编辑器的工作能力基本上获得达到，大家下面对在线编辑器开展架构设计方案，在多计划方案衡量后，最后选用了原素作导航栏，右侧地区维持全局性浏览的互动架构，并设计方案了在线编辑器的ui界面。

第二阶段新项目成效

应用在线编辑器前：从制做到发布必须约4周時间，每月发布主题风格均值为12个。

连接在线编辑器后：仅需一天就可以进行素材图片的制做到发布，而且归功于制做难度系数的减少，可制作主题的CP获得了扩大，现阶段每月发布主题风格平稳在2000+个。

03主题风格兼容标准网址的构建

在完成了主题风格实际效果提升、主题制作提升后，大家把专注力放到了制做发布以后的步骤-兼容维护保养。

旧的主题风格兼容维护保养牵涉到cp/室内设计师/经营/开发设计四个人物角色的很多人工成本。

而新主题提升后，仅必须室内设计师&研发工程师俩位人物角色开展成本低的实际操作。

但在具体工作上，版本号中的不一样升级全是由不一样的室内设计师&开发设计承担的，兼容工作中通常难以实行。因此 为了更好地确保兼容的实际效果，除开在商品的工作内容中提升兼容要求外，大家还期待能协助到不一样业务流程方减少兼容的成本费。

新兼容步骤中，室内设计师实际上只是必须依据上色标准对增加資源去定投射关联，而具体投射的载入是开发设计实际操作的。那假如2个人物角色的工作中能合拼，而且省掉学习培训新兼容标准及其沟通交流的成本费呢？

从协助开发设计去了解调色上色的方面，大家把資源原素和色调开展了场景化的配对解决，而且把标准关联梳理变成文件目录，构建了Q-Element兼容标准网址；开发设计同学们在开展兼容情况下仅需依据设计图的增加一部分，找寻相匹配文件目录下的标准关联，就可以对原素开展兼容。

第三阶段新项目成效

提升前：主题风格的版本号兼容必须开发设计商品的多方面相互配合，耗费数日時间去进行兼容。

提升后：仅需开发设计一个钟头的時间就可以进行兼容和认证。