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

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


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

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

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

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

使用渐变

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

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

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

这种设计趋势很大程度上是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

相关推荐

  • 近五年新起的十大热门职业,交互设计5年增长了22倍!

    6,交互设计师/用户体验师
    5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了。

    交互专题 2016-10-25
  • 快速搞定日常专题,我的流程与案列分享

    有一些朋友问我能不能分享一些关于活动专题的,但是我始终觉得我前面分享的已经很多了,在banner上自己去提升和延展就已经是日常的专题活动了。

    2017-05-15
  • “桥”的创想——中安创谷“创业者之桥”设计全球征集于中科大正式启动

    📌 编辑 | P.S3月15日,中安创谷创业者之桥设计全球征集启动会于中国科学技术大学西区成功举办。标志着全球征集活动正式启动。来自中国科学技术大学、合肥工业大学、安徽大学、安徽建筑大学的师生、本地孵化机构负责人、创业团队、媒体代表等近200人参加了启动会。中安创谷科技园是中国当下以“众创空间、孵化器、加速器、产业基地和基金集群”为主要业态的科技园代表之一,“创业者之桥”作为连接一期、二期园区的重要纽带,对园区的整体性及交通流线起着重要...

    2018-03-17
  • App界面交互设计规范

    APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、…

    2015-11-08
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • 做完了产品分析和运营分析,如何做一份视觉竞品分析?

    做好一份竞品分析、输出优秀的设计观点,可能是衡量一个团队专业与否的第一步。

    2017-05-18
  • 产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • 查遗补漏!可能你从未注意过的7个用户体验设计细节

    优秀产品的用户体验设计是贯穿整个设计过程的,从最早的设计阶段便已经开始。所以,完成产品所有的部分之后再想办法为其补做“用户体验设计”是不可能的——你需要打一开始就就将其放在心上。

    2017-05-24
  • 设计师应该了解的“用户记忆理论”

    记忆是人类储存信息的“硬盘”,它可以收集信息,处理信息,并且可以对外界的刺激做出反应。人类可以在需要的时候可以去“硬盘”中调取信息。但是这个“硬盘”有着一些瑕疵,因为它会受到人类机体和情感因素所影响。了解记忆的运行机制,会帮助设计师创建出人性化的界面,节省工作量,提升产品的易用性。

    2017-04-30
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02