查看原文
其他

苹果Google都在用的设计趋势:色彩叠加

The following article is from 我们的设计日记 Author 小洋人

产业的发展离不开CMF(色彩、材料、工艺)







是不是经常觉得自己的设计不够新颖、手法单一,今天我给大家分享大厂都在用的设计趋势-色彩叠加。掌握这个设计手法,会让你的设计更酷哦!

目前CMF设计军团成立了产品色彩交流微信群,诚邀设计师及对色彩爱好者们加入,长按如下二维码或加群主微信18927421646,备注“色彩”,加入产品色彩交流微信群,与行业人士一同交流。



 什么是色彩叠加?


色彩叠加这种风格我们经常可以在很多大厂设计中看到。从它的名字我们就知道这是一种通过颜色混合的一种表现手法。色彩叠加在色彩构成学上叫色料混合, 也叫第二混合。两种或者多种颜色混合后所产生的新颜色,混合的色彩不但色相发生变化,明度和纯度都会产生变化。它是多个颜色通过不同模式进行混合,可以得到不同的颜色,通过色彩模式叠加的运用,让它的细节层次更丰富,色彩的饱和度也高。下面我来解刨一下它的特点,你也可以通过这些特点,轻松掌握这个设计技法哦!


 色彩叠加特点一:邻近/互补色搭配 


在色相环上采用邻近色搭配,颜色多以明亮的高饱和度为主,使得页面更具时尚活泼感。


邻近色是色环相邻的两种颜色,色相在60度以内,这样的颜色搭配色彩过度比较平和也会显得页面有层次。
互补色是色环相对立的颜色,色相相距180度,这样的颜色搭配对比会非常强烈,视觉效果会鲜明。
邻近/互补色在网页的运用

在视觉表现上运用互补色对比,搭配柔和的渐变过渡,给人一种年轻有活力的视觉感受。
邻近色在APP中的运用

明亮的邻近色搭配作为页面的背景、卡片背景设计,页面年轻活泼,通过色彩的叠加,有空间感。

 色彩叠加特点二:混合的质感 

搭配混合模式的运用,营造一种空间感,给页面形成不一样的质感,通过明亮、色相形成一种空间感、层次感、通透,形成不一样的感觉。
混合质感图标中的运用

邻近色色彩搭配作为背景,搭配简单的图形和色彩混合和不透明度运用,整个图形给人一种多彩、通透的视觉感受。

 色彩叠加特点三:简单的几何图形 

通过简单的几何图形,主要是圆形、正方形、三角形等;加上混合模式的质感,给人一种高级感。加上透明度、叠加的光影,简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变,搭配方形的重复色彩叠加,给我的视觉感受是有层次的、立体的空间感。

如图所示,饱和度高的背景搭配几何图形的运用,再运用颜色不透明的渐变,加上形状的重复和变化,使得这个设计给人通透、高级的视觉感受。
几何图形在海报中的运用

很多变化丰富的设计都是通过简单的几何图形处理的,简单的几何图形也可以作为设计的抓手,在暗色背景上,通过几何图形的放大,搭配时尚的混合渐变,这样的效果很有科技感、洋气。

明亮的色彩搭配块面感的几何图形,这样的设计手法是不是很简单。
 色彩叠加在APP上的运用 

这样的几何图形我们在设计网站上经常可以看到,通过重复几何图形的组合加上混合模式的叠加,在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。

通过邻近色/互补色搭配,运用几何图形作为背景装饰,这样的配色与布局会让设计很出彩,并且活泼舒适平和。这样的设计对色彩的搭配要求较高,我们可以通过配色网站进行多种组合搭配练习。

示例是菜鸟的首页,在 banner 入口它运用了色彩叠加的设计手法,同时金刚区的图标也是运用了色彩叠加的样式,整体给人一种年轻、时尚的感受。

色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡,整体呈现的视觉效果还是很时尚、符合主流的设计趋势。
 色彩叠加在icon上的运用 

明亮的颜色搭配混合模式和不透明度,出现出另外一种效果。

色彩叠加运用在icon上居多,饱和度高的色彩加上不透明度的叠加,整体的视觉效果都偏年轻、时尚,如果你的产品是面向年轻的用户,这样的设计手法你可以考虑运用上哦!

这个 app 中,金刚区位置上采用了色彩叠加的视觉手法,通过简单的几何图形,搭配混合模式,使整个页面具有全新的视觉感受,传递的是一种年轻时尚感。
 色彩叠加在品牌上的运用 

Apple 的今年官方宣传采用简单的正方形搭配明亮的色彩,加上不透明度、混合模式的运用,达到不一样的视觉效果。

google 家的品牌升级,我们也看到了最新的趋势,运用 google 经典的颜色,搭配混合模式的渐变,同时具有品牌识别性。

 色彩叠加-设计小教程 

1. 选择深色的颜色(#0A00BC),画一个圆角,填充蓝色渐变背景。

2. 画一个圆,填充红色的渐变,模式选择提亮的效果,剪贴蒙板在圆角背景上。

3. 画第二个大圆,填充红色的渐变,模式选择提亮,透明度调到70%,剪贴蒙板在圆角背景上。

4. 画第三个圆,填充红色-黄色的渐变,模式选择正常,透明度调到85%,剪贴蒙板在圆角背景上。

5. 画第四个圆,填充蓝色的渐变,模式选择提亮,透明度调到90%(可以自己试着调整),剪贴蒙板在圆角背景上。

6. 我们看到示例图交叉处是黄色渐变,把第三个和四个圆进行复制,选择交集,生成一个交叉的图形,把这个交叉的图形改为黄色渐变,模式改为加暗。

7. 最后一步,右下角的高亮,通过蓝色径向渐变,调整到我们满意的效果即可,模式选择变亮,透明度90%。


8. 加上文字效果,这个图标就完成了,是不是很简单,通过不同模式的叠加,出现不同的效果,你也快点试一下吧!


 最后 

色彩叠加这种设计手法经常出现在海报/icon。包括 apple 在品牌宣传上也运用了这种视觉手法,重复运用简单的几何图形,加上混合模式的叠加,构成页面色彩空间感、通透;视觉感受上也有冲击力。我们做设计的也知道往往具有高级感的设计就是通过简单的几何图形加上色彩的混合渐变,也会让我们的设计具有层次感、简约。

免责声明/Disclaimer① 素材来源于我们的设计日记,作者 | 小洋人,已获授权;② 版权归原创作者及其公司所有;③ 若此文章或图片侵犯到您的权益,请与我们联系(微信13713875667)删除。


想了解更多CMF内容吗?欢迎大家点击下方关注我们公众号,每日8点15,定时发布文章。另外,公众号右上角有搜索按钮,可以快速查找平台早期发过的文章内容哦~~


近期精选文章推荐:
三星TWS耳机Galaxy Buds 2发布,采用内外双色拼接设计

小米MIX4轻量化一体陶瓷机身发布,材料工艺及供应商揭秘

前沿技术干货!手机外壳新材料工艺:3D玻纤盖板

超多图 | 不锈钢,CMF设计中的高端材质

超级CMF干货,全球超薄TWS耳机设计全流程+方法揭秘!
采用多晶锆宝石,这款新发布的TWS耳机设计不一般,材料工艺揭秘!
B&O发布最新TWS耳机,采用航空级铝材打造,细节设计赏析
在线加入TWS耳机CMF产业链交流群(附部分入群企业名录)
干货!手机外壳新装饰工艺:IMM模内微结构,免UV注塑纹理
vivo S10发布,采用全新光致变色技术,CMF色彩领域新突破!
传音Infinix电致变色手机,双色流转后盖,融合电发光技术




为探索CMF深度与广度,提升行业水平,军团邀请到:

海尔、美的、格力、西门子、奥克斯、小天鹅、海信、康佳、TCL、松下、奥马、长虹、飞利浦、创维、莱克、科沃斯、苏泊尔、史密斯、美菱、九阳、海派、仁宝、罗技、华硕;Apple、华为、小米、三星、OPPO、联想、中兴、vivo、酷派、魅族、乐视、Motorola、传音、努比亚、奇酷360、一加、美图;微软、intel;宝马、大众、广汽、北汽、上汽、一汽、长安、长城、吉利、海马、江淮、比亚迪、奇瑞、现代、中车、陕汽、东风、潍柴、蔚来、泛亚、小鹏、宝沃、伊狄达、开云、同捷科技;佳普、老板、正大、模德、奥普、樱花、欧普、欧派、顾家、华帝;杜邦、库尔兹、巴斯夫、陶氏、PPG、苏威、阿克苏诺贝尔、3M、艾文德、LG;武汉大学、天津大学、东南大学、湖南大学、吉林大学、江南大学、东华大学、同济大学、中央美院、天津科技、天津工业、广州大学、南京艺术学院、浙江理工、浙江工业、中国地质、南京理工、南京航空航天、北京理工、西南交通、广东工业、华南理工、华南工业、华南农业、安徽农业、哈尔滨理工大学;北京服装学院色彩设计研究中心、中国流行色协会、中国色彩中心、爱色丽&潘通、丽华创新制造、江南大学&卡秀堡辉联合创新实验室、荣格、YANG DESIGN等诸多业界同仁,分别来自家电、3C、汽车、家居、资源方、学术界、第三方平台、设计企业等,共同探索CMF,助力行业发展。


用心研究分享

设计、材料、工艺、趋势、文稿、资讯

CMF设计军团免责说明:本文仅代表作者本人对于行业的个人看法,作为分享交流。本文引用的图文、数据等其它内容,来源于网络或公开资料,版权归原作者及原出处所有,仅用于学习之用。任何商业盈利目的均不得使用,否则产生的一切后果将由您自己承担。如需转载,请与军团联系。


继续滑动看下一个
CMF设计军团号
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存