网页设计 » 视觉设计 » 用60:30:10的UI配色法,调配出平衡和谐的APP界面

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

发表于: 视觉设计. 评论
Sponsor

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之间。

自动草稿

步骤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的比例来进行搭配,确实是简单实用,设计师们也尝试体验一下吧。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }