今天和大家分析的一个就是柔光风格,故名思议,柔光就是整体视觉风格呈现光的折射特征,颜色层次丰富,有明显的光的流动和方向性。
打造自己的设计风格库
熟悉我的设计师朋友都知道的,我工作中一直有一个习惯,就是定期会去归纳总结一些好的设计风格和趋势在我的花瓣和pinterest里面,从我职业生涯最早期就养成了这个习惯。
我一直觉得设计师成长本身就是一个产品,需要每天去更新我们的系统,更新设计资料库,让它像百科全书一样全,丰富,能帮助我们去指导设计方向。
大家回想一下,在我们的学生时代,当我们学习或生活中遇见困难可以去请教老师,让我们更快的成长。但是工作后,职场上却是很残酷的,靠的更多是自己,职场上的丛林法则,优胜劣败,你身边的同事即是合作又是竞争关系,能遇见一个帮你的同事不求回报的,真的很难得,所以说我们需要自己去找到学习的榜样。
我在pinterest上很喜欢一个叫SSG的团队,在韩国相当于国内的腾讯,阿里,他们有一个团队pin账户,设计师每次发现新的风格都会统一的采集到这个文件夹里面。
比如他们有一个频道叫emartmall,类似国内天猫超市,他们团队就建立了一个名为emartmall style的文件夹,把相关生活类的设计放到这个文件夹。然后在日常工作设计中,他们都会往这个方向去沉淀相关的设计风格,保证风格的一致性和流行感。
他们pin文件夹素材。
emart官网的banner,有一段时间,他们的文件夹里面出现了大量水果或食品局部特写,结合文字排版的图片,不久在他们的电商页面就出现了,类似这样风格的设计。
我们不难发现,这些优秀的团队,都是定期更新着团队的素材库,设计风格指南库,去指导他们设计团队的设计方向,所以设计风格指南库,尤其重要,它就是工作和职场中陪伴我们成长的榜样和导师!
柔光风格的特点
之前有提到,现在很多设计师风格局限,技法同质化,作品集呈现风格雷同,差异性不大!
其实UI发展到今天有很多新的风格在出现,只不过我们没有留意到,今天和大家分析的一个就是柔光风格,故名思议,柔光就是整体视觉风格呈现光的折射特征,颜色层次丰富,有明显的光的流动和方向性。
在设计手法上常用渐变、光斑、流动、叠加透明等手法,它的整体视觉感受是年轻、流动、潮流、青春活力等视觉感受!是目前比较新的一种设计手法。
1. 骚气的色彩流动感
柔光风格很大一个特点就是色彩流动感,背景上一般采用多色融合,色彩里面有层次,有流动液体变化,有深浅过度,而不是简单一个渐变,这种色彩光感更像我们生活中自然光,它是丰富多彩。
2. 颜色规律的叠加
这个设计在主图形上运用这种渐变叠加,通过透明度,角度变化叠加在一起,像一只绽放的花一样呈现多样的层次,按钮上也是比较明亮骚气的渐变,同时在底部的曲线上也运用大光斑作为光的点缀,是一个典型柔光的设计案例。
这个案例干净清爽,色彩上一个小清新的渐变,同样三角形部分运用这种白色透明度叠加处理方式,细节简单细腻。
这是我非常喜欢的一个作品,色彩虚实有加,色彩和图形有方向的运动叠加,一个很有空间未来的一个设计。
3. 光斑光晕模糊应用
柔光设计里面很重要的点,光晕,光在设计中一般以圆形呈现,伴随这边缘的模糊,虚化,形成层次。
光斑的运用,简单有效,透过白色光斑很好形成界面里面空间层次和流动感。
▲这是一个典型运用光斑来形成整体柔光感的案例,主图形就顶部一个紫色的光斑,在白色背景上,运用一个粉色的光斑效果,底部的三个核心图形同样运用这种设计手法,整体配额色协调,页面信息干净。
4. 发光
既然是光感的设计,就一定得有光,外发光,内发光,当然光能做到干净通透是很考验设计师技法的点,一不小心就会糊成一片,上图就是光处理的非常干净利索的案例。
非常典型的韩国设计,背景用色大胆,特别绿色光在底部,让整个页面洋气十足。
很科技,很未来的设计,伴随着颜色光影的运用,siri刚出来的时候,那个光影动效就惊艳到我了,看国外这些大师把颜色和光影融合的鬼斧神工。
线条的光运用,光晕的运动,方向色彩的变化,都是柔光设计的很重要细节。
UI中的运用
在(左图)扫描页面中,核心图形运用波浪透明叠加线条作为页面核心焦点,背景底部运用骚气渐变和光晕,形成丰富层次,(右图)的背景和插画部分也是大量运用这种手法。
三角形的光影,圆形的光影,曲线,点的内文发光,背景的细节柔光处理,让页面呈现出科技梦幻视觉感受。
光的运用,光晕,内外光的运用以及撞色光影运用,页面让人过目难忘。
同样的手法,运用到白色,黑色背景都能呈现出不一样效果。
一组天气的设计,同样运用重叠,颜色叠加的手法配合动效的运用,让天气像花一样绽放。
水的透明,光的璀璨夺目,眼前一亮的设计,在白色的背景上也能呈现出这种高级感。
光影的运用,特别喜欢底部那个行动按钮,是整个页面的亮点所在,页面滑上去时后面背景的虚实变化特别细腻。
这种风格在营销页面中也运用比较多,手法也不是一成不变,可以结合画面特别去灵活调整,更多案例可以去我pinterest去围观。
图标中的运用
在图标设计中,这种手法也是常见的,图标本身配合简单的几何图形让整个设计印象深刻。
这些骚气的表现技法,我想大家都见过,但是你是否有去掌握,去练习?其实去画都不难,关键是学以致用,我们怎么样才能把这种技法发挥到极致,好的趋势需要我们在项目中落地实践。
在图形中其实稍加这么一点点细节和透明度,柔光进去,图标就会细腻许多。
平面中的运用
电商促销海报中,在背景上运用这种柔光设计,设计显得更加年轻趣味。
sweet官网设计,充满了甜蜜的味道,特别是冰棒的设计,通透有质感,色彩丰富。
海报的设计,有角度图形透明穿插,仿佛打开未来之门一样,科技和未来感十足。
插画中的运用
这套插画应该很多人看到过,非常有设计感一套,作者对于光感和透明度的运用细腻逼真,每一个作品都呈现出很美的设计感,对于光影的运用也是很细腻和极致。
ghanipradita的系列插画里,我们也能发现这种通过光的运用,让页面呈现出细节更丰富视觉效果。
光晕重叠,骚气渐变构成了时尚的一组插画设计
最后
当下越来越多的设计师作品风格雷同,如何在设计里面找到自己定位,设计手法多样性是需要每个设计师去思考的,大家一定要跳出自己擅长的舒适区域,去多学一些你不会的,像产品一样去迭代自己,让自己变的更好!