色彩搭配(色彩搭配师)

编辑:美西时尚2021-09-12 03:13:17 关键字:色彩搭配(色彩搭配师)

编写引言:人机交互中配色难题是室内设计师常常会遇到的难题,在其中颜色理应怎么搭配以完成制定的外观与和睦呢?创作者在本文里为大家介绍了人机交互中有关配色的干货知识,强烈推荐已经从业人机交互或是对色彩搭配有兴趣的小伙伴们阅读文章,一起来看。

详解|交互设计中的色彩搭配,这样更有效

人机交互中常常会碰到配色难题,例如室内设计师是如何确定下列这张网页页面中的卡片配色的?又或是:这种卡片的图形是怎么选择以确保颜色和睦的?

详解|交互设计中的色彩搭配,这样更有效

豆瓣网App电影排行榜卡片

颜色的组合实际上 是一个十分非常值得探讨的难题。深层次分析得话主要内容也会许多 ,文中会对你说,颜色怎样选择会更有规律性,并确保基本上和睦。

一、 色彩理论定义探讨

要想搞好色调搭配,需掌握一些色彩理论定义。色彩理论将颜色分成:类似色、同类色、类似色、中差色、色彩对比、对比色。这几类颜色根据色相环的方向开展取色,如下图所显示:

详解|交互设计中的色彩搭配,这样更有效

随意颜色都能够做为基本色,每一个基本色都是有其相应应的类似色、色彩对比、对比色这些。

一般状况下,邻近的2个颜色,挑选基本色和类似色中间的颜色,也就是与基本色中间的视角 ≤ 60° 的颜色,会让网页页面的颜色看起来和睦统一。

详解|交互设计中的色彩搭配,这样更有效

△ 获得 App 服务项目內容卡片

详解|交互设计中的色彩搭配,这样更有效

△ QQ 歌曲 App 排行榜卡片

假如采用色彩对比和对比色,则必须 操纵颜色的总面积,例如以鲜红色居多的界面中能够发生深蓝色,但深蓝色的总面积占有率最好是不能超出 20%。

除开色彩上的转变,颜色也有色度和含量上的转变,针对颜色的危害也尤为重要。这三个语汇的定义如下所示:

  • 色彩 Hue:也称色彩,就是指色调的长相
  • 纯净度 Saturation:也称对比度,就是指色调的艳丽水平
  • 色度 Brightness:也称色度,就是指颜色的明暗交界线水平

色彩、纯净度、色度三者组成了色立体式的定义,让色相环由二维变成了三维的定义。

详解|交互设计中的色彩搭配,这样更有效

二、HSB 色彩模式

RGB 和 CMYK 是大家比较熟悉的色彩模式。而依据上文提及过的色彩理论定义,在具体工作上大家还可以参考HSB 色彩模式开展上色和挑选颜色。

在 sketch 和 PS 的 HSB 调色板页面如下图:

详解|交互设计中的色彩搭配,这样更有效

在其中:

  • 色彩 Hue (H):选值在 0-360 度中间
  • 纯净度 Saturation (S):选值在 0-100 中间,数值越高颜色就会越纯艳
  • 色度 Brightness (B):选值在 0-100 中间,数值越高颜色就越光亮
详解|交互设计中的色彩搭配,这样更有效

因为纯净度 Saturation (S) 和色度 Brightness (B) 中间的数值全是在 0-100 中间,因而二者具有一定的对应关系。这种数值可以为你在挑选颜色时给予根据。

实际如何使用这种数值,大家用实例来表明:

三、实际操作实例

某 PC 端产品功能卡片必须 做配色设计方案:

详解|交互设计中的色彩搭配,这样更有效

已经知道商品的牌子色是下列2个颜色,其 HSB 颜色值如下图所显示:

  • 颜色 A:H=233,S=74,B=100(基本色)
  • 颜色 B:H=267,S=79,B=100(辅色)
详解|交互设计中的色彩搭配,这样更有效

因而卡片的衍化色我们可以应用:深蓝色调 邻近色,且邻近色的颜色最好是处于深蓝色和蓝紫色中间,会使商品网页页面颜色的组合更为和睦统一。

因此我们可以先依据知名品牌基本色:

颜色 A:H=233,S=74,B=100

来明确基本颜色,大家只更改色彩(H)的数值,各自在 233 的根基上开展 10 和 -10,从而能够获得三个颜色 A1、A2、A3,展现实际效果如下图:

  • 颜色 A1:H=253,S=74,B=100
  • 颜色 A2:H=243,S=74,B=100
  • 颜色 A3:H=223,S=74,B=100
详解|交互设计中的色彩搭配,这样更有效

如今的卡片颜色稍显薄弱,我们可以再给每一张卡片加一个颜色,作出衔接色实际效果。因此我们在数值 A1、A2、A3的根基上,维持色彩(H)不会改变,只更改这三个数值的色度(B)和纯净度(S)的数值。以颜色A1 为例子:

颜色 A1:H=253,S=74,B=100

如今,大家需要取得一个比 A1 更加深入一点的颜色 A1-1,依据色彩理论基础理论,我们可以减少色度(B)的数值,那样颜色会变深,与此同时提升纯净度(S)的数值,那样颜色会更稳重正宗,为了更好地确保数值可控性,大家将色度(B)减少 26,将纯净度(S)提升 26,因此 能够获得颜色 A1-1的颜色值:

颜色 A1-1:H=253,S=100,B=74

A1 和 A1-1的颜色实际效果如下图:

详解|交互设计中的色彩搭配,这样更有效

依照此方式,我们可以获得2组颜色和其数值:

详解|交互设计中的色彩搭配,这样更有效

因此大家的卡片能够应用颜色渐变:

详解|交互设计中的色彩搭配,这样更有效

那样卡片的颜色就基本上明确出来了,我们可以再调节下卡片的关键点,例如提升相应的环境插画图片,调节卡片上的文字排版设计这些,这组 PC 端卡片最终的实际效果如下图:

详解|交互设计中的色彩搭配,这样更有效

四、补充说明

一个网页页面中设计元素的颜色挑选有很多影响因素,例如:商品的牌子色、网页页面的作用、网页页面的內容、气氛这些,因此還是要详细情况深入分析,综合性考量挑选颜色。

自然,之上明确提出的这种数值仅仅参照,为了让你的颜色挑选给予基础理论支撑点。在具体运用中,也或是必须 室内设计师依据详细情况,及其人的眼睛视觉效果认知的实际效果,酌情考虑做颜色上的调优解决。

创作者:元尧,小蚂蚁集团公司室内设计师

文中由 @Ant Design 原創公布于每个人都是产品运营。未经审批同意,严禁转截。

题图来源于Unsplash,根据 CC0 协议书

相关文章
女孩约会带上闺蜜怎么办 达成1点自此立于不败之地

女孩约会带上闺蜜怎么办 达成1点自此立于不败之地

当喜欢的女孩终于同意了我们的约会,当我们在心中幻想着美好的二人世界时。没想到一个晴天霹雳却落了下来女孩竟然要带上[详情]

按摩到我忍不住哦!不要不要在这里啊嗯 求你了

按摩到我忍不住哦!不要不要在这里啊嗯 求你了

啊啊啊..嗯嗯嗯..忍不住哦哦哦.好爽..不要不要在这里,我求你了,那天晚上,已经接近午夜了,小叔子弟正在为我按摩。小叔子[详情]

为什么男生把女生追到手态度就变冷漠了 背后竟为基因本能在作妖

为什么男生把女生追到手态度就变冷漠了 背后竟为基因本能在作妖

很多时候我们会发现,男生在追求女生的时候,往往表现得特别积极。可一旦追求成功之后,往往对女生的热情,就会逐渐的冷淡下来[详情]

男人有多在乎女人的第一次 12糙汉这般看待那片肉膜

男人有多在乎女人的第一次 12糙汉这般看待那片肉膜

处女情结这个词,专门用来形容男人对女人第一次的在乎程度。在古代,往往对于女人的第一次尤为看重。可是在如今这个开放又[详情]

尿频、尿急、尿不尽是怎么回事呢?

尿频、尿急、尿不尽是怎么回事呢?

很多男同志,人道中年就慢慢出现尿频,尿急,尿不尽的种种尴尬问题,严重影响生活质量和水平。就是这样被困扰着,但是你有了解过[详情]

contact us

Copyright     2012-2022   All rights reserved. 蜀ICP备2021015599号  技术:ICP/IP地址/域名信息备案管理系统