译文|在设计项目中,如何合理地使用色彩叠加效果

色彩几乎是所有设计中都至关重要的组成部分,无论是明亮大胆的配色方案,还是简约的黑白色调,你的用色将会直接影响整个设计的实际效果。


色彩几乎是所有设计中都至关重要的组成部分,无论是明亮大胆的配色方案,还是简约的黑白色调,你的用色将会直接影响整个设计的实际效果。

译文|在设计项目中,如何合理地使用色彩叠加效果

近两年,在色彩运用上有许多值得一提的手法,其中最有意思也最常见的应该就是色彩叠加。使用半透明的色块(纯色或者渐变)叠加到图片或者视频上,这种效果能够强化图片本身的氛围,赋予含义,并且更好地吸引用户的注意力。

今天我们来深入聊聊这种色彩使用技巧在实际运用中,需要注意的问题和值得探究的做法。

使用渐变

译文|在设计项目中,如何合理地使用色彩叠加效果

首先,渐变作为一种设计趋势,再次回归了。当你想为特定的元素叠加色彩的时候,可以尝试使用某个醒目的渐变色叠加上去。

渐变色的好处在于,你可以使用多种不同的色彩一起构成渐变(比如品牌色),也可以使用某一个色彩进行深浅、明度、饱和度上的渐变,这样的设计会显得更加集中。明亮的配色方案会更加吸引用户用户,让图片呈现出某种独特的气场。

这种设计趋势很大程度上是Spotify 起的头,他们在播放列表中使用了迷幻味十足的双色渐变效果,让唱片封面和艺术家头像变得更加富于艺术韵味。

搞定这样的设计非常简单:

  • 选取一张照片
  • 使用品牌色创建渐变色彩叠加
  • 完成!

使用纯色定基调

译文|在设计项目中,如何合理地使用色彩叠加效果

纯色的叠加效果其实和渐变一样醒目,不过纯色相比于渐变所呈现的意义和氛围会更加明确。比如,在图片上叠加上棕色能够呈现出一种历史的厚重感。

如果你选择当前的流行色,功用和效果也是类似的。使用这些明亮、鲜艳的流行色的同时,结合扁平化设计或者Material Design的设计风,你的页面和UI会明显地呈现出一种现代主义和时尚的感觉。

当你在叠加纯色的时候,应当仔细考虑一下色彩的饱和度和透明度。这些因素其实都是有意义的。叠加的色彩图层拥有高饱和度和低透明度的时候,用户会更多关注色彩本身;当叠加的色彩拥有低饱和度和高透明度的时候,用户会更容易被底层的图像所吸引。

考虑明暗

译文|在设计项目中,如何合理地使用色彩叠加效果

当然,许多色彩并不全都是靠有色半透明图层叠加出来的,有时候仅仅是使用单纯的黑白灰来叠加,创造出不同的明暗效果,这样也能很好的实现一些效果。

正如你所想,当图像更加沉郁阴暗的时候,压抑沉重的氛围自然而然就出现了,而图像偏白色彩变浅的时候,往往会显得更加轻松,或者说更加飘忽。这个时候,并不需要单独叠加黑色或者白色,只需要调整图片本身的明度即可。

上面所显示的这个名为 Call me lsh 的网站中,设计师在背景上覆盖了一层半透明的白色,让用户的专注点集中到前景的文字上去,但是背景的摄影师微笑的表情依然潜移默化地影响着用户的情绪。色彩和图片的组合让访客不知不觉地同背景的摄影师产生了情绪上的互动,也许很快会打动他们雇佣这名摄影师也说不定。

选择高对比度的图片

译文|在设计项目中,如何合理地使用色彩叠加效果

译文|在设计项目中,如何合理地使用色彩叠加效果

当你想要在设计项目中使用色彩叠加这种技法的时候,置于底层的图片或者视频是最重要的组成部分。一张平庸的图片不管你怎么叠加色彩都很难达到惊艳的效果,而图片本身如果有着良好的对比度,那么能够在叠加图片之后构成漂亮的明暗效果,将设计的优势最大化。

当然,如果图片的可选范围本身就不大,那么最好尝试使用PS之类的软件先提升图片的对比度,否则实际效果是不会太好的。

想要达成好效果的方法有很多,另外一种方法就更加简单粗暴了:从黑白的图片开始着手。对于初学者而言,黑白图片的对比度更容易控制。上面的Just Actions 这个网站就是采用黑白色调的突破背景,搭配彩色的半透明图层。

要么自然,要么失真

译文|在设计项目中,如何合理地使用色彩叠加效果

当你开始使用色彩叠加到图片和视频上的时候,有两种处理方法:

  1. 图片尽可能自然。色彩、明暗、阴影都应该处于自然的状态,叠加的色彩应当尽可能微妙,比如上面那个Abednego Coffee 网站。
  2. 图片完全异化。用完全出乎意料的色彩叠加在图片上,创造出独一无二的效果。本文中绝大多数的案例都是这么做的。

介于两者之间的案例很少,可以说这两者是完全对立的。这么设计的好处在于,用户会更加专注于网站内容,强化整体的设计感。

尝试部分叠加

译文|在设计项目中,如何合理地使用色彩叠加效果

译文|在设计项目中,如何合理地使用色彩叠加效果

前面绝大多数的案例都将半透明的色彩图层叠加到大块的图片内容上,但是这并不是唯一的选择。部分叠加同样可以带来不错的效果。

Knot Clothing 这个网页采用了绿色的导航栏,其上叠加了半透明层,看起来效果相当不错。

Nuts and Woods 这个网站则换了一种玩法,当光标悬停在特定的内容区块上的时候,半透明层就叠加到上面,提示用户这些内容是可点击的。这个半透明的叠加层作为视觉线索而存在,提供内容浏览的路径。

结语

色彩叠加的效果并不是万能的,至少不是所有的项目都适合使用的一项效果,所以当你在进行设计的时候,应当尽量避免过度使用。

 

原文作者:CARRIE COUSINS

原文地址:designshack

翻译:陈子木

译文地址:http://www.uisdc.com/how-to-design-color-overlays

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27201/

(0)
CatherineCatherine
上一篇 2017-05-17 03:07
下一篇 2017-05-17 04:57

相关推荐

  • 让产品经理无言以对的交互设计流程

      首先,要感谢我的 Leader 和师姐,在他们的帮助下,我才理清了这个交互设计流程。   虽不敢说这套方法一定是最优的,但至少是我工作以来一个的专业上里程碑。   话不多说,直接开讲。   日常…

    2017-03-06
  • 5个优质的设计师导航网站汇总

    作为一名设计师想要设计出比较优秀的设计作品(包括网页设计和移动APP设计),除了拥有熟练的设计技能外,还需要拥有出众的创造力和审美。当然,如果你也有非常强的临摹能力也是不错的。 如果你对生活和万事万物没…

    2015-12-23
  • 用户体验与seo并重的域名选择

    谈及网站域名的选择,在搜索引擎优化中,域名权重一直是困扰SOE优化的难题,因为域名权重和其他外部、内部优化不同,并不能在短时间内取得很好的效果,但是各大搜索引擎在各自的排名算法中,对域名权重“估分”却是较为重要的。在域名权重被提及初期,很多优化们使用各种各样的方法,对域名权重是否真的存在进行了繁杂的测试—毕竟各大搜索引擎的排名算法是绝对的核心商业机密,是不可能公开所有细节的。据了解经过各种测试,最后的结果均表明,域名权重在搜索引擎排名中...

    2018-04-20
  • 院士谭铁牛:人工智能的10件大事和10大趋势

    8月26日至27日,2016中国人工智能大会(CCAI 2016)在北京召开,在26日的主题报告环节,中国科学院副院长、中国科学院院士、中国人工智能学会副理事长谭铁牛先生做了题为《关于人工智能发展的思考》的主题演讲。

    2016-08-31
  • 18个UI demo设计实例,深挖让用户愉悦的小惊喜

    文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例,希望对大家有所启发。

    2017-05-11
  • 便宜的指纹锁也会有“便宜”的用户体验

    欢迎关注:CDTV-1周一至周五晚7:30—7:40全国首创电视融商节目《天天橙掌柜》。很多指纹锁在你跟老板杀完价的那一刻是开心的用的时候并不是那么开心的例如说:外观掉漆脱落了把手松动了指纹录不进或不好打开了说好的密码备用关键时刻掉链子了配的机械钥匙太low了电池没过多久就没电了指纹锁没用多久就得找师傅上门维修了等等等等,烦心吗?趁着特价,换吧智能门锁吧超B级锁芯多种开门方式让你的生活更省心省力橙掌柜家庭安全节德施曼小嘀S8云智能门锁只...

    2018-03-09
  • 经验总结|交互设计文档该怎么写?

    交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。

    2017-04-29
  • 设计的三个层次,帮你重开情感化设计的大门

    我们正在进入一个信息复杂度远超以往的时代。我们所面对的是一个物质和信息都极大丰富的世界,从产品竞争的角度上来说,越来越激烈的对抗和冲击是必然的。许多产品已经从单纯的“谈配置”过渡到了“谈感情”的阶段,情感化设计已经在不同的设计领域中崭露头角,甚至成为了最核心的组成部分。

    2017-05-15
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09