赞助商
立即赞助

10年经验的资深设计师,总结了这份 UI 配色终极奥义

平面设计3年前 (2021)发布 流光
2.5K 0 0

配色,设计师的世纪难题。从平面到屏幕,CMYK 到 RGB,墨点到像素,色彩越来越丰富,形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱来,却在色彩的展现中放飞了自我。

零售业有个有趣的研究成果 —— 「七秒钟定律」:人们在挑选品和服务时 ,只需要 7 秒钟就以确定是否感兴趣,而在短暂的 7 秒钟内,彩的用占到 67%。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

要在小小的手机屏幕中加么颜,并持其中的联系和逻辑,着不易。果你还对一无所,完不道应该怎么手,么你需要一下,我几年经验总结的思路。

拾色器中的黄金三分法

无论我们用 PS、AI,还是 Sketch、XD、Figma,和彩打道最的地方就是拾器窗口,我们来看看案例:

10年经验的资深设计师,总结了这份 UI 配色终极奥义

虽是不同的应用,但是个拾器的用法大同小异,但是,很新人并没有搞懂拾器的正确应用逻辑。

多人知道,UI 的色彩使用 RGB 模式,但是拾色器主要的选色理遵循的是 HSB 模式的逻辑,也就是色相(H)、饱和度(S)、度(B)。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

HSB 是色彩科学中对所有颜色属性的理论划,是种概念上的定义,可以用来解释任何色彩,也就是说可以和 RGB 和 CMYK 相互转化,且 HSB 的选色逻辑更清晰、简洁、干练。

为个正确选色过程,是先确定出色相,然后再在这个色相维度下选出明度和饱和度,所以我们首先要关注色相选择条。

细的同学应该已发了,它们的首尾都色,那因色相的序列一首尾相接的环形模式,所以它实际就色环的柱状展示图,应用起色环实际区别。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

接下就到重点,饱度明度选择区,我自己使用的习惯,将这选择区通过黄金三分法的方式切割比的 9 区域,然后明确它们 UI 中的对应绪应用场景。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

过去的分析中,互联网产品的主色重辅色都会往右角聚集,一些次、不可点的色彩聚集中方,文字背景色则聚集左侧,无人区则我们重点避的对象。

面我们分析几个案例,看看它们在这个择区中的色彩分布情况:

10年经验的资深设计师,总结了这份 UI 配色终极奥义

10年经验的资深设计师,总结了这份 UI 配色终极奥义

10年经验的资深设计师,总结了这份 UI 配色终极奥义

大家也可以自己拿些主流应用做截图,然后把它们 UI 元素色排列到拾色板,会到基本致结。牢记这9个区域场景划分,可以帮助我们常高效、安全地完成 UI 配色。

UI配色中的色彩选择

在众多 UI 设计规范,色部分介绍,都必然含三类型,分是:

  • 主色:应用的核心色彩,品牌色
  • 辅色:丰富页视觉和传效要颜色
  • 中性:色相的文字、背景用色

1. 主色的选择

主色是一个应用的最核心的色彩,品牌的象征色,比如想饿了的蓝色、的绿色、的红色、淘的橙色。

确定主色,并没有大家想象那么复杂,它要在于——你想让用户感受到哪情绪,然后过情绪关联个大致色范围,再进微调。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

在今天互联网品,主色应用选择范围在拾色区域右上,前已经有解释了。这和平设计用色有常大不。

移动端产品一方寸的空间中争夺用户的注意力,引起用户的趣,那么低饱清淡的色调无法实这目标的,所以今天主色饱度越越极致,比如我们之整理的一篇总结:

为么支付宝要换 Logo 颜色?分析目前 Logo 的色趋势

加上屏幕的 RGB 显示特,高对比度,高动态范围的特质能给用户提供更的观感。所以选择主最安的做法,就是在确定相类型,在右上方区域选出合适的值。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

2. 辅助色的择

辅助色是丰富应中的次要色彩,它会包含一到若干个和色同的色彩,除了牌传达外,具有更强的实性。

前面我们提到,里就要派上用场。我们道是个彩序列首尾相连的形模型,它蕴含一个最朴素的原则,即两个颜在个形中角度越大,么视差异越大,对比越强,比下图的展示:

10年经验的资深设计师,总结了这份 UI 配色终极奥义

的模式是不能闭着眼随便挑的,它们仅仅为一个彩对比度的判断标准。而正辅助的选择,是根据际场的功能决定的。

比如通知、提醒、取消用大红色,确认、同用绿色或者蓝色,收藏、、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型,跟着常规方法来做,是没有其它思路的情况下最简、最安全的辅助色选择方式。

没有标准元素用色情况下,再考虑应用色环 「度原则」,越需要被突出颜色,可以在色环离主色越远,越不需要被突出则越近。

比如下方携程的案例,主色蓝色的况下,支付、保险金标签这些需被重点突出的色彩,使用了主色的互补色, 让我们一眼就能看见并产强烈的操作欲望。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

3. 性色选择

性色,是页文、背景用到颜色,它们承担起最基本层表现、便于阅读任。多数新手觉性色关紧要,实情况恰恰相反。

主色辅色决了界面视觉否出彩,中性色的应用直接决了页面能不能常使用。如果看过比较多的原型案例,就应该明白,即使只黑白灰的状态下,我们理解这些页面行使用也不会丝毫的障碍。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

中性色的配置,就制一由深到浅的灰度阶梯,应用对应权重的元素,色彩轻重的主判断依据 HSB 中的 B(明度) 。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

中性色虽然指的无性,但并不只能用纯灰色,常见的一种法,就中性色添加的蓝色饱度,提升观看体验(满足RGB的某种特性)。

这种做法,颜色越浅的时候饱和应色值就越低,将这个规律在拾色器中进行表现,那么我们就可得到一个 L 曲线,我称它为 「中性曲线」。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

掌握对于色、辅助色、中性色的择方法,那么对于UI配色的奥义来说,你已经掌握了一半,接来就要了解更具体的实践思路了。

配色方式的四象限

配色并是只有色彩的色值本身,大一直在研究各种色彩心和论,却很心它们如何应,如何配置。

所以,我根据主和辅助应用总结一个的四象表,分别看看它们对应的案例:

10年经验的资深设计师,总结了这份 UI 配色终极奥义

1. 色占大,色彩丰富

色会作为顶标题栏或它重要模中的背景色,进行大面积应,深户对牌的认知和辨识。而产中又包含了大量功和务,需要丰富的色彩来进行暗示,吸引户注。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

10年经验的资深设计师,总结了这份 UI 配色终极奥义

2. 主色占比大,色丰富度低

这类配色,主色应用占比也大,出现频率高,鲜有其它颜色出现。比较适用于图片内容丰富题材,或者是相正、品感强应用。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

10年经验的资深设计师,总结了这份 UI 配色终极奥义

3. 主占比小,彩富度高

是数主流应用的趋势,降低主占比,留出更的空间给内容模块的展示上,突出自身带有的服务和功能。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

10年经验的资深设计师,总结了这份 UI 配色终极奥义

4. 主色占比小,色彩丰富度低

通常,会应用这种方式因产品的服务相对单一,但也需用户投入注意力的应用,设师就会尽力避免给予用户过多的扰。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

10年经验的资深设计师,总结了这份 UI 配色终极奥义

在进配色时候,我们都需要自己要应用哪配色应用做出规划,然后再动手执。有了这个目标,后在个项目设计配色步骤是到渠成事情了。

配色流程演示

在实践前,我们要简单讲讲个应用或者界标准配色流程了,流程序如下:

10年经验的资深设计师,总结了这份 UI 配色终极奥义

具体应该怎么使用这套流程,我们用个图虫APP改版案例来做演示,首先从四象限第个主色占比高、色丰富度高类型做起。

1. 配色流程演示

原型是 UI 设计基本艺能了,在开始具体设计、配色前,搭页框架原型是个必备条件,下,是我们已经准备好原型案例。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

然后,我们确定以橙色作为应用主色,并在拾色进确认。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

有了主色,可以页进色填充和图片填充了。既然我们主色是占比大,那么首先可以用到是顶部标题栏背景色了,以及底部 Tabbar 选色,大按钮色等。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

接着,我们开始理性色使用,选择新颜色来填充文和背景,晰表现模块层级,文信息权。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

最后,是添加辅助色和其它色元素了,这个步骤议都是放在最后步操作。为色越丰富,越难控制,容易让个画显杂乱序,所以先完成基础搭,可以更好帮助我们判断色使用是否合理。

下面,我们使用彩色的金刚区图标,然后将用户关注、认证用户、标签元素使用其它色彩,丰富页面的色彩内。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

2. 其他配色类型应用

根据第个案,我们可以再用这个原型来实现其余三个案配色。

比如下面的主色占比,但色彩丰富度低的。因已不太用其它辅色,所以主色填充我们不再填充顶部导航栏的背景,将多元素应用主色,减少辅色数。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

然后主色占比小,色彩丰富度高的方案,一降低主色应用的比例,然后金刚区、标签处使用较丰富的配色。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

后,就主色占比小,色彩丰富性也低的方案,那么使用中性色的元素就始增多,只保留核的一些元素使用主色,极少的辅色。

10年经验的资深设计师,总结了这份 UI 配色终极奥义

根据四种不同的配色方案,我们就可以得到四种不同的配色结果风格,每次设始实施,我们都可以根据这种法试,并选出自己满意的方案。

要再次强调,UI 配色是极强调形式的应科,最后做的往往会和一开始想的效果有极大入,需要我们有几个备方案,可随时进行调整,并合的那个。

总结

上是我们于配色有知识点的分享,希望可帮助大升对 UI 配色的认识。

欢迎关注作者的微信公众:「超人的电话亭」

10年经验的资深设计师,总结了这份 UI 配色终极奥义

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@研习设K先生 :之前有一期《那些用色高手,都做过这些训练!》教程给大家讲解了一些基础入门的色彩训练方法,今天同样给大家...
色彩搭配
@研习设K先生 :关注我们研习设的朋友一定都或多或少的了解一些色彩理论和配色技法,但是我相信大家往往都容易忽视一个问题就...
色彩基础
@研习设K先生 :在我们设计配色的过程中容易忽视一点就是通过色彩来强调主角,主角的刻画可以对版面的优劣起到决定性作用,所...
主色
这一期是版式三部曲的最后一篇内容了,这次打算跟大家简单聊一聊配色的问题。 如果说构图相当于骨架,文字相当于五官,那配...
平面设计
@研习设K先生 :配色是很多人都比较关心的一个问题,之前的教程我也给大家讲解过一些配色思路和配色方法,而今天我就教大家一...
入门
一个设计作品呈现到用户面前,第一眼进入眼帘的就是产品的视觉表现,而产品的色彩在其中起到了举足轻重的作用,毫无疑问色彩...
入门
相信在日常工作中,经常会听到「这个画面看起来很凌乱」、「颜色太多太杂了」、「画面没有重点」之类的意见(吐槽)。 怎么...
色彩基础
不知道大家有没有听过这么一个故事:某家餐厅销量一直不太好,老板究其原因也没有查明白到底是为啥,明明选址在闹市区,价格...
色彩搭配