说明

皮肤的切换，就是一部分样式的切换。首先是要做到范围的确定，什么地方改，什么地方不改。产品经理那边只确定了改登录页、考勤页、顶部导航菜单三个地方，但是却没有细致到每个地方都改些东西。

我们要做皮肤的可配置化，就要把所有皮肤涉及到的地方都抽成变量来管理。开始我们没有确定范围，因为我们也不知道设计师会改动哪里，只能在开发完成之后，抽取出了一些变量，希望以后的皮肤资源中，至少要说明以下变量，并且范围尽量在这个范围之内，当然增减也可以。

设计稿

先看下设计稿

设计师贴心的给标注了一些变量，但是开发过程中有些是没有标注的，下面列一下抽取出的皮肤变量。

皮肤涉及到的变量

登录页

//登录页
背景颜色
//左上角背景图片
左上背景图片 链接
左上背景图片 宽度
左上背景图片 高度
//左下角背景图片
左下背景图片 链接
左下背景图片 宽度
左下背景图片 高度
//右上角背景图片
右上背景图片 链接
右上背景图片 宽度
右上背景图片 高度
//右下角背景图片
右下背景图片 链接
右下背景图片 宽度
右下背景图片 高度
//按钮式下拉菜单
按钮式下拉菜单 按钮 背景颜色
按钮式下拉菜单 按钮 字体颜色
按钮式下拉菜单 按钮分隔线 背景颜色
按钮式下拉菜单 按钮箭头 字体颜色
按钮式下拉菜单 下拉菜单 边框颜色
按钮式下拉菜单 背景颜色
按钮式下拉菜单 菜单项 边框颜色
按钮式下拉菜单 菜单项 背景颜色
按钮式下拉菜单 菜单项 字体颜色
按钮式下拉菜单 菜单项 hover背景颜色
按钮式下拉菜单 菜单项 hover字体颜色
按钮式下拉菜单 菜单项 hover边框颜色
按钮式下拉菜单 菜单项 visited背景颜色
按钮式下拉菜单 菜单项 active背景颜色
按钮式下拉菜单 菜单项 link背景颜色
按钮式下拉菜单 菜单项 selected 背景颜色
按钮式下拉菜单 菜单项 selected 字体颜色
按钮式下拉菜单 菜单项 selected 图片路径

//数字按键
数字按键 背景颜色
数字按键hover 背景颜色
数字按键 圆角大小
//数字显示区的点
数字显示区的点 未选中图片
数字显示区的点  选中图片
//登录方式选项卡
登录方式选项卡  字体颜色
登录方式选项卡  字体粗细
登录方式选项卡 不可用状态  字体颜色

//登录错误信息提示框
登录错误信息提示框 背景颜色
登录错误信息提示框 字体颜色

//版本号
版本号  字体颜色
//二维码提示信息
二维码提示信息 字体颜色
//退出按钮
退出按钮图标  背景图片
退出按钮图标hover 背景图片
退出按钮  字体颜色
退出按钮  字体粗细
退出按钮hover 字体颜色

考勤页

//考勤页
背景
//左上角背景图片
左上角背景图片  链接
左上角背景图片   宽度
左上角背景图片   高度
//课程信息 
课程信息  字体颜色
//分割线背景颜色
分割线背景颜色
//老师名字
老师名字  字体颜色
//老师名字旁边的装饰图
老师名字旁边的装饰图  链接
老师名字旁边的装饰图  宽度
老师名字旁边的装饰图  高度
老师名字旁边的装饰图  left
老师名字旁边的装饰图  top
//退出登录按钮
退出登录按钮  背景颜色
退出登录按钮  字体颜色
退出登录按钮  圆角大小
//学生列表滚动条
学生列表滚动条  背景颜色
学生列表滚动条滑块  背景颜色

//学生列表项
学生列表项    背景颜色
学生列表项    边框颜色
学生列表项 左上 圆角 
学生列表项 左下 圆角
学生列表项 右上 圆角
学生列表项 右下 圆角
学生列表项selected  背景颜色
学生列表项 左上 圆角 
学生列表项 左下 圆角
学生列表项 右上 圆角
学生列表项 右下 圆角
学生列表项学生名字  字体颜色
学生列表项学生名字  字体大小
学生列表项考勤方式  字体颜色
学生列表项考勤方式  字体大小
学生列表项设备绑定图标 链接
学生列表项设备绑定图标 宽度
学生列表项设备绑定图标 高度
学生列表项selected状态图标 链接
学生列表项selected状态图标 宽度
学生列表项selected状态图标 高度
//学生确认考勤按钮
学生考勤确认按钮   背景图片或颜色
学生考勤确认按钮   字体颜色
//错误信息提示框
错误信息提示框背景颜色
//modal弹框
弹框背景颜色
弹框边框颜色

顶部菜单

//顶部导航菜单
顶部导航菜单  字体颜色
顶部导航菜单  字体粗细
顶部导航菜单  背景颜色
//二级菜单
二级菜单   背景颜色
//二级菜单左上装饰图
二级菜单左上装饰图  链接
二级菜单左上装饰图  宽度
二级菜单左上装饰图  高度
二级菜单左上装饰图  left
二级菜单左上装饰图  top
//二级菜单右下装饰图
二级菜单右下装饰图 链接
二级菜单右下装饰图 宽度
二级菜单右下装饰图 高度
二级菜单右下装饰图 right
二级菜单右下装饰图 bottom
//菜单项分隔线
菜单项分隔线   左竖线颜色
菜单项分隔线   右竖线颜色

以上就是抽取出来的皮肤变量，有一些设计到开发细节的东西可以忽略。希望ui设计师可以参考这个范围来做皮肤的设计，同时提供标注信息的时候按照上面的一些变量来标注。