请选择 进入手机版 | 继续访问电脑版
访问手机版

随时随地访问,扫描体验手机版

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    反馈QQ

    1263810394

    电子邮件

    yanzheng@puhuajia.com
  • 普画网

    随时随地分享快乐

  • 扫描二维码

    关注普画网公众号

普画网 首页 插画设计 色彩搭配

用60:30:10的UI配色法,调配出平衡和谐的APP界面

美术分享吕一(未知职业)-本文作者
这个人很懒,什么也没有留下。
3865 0 2020-2-9 12:43
来自: 设计达人 收藏 邀请

APP的UI界面是否漂亮,除了排版布局外,色彩搭配也是重要要素之一,当然如果你太会配色最好的方法就是使用一些流行的设计法则,比如今天设计达人分享的60:30:10色彩搭配方案,这个法则一般使用在家居设计,但同样适合是APP设计中使用,按照60:30:10方法来创建的配色板,可以让界面看起来平衡和谐,这方法非常简单,大家一起来学习哦。

60:30:10的配色方法来自产品设计师Dan Romero,喜欢作者可以查看他的INS主页:@bydanromero,里面也有不错的分享,当然小编下次也会精选一些优秀的UI设计教程分享出来。

在UI设计中运用60:30:10的配色方法

步骤1. 设置主色调

现在UI设计都流行使用充满活力、高饱和度的配色,尝试用这类配色作为主色调会有更好的效果。

用60:30:10的UI配色法,调配出平衡和谐的APP界面

步骤2. 设置辅助颜色

复制主色调,然后我们从主色中来调配出辅色,如何调配呢?

1. 先把Sketch的颜色模式转为HSB(PS就不用了)。

2. 设置 S(饱和度)值在5-10之间。

3. 设置 B(亮度)值在95-100之间。

用60:30:10的UI配色法,调配出平衡和谐的APP界面

步骤3. 设置强调色

我们依然使用主色调来调配,再次复制主色。

1. 设置 H(饱和度)值增加或减少30-40

2. 设置 B(亮度)值增加5-10。

用60:30:10的UI配色法,调配出平衡和谐的APP界面

步骤4. 分配60—30—10颜色

我们现在已经设置好3种色调的配色板,然后确定这三种颜色值比例分别为:主色60%,副色:30%,强调色:10%,如下图设置。

用60:30:10的UI配色法,调配出平衡和谐的APP界面

步骤5. 应用颜色

把这些颜色应用到你的APP界面布局中。案例中主色调应用在背景,辅色用在2级元素,强调色用在按钮。

用60:30:10的UI配色法,调配出平衡和谐的APP界面

尝试换一下主色,看看效果会不会更好?也是用现成的颜色来搭配,如下图,效果也不错呢!

用60:30:10的UI配色法,调配出平衡和谐的APP界面

总结

学会使用60:30:10的UI配色法,做出来的界面都是比较平衡、和谐的。这个色彩搭配其实就是运用「同类色」来进行升级,把色彩按照60:30:10的比例来进行搭配,确实是简单实用,设计师们也尝试体验一下吧。

微信

鲜花
本文暂无评论,快来抢沙发!

阅读排行
热门话题
手绘插画社,中国手绘插画者的网上家园,包含 素描、插画、绘画、手绘、素材、动漫资讯、动漫美图、动漫周边,动漫音乐等相关内容,欢迎投稿

扫描二维码

随时访问手机端

免责声明:本站不提供任何版权视听上传服务,所有内容均来自用户分享站点所提供的公开引用资源,作品版权归原作者所有 仅供学习欣赏使用 禁止任何形式商用 违者必究。

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc. 星点互联设计 ( 京ICP备19014251号-1