前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >双色调设计,两个颜色就够了

双色调设计,两个颜色就够了

作者头像
腾讯大讲堂
发布2018-09-04 17:23:48
1.4K0
发布2018-09-04 17:23:48
举报
文章被收录于专栏:腾讯大讲堂的专栏
本文作者:沈明,腾讯视觉设计师 

在为智能音箱设计品牌图像时,面对如何能更好体现出产品在“音乐”上的特质这个问题,我们寻找和尝试了很多方案,最终选择了双色调设计(Duotone)来展现音乐现场的独特氛围:这是一种在灯光笼罩下由声音、听众、乐手、乐器交织而成的音乐会现场感。表达不同情感的歌曲,现场会出现不同的灯光氛围。双色调设计能最大限度体现这种音乐会的现场感。

腾讯听听音乐海报设计

腾讯听听内测版包装设计

双色调设计来源于双色印刷和波普艺术

双色调设计(Duotone)来源于双色印刷,主要指两种颜色油墨的混合印刷,可以是黑色+专色或专色+专色。

双色印刷作品

这种视觉表达方式,我们在波谱艺术家安迪·沃霍尔的具有强烈色彩张力的丝网版画作品中也可以发现端倪。他的作品减少了黑白灰和色彩的细腻过度所带来的真实感,以强烈的色块碰撞来吸引观众的注意力。双色印刷和波普风格在视觉表现上的张力为当下的设计师提供了很多灵感启发,并展开了风格上的延续。

安迪•沃霍尔作品

双色调设计的特点:氛围感、吸引力、普适性

双色调设计通过改变图像的色调,以两种颜色重新诠释图像,形成了新的视觉感受和认知。其特点在于:

1.明确的氛围感:双色方式处理过的图像,相比普通彩色图像,可以更明确的表现特定氛围,传达情感。电影月光男孩的海报设计,用三组不同的双色表现主角在不同年龄阶段的状态,用颜色的对比来暗示故事情节的发展。而火星救援的海报设计,突出了在火星这个特定环境下的艰难氛围,让观众提前感知到主角的处境,为情节的展开做好铺垫,有极强的代入感。

《月光男孩》和《火星救援》海报

2.吸引力:由于双色设计的图像处理通常采用减少画面层次,加强对比的方式,使其具有强烈的色彩张力和视觉冲击力。英超联赛的全新品牌设计,采用双色设计结合扁平化的手法,创造了一个鲜活有力的品牌形象,这种视觉表达方式被贯穿到线上和线下的所有品牌服务触点,它强烈的吸引力适合现代媒体传播的需要。

英超联赛品牌设计

3.适合多种设计领域:如上所见,双色调设计可以应用到多设计领域,在摄影、插画、海报、书籍设计、界面设计等领域都有好的案例。

双色设计的应用:色彩、细节、面积、信息传达

1.邻近色和对比色的使用:双色设计中的两种颜色可以是邻近色,也可以是对比色,甚至是互补色(撞色)。不同颜色搭配会产生不一样的情绪和氛围。

下面例子中的两个网页设计都采用了邻近色的双色调来处理背景图像,使背景颜色统一,不会干扰到前面主要文字信息的传达和控件的识别。用户被双色调的背景吸引后,注意力会聚焦在文字和按钮。

邻近色的双色设计

2.对比色的双色调设计会带来更强烈的视觉冲击,适合用来强调某些特征。Spotify的音乐海报,采用对比色的双色调和具有运动感的抽象图形,表现音乐的节奏和动感。

对比色的双色设计

对比色的双色调结合中性色使用(白色或黑色),带来视觉吸引力的同时,可以调和颜色的冲撞,带来一种平衡。深泽直人设计的infobar(2003-2015)系列手机,用红色和粉蓝的对比来处理块状的按键,同时以近似白色来调和对比,形成独特的视觉风格,并一直延续这种颜色对比的设计到不同时代的手机上,从而吸引了大批用户。

对比色的双色设计

3. 双色设计还需要根据传达的信息对图像的细节做保留和取舍,例如月光男孩的海报形象为了显示皮肤的质感和肌理,就需要清晰的细节还原。而在某些情况下,我们要传达的是整体的氛围和情感,可能就需要减少不必要的细节内容,概括去的展现图像

保留丰富的图像细节

减少不必要的细节,突出氛围

4.不论是大面积的使用,还是在一些小的点上,双色设计都可以起到重整图像和图形的色彩关系,带来新的视觉感受,吸引用户注意的作用。

小面积的使用双色调  

总结

双色调设计(Doutone)是一种设计趋势,具有很强的视觉吸引力。

我们在使用时需要选择合适的色彩和对比度关系,结合图像和图形的特点,表现出恰当的氛围和情感。

颜色的挑选是一个创造性的过程,会有很多意外的惊喜,让我们一起来试试吧。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-09-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯大讲堂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档