• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 在配色这件事情上,总会有一些有趣且有用的小技巧

在配色这件事情上,总会有一些有趣且有用的小技巧

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI配色,经验分享,色彩理论,配色技巧等相关知识,希望在学习及工作中可以帮助到您

配色这件事怎么聊都聊不完,不是么?选对色彩,是每个设计师的基本功,说来简单,但是千变万化,看似复杂,然则有迹可循。似乎每个设计项目在配色上,都多少会有些争议,团队讨论的时候谁都可以插手说上一嘴,甚至许多产品的配色方案直到上线之前还会存在争议。

配色确实是一件难搞的事情。它牵涉到文化背景,受到方方面面的影响,在情感含义上的理解又因人而异,设计师所面对的问题往往是选择太多,而非太少。

配色的方法很多,辅助工具也不少,但是令人印象深刻的,往往是一些颇为有意思的技巧。今天,我们分享配色大师 Patrick Multani 的色彩搭配技巧。也许这10个技巧,会成为你的配色体系的可靠补充~

技巧1:谨记配色策略

在开始着手挑选配色之前,我常常会翻看 Dustin Senos 关于设计原则的短文。他在文章中,阐述设计原则的方式非常有意思,干练而有趣,“方向优于选择”,“合适优于一致”,“发展性优于总结”。其实如果借用这种句式来总结配色也不错:“白色优于灰色”,“和谐优于错位”,“沉静优于热烈”。当我在工作的时候,我会时刻谨记这些配色策略,它们更像是一种感觉上的规范,就像用户角色引导UX设计师来设计体验一样。

技巧2:取色一条线

当我在调色板上选择色彩的时候,我会倾向于沿着直线路径来挑选色彩,从左到右,从上到下,或者沿着对角线来选取色彩。这样所获得的一套配色可以兼顾到不同的按钮状态(可用/不可用,活动/非活动),兼顾到视觉主体和边框,背景等。我们也可以在取色器的同一个位置取色,调整色调,获得的一组色度接近色调不同但是高度协调的色彩组合。上图中,中间那个就是。

技巧3:保持敏感,小幅调整

调配这这么多配色方案,给我最深刻的经验教训就是:哪怕轻微的色彩调整,都会对整个配色方案带来巨大的影响。所以,我觉得在配色的时候,要保持敏感,小幅度调整和改变。你可以试着挑选偏冷或偏暖的灰色,运用到你的配色方案中,你会发现它们会不同程度地调和整个配色方案的协调度。根据这样的策略,你可以挑选出一大堆色彩作为备选,反复迭代,变得对于微妙的色彩变化更加敏感。

技巧4:善用叠加模式

如果你能善用混合模式,就能创造出令人着迷的配色方案。通过简单的叠加两个色块,选择“Multiply”(乘法)混合模式,就能得到匹配的第三种色彩。在白色背景上,我们还能通过调整透明度来快速调整色彩的明暗。不过我始终觉得在黑色背景上来调整色彩更有意思,搭配混合模式来探索色彩的可能性,总能创造新的搭配。这种同色彩的交互方式,为许多经验丰富的设计师所使用。

技巧5:沉静而集中的配色

选好色彩是一回事,在视觉设计中有效地运用它们是另外一回事。有的配色方案非常漂亮,但是一旦运用在特定的设计项目当中,整个视觉就崩坏了。尽量让配色方案中色彩不要那么庞杂,让整个设计更加沉静。比如,文本、图标和边框采用不同类型的蓝色,能让整个设计显得协调。当你想要高亮突出什么东西的时候,可以采用这种方法。

技巧6:在不同背景下查看配色

我记得之前参与过一个可拓展的色彩系统项目,当时我挑选了大量微妙而接近的色彩,当我仔细审视它们的时候发现很难区分彼此。这个时候,我将这些色彩复制了一份,然后添加了一个黑色的背景,这个时候,色彩和色彩之间的区别就变得明晰了,让我能够更好的作出选择。

技巧7:明艳的色彩更吸引人

在取色器的右上角取色能够找到更加安全、更加吸引人的色彩,供你运用在配色方案中。色彩越靠左、靠下,色彩上所叠加的灰度和黑色就越多,色彩本身的重量就越重,而过重的色调会在潜意识上给人以压力。所以,我更倾向于使用清晰明亮的色调来进行设计。

技巧8:叠加图层调色

想象有一张半透明的纸,当我们将它置于色彩上方的时候,它能够从视觉上“消减”色度。我们可以在PS和Sketch中来模拟这样的“纸”,新建形状,通过调整透明度和混合模式,或者搭配使用来实现不同的效果,我们还可以调整纸张本身为白色或者黑色,在叠加混合模式下,能对色彩的饱和度产生不同的影响。在有的UI设计项目当中,会借助这样的技术来暂时调整整个区域的敏感色度,这比改色更加轻松,还保持了色彩之间的协调度。

上图中的三种效果:

黑色图层,叠加混合模式,不透明度50%(增加饱和度)
白色图层,正常混合模式,不透明度50%(变亮)
黑色图层,正常混合模式,不透明度50%(变暗)

技巧9:根据前景色来挑选背景色

当我选取背景色的时候,我更喜欢根据前景色来搭配,吸取前景色,调亮或者变暗,而不是选择纯粹的中性灰色。这样的方式会让背景色是或冷或暖的浅灰,给人一种协调的感觉。

技巧10:色彩的明暗与前后

最后,我们应该始终谨记色彩的明暗所带来的视觉深度原理。在较深的背景下,浅色会显得更靠前,而在较浅的背景下,深色会显得突出而靠前。

【2017年的设计趋势都在这里】

  1. 《作为8年DRIBBBLE粉,和设计师聊聊未来的视觉趋势》
  2. 《PS教程!教你打造2017年最受欢迎的渐变幻彩风格》
  3. 《趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?》
  4. 《2017年,这5个网页设计风格可能会成为主流趋势》

原文地址:Medium
原文作者:Patrick Multani
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 浅色还是深色?教你选择合适的界面配色方案!
  • UI配色这件事情,可以指望这6个实用技巧
  • 讲真,这可能是目前最全的在线配色工具合集了
  • 学会给配色做减法,让你的设计更加高端!
  • 超全面!UI设计中的字体配色方法总结
  • 看似简单的单色配色,需要这些技巧帮你玩转
  • 在配色这件事情上,总会有一些有趣且有用的小技巧
  • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
  • 看过那么多UI 配色指南,这篇可能是最全面的(附大量实例)

相关文章

  • 2018-08-23高手课堂!3招搞定数字元素在Banner及专题页设计中的运用
  • 2018-08-23用超多案例,帮你避免交互设计中的「刻板印象 」
  • 2018-08-23新人想要入场视频类H5 设计?你需要了解这些
  • 2018-08-23看似简单的几个动效,在APP中实现过程并不简单
  • 2017-08-06优秀的网页前端设计的一些指标
  • 2018-08-23科普手册!值得新手收藏阅读的界面设计原则
  • 2018-08-23用实战案例,带你解读经典书籍《用户体验要素》
  • 2018-08-23平面高手课堂!系统梳理 LOGO 里的正负形知识
  • 2018-08-23高手小课堂!5个设计思路帮你搞懂平面设计的思维流程
  • 2018-08-23腾讯超全干货!如何让你的动画更自然?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用ps两分钟做个xhtml+css的网站首页
    • 汉堡图标不好使?这5个替代方案帮你搞定移动端导航
    • CSS样式重置和清除(让不同浏览器显示效果一致)
    • 从幽灵按钮到空心元素,它们一直在流行
    • 对div盒子模型使用心得总结
    • 用超多实例,解析「交互设计七大定律」在设计中的应用(下篇)
    • 网页设计与西方建筑的发展历程有何相似之处
    • Blog设计 网页设计之处女作
    • 上亿人使用的3D版QQ黄脸表情是怎么做出来的?
    • 天猫设计师:为什么说不真实的产品测试是无效的?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有