未登录,请登录后再发表信息
最新评论 (0)
播放视频

60-30-10 配色原则

60-30-10 Color Rule

How can you use color inside of your mobile UI design projects
如何在手机UI设计项目里使用颜色
to come out looking really mature and really seamless
让效果自然流畅 契合主题
and really well thought out
且人性化
and not obnoxious and loud?
不会显得突兀扎眼呢?
And really the worst thing that it could be is distracting.
实际上最糟糕的效果就是乱 让人困惑
Well, you might want to use a little rule or guideline called the 60 30 10 rule,
那么 你可能需要用到一个60-30-10的小原则
which is going to help you to understand how to use color,
它能帮助你理解如何使用色彩
how to implement color, and when to break that rule.
如何使用互补色 如何打破规则
We’re going to talk all about that coming up next.
这些内容我们接下来都会谈到
All right, before we get too far into the 60 30 10 rule,
好的 那在我们详细介绍60 30 10原则之前
make sure that you like and subscribe to this channel
请大家点赞并订阅我们的频道
and hit that little Bell notification icon.
然后点击那个小铃铛通知图标
So you know when other videos like this one come out,
这样当我们发布类似视频时你就能收到通知
let’s jump over to Figma so we can talk a little bit about the 60-30-10 rule.
现在打开Figma软件 来谈谈60-30-10原则
I have an image that I pulled from a great blog post
我从博客上扒了张图
that will leave a link in the description,
我会把链接放在本视频的页面摘要
by a designer who’s talking about the 60-30-10 rule.
一位设计师在该博客中讲述了60-30-10原则
And she has a really great contrast to comparison before and after.
她的这个作品前后反差非常大
I thought it would be a great use case or case study for us,
我认为这是个好实例 我们可以从中学习
but I’ve taken that initial UI design that she shows in her post
我用的是她在帖子中展示的最初UI设计
and it looks like a yard sale. It is really immature.
这看起来就像一场庭院拍卖 设计非常幼稚
The usage of color is just distracting. It’s overbearing.
颜色搭配的既分散又有强烈反差
I don’t know where I’m supposed to look or where I’m supposed to go.
不知道该看哪或该点哪
Let’s make a little bit of sense with this. In our 60-30-10 rule,
现在 让我们运用该原则来做些调整吧
I have three blocks of color up here,
上图有三个颜色版块
and each rectangle is 1000 pixels wide,
每个色块的像素宽是1000
which represents our 100% of color usage.
这代表100%的颜色使用
In our 60-30-10 rule, we want to make sure that we’re using
按照该原则 我们要确保
60% of our neutral or our base color.
主色占比60%
It’s going to be a neutral color. It could be a creamy color, a white color.
中性色 奶油色 白色都可以作为主色
If you’re doing a dark interface, it’s going to be some sort of dark color.
如果你要做个深色界面 可选择深色系
Now, later on, we’ll talk about how you can flip this around
稍后 我会谈谈如何翻转色彩比
and do really bright interfaces and use 60% of a brighter color.
60%亮色做明亮的界面
But for now, let’s stick with the more neutralized version.
现在 我们先继续讲中性色调
60% is going to be this color.
这个颜色占比为60%
So let’s just take this really quickly and type 600 pixels
我们来把白色调为600像素
that represents our 60%.
表示占60%
Then you’re going to have some sort of primary color, right?
然后基础色调就有了 对吧
This might be a brand color.
这可能是用作一个品牌颜色
This primary color is important,
主色非常重要
but it’s not going to be as important as our call to action color.
但行动号召色更加重要
Our secondary color.
即辅助色
This one, we want to be 30%.
辅助色占30%
So let’s do 300 here and we’ll just pop this up into place.
要调到300像素 将它放上面
And then you guessed it, our call to action.
你可以猜到 我们可点击的按钮
It should be used sparingly. Our secondary color.
只需要用一点点颜色 也就是我们的辅助色
This is the thing that says, Click me, look at me, I’m active. Do something with me.
它好像在说“快点击我 我是激活状态 做点什么”
We want that to only be 10%. So let’s take it down to 100.
强调色占比10% 要把它调到100像素
And now we have a color palette that we can use for 60-30-10.
现在我们就有了个调色板可以运用该原则
And you can see this 60-30-10 is not well represented in this version of the design,
你会发现这个原则在这个版本的设计中并没有得到很好的表现
but I would say it is much more represented in this next iterated
但我想说的是 在她设计的更新后的版本中
updated version of her design
表现出了这个原则
where she’s now she’s really done away with a lot of the excess use of color.
她不再运用过多的颜色
She stripped it down.
跳出了之前的设计
She’s kind of neutralized thing now.
开始注重平衡和谐
Yes, there’s some other fixes here, some copy fixes, some iconography fixes.
没错 还优化了复制和图标
But even if you kept all the other little mistakes in this previous design,
虽然还有之前设计中的小错误
the color is just heads and shoulders, heads and tails, whatever you want to say.
颜色也毫不相关 随便你怎么说
A much better version of color implementation here,
反正这个版本色彩效果更好
much more neutralized here. Right.
搭配更和谐
Our primary colors being used for important areas.
我们的主色要用在重要区域
And our call to action color is only in very important areas.
而行动号召色 只用在更重要的区域
Click me. Do something with me. Pay attention to me.
吸引人们点击 交互 关注
This is for you user. These call to action areas.
行为召唤区域就是专门吸引用户的
And so that’s the 60 30 10 rule.
这就是60-30-10原则
Let’s really quickly take a look at some other implementations of the 60 30 10.
让我们来快速了解该原则的其他运用
But keep in mind, it’s just a guideline.
但请记住 这只是一个指导原则
I’m going to show you some great kind of uses of 60 30 10.
来一起看看这一原则的运用
But they’re breaking it a little bit and that’s okay with me.
它们稍微打破了一点原则 我觉得没什么
It should be okay with you as well.
你们应该也没问题
I pulled some Figma community files in here.
我找到一些Figma社群源文件
Now, you might say
看到这你可能会说
that this neutral color is whatever this kind of like grayish color is that works.
这个中性色还不错 这种类似灰色的
It looks kind of like white, but it’s not really. But maybe it is white. That’s fine.
它看起来似白非白 但也许就是白色 这很好
And then you might say that your secondary color. Right.
之后你可能会说辅助色 是不是
And they’re breaking it a little bit here is maybe kind of like this bluish color.
他们这里打破了一些规则 可能有点像蓝色
And then your excuse me,
然后你的……
your primary and then your call to action color
你的主色和行动号召色
is definitely discounted kind of purpley color,
肯定不是纯紫色
but that’s still kind of 60 30 10.
但这仍然符合60-30-10原则
They’re throwing some fun gradients on the top and playing with it.
只不过他们在顶部设计了有趣的渐变
But I’d say this is more of a two color design
但我想说这是一种双色设计
and they’re just kind of utilizing some hues of that color.
他们只是利用了那种颜色的一些色调
Let’s do this one over here by Mohit Designs.
来看看Mohit Design的作品
We got a really similar thing happening.
我们会发现与之相同的设计
We got white. Right.
是白色的 对吗
And then you’re going to see throughout over like kind of a span of multiple screens
你还会发现 多个界面都是这样
that maybe are primary colors, kind of this Gray.
这种主色调 或许有点灰色
But that call to action color is really this kind of warm kind of burnt Orange color.
但行动号召色采用了暖色调 焦橙色
We can see a really beautiful color palette.
我们就看到了这个漂亮的色彩搭配
So it’s a good usage of the rule in UI design.
这是该原则在UI设计中一个很好的应用
Let’s look at a couple more examples online.
让我们再看几个网上的例子
Here’s some great examples on Dribbble.
这儿是一些Dribbble上的好例子
This one by Gulam Razul.
这个是Gulam Razul 设计的
This is an example of kind of the reverse of it where your bright color is 60%. Right.
这是一个反色案例 亮色占比60% 是不是
And then you can see we have 30% is a lighter hue,
更亮的颜色占比30%
but look still 10% on the actionable colors.
但仍有10%互动色
We’re still doing the 60 30 10.
依旧符合60-30-10原则
We’re just using color instead of a neutral.
我们只是运用了彩色而非中性色
That’s okay, I’m down with that.
这是可以的 我完全赞同
Here’s another one by the same designer.
这儿还有这位设计师的另一个作品
He’s just kind of like flipped it to a dark interface look.
他只是把它变成了深色界面
Same kind of like guidelines.
依旧符合该原则
Even in a dark interface 60% is going to be this real dark color,
深黑色占比60%
30% is going to be these lighter colors.
较浅的颜色占比30%
He’s bringing some gradients into them.
他采用了渐变色 没有问题
That’s fine with me but only 10% is being used for that accent color.
只有10%的强调色
Let’s do another one by Euroart 93 again
我们再来看看Euroat 93设计的这个
we zoom in, we see 60% right 30% 10%
放大后我们可以看到60% 30% 10%
and last one just to drive the idea home one more time.
为了让你深刻理解 我们再来看最后一个
This one is by sub one this beautiful little bit of UI design here.
这是Sub1所制作的精美的UI设计
Even when you have images that’s fine images are doing their own thing b
如果你有图片 那很好 图片有其作用
ut 60% being kind of like this grayish neutralized color,
但是60%是这种灰色的中性色
30% for the white cards, 10% for the call to action buttons
30%是白色 10%是用户号召色
and there you have it, your 60 30 10 rule.
这就是60-30-10颜色规则 你学会了吗?
I hope you enjoyed that video.
今天的内容希望你能喜欢
If you did make sure that you leave a thumbs up subscribe to the channel,
如果喜欢就点个赞 订阅该频道
all that stuff because I make videos like this all the time about UI design,
我一直在做关于UI设计
about graphic design, about web design
平面设计 和网页设计视频
so make sure that you stick around for more videos when they come out.
感兴趣的话要继续关注
If you have any questions, leave those down in the comments.
如果还有问题 请在评论区留言
I hope you’re having an amazing week using color in a really beautiful and mature way.
希望这周 你能掌握协调的色彩搭配
We’ll see you in the next one.
下个视频见

发表评论

译制信息
视频概述

UI界面设计中的60-30-10色彩搭配原则介绍

听录译者

收集自网络

翻译译者

念念

审核员

审核员AF

视频来源

https://www.youtube.com/watch?v=UWwNIMHFdW4

相关推荐