平时对设计趋势关注的同学一定不会对上图设计风格陌生,来自知名音乐软件Spotify,这个风格叫做双色调,今天和大家分享下这个风格的设计特点以及如何去做。


  双 色 调 设 计 特 点  


它的特点是通过改变图片原有色调,在原图基础上去添加一些对比柔和或者明亮的颜色,通常使用充满活力的色调,能很好的刺激用户,形成新的认知。下面我找了一些黑白照片加上这些双色调后所呈现出来的效果,是不是普通旧照片瞬间就焕发了新的设计活力。




老旧的黑白照片,通过对颜色的叠加、滤色已经被赋予了一种新的设计艺术感。Spotify音乐软件正是通过对音乐专辑处理使得整个产品和其他的产品风格调性上拉出巨大差异。





Spotify这几个专辑封面,使用这种华丽的色调效果,基本成为它品牌识别度非常重要的记忆点,从紫色到绿松石绿色,使界面达到全新的水平。




  看 看 别 人 如 何 做 的  


1. Spotify 应用软件



注册页面采用的蓝色叠加,很巧妙的烘托出整个设计调性,从首页进去每个封面图很好的采用绿色柔和的渐变结合一些背景文字很好的成为了专辑的一个点。


2. Apple Music 应用软件



17年苹果在Apple Music设计改版中也加上了这种双色调设计语言在产品中,只是细节上有些不同,在启动页面上采用的一个彩色渐变叠加,在匹配歌手界面中同样采用红色调叠加的圆形,使得页面整体设计感加强很多。




在专辑图片以及个人介绍页面,融于这种双色调色彩,让整个画面华丽的同时增加几分设计感。



同样也可以把这种效果运用到界面的引导页面、专辑页面、个人头像页面等等,需要去发挥更多的创意。


  双 色 调 在 网 页 中 的 运 用  


双色调是最近几年新起的一种设计趋势,它的设计特点,对比大胆,饱和度高同时能产生一些有调性的设计情感,在移动和网页端也越来越多的被运用。




adidas 网页通过绿色和蓝色的互补,很好的捕捉了这种体育运动精神。



New Deal Design 采用明亮的粉红色和黄色色调之间的对比强烈,整个设计风格非常醒目。



Solid Giant 红色能很好的传递出火箭升空的感受。



snippet 则一个蓝色到绿色渐变,冷的色调让这个界面看起来让人值得去信赖。



在这个页面中,每个部分采用了4种配色,但是整体看起来并不违和,同时使得人物形象更加突出。



pro-creation 采用了双色调设计,很好的把自由女神像这些知名建筑结合到了30的0中,非常有设计感。



Uber在展现VR的官网设计中也是采用这种红色双色调设计,整体看起来非常有科技感。


  其 他 领 域 中 运 用  



海报中的运用



背景中的运用



人物摄影中的运用



插画中的运用



图标中的运用


  双 色 调 的 设 计 技 法  


双色调技法很简单,就是通过高饱和度的颜色在图片上进行叠加、混合、滤色等等模式,具体模式需要大家在实际效果中不断尝试,下图为在Sketch中的事例。


1.线性光叠加效果




2.PS动作一键生成


在PS里面采用动作一键生成,也可以去网上下更多的这种动作插件帮你实现完美的效果。




链接: https://pan.baidu.com/s/1qYDhmBa 密码: 9xau


3.代码自动添加效果


这里就需要开发GG来帮忙了,像spotify里面效果应该都是代码实现的,这里有一个开源代码,可以叫程序GG帮忙研究。


https://github.com/fabricelejeune/jquery-duotone



不愿在朋友圈谈的事情,来【知识星球】吧。在这里你会遇见1630位全国优秀设计师,大家一起交流探讨,营造出不同于朋友圈的氛围,拥有更多正能量、学习氛围,我愿每周与你分享:100天打卡、设计经验、工作方法、作品点评、简历评估、最新视觉趋势和努力方向,以及如何培养自己产品思维、提升交互能力、定义和把控一个产品等!


本篇文章来源于微信公众号: 我们的设计日记