app换肤小技巧(颜色管理规范)

用户头像
成都/UI设计师/6年前/1721浏览
app换肤小技巧(颜色管理规范)

设计师在编写GUI规范时,对颜色运用的小技巧;

各位设计师平时在编写App GUI规范时,是否因为给颜色定规范而头疼呢,特别是遇到需要换肤这个头大的问题!

下面我给大家分享一下我平时工作中的一些经验吧:

首选把主要的颜色定下来是最基础的部分

1.首先是文字的颜色(避免纯黑#000000)尽量混合一点app的主色;副标题的颜色稍微比标题文字在视觉上更接近承托的背景色一点,这样视觉层级上会有一个递进的关系。

2.白天的颜色肯定很好确定的,夜间模式的颜色其实找到规律也是很好确认的哦;

首先夜间模式的颜色肯定是没有标准的定义,首选确定好背景的颜色;一般可确定两种背景的颜色:

背景的颜色也需要避免纯黑(#000000),也一样的可尽量混合一点app的主色(为了最后出来的效果和谐,浑然天成)。

3.剩下的就是确定交互主色,这里一般都是用的app的主色:

一般情况夜间模式下颜色一样即可,有一种情况例外:app的主色颜色较深,在夜间模式下对比度不是很高,导致很难识别;这种就要提高主色的明度和饱和度来增加对比度。

4.其次就是交互控件未选中的颜色:

5.确定好这些颜色就算完成55%了,剩下的就是根据业务和设计风格而增加的一些颜色了。。。

6.所有颜色确定好之后给每一组颜色一个对应的编号,例如下图:

***不同的功能或控件只要是颜色相同,都可以用同一组颜色搞定,避免产生过多的颜色导致使技术在开发时混淆用错;

有了对应的编号后,让开发写到库里面自动映射就好了;这样的好处是尽管后面需要大面积更改app的颜色时,只需要在库里面改掉对应的色值即可全局更改;

7.根据业务场景的不同,最好不要把其他功能和主色混着用,例如我们的产品是交易所,如果把涨跌的颜色与主色重复着用,切换涨跌色的时候势必会有影响,所以如下图,我们把涨跌色单独提出来分组:

以上就是本次分享的一些经验,有不足的地方希望指出,大家一起交流学习,谢谢!


---------------------------------------------------------------

下次分享APP弹框相关的经验。

5
举报
|
15
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
户外旅行飞机情侣假日出行
【新年UI图标】游戏/娱乐icon
新能源APP应用UIKit
【新年UI图标】钱包icon
矢量立体简约UI蓝白图标
新拟态风格 UI设计组件库
UI 登录界面设计模板包
我的钱包-UI界面设计-app
【新年UI图标】影音icon
Security Camera UI kit
【新年UI图标】30个图标
手表表盘UI系列
高级表盘系列UI源文件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
【新年UI图标】秒杀icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】会员icon
【新年UI图标】汽车icon
UI界面 组件
高级感金属拟物 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
智能家居中心 简约 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册