AMO全媒体运营
首页 知识星球 吸取Dribbble优秀作品的配色技巧!

吸取Dribbble优秀作品的配色技巧!

大家在工作中或练习中,对配色有没有疑惑?比如颜色怎么挑?色彩怎么配?因为我最近在做的Dribbble,所以总结了一些配色的小技巧,希望能帮助到大家。 目录 ui界面配色组成 主色如…

大家在工作中或练习中,对配色有没有疑惑?比如颜色怎么挑?色彩怎么配?因为我最近在做的Dribbble,所以总结了一些配色的小技巧,希望能帮助到大家。

目录

  • ui界面配色组成
  • 主色如何选择?
  • 辅助色如何选择?
  • 高级灰的提取与使用
  • 案例演示

01、 Ui界面配色组成

吸取Dribble优秀作品的配色技巧!

  • 主色
  • 辅助色
  • 消色

02、主色如何选择?

1【明确色彩情绪】

不同的色相可以传递不同感受,有积极的有负面的,通常会有如下感受,但根据国家、种族信仰,不同的颜色所代表的含义也会有所区别:

吸取Dribble优秀作品的配色技巧!

根据不同色相匹配了如下对应案例,并描述了我的个人感受:

吸取Dribble优秀作品的配色技巧!

黑白灰

吸取Dribble优秀作品的配色技巧!

红色

吸取Dribble优秀作品的配色技巧!

橙色

吸取Dribble优秀作品的配色技巧!

黄色

吸取Dribble优秀作品的配色技巧!

绿色

吸取Dribble优秀作品的配色技巧!

蓝色

吸取Dribble优秀作品的配色技巧!

紫色

吸取Dribble优秀作品的配色技巧!

粉色

吸取Dribble优秀作品的配色技巧!

咖啡色

看完案例后可以发现,界面的配色确确可以影响到我们对这个作品的视觉感受,所以在界面设计后可以更具你定义的这个产品特质:比如咖啡类产品基本主色固定使用咖啡色、或行业特性:金融产品基本使用蓝色、又或是你希望传递出一些不一样的感受还可大胆创新。

2【确定饱和度与明度】

在这里需要简单介绍一些,在ui设计中最常使用的色彩调节模式:HSB。

H(色相):即我们上面内容讲的红、橙、黄、绿….

S(饱和度):色彩的纯度

B(明度):色彩的明亮度

吸取Dribble优秀作品的配色技巧!

接下来主要讲下HSB在拾色器上的选择范围,提前了解了一下目前网上介绍的一些方法,可以看出不管是哪种方法,靠下面靠右边的区域都是不推荐使用的。

吸取Dribble优秀作品的配色技巧!

根据自己的使用频率和分析一些优秀的作品后,总结了如下规律:

吸取Dribble优秀作品的配色技巧!

03、 辅助色如何选择?

色相环中每个颜色都可以是主色,每个主色都能形成它们自己的同类、类似、邻近、中差、对比、互补色。色相环上两色之间的夹角可表示颜色之间的区分强弱,不能颜色搭配起来视觉效果感受不同。

  • 同类色:15°角内的颜色
  • 邻近色:60°角左右的颜色
  • 类似色:90°以内的三个互相连接的颜色
  • 中差色:90°左右的颜色
  • 对比色:120°左右的颜色
  • 互补色:180°左右的颜色

1【同类色】

吸取Dribble优秀作品的配色技巧!

吸取Dribble优秀作品的配色技巧!

15°以内,属于单色调搭配。12 色相环中,同类色相当于单色。

同类色配色极易调和,但对比微弱,色彩容易同化而显得含糊不清,有点平淡乏味。所以在配色时需要拉大明度色阶比如大红与浅粉或点缀少量对比色,以获得理想效果。

2【邻近色】

吸取Dribble优秀作品的配色技巧!

吸取Dribble优秀作品的配色技巧!

60°左右,或者相隔三个位置以内的两色,为邻近色关系。属于色相中的中对比,可以保持画面的统一感,可以使画面显得更丰富、活泼,在色彩上有主次的配色可以增强吸引力。

3【类似色】

吸取Dribble优秀作品的配色技巧!

吸取Dribble优秀作品的配色技巧!

在色环上任意90°角度以内的颜色,各色之间含有共同色素,故称”类似色”。,类似色的搭配比同类色的效果要好,能保持色彩的画面统一和协调,能呈现比较柔和的质感,在色彩搭配上调节明度和纯度的比例对比,达到高级质感配色。

4【中差色】

吸取Dribble优秀作品的配色技巧!

吸取Dribble优秀作品的配色技巧!

90°左右 ,中差色构成的色调富于变化又不失调和,具有明快感,配色时要注意呼应统一。

5【对比色】

吸取Dribble优秀作品的配色技巧!

吸取Dribble优秀作品的配色技巧!

120°左右,次于互补色,色相差十分明显,具有视觉冲击力。色彩之间效果鲜明,饱满,容易给带来兴奋,激动的快感,在作品中常用于表达随意,跳跃,强烈的主题,来达到吸引人的目光。但也很容易产生不协调感,配色时要注意变化明度和纯度,或强化主体改变面积比例来协调对比关系。

6【互补色】

吸取Dribble优秀作品的配色技巧!

吸取Dribble优秀作品的配色技巧!

180°左右,对比最强烈,画面最丰富,最具感官刺激的色彩组合,常用表达极大反差的事情,以及用此来突出目的的表达。如果搭配不好则容易产生粗俗生硬,动荡不安的消极效果。配色时要注意明度纯度及面积比例的变化,或借用无彩色或中间色缓冲调和的方法来达到色调的和谐统一,此配色新手慎用。

如下还列举了一些更复杂的配色方式,虽然复杂但相信假以时日的练习,大家对配色的理解也会越来越深刻,越来越得心应手。

吸取Dribble优秀作品的配色技巧!

04 高级灰的提取与使用

在界面文字用色和背景用色中,尽量避免使用纯黑、灰色,因为容易显脏。可以尝试给黑、灰色加入一些色相,常见的加入蓝色,或其他品牌色相。

提取方式:同样借助Hsb调色模式,保持H和你的品牌色一直(或选择一个蓝色),通过调节S、B的参数,得出不同视觉层级的高级灰,用作文字层级区分。

吸取Dribble优秀作品的配色技巧!

05 案例演示

以如下原型为例:

吸取Dribbble优秀作品的配色技巧!

1【确定主色】

由于不同色彩可以搭配出多样的风格感受,单单主色不同带来的视觉感受就完全不同,再加上辅助色就更多,所以这里只挑三个不同主色进行演示:

  • 蓝色:科技、智能、稳重的感觉
  • 紫色:高贵、奢华的感受
  • 绿色:安全、清新的感受

2【效果展示】

吸取Dribbble优秀作品的配色技巧!

蓝色方案1

吸取Dribbble优秀作品的配色技巧!

蓝色方案2

吸取Dribbble优秀作品的配色技巧!

绿色方案1

吸取Dribbble优秀作品的配色技巧!

绿色方案2

吸取Dribbble优秀作品的配色技巧!

紫色方案1

吸取Dribbble优秀作品的配色技巧!

紫色方案2

以上就是这期要分享的主要内容,感谢各位耐心看完。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

10个排版小技巧,让排版瞬间变高级

分享 10个排版小技巧,每一张图,都是一个日常高频 又有效果的技法,收藏起来反复学! 01.强化对比,提升文字跳跃率,让...

设计构图基本模式!求稳!求美!

黄金分割构图 黄金分割比例被公认为是最美的比例。根据黄金分割比例安排元素在画面上位置,在画框上的任意一条直边上找到黄金分...

每天都用的基本构图

进行设计构图,其实就是将画面中的元素组织起来。 ①水平线构图。根据画面中的横 向线条将画面按照合适的比例进行划分的构图方...

如何通过构图增强人物原画的吸引力

创意构图是增强人物原画吸引力的关键因素之一。通过巧妙的构图,可以突出人物的特点和情感,使画面更具视觉冲击力和故事性。 以...

PPT图片怎么排版好看?4个相见恨晚处理方法,每个都高级!

在PPT设计中,图片的使用至关重要,那么如何才能提高图片的设计感? 显然不能用下面这些方法,直接将图片平铺在页面上,不好...

发表回复

返回顶部