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

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

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

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

步骤1. 设置主色调

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

步骤2. 设置辅助颜色

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

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

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

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

步骤3. 设置强调色

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

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

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

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

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

步骤5. 应用颜色

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

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章