iUAPDesign 主题色与更换机制

[cavenliu]

iUAPDesign 主题色与更换机制

iUAP Design将换肤的概念定义为：更换主题配色及基础样式切换。

主题色包含：关键色、辅助色
础样式包含：细颗粒控件的

关键色负责：品牌形象、视觉查分的建立、
辅助色：突出及活跃页面视觉

基于不同企业品牌因素、差异化因素、历史因素等需求的存在，iUAP Design在设计初期即把主题色的更换作为产品特点写入规划。

分析当前的主流做法，基本分为两种解决方案：

1.预制多个样式文件，通过功能按钮或手动改写css文件路径，达到换肤目的。这是最常见的方式，效果也比较明显，但是它有几个缺点。

缺点：

1.1.如果更改一个皮肤的内容，那其他的皮肤文件也要做相应修改（这挺麻烦，不过可以用less管理css解决，所以也不是什么大问题）。

1.2.它是固定的，在使用的时候皮肤文件已经是写好的了，而当我需要动态设置一些属性的时候就无可奈何了。

2.使用less这种工具，在页面加载时动态生成皮肤样式。

但这种方式的缺点却很明显。

缺点：

2.1.效率低，为了一个换肤的功能，却要引一个less工具（压缩后大概126KB），在终端Web是无法忍受的。

2.2.速度慢，因为有一个皮肤文件编译（姑且把它叫做编译）生成的过程，在终端也难以接受（有可能还出现页面皮肤闪），如果更换皮肤又要重新编译。

鉴于上面两种方法的缺点，一种无法动态，另一种效率低。

有没有第三种方法呢？

第三种方法就是：
变化分离
确定页面元素中变与不变的元素。

在iUAP Design中需要明确几个概念，哪些视觉元素是通用的有明确视觉、心理、体验隐喻及涵义的。除此之外，可以抽取出可以明显改变界面主题色彩风格的元素。我们把主题色命名为关键色，关键色通过配置关联相关的页面元素：控件、碎片、组件。

因为iUAP Design是按照原子化设计思路进行的元素解构，所以，我们就根据这些元素分析哪些是换肤所需要的部分，并将他们抽取出来，
下面三个是最为明显的换肤元素及属性：

1.导航栏(页面框架导航NavigationBar、TabBar等及其关联的颜色及字体颜色)

2.主按钮

3.链接色

4.主题色

5.背景色

6.主辅助色

iUAP Design的主题配色更换方法

根据上面的两个总结，我们发现没必要把页面换肤定义成复杂的一件事，不需要用什么工具或切换css文件。只需要获取需要动态设置的属性，然后然后设置到需要换肤的元素就可以了。
但是考虑到用户的特性，iUAP Design的主题配色更换采用两个方法：

1、切换主题样式文件

iUAP Design根据牛顿光谱确选定彩虹7色（红橙黄绿蓝靛紫），结合Material Design色板扩展为预制基础样式配色。用户只需要在页面饮用skins文件下的对应样式css文件即可更换主题配色。

7套预制主题色样式分别为：

indigo（靛蓝）－－Creative(创意、直觉力、睿智)
Green（绿色）——Nature（自然、健康、生命、成长）
Orange（橙色）——Healing（宽容、力量）
Red（红色）——Life（激情）
Blue （cyan）（天蓝）——Harmony（和谐）or Freedom（自由）
Yellow（黄色）——Sunlight（阳光，或可以公开的社会氛围）
Purple（紫色）——Spirit（灵魂）

2、更改动态设置属性

通过动态属性的设置可以改变主题配色和基础控件的外观样式（直角、小圆角、圆角）。