0文章
0评论
0获赞

如何在设计中使用色彩和色度?

981 0

你已经接近你的设计项目的终点了,但最后一步你难倒了:选择一种配色方案

让我猜一猜:当涉及到设计(任何事情)时,你很难选择正确的颜色?

你已经组织了布局,确定了内容,甚至选择了字体。但是颜色可能会让人很困惑,你应该用基本的黑白色,亮色还是单色?还是它们的混合色?

入门:快速选择合适的颜色

选择正确的颜色首先要选两种颜色:

一个中性的颜色;

一个强调色。

为了我们的目的,让我让我们将中性定义为黑色,白色,灰色或米色/棕色系列中的某个。强调色可以是任何你喜欢的,从海蓝宝石到西葫芦绿色。

从这两个选择中,通过调整色彩和色度,你可以创建一个无限的调色板,从3个选项到30个选项。

那么,什么是色彩和色度?

色彩和色度是艺术术语,适用于单一颜色的较淡和较暗的变化。它们是通过将白色(用于色彩)或黑色(用于色度)添加到基本三色上来创建的。

将它们用作调色板的一部分具有许多优点。首先,颜色选择过程被简化。你有更少的颜色可供选择,并且不必担心你的设计会看起来像彩虹一样。色彩和色度的另一个好处是,它们会自动给你的调色板一个光滑的、有凝聚力的外观,因为它们是由相同的基色组成的。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

作为这个技巧的一个例子,以下品牌作品使用了蓝色和灰色的调色板(注意每一种颜色的明暗变化,以提供对比), 从而为柔和的配色方案提供更多的多功能性。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

如何创建色彩和色度

仅仅用肉眼就很难选择色彩和色度。有些设计程序会有适合您的工具,但这些工具可能会受到限制或无法自定义。然而,有很多在线工具可以帮助你,我们来看看一些最好的。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

Paletton的单色设置会自动从基色中生成调色板和色调——可以从色轮中随意选择,或者RGB代码中输入一个特定的颜色。

使用自由样式设置可以添加更多的基色,从2到4。底部的“预设”选项卡(请参阅下面的第二张图)根据您的原始颜色选择提供更多选择。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

01.材料选项板

材质选项板更基本,并且在需要快速颜色修复时可能会有所帮助。你提供了有限的鲜艳颜选择以及一些中立色,并被指示挑选两个。当你这样做时,你会得到一个自动生成的第一个颜色选择的调色板(加上一个色彩和一个色调),第二个颜色选择为强调颜色,并选择一个中性色。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

02.颜色代

颜色代码调色板生成器简单易用。从左边的面板中挑选一个方案(单色、单色和深灰色,或者单色和浅灰色将是你最好的基于色彩和色度的调色板),然后在各个方向上拖动鼠标,直到看到组合你喜欢。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

应用色彩和色度的方法

一旦选取了调色板,就可以将选择应用到设计中了。更亮的基色或更暗的基色变化,可以为你增加对比度、视觉兴趣和多功能性的配色方案。需要一些灵感来了解如何应用它们?看看下面的想法和例子:

01.创建凝聚力品牌

拥有一种颜色的色彩和色度,你可以将其用于不同的目的和效果,从而为你的品牌打造完美的统一外观。这两个品牌包显示了你可以在你的项目中,使用色彩和色调的灵活性和创造性。

第一组特征是中蓝色底色的多种变化,而第二组则有效地利用了底色加上一个较暗的阴影。请注意,红色(以及设计中的图形元素)是如何从品牌的logo中提取出来的,这是增强了公司的视觉形象。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

02.增强对比度

在任何设计中,对比度是良好可视性和容易导航的关键。将你最浅的色彩之一与你最黑暗的色度搭配起来,是一种创造对比的简单方法。这个活动海报用了这种方法,海报底部浅粉红色的文字与较深的粉红色,几乎洋红色背景非常相似。对比度在顶部附近显示“第4次年度”的小型文本框中反转,并且这两种颜色的组合都是有效的。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

另一个例子是,这个日历设计,至少有四种色彩/色度和两种珊瑚色(加上一些中性色),并将它们放在一起,突出它们的不同之处,从而创造出一种高对比度,视觉上看起来是个有趣的设计。暖色和冷色温度的对比,也能最大限度地提高效果。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

03.混合

相比之下,颜色可以帮助设计元素脱颖而出,但是,以不同的方式应用,它还可以使元素融合在一起,或者看起来更加低调。以下书籍封面带有蓝色的色彩和色度,没有太多的对比。这使得整个背景的插图变得有点小,所以字体设计显得很突出。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

04.简化和分离

如果设计的所有部分都有相似的颜色、色调或饱和度,就很难区分出其中的一个元素。这时,色彩和色度可以派上用场。当你有很多信息要组织的时候,使用颜色的变化可以帮助视觉上区分你的布局的不同部分。另外,选择共享基色的调色板,将防止已经复杂的设计看起来不必要的混乱,或避免选择视觉压倒太多颜色的调色板。

下面的信息图,除了黑色和白色之外,还具有绿色基色和淡色调,可以保持清洁和简洁,并且节省设计空间。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

在以下网站设计中,以类似的方式使用了蓝色的色彩和色度。柔和的色调有助于丰富多彩的产品图像,同时赋予场地的视觉结构深度和清晰的组织感。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

05.创建深度和维度

色彩和色度最常见的用途之一,尤其是艺术和插图,是创造深度和/或尺寸的幻觉。

这可以采用应用于表现光线或阴影的颜色的形式,就像这件作品一样,它受到老式旅行海报的启发。请注意,颜色方面的良好应用,特别是船上深灰色和天空和水中的深蓝色,创造出曲度和深度,让图案几乎呈现3D外观。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

为了延续航海主题,这对海报将两个色彩/色度家族(一个温暖的和一个凉爽的)连接在一起,以创建复杂的分层艺术作品。颜色的选择也表明一天中的特定时间,并给海报带来一种氛围感,这使我们有了下一个技巧……

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

06.建立一种情绪或主题

颜色有一种独特的能力,可以使你的设计充满情绪和情感。再看一眼我们刚刚看过的音乐会海报。难道它们不代表着夏天、假期、温暖的热带地区和慵懒的夜晚吗?选择的颜色在传达这些感受和营造氛围感方面起着重要作用。

颜色也可以提供项目背景色,加强或澄清现有的主题或图像。在这里,用来设计这些标签的大胆色彩和色度给人一种友好、现代的氛围。但颜色也代表了每支蜡烛的香味。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

与此相似,这个包装设计了颜色搭配(通常是底色加上色彩),赋予线条清新、迷人、现代的外观,但这也与每一种产品的味道紧密相连。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

07.使用渐变

渐变是一次应用多种色彩和/或色度的好方法。特别是与透明效果一起使用时,它们是为设计添加更多颜色的巧妙选择。

活动邀请函以两种方式使用渐变。如果仔细观察前方图像(左侧),你会看到许多构成轮廓图形的三角形都有自己的渐变的效果;这有助于增加插图的尺寸和纹理。微妙的渐变也形成邀请内部部分的背景(右)。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

这款包装采用透明渐变作为整个设计的一小部分。它从背景图像中提取颜色,以创建一个文本更容易阅读的空间

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

08.扩展一个有限的调色板

不管出于什么原因,假设你在设计中使用的颜色数量有限——可能是由于品牌指南或印刷要求,或者只是作为一种文体选择。根据你的项目的规格,你可能需要通过色彩和色度来扩展调色板。

在这里,一个引人注目的儿童书籍封面,只使用了绿色和粉色的色彩/色度,加上了黑色和白色。由于色相太少,构图绝不缺乏视觉多样性或细节性;色彩和色度为她提供了她需要的所有颜色。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

09.使用透明度

透明的形状和背景可以在设计中起到很多作用,当你使用色彩和色度的配色方案时,它们可以扩展你的调色板。当你将两层透明的色彩或色度分开时,你会创造另一种颜色重叠的地方。以下面的书为例。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

你也可以使用透明的方式来创建色彩和色度,通过在白色或黑色之上的透明的基色。在这部电影系列的海报上,设计师通过在黑白照片上分层红色色彩和色度,达到了类似的效果。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

10.保持简单

当你想要一个简约或低调的设计时,单色(或单色)调色板将有助于你实现目标。单色色彩方案通常依靠色彩和色度,来提供足够的变化,但保持单一颜色的干净的美感和简单。

这个会议程序只有黄色的色彩(我们不会计算黑白色),还有几何形状的惊人的现代构图。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

就像下面的例子一样, 甚至一个几乎单色的调色板也可以帮助简化设计,就像下面的例子一样。除了这两种蓝色,设计师还添加了白色作为中性色和少量红色作为强调色。其结果仍然是一个具有吸引力的清晰、简单的设计。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

11.创建形状和图案

色彩和色度不一定要一次使用一个。你可以用形状、图案或其他图形元素安排并组合它们,以便为你的设计项目提供一些额外的细节。

这款名片逐渐将渐变色度变为一系列几何形状,以增加一些视觉上的兴趣。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

这款来自星巴克的咖啡包装将这一概念进一步推向了一个新阶段,将多色系列的色彩、色度与透明度混合效果相相结合,创造出引人注目的图案背景。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

12.双倍(或三倍)乐趣

为你的设计选择两种不同的色彩/色度,可以使你的设计成为一个多面手和视觉上有趣的调色板。例如:这家餐厅宣传材料混合了浅红色和金黄色的不同的色彩和色度。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

正如你通过此图像底部的彩色条纹所看到的那样,设计师为此品牌项目选择了三种互补的色彩/色度(蓝色、绿色和灰色)。她通过将每组颜色限制为两种颜色,一种色彩和一种色度,使调色板不会失控。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

13.不要忘记文本

没有规定说文字必须是黑、白色或灰色——它也可以是彩色的!事实上,色彩和色度提供了一个简单的机会,将你的整个设计结合在一起,包括文本。根据它背后的内容,在你的文本中应用一个带颜色的色彩或色度,可以是一个不错的选择,可以选择黑或白色。

设计师通过在文本和图像中,应用紫色调色板来实现这一想法,以实现统一的外观。

如何在设计中使用色彩和色度?
如何在设计中使用色彩和色度?

在另一种方法中,一本教育小册子将彩色文本与其基本色相相对照,以制作色彩鲜艳而独特的目录。

我们希望你通过本文学到了,一些关于如何在设计项目中应用色彩和色度的方法

本文由海空设计(北京海空影视文化咨询有限公司)翻译整理,版权归本公司所有,如需转载到其他平台,请联系作者(微信ID:haikongdesign)。

原文地址:UI中国

作者:海空设计

评论 (0)
请登录以参与评论。
立即登录

色彩如何应用在交互设计中?

579 0
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(当然,前期也经过了讨论,在纸上也画了交互的流程了)。对于时间不充分的时候来说,这样是会节约一部分时间。但是,这样经常会带来一个弊端:交互考虑不充分。为什么会这么说呢?因为在制作高保真效果图的时候,设计师会投入更多的时间去关注页面是否好看,产品经理也会去关注这个文字颜色深一点好还是淡一点好,用红色好还是黄色好……一大堆的视觉问题就提前出来了。

换个方式来说,同样的给你一天时间:一个只做交互设计;另一个就交互和视觉一起做,然后出高保真。你不难想象到,一天只用来做交互设计的,他逻辑和流程肯定比直接出视觉稿的要好,考虑的更全面。所以,对于时间充足或者设计资源充足的团队来说,交互设计和视觉设计分离是很有必要的。

今天就来说说色彩在交互设计中的应用,前面说的是交互设计通常是黑白稿,但是对于用户来说,他看到的是真实线上的产品。我们最终的目的是设计产品给用户使用,做为一个交互设计师,那就不能只考虑黑白交互稿上的事情了,要关注后期视觉的设计,用户是怎么理解产品的交互的,这是非常重要的问题。

我们主要从以下几个方面来研究色彩在交互中的作用:

  • 1.区分层级
  • 2.功能指示
  • 3.信息类别指代
  • 4.色彩心理学在交互设计中的作用

一、区分层级

不管是UI设计还是其他平面设计,层级是设计中非常重要的一个环节。视觉层级手法主要有以下几种元素,实际设计中为了让效果拉开主次,可能会同时使用多种方法以达到更好的效果:位置、大小、距离、内容形式、色彩。在此,我们主要研究下色彩的的作用。

如何用色彩来建立层级?

首先,你要确定主色。确定主色的因素有很多,比如说行业属性、企业色、个人便好、色彩心理作用等。不管最后我们以何种方式来做,但必须要确定出主色,一款app、一个网页,必须要有一个主色。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

上图是谷歌官方推荐颜色部分展示,谷歌推出了一套配色体系,在你没有任何灵感、方案时,你可以使用谷歌的配色。具体可以看谷歌颜色规范文章(https://material.io/guidelines/style/color.html#color-color-palette

确定主色后,根据应用的不同场景,还需要设置主色体系的色彩,可以根据透明度的变化来设置。推荐一款谷歌配色方案网站如下图(https://material.io/color/#!/?view.left=0&view.right=0&primary.color=26A69A&secondary.color=7E57C2

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

其次,确定辅助颜色。

主色是指应用程序中最常出现的颜色。一辅助色是指用来强调自己的UI的关键部分的颜色。辅助颜色用于强调UI的部分选择。它可以是互补的或类似于你的主要颜色,但它不应该简单地是一个轻或黑色变化你的主要颜色。它应该与周围的元素对比,并谨慎应用

辅助颜色最适用于:

  • 1.按钮,浮动动作按钮和按钮文字
  • 2.文本字段,光标和文本选择
  • 3.进度栏
  • 4.选择控件,按钮和滑块
  • 5.链接
  • 6.标题

使用辅助颜色是可选的。如果您使用主色的变体来强调元素,则辅助颜色不是必需的。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

所以,色相不同,可以用来区分层级。色相相同的颜色,我们也可以根据透明度、明度来区分层级

二、功能指示

功能指示,主要包括功能跳转、获取焦点、可操作和不可操作

1. 功能跳转指示,在UI、交互设计中是一个很重要的指示,要让用户使用你的产品,不会感到迷茫。我们除了箭头、文字提示、按钮等来指示外,还可以用颜色来指示功能,当然很多情况下是于文字、按钮结合。通常就用辅助色来指代文字可操作,如右图的文字链接。同样,我们经常会在微信朋友圈、QQ空间、微博中看到文字链接提示。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

2.获取焦点,通常是在输入文字的时候会出现,常用的是光标闪动,也会经常见到正在输入的输入框的颜色与其它不同。pc上该方式用的较多。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

3.不可操作指示,常见于按钮,通常不可操作的灰色显示。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

三、信息类别指代

色彩的信息传达能力是非常强的,比如十字路口的红绿灯,人们已经形成了认知习惯,看到灯就知道其所表达的意思。在UI设计中也是同样的,通常我们会用颜色和文字来区分不同的状态。通常警告就会用红色或者黄色来指示,成功用绿色来指示。不可用或者弱提示文字就会用和背景对比较小的颜色。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

四、色彩心理学在交互设计中的作用

当色彩情感遇到交互设计,会是一种怎样的体验(知乎的问题套路,哈哈)?情感化设计、服务设计等这些名词,我们已经耳熟能详了,总觉得它们离我们很遥远,其实并不是这样。我们的设计和生活中,会经常遇到,只不过我们没有注意或者没有用这些词来概括而已。

色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?
色彩如何应用在交互设计中?

原文地址:站酷

作者:Luyeelin

评论 (0)
请登录以参与评论。
立即登录

如何在UI设计中正确地运用色彩

666 0

颜色和其他东西一样,最好是适度使用——少了,寡淡无味,多了,过犹不及。如果你能坚持在自己的配色方案中最多不会超过三种主色调,那么一般来讲,你的设计都会获得比较好的效果。在一个设计项目中,应用的颜色与设计最终呈现出来的平衡感有着莫大的关系,你选择使用的颜色越多,那么想要实现平衡感就越难。

色彩并不能为你的设计作品增添令人愉悦/舒适的质感——它的实际作用是强化了这种质感。”—— Pierre Bonnard

如果在设计过程中,你已经确定好了自己的调色板,但是又需要一些额外的颜色来做补充,可以运用阴影和色调来做一些变化,它们结合起来会呈现出一种和谐的效果。

60-30-10原则

这个室内装修的配色原则是经时间检验的配色技巧,可以帮助你轻松地将配色方案组织在一起。60%+30%+10% 的比例是为了实现平衡色彩,这个公式之所以起作用,是因为它创造了一种平衡感,让眼睛可以舒服地从一个焦点移动到另一个焦点。难得的是它的使用也非常简单。其中:主色调占60%,辅助色占30%,重点突出颜色占10%;

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩
墙漆;家具;配饰


颜色的意义

科学家研究了几个世纪以来某些颜色对生理的影响。除了美学,色彩是情感和想象力的创造者。颜色的含义很大程度上取决于文化和环境。这就是你经常看到黑色和白色的时尚商店的原因——他们想要使自己显得优雅、品质卓越。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

Asos网页

Asos网页设计是纯粹黑白色,而“加入购物袋”按钮选择了绿色,这是有原因的

  • 红色:激情、爱、危险
  • 蓝色:冷静、可靠的、安全的。
  • 黑色:神秘、高雅、恶魔
  • 白色:纯洁、安静、干净
  • 绿色:崭新的、新鲜的、自然的

如果你想了解更多颜色的含义,可以查看这个列表: 

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

色彩文化


度优先

在设计过程中,我们都喜欢不停地尝试各种色彩和色调,但是当你意识到你花了3个小时来调整基色,却发现你之前都在做无用功。这种习惯对于设计师来说具有致命的吸引力,但是你应该学会克制,避免总是走进这个死胡同。相反,你要强迫自己专注于元素的间距、布局等,这样会为你节省大量的时间。这种约束是十分有效的,而且它并不是一件无聊的事情。如果你想让它更加好看,可以尝试使用不同的色调。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

我在dribbble上的作品,只用了简单的单色,专注于元素的调整


避免使用纯粹的灰色或者黑色

我所学的用色技巧中,有一点很重要,那就是避免使用没有饱和度的灰色。在现实生活中,纯粹的灰色基本上是不存在的,同理黑色也是一样。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

这张照片中最深的颜色色值不是#000,而是#0A0A10

你要始终记得给自己的颜色添加一点饱和度,这样潜意识中,用户看着它会觉得更加自然和亲切。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

相信自然

最棒的色彩组合来源于大自然,这些色彩组合总会看起来非常舒服自然。从环境中选取适合的颜色组合,但是设计最佳的最终方案还是需要不停地调试你的调色板。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

汲取(配色)灵感,我们只需看看周围


保持对比

有些颜色很相配,但是有些颜色却会相互冲突。关于它们是如何相互匹配、相互作用的规则,是可以在色轮上观察到的。你应该对这套理论有认识,但是不必自己手动去操作。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

从左至右:互补色、相近色、三色系、分散的互补色、方形色系、矩形色系

如果你想学习更多更详细的色彩搭配理论,可以看这篇文章: Color Theory For Designers: Creating Your Own Color Palettes(《设计师的色彩理论:创建你自己的调色板》)


获取灵感

当我们说起UI设计参考的时候,dribbble是最好的寻找灵感的地方。它也有搜索颜色的工具,所以当你想对其他设计师“如何使用特殊颜色”进行视觉研究时,请你到这里来:dribbble.com/colors

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩
视频、印刷设计、室内设计、时尚……有太多可以获取灵感的地方。不要太依赖那些固有的调色板样式,而是要把所有你看起来非常喜欢、觉得有趣、让你眼前一亮的东西存起来。
如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

我经常从一些韩国视频里偷颜色,它们非常漂亮


工具

了提高效率,我2017年收集了一些特别棒的选色工具。它们会节省你大量的时间。

1.Coolors.co

这是我最喜欢的选色工具。你只需简单地锁定选定的颜色,然后按空格生成调色板。在Coolors上你可以上传一张图片,并从中生成一个调色板。最酷的事情是,你不仅限于一个调色板结果,它会给你提供一个选择器,允许你随时修改引用点。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

2.Kuler

这个来自于Adobe的工具已经陪伴了我们很久了。它可以在网页端使用,也有桌面本地版本。如果你使用的是桌面版本,可以把配色方案导入到Photoshop里。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

3.Paletton

这个工具跟Kuler很像,不同的是,它生成的调色板里不局限于5种颜色。当你已经确定了主色调,想要找一些填充色的时候,这是个非常棒的工具。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

4.Designspiration.net

想想一下,你已经有了一套配色方案,但是你还是想看一下他们组合起来的实际效果。这时候,强烈安利Designspiration给你。你可以选择5种颜色,然后搜索到使用这5种颜色的设计图。真的很赞,不是因为你可以查到应用了这些色彩的图像,而是因为你可以真正看到它们在设计中真实被使用、实现的样子。

5.Shutterstock LabSpectrum

你可能会询问——如果我想根据某特定色彩搜索图片呢?Shutterstock有个功能,名叫Spectrum,可供你根据特定的颜色来搜索图片。你甚至不需要订阅,因为带水印的小图预览足够生成调色板。

如何在UI设计中正确地运用色彩
如何在UI设计中正确地运用色彩

6.Tineye Multicolr

但如果你想搜索拥有多种色彩混合在一起的照片,并指定每种色彩的数量,那么Tineye会帮上大忙。这个网站使用了来自Flickr的1000万个创意共享图像数据库。

总结

色彩是一个很难掌握的概念,特别是在数字时代。上面提到的技巧可以为查找正确的色彩这项工作提供一些便利。而如果你想创造出让人惊艳的配色方案,最好的方法归根到底,还是需要不断地练习。所以,别光看文章,动起手来,沉浸到色彩的世界中,玩儿起来~

原文地址:《How to use colors in UI Design》

译文地址:蓝湖产品设计协作(公众号)

作者:Wojciech Zieliski

译者:蓝湖

评论 (0)
请登录以参与评论。
立即登录

如何在UI设计中运用颜色

251 0

本文将分为两个部分:

  • 一、法则篇
  • 二、工具篇

法则篇

60-30-10法则

这是一个室内设计领域中永不过时的装饰技巧,它可以轻松地帮助你完成一个配色方案。60%+30%+10%的比例分配是为了平衡颜色。这个公式妙在它营造了一种平衡感,使眼睛可以舒适地从一个焦点移动到另一个焦点。同时,它也运用起来非常简单。

60%是主色调,30%是辅助色,10%是强调色。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

关注颜色的含义

几个世纪以来,科学家一直在研究颜色的情感效应。除了创造美学,颜色也是情感和联想的创造者。颜色的含义会根据文化和情况而有所不同。这就是为什么你会看到黑白色的时装店。因为他们想要表现得优雅和高级。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

Asos电商网站使用黑白配,加上绿色的行为召唤按钮是有自己的考虑的

  • 红色:激情、爱、危险
  • 蓝色:冷静、负责、安全
  • 黑色:神秘、优雅、邪恶
  • 白色:纯洁、安静、干净
  • 绿色:新鲜、清新、自然

下图为颜色在不同的文化下含义不同。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

灰度优先

我们习惯在设计阶段的早期就开始调整颜色和色调。但是,当你意识到自己花了3个小时来调整主色调的时候,你发现这种行为毫无帮助。虽然把玩颜色很有吸引力,但是你应该避免在设计初期进行这种行为。

相反地,你应该强迫自己专注调整间距和布局元素这种布局的约束是非常有效的,它会为你节省很多时间。调整间距和布局元素并不是那么无聊。如果你想表达不一样的东西,尝试使用不同的色调即可。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

远离纯灰色和纯黑色

多年来,我学到的一个最重要的颜色技巧之一就是避免使用不带色调的灰色。在现实生活中,纯灰色几乎是不存在的。黑色也是同样的道理。(没错,事实上就是要五彩斑斓的黑)

如何在UI设计中运用颜色
如何在UI设计中运用颜色

在这张图片中最深的颜色不纯黑,而是#0A0A10

记得给你的颜色添加一些色调。用户会下意识地觉得这类颜色更加自然和熟悉。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

相信自然

最佳的色彩组合来自于大自然。它们总是看起来非常天然。根据自然环境来寻找设计方案的好处是可以拥有无数的色板,因为大自然的颜色总是在变化 。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

我们只需要看看周围,就能获取灵感。

保持对比

有的颜色和某些颜色搭配协调,和另一些颜色则会产生冲突。通过色轮,可以很好地观察到颜色相互作用的规则。你应该清楚地了解这个方法,但是不一样要亲手去做。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

获得灵感

当我们谈到UI参考的时候,Dribbble是一个很好的选择。Dribbble也有颜色搜索工具。所以,如果你想要针对某个特定的颜色进行视觉研究,可以前往以下网址:dribbble.com/colors

如何在UI设计中运用颜色
如何在UI设计中运用颜色

视频、印刷设计、室内设计、时尚……有很多的启发灵感的事物。要对各种形式的色板保持灵敏的感觉,并且把看起来有趣的所有东西存下来。

如何在UI设计中运用颜色
如何在UI设计中运用颜色
如何在UI设计中运用颜色
如何在UI设计中运用颜色
如何在UI设计中运用颜色
如何在UI设计中运用颜色

我会从韩流的视频短片中获取颜色灵感

工具篇

为了节省大家时间,下面整理了一些2017年非常好用的色板工具。它们会为你节省大量的时间。

Coolors.co

我最喜欢的颜色选择工具。你可以简单地锁定颜色,并按住空格键生成色板。Coolors.co还支持上传图片,从图片中提取色板。Coolors.co酷在,你不仅仅有一个结果,相反地,你可以通过选择器,调整你的颜色,获得很多配色方案。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

链接(无需翻墙):https://coolors.co/

Kuler

这款来自Adobe的工具已经陪伴我们很长时间了。它可以在浏览器或桌面应用中使用。如果你使用的是桌面应用程序,那你可以将配色方案导出到Photoshop中。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

链接(无需翻墙):https://color.adobe.com/zh/create/color-wheel/

Paletton

它和前面一款工具Kuler相似。不同之处是,它不限于5种色调。当你已经确定主色调,想要调整辅助色的时候,这是一款很棒的工具。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

链接(需翻墙):http://paletton.com/

Shutterstock Lab Spectrum

你可能会问:如果我想用我选择的颜色搜索图片呢?那么,Shutterstock旗下有款叫作Spectrum的工具可以满足你的需求,你可以通过特定的色调搜索图片。你甚至不需要称为会员,因为即使是带水印的小预览图片已经足以生成色板。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

链接(需翻墙):https://www.shutterstock.com/labs/spectrum/

Tineye Multicolor

如果你想搜索照片上的色彩组合,甚至确定各个颜色的比例,那么Tineye可以帮助你。这个网站使用的数据库,包含了1000万张来自Flickr的Creative Commons(知识共享,一个非营利组织)图像。

如何在UI设计中运用颜色
如何在UI设计中运用颜色

链接(无需翻墙):https://labs.tineye.com/multicolr/

最后的想法

色彩是一个非常难以掌握的概念,特别是在数字时代。上面提到的方法和工具可以帮助你找到合适的颜色。创造令人惊叹的配色方案的最好的办法是练习。所以开始把玩颜色吧。

文地址:Medium

译文地址:紫豆子设计站(公众号)

译者:紫豆子

如何在UI设计中运用颜色
如何在UI设计中运用颜色
评论 (0)
请登录以参与评论。
立即登录

「佳作翻译」如何在UI设计中使用颜色

894 0

如果您需要除调色板中定义的颜色之外的其他颜色,请使用阴影和色调,它们将提供不同的色彩节奏感。

60-30-10规则

这种室内设计规则是一种永恒的装饰技术,可以帮助您轻松地将配色方案搞定。

60%+ 30%+ 10%的比例是为了平衡颜色。这个公式非常有效,因为它可以创造一种平衡感,让眼睛舒适地从一个焦点移动到另一个焦点。它的使用也非常简单

60%是你的主色调,30%是次要色,10%是强调色。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

墙漆,家具,配件

颜色意义

几个世纪以来,科学家们研究了某些颜色的生理效应。除了美学,色彩是情感和联想的创造者。颜色的含义可能因文化和环境而异。这就是为什么你会看到黑白时装店,他们想要显得优雅和时尚。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

Asos是纯黑色和白色,带有绿色CTA。这是有原因的

  • 红色:激情,爱情,危险;
  • 蓝色:冷静,负责任,安全;
  • 黑色:神秘,优雅,邪恶;
  • 白色:纯净,沉默,清洁;
  • 绿色:新鲜,新鲜,自然;

首先是灰度

我们喜欢在我们的设计中尽早确定使用的颜色和色调,但是当你意识到你花了3个小时调整原色时,这种行为会令你沮丧,但你应该学会避免这种态度。

应该强迫自己专注于间距和布局元素,它会为你节省很多时间,这种约束非常有成效。

如果你想让它看起来很好看,尝试不同的色调。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

我可以在dribbble上找到的一项工作,简单的单色颜色和专注于元素

远离纯灰度和黑色

我学过的最重要的颜色技巧之一是避免使用灰色而不饱和色。在现实生活中,纯灰色几乎从未存在过,黑色也是如此。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

这张图片上最暗的颜色不是#000,而是#0A0A10

请记住始终为您的颜色添加一点饱和度。在用户潜意识里,这样看起来会更加自然和熟悉。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

相信自然

最好的颜色组合来自大自然,它们总是看起来很自然。寻求环境设计解决方案的最佳方法是调色板实时更新。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

为了获得灵感,我们只需要环顾四

保持对比

有些颜色相互配合,而其他颜色会发生冲突。关于如何在色轮上最好地观察它们的交互方式有明确的规则。您应该了解这些方法,但没有必要手动完成。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

得到灵感

当我们谈论UI引用时,dribbble是最好的选择。它还具有按颜色搜索的工具,因此当您想要对其他设计师如何使用特定颜色进行视觉研究时,可以访问并参考该网站。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

视频,印刷设计,室内设计,时尚……有很多鼓舞人心的地方可供选择。只是不要对这些调色板保持惰性,并把看起来很有趣的一切都保存下来。

工具

为了方便起见,我在2017年收集了一些选择调色板的最佳工具。它们将为您节省大量时间。

Coolors.co

绝对是我最喜欢的颜色选择工具。您可以简单地锁定所选颜色并按空格键以生成调色板。Coolors还使您能够上传图像并从中制作调色板。关于它的一个很棒的事情是你不仅限于一个结果,而是你有一个允许你修改参考点的选择器。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

Kuler

Adobe的这个工具已经和我们在一起很长时间了,它可以在浏览器和桌面版本中使用。如果您使用的是桌面版,则可以将颜色方案导出到Photoshop中。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

Paletton

它类似于Kuler,但区别在于你不仅限于5个色调。当您拥有原色并希望使用其他色调时,这是一款很棒的工具。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

Designspiration.net

想象一下,你对你的调色板有一个想法,但你想看到这种混合的例子,Designispiration是一个很好的工具。您最多可以选择5种颜色并搜索与您的查询匹配的图像。这个就非常好,不仅可以找到具有特定调色板的图像,还可以在设计中实现它们。

Shutterstock Lab Spectrum

你可能会问 – 如果我想用我选择的颜色搜索照片怎么办?好吧,Shutterstock有一个名为Spectrum的工具,你可以按特定的色调搜索照片。

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色

Tineye Multicolr

但是如果你想在照片中搜索混合颜色,甚至指定每个颜色的数量,那么Tineye会帮助你。该网站使用来自Flickr的1000万Creative Commons图像的数据库。

最后的想法

颜色是一个难以掌握的概念,特别是在现在这个数字时代。上面提到的方法将帮助我们找到正确的颜色。学习创造令人惊叹的配色方案的最佳方法是练习,所以开始去玩颜色吧。

原文地址:设计师的私人日记(公众号)

作者:整夜

「佳作翻译」如何在UI设计中使用颜色
「佳作翻译」如何在UI设计中使用颜色
评论 (0)
请登录以参与评论。
立即登录