恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI配色完全指南
0.0°
2016-12-21 自译外文 经验/观点 原作者: Jonathan Z. White 举报 4907 32 26 1

打开人迹鲜至的UI配色大门,迎娶红橙黄绿青蓝紫。

颜色在设计师的手中拥有强大的能量。它能吸引人们的注意力、唤起人们的情感并且各具内涵。有本名为《颜色对市场的影响》的书能让你对它的重要性有个大体的概念。书中的调研员发现,对一些产品来说,人们在它们上所做的临时购买决定有90%是根据颜色来确定的。


所以对设计来说,有效的利用颜色是很重要的,但将不同的颜色进行组合是挺难的。每一种颜色都有它自己的涵义,而且有无数种的组合方式。


本文的目的就是为了帮助你的形成自己的颜色面板组。它鼓励你去深入的探索颜色的奥秘,并帮你磨练对颜色组合的敏锐直觉。


选择颜色面板组:

Image title

有时候一组颜色面板就是瞬间灵感的产物。但在大多数时间里,它源自于一个科学系统的方法。


确定目标:

在做其他任何事情之前,首先要确定你设计的目标。优秀的设计会和它的颜色一起肩并肩,共同为它们的目标来服务。


问问自己如下几个问题:

·你希望通过设计传达些什么信息?

·你的设计目标是什么?提供信息?抑或让人产生信任?

·你希望你的设计能唤起什么样的情绪?

你的设计的目标应当作为你选择颜色面板的指南。


确定观众:

Image title

人们对色彩的感知各有不同。正如Fairchild指出的,颜色是在观察者内心呈现的一种心理学现象。根据每个人的自身偏好,文化教养和自身经历,颜色会对人产生不同的影响。就这点而言,为了知道人们对你的设计反应如何,你需要确定你的观众。


然而有些颜色的意义是被人们普遍认知的,但有些并不。绿色通常代表自然因为植物就是绿色的。然而,像红色这个颜色在不同文化背景中被赋予的意义也有所不同。在西方国家,红色与火焰、暴力和战争联系在一起,同样也与爱情和激情联系在一起。然而在中国,红色就代表着繁荣和喜悦。


Image title

因为颜色具有许多种不同的涵义,作为设计师,使用契合用户的心理颜色模型是很重要的。

想要了解更多关于不同国家和种族关于颜色意义的有关知识,可以翻看一下《市场和品牌中的颜色心理学》以及《颜色的含义》这两本书。


回顾色彩原理:

当选择一组颜色面板时,知道一点色彩原理有的时候是有帮助的。色彩原理是混合色的逻辑结构和实用指南。它涵盖了从色环到纯色的所有内容。


设计学院的《色彩原理》和Hubspot的《色彩原理101》都是好的入门书籍。你同样可以在《为什么Facebook是蓝的?市场中颜色背后的科学》里读到有趣的色彩原理应用。


寻找灵感:

有些时候对颜色面板进行凭空想象是很难的。没关系,正如毕加索曾说的:伟大的艺术家偷窃。确切的说,他们从其他艺术家那里获得灵感。


通常来讲对颜色面板灵感获取的地方就是类似于Dribble和Behance之类的网站。如果你想要找到像material design一样特别的设计风格的色彩灵感,你可以用类似于MaterialUI一类的网站。扁平化设计相关的可以在FlatUIColors里找到。


这些网站都很有用,但你也可以试着去参考一些来自外部特定媒介的设计。这样做会帮助你想到独一无二且美妙的颜色面板。例如,你可以看看室内设计。

Image title

如果你想要些与众不同的东西,可以在其他文化背景下的设计中寻找色彩灵感。例如,韩国的音乐视频集设计以色彩鲜艳吸引眼球而闻名。每一帧都可以当做灵感的来源。

Image title

你没必要跑到韩国去寻找色彩灵感。在你的日常生活中,它无处不在。等你下次出门的时候,停下来去欣赏你周围的色彩。

Image title

当你找到了能让你灵光一现的东西,将它做成一个颜色面板。这样你就可以在你喜欢的设计方案中使用吸管工具来梳理出一个颜色面板并在必要的时候进行调整。


确定一个设计系统:

设计系统,有时候也叫风格指南,它涵盖了设计中所有元素的框架。包括了从按钮到字体的所有相关的东西。考虑一些诸如:要用什么样的按钮以及导航栏是什么样子这类的问题。


举一个设计系统的例子,看看Saleforce的设计体系。如果想了解更多的案例,这里是《初学者必看的50个精细风格指南》的清单。

Image title

在选择颜色面板之前就将设计系统确定下来是有帮助的,即便它仅仅只是一个粗略的草图。这样做会给你一个关于你有些什么元素以及你的颜色如何适用它们的概念。


当给你的设计选择一组颜色面板时,最好遵循KISS原则,颜色越少越好。对于大多数设计系统来说,下面的架构就是一个好的开始:

·背景色

·主色

·辅色

·错误色

·正确色

主色就是在重要的按钮上最常用的颜色,对于许多公司来说,它也是logo的颜色。

Image title

辅色就是用来区分首要动作和次要动作的颜色。比方说,主要和次要按钮。错误色和成功色,特别是红的和绿的,传达了设计的状态。比如说,成功或失败的通知。

Image title

选择一个色板:

现在你有了灵感的加持和一个设计系统的草图,是时候去选择一组颜色面板了。我喜欢将颜色并排放,就像艺术家调色板那样。

Image title

是时候汲取你所有的灵感并将它们创建成一组组的颜色面板啦,越多越好。同样你也可以自己进行试验,不要怕试错。


当缩小了色板的选择范围,回过头来想想头两个部分,你在那里确定了设计的目标和观众。这时问问自己下面几个问题:

·哪个颜色是易感知的?

·哪个颜色具有视觉冲击力并能吸引你的眼球?

·需要浅色或深色的主题么?人们会在什么时间使用你的产品?

·你希望设计能传达出什么样的情绪?这组颜色比其他的都要合适的么?


正如我在上个部分中提到的那样,颜色将会在你的设计系统中扮演不同的角色。这也意味着每个颜色在你的设计系统中有着不同的重要程度。例如,你的背景色要比强调色更经常的使用到。

Image title

正因为如此,有的时候创建一些不同尺寸的抛弃性设计是个好的练习。每个尺寸大致和出现的频率和既定页面上的平均表面积的颜色一致。举个例子,下面是Invision's的色板。

Image title

一种几何状的表达就类似于下面这样:

Image title


应用你的颜色面板:

为了给你一个如何将颜色应用到设计体系中的概念,让我们看看Airbnb。Airbnb的主色是Rausch,它以公司发源地的街道来命名。 Kazan作为辅色,两种灰色作为背景颜色。

Image title

对于大多数页面来说,Airbnb用了雾灰色作为背景。你可以看到他们用Rasch作为他们的主色来强调重要的动作比如说预约。

Image title

Kazan,绿松石色,用来吸引你的眼球。需要注意的是它是如何与主色互补的。

Image title

对于错误信息,Airbnb运用淡红色,应该就是低饱和度的Raush。和感叹号一起出现的红色,立即会吸引你的眼睛并告知你系统目前所处的状态。

Image title

在最开始的时候设计里不要有任何的颜色。专注于页面布局和元素的更迭。当你对现有的东西满意了,这时就可以将你的色板放到设计中去了。

Image title

在设计中要考虑视觉的层级。想想你想要突出的设计元素并给它们安排合适的颜色。同时,考虑运用颜色的不同明度,给那些像划过和点击的状态。


结束语:

颜色就是不断的试验和重复。如果你想要成为一个能够驾驭颜色的人,唯一的答案就是更多的实践。如果你完成了设计的布局和功能,那么对颜色你想怎么试验就怎么试验。对于设计师来说学习如何用颜色进行设计是非常有价值的。














更新:2016-12-21

收藏

32人已收藏

Iris_Uu

腿长一米八

  • 8

    作品

  • 148

    粉丝

  • 0

    关注

  • 一波全新的Google设计作品
  • 减少认知过载——为了更好的用户体验
  • 还在为导航设计而犯愁么?教你五招轻松应对
  • 创建完美用户体验设计不可缺少的七个原则
相关标签
设计经验GUI

    猜你喜欢

      2016-12-21 自译外文 经验/观点 原作者: Jonathan Z. White 举报 4907 32 26 1

      UI配色完全指南

      0.0°

      你确定要举报UI配色完全指南

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      26
      32
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录