经常帮很多同学看设计作品，但看完大多都没让我留下什么印象，也就是没有让人觉得眼前一亮的点；什么是眼前一亮呢，其实就是作品中是否有不错的想法和视觉亮点，运用潮流趋势就是一种吸引目光的手段，你的设计中是否运用了当下主流设计趋势？你的设计在版式，构图色彩上是否有不错的表现？在当下同质化严重的背景下，我们需要去发现趋势，去总结规律，同时，也要学会思考如何把这些好的设计趋势，很好的落地到自己项目中去。

大公司引领

那么设计趋势可以怎么获取到呢？一般有几种情况：大公司的引导，比如apple,google这些国际大公司产品的更新， 因为其足够大的影响力，也具备相对资深的设计团队，所以他们每一次项目重大的改版都能影响整个设计圈的变革和潮流！

▲比如ios去年推行了暗黑模式，就有不少产品及时跟随做出适配。

设计师挖掘

另外一种形式就是设计师引领变革，每年都会一些新的设计手法被优秀设计师们发掘出来，一般在综合类网站如dribbble和behance上先火起来，受到大批设计师的追捧，比如前不久兴起的新拟态风格，和越来越多的3d插图等等。

▲尤其3d插图是今年比较流行一种手法，运用这种立体元素来营造整体的视觉空间感，这种形式能很好的和其他产品拉开差异性，同时更好的传递信息，但是需要注意这种风格和页面其他元素之间的协调性。

▲包括根据内容定制的扁平插图，设计师通过这种轻快的色彩，让整个设计活泼轻盈，同时更符合当下年轻人群的审美，这些风格也大多数能从设计网站上感知到

总之，设计风格需要我们定期去归纳和总结，需要我们在平时看设计时候，多留一分洞察行业变化的心思，提炼出趋势运用到我们设计里面去，关于更多的设计趋势可以去我Pinterest看，我会定期总结分享出来的！

▲https://www.pinterest.jp/uiskys/boards/

泡沫和斑点风格 

前面我们分析了：趋势的由来，一般是由国内外知名公司比如苹果，谷歌，或者知名产品淘宝，天猫双11等等通过影响力带领，那么另外一种就是设计师发掘的，本周和大家分享：泡沫和斑点的设计风格，为什么叫泡沫和斑点，其实是我虾扯蛋取的，叫什么风格，自己定义为什么趋势不用太在意，你能GET到那个风格代表的核心元素和含义就行

这种风格运用很广，无论在平面设计，还是UI设计、插画设计中，最近都频繁的出现，我们今天就来分析下这个风格的特点？

它的特点 

随机形状

在形状上，没有明确的特点和规律，都散落在界面的各个角落，图形大多是圆形，也有流动的不规则图形，他们都没有绝对的规律，排布也很随机，质感上则扁平，立体，渐变都有，看起来特别像我们生活中常见的气泡。

▲Wed ze这个网站就是运用这种椭圆流动的气泡，让整个页面形成一种流体风格，动感同时也很时尚，很能体现出产品AR/VR的行业特征

▲同样的Scotsman这个网站同样运用气泡来布局，通过气泡很好的散落在画面两侧，配合微动效，整个页面更加的灵动和有趣，同时画面中间也是利用了这种气泡风格来突出焦点

▲sweet同样采用了流动不规则气泡作为整个设计主风格，流动同时很时尚

▲液体动态汇合，透过气泡融为一体，形成和水一样灵动自由的效果

多元质感

立体：质感上有很多表达形式，可以运用C4D做出这种立体糖果色，它使得整个视觉风格比较突出，画面冲击力强，适合运用在一些重视觉偏营销的场景下

扁平+色彩叠加：除了立体质感风格，扁平化和色彩叠加也运用的比较多，色彩更为通透，整个画面节奏也更容易把控，配合动效视觉效果更佳

渐变+微质感：和扁平叠加风格不同，微拟物结合一些弱投影和渐变撞色让整个设计看起来更加的现代

图案填充：这种效果比较特殊，在圆角气泡里面填充图案，图形，整个设计会瞬间提升潮流感。

明亮色彩

在色彩上，这种风格色彩比较明亮，类似马卡龙配色风格，这样配色更能凸显它的多变和丰富多彩，当然同色系的搭配，也能表现出官方，科技感的一面

▲比如上图对于橙色的运用

运用场景 

对设计趋势关注的最后，我们一定要去思考落地；否则就很不能算已经掌握了这个趋势。

网页中的运用

网页中，气泡可以作为构图中心，通过构图形式很好的融入这种风格，也可以作为产品类型网站的装饰性元素，使页面更丰富有趣的

界面中的运用

界面中，可以作为动态导航，或者菜单来设计，让整个产品调性更加年轻化，通常作为个性化的表达

在一些动态可视化，或者智能场景中运用，或者在一些特殊内容表达上运用这种布局形式，和内容很好的形成一种互动

作为界面中的DNA，比如上图就是运用气泡作为设计DNA在启动界面和登录页面都运用气泡到极致

其他场景

除了在网页运用，其实在平面设计，LOGO设计，插画设计中，这种气泡风格，也同样适用，关键在于我们如何去灵活搭配组合。

总结 

今天的分享，更多只是抛砖引玉，希望大家养成这种培养视觉洞察力的习惯，去发现一些设计行业的规律，并学会掌握规律的变化，这样才能让自己的设计不断进步，做出让人亮眼的作品！加油！

文中图片来源网络，侵权删 / 题图：Peter Tarka

原文地址：我们的设计日记

作者：sky

最终效果

<点图片查看大图>

1、打开PS软件，按Ctrl + N 新建画布，尺寸为1920 * 1080像素，分辨率为72像素/英寸，如下图。

2、把前景色设置为蓝灰色#a4b0b5，然后用油漆桶工具把背景填充前景色。

3、先来制作气泡的高光部分，需要完成的效果如下图。

4、新建一个组，命名为“高光”。

5、在工具箱选择“椭圆选框工具”，羽化设置为0像素。

6、用椭圆选框工具拉出下图所示的椭圆选区。

7、点击图层面板下面的蒙版按钮，添加蒙版，如下图。

8、设置高光颜色，高光统一用下面的颜色，不是纯白。把前景色设置为淡灰色#f3f3f5。

9、在组里新建一个空白图层，用油漆桶工具填充前景色。

10、按住Ctrl键 + 鼠标左键点击当前组的蒙版缩略图载入选区。

11、选择菜单：选择 > 修改 > 收缩，数值为5。

12、按Shift + F6 把选区羽化8个像素。

13、按Delete键两次，删除选区部分色块，按Ctrl + D 取消选区，再把图层不透明度改为50%，如下图。

14、新建一个图层，用椭圆选框工具拉出下图所示的选区。

15、用油漆桶工具把选区填充前景色，按Ctrl + D 取消选区，效果如下图。

16、用椭圆选框工具拉出下图所示的选区，并把选区羽化10个像素。

17、按Delete键两次，删除选区部分色块，取消选区后效果如下图。

18、新建一个空白图层，用钢笔工具勾出下图所示的选区，羽化5个像素后填充前景色。

19、取消选区后添加图层蒙版，选择画笔工具，画笔不透明度设置为10%，前景色设置为黑色。

20、用画笔把高光两端过渡涂抹自然，如下图。

21、新建一个图层，用钢笔工具勾出下图所示的选区，羽化2个像素后填充前景色，取消选区后把混合模式改为“滤色”。

22、新建一个图层，用椭圆选框工具拉出下图所示的选区，羽化40个像素后填充前景色，然后取消选区。

23、添加图层蒙版用刚才设置为画笔擦掉一些不需要的部分，效果如下图。

最终效果

1、新建一个600 * 600像素的文档，背景填充暗蓝色：#072A89，新建一个图层，用椭圆选框工具拉出下图所示的正圆选区，填充跟背景相同的颜色，如下图。

2、新建一个图层，按Ctrl + Alt + G 与前一图层编组。然后在当前图层下面新建一个图层，用钢笔勾出下图所示的选区，羽化8个像素后填充白色。取消选区后添加图层蒙版，用黑色画笔把两端的过渡稍微涂抹一下，大致效果如下图。

3、调出正圆选区，新建一个图层，选择菜单：编辑 > 描边，宽度4，取消选区后效果如下图。

4、执行：滤镜 > 模糊 > 高斯模糊，数值为4，确定后把图层不透明度改为：45%，效果如图。

5、新建一个图层，用钢笔勾出下图所示的选区，按Shift + F6羽化3个像素后填充白色。取消选区后用涂抹工具把边缘涂抹一下，局部用模糊工具稍微模糊处理。然后添加图层蒙版，用黑色画笔把边缘过渡擦出来，效果如图。

6、新建一个图层，用钢笔勾出左边高光部分的选区，羽化2个像素后填充白色。取消选区后添加图层蒙版，用黑色画笔把右边过渡擦出来，如下图。

7、新建一个图层，用钢笔勾出下图所示的选区，羽化15个像素后填充白色。取消选区后添加图层蒙版，用黑色画笔把左边空隙部分擦出来，如下图。

8、新建一个图层，用钢笔勾出下图所示的选区，羽化3个像素后填充白色。取消选区后用涂抹工具把边缘涂抹一下，效果如图。

9、新建一个图层，用钢笔勾出下图所示的路径。转为选区后填充白色。取消选区后用模糊工具稍微模糊一下，添加图层蒙版，用黑色画笔把两端过渡擦出来，效果如图。

10、新建一个图层，同上的方法再制作其它的小光束，过程如图。

11、新建一个图层，用钢笔勾出下图所示的选区，羽化3个像素后填充白色，不透明度改为：40%，效果如下图。

12、新建一个图层，用钢笔勾出下图所示的选区，羽化5个像素后填充白色。取消选区后添加图层蒙版，用黑色画笔把边缘部分的过渡擦出来，再把图层不透明度改为：20%，如图。

13、同上的方法制作右边高光，过程如图。

14、新建一个图层，同上的方法制作顶部的小高光，效果如下图。

15、新建一个图层，同上的方法制作左边较淡的高光，过程如图。

16、新建一个图层，再给顶部加上一块小高光，如下图。

17、感觉底部细节还不够。新建一个图层，用钢笔再加上一些小线条，效果如下图。

最后微调一下细节，完成最终效果。

气泡制作方法有很多，最快的方法就是用滤镜，不过效果不够细腻。下面介绍用纯手工的方法制作，过程虽然复杂一点，不过效果比较逼真。

最终效果

<图1>

1、新建一个800 * 600像素的文件，选择渐变工具，颜色设置如图2，由上至下拉出图3所示的线性渐变作为背景。

<图2>

<图3>

2、新建一个组，用椭圆选框工具拉出下图所示的正圆选区，给组添加图层蒙版。

<图4>

3、在组里新建一个图层，用钢笔勾出左侧边缘的暗部选区，羽化20个像素后填充暗紫色：#77445F，局部用加深及减淡工具调整一下明暗。然后添加图层蒙版，用黑色画笔把底部的过渡擦出来。

<图5>

4、新建一个图层，用钢笔勾出左上角的暗部选区，羽化15个像素后填充暗青色：#29575B，如下图。

<图6>

5、新建一个图层，把前景颜色设置为淡绿色：#A1C169，用透明度较低的画笔给左上角增加一些高光，如下图。

<图7>

6、新建一个图层，用钢笔勾出顶部的高光选区，羽化12个像素后拉上与背景相同的渐变色，如下图。

<图8>

7、把当前图层复制一层，混合模式改为“颜色减淡”，按住Alt键添加图层蒙版，用白色画笔把中间需要增亮的部分擦出来，如下图。

<图9>

8、新建一个图层，用钢笔勾出右上部边缘的高光选区，羽化2个像素后拉上与背景相同的渐变色，确定后把图层不透明度改为：60%，效果如下图。

<图10>

9、新建一个图层，用钢笔勾出底部高光选区，羽化30个像素后填充淡黄色：#E0D6A2，取消选区后添加图层蒙版，用黑色画笔把两端的过渡涂抹自然。

<图11>

10、新建一个图层，按Ctrl + Alt + G 创建剪贴蒙版，把前景颜色设置为淡蓝色：#98B6C0，用画笔把下图选区部分涂上前景色。

<图12>

11、新建一个图层填充近似白色的淡色：#FEFFFF，用椭圆选框工具拉出下图所示的选区，羽化6个像素后按Delete删除，得到底部的高光。

<图13>

12、同上的方法给气泡的右侧边缘添加淡黄色高光，如下图。

<图14>