ui设计中柔光风格的表现和设计技法

熟悉我的设计师朋友都知道的，我工作中一直有一个习惯，就是定期会去归纳总结一些好的设计风格和趋势在我的花瓣和pinterest里面，从我职业生涯最早期就养成了这个习惯。

我一直觉得设计师成长本身就是一个产品，需要每天去更新我们的系统，更新设计资料库，让它像百科全书一样全，丰富，能帮助我们去指导设计方向。

大家回想一下，在我们的学生时代，当我们学习或生活中遇见困难可以去请教老师，让我们更快的成长，但是工作后，职场上却是很残酷的，靠的更多是自己，职场上的丛林法则，优胜劣败，你身边的同事即是合作又是竞争关系，能遇见一个帮你的同事不求回报的，真的很难得，所以说我们需要自己去找到学习的榜样。

▲我在pinterest上很喜欢一个叫SSG的团队，在韩国相当于国内的腾讯，阿里，他们有一个团队pin账户，设计师每次发现新的风格都会统一的采集到这个文件夹里面。

▲比如他们有一个频道叫emartmall,类似国内天猫超市，他们团队就建立了一个名为emartmall style的文件夹，把相关生活类的设计放到这个文件夹。然后在日常工作设计中，他们都会往这个方向去沉淀相关的设计风格，保证风格的一致性和流行感。

▲他们pin文件夹素材

▲emart官网的banner，有一段时间，他们的文件夹里面出现了大量水果或食品局部特写，结合文字排版的图片，不久在他们的电商页面就出现了，类似这样风格的设计。

我们不难发现，这些优秀的团队，都是定期更新着团队的素材库，设计风格指南库，去指导他们设计团队的设计方向，所以设计风格指南库，尤其重要，它就是工作和职场中陪伴我们成长的榜样和导师！

柔 光 风 格 的 特 点

之前有提到，现在很多设计师风格局限，技法同质化，作品集呈现风格雷同，差异性不大!其实UI发展到今天有很多新的风格在出现，只不过我们没有留意到，今天和大家分析的一个就是柔光风格，故名思议，柔光就是整体视觉风格呈现光的折射特征，颜色层次丰富，有明显的光的流动和方向性，在设计手法上常用渐变，光斑，流动，叠加透明等手法，它的整体视觉感受是年轻，流动，潮流，青春活力等视觉感受！是目前比较新的一种设计手法。

1.骚气的色彩流动感

柔光风格很大一个特点就是色彩流动感，背景上一般采用多色融合，色彩里面有层次，有流动液体变化，有深浅过度，而不是简单一个渐变，这种色彩光感更像我们生活中自然光，它是丰富多彩。

2.颜色规律的叠加

▲ 这个设计在主图形上运用这种渐变叠加，通过透明度，角度变化叠加在一起，像一只绽放的花一样呈现多样的层次，按钮上也是比较明亮骚气的渐变，同时在底部的曲线上也运用大光斑作为光的点缀，是一个典型柔光的设计案例。

▲ 这个案例干净清爽，色彩上一个小清新的渐变，同样三角形部分运用这种白色透明度叠加处理方式，细节简单细腻。

▲ 这是我非常喜欢的一个作品，色彩虚实有加，色彩和图形有方向的运动叠加，一个很有空间未来的一个设计。

3.光斑光晕模糊应用

▲ 柔光设计里面很重要的点，光晕，光在设计中一般以圆形呈现，伴随这边缘的模糊，虚化，形成层次。

▲ 光斑的运用，简单有效，透过白色光斑很好形成界面里面空间层次和流动感。

▲ 这是一个典型运用光斑来形成整体柔光感的案例，主图形就顶部一个紫色的光斑，在白色背景上，运用一个粉色的光斑效果，底部的三个核心图形同样运用这种设计手法，整体配额色协调，页面信息干净。

4.发光

▲ 既然是光感的设计，就一定得有光，外发光，内发光，当然光能做到干净通透是很考验设计师技法的点，一不小心就会糊成一片，上图就是光处理的非常干净利索的案例。

▲ 非常典型的韩国设计，背景用色大胆，特别绿色光在底部，让整个页面洋气十足。

▲ 很科技，很未来的设计，伴随着颜色光影的运用，siri刚出来的时候，那个光影动效就惊艳到我了，看国外这些大师把颜色和光影融合的鬼斧神工。

▲ 线条的光运用，光晕的运动，方向色彩的变化，都是柔光设计的很重要细节。

U I 中 的 运 用

▲ 在（左图）扫描页面中，核心图形运用波浪透明叠加线条作为页面核心焦点，背景底部运用骚气渐变和光晕，形成丰富层次，(右图）的背景和插画部分也是大量运用这种手法。

▲ 三角形的光影，圆形的光影，曲线，点的内文发光，背景的细节柔光处理，让页面呈现出科技梦幻视觉感受。

▲ 光的运用，光晕，内外光的运用以及撞色光影运用，页面让人过目难忘。

▲ 同样的手法，运用到白色，黑色背景都能呈现出不一样效果。

▲ 一组天气的设计，同样运用重叠，颜色叠加的手法配合动效的运用，让天气像花一样绽放

▲ 水的透明，光的璀璨夺目，眼前一亮的设计，在白色的背景上也能呈现出这种高级感。

▲ 光影的运用，特别喜欢底部那个行动按钮，是整个页面的亮点所在，页面滑上去时后面背景的虚实变化特别细腻。

▲ 这种风格在营销页面中也运用比较多，手法也不是一成不变，可以结合画面特别去灵活调整，更多案例可以去我pinterest去围观。

图 标 中 的 运 用

▲ 在图标设计中，这种手法也是常见的，图标本身配合简单的几何图形让整个设计印象深刻。

这些骚气的表现技法，我想大家都见过，但是你是否有去掌握，去练习？其实去画都不难，关键是学以致用，我们怎么样才能把这种技法发挥到极致，好的趋势需要我们在项目中落地实践。

▲ 在图形中其实稍加这么一点点细节和透明度，柔光进去，图标就会细腻许多。

平 面 中 的 运 用

▲ 电商促销海报中，在背景上运用这种柔光设计，设计显得更加年轻趣味。

▲ sweet官网设计，充满了甜蜜的味道，特别是冰棒的设计，通透有质感，色彩丰富。

▲ 海报的设计，有角度图形透明穿插，仿佛打开未来之门一样，科技和未来感十足。

插 画 中 的 运 用

▲ 这套插画应该很多人看到过，非常有设计感一套，作者对于光感和透明度的运用细腻逼真，每一个作品都呈现出很美的设计感，对于光影的运用也是很细腻和极致。

▲ ghanipradita的系列插画里，我们也能发现这种通过光的运用，让页面呈现出细节更丰富视觉效果。

▲ 光晕重叠，骚气渐变构成了时尚的一组插画设计

最 后

当下越来越多的设计师作品风格雷同，如何在设计里面找到自己定位，设计手法多样性是需要每个设计师去思考的，大家一定要跳出自己擅长的舒适区域，去多学一些你不会的，像产品一样去迭代自己，让自己变的更好！

--END--

原创： sky

公众号：我们的设计日记