經(jīng)常幫很多同學(xué)看設(shè)計(jì)作品，但看完大多都沒讓我留下什么印象，也就是沒有讓人覺得眼前一亮的點(diǎn)；什么是眼前一亮呢，其實(shí)就是作品中是否有不錯(cuò)的想法和視覺亮點(diǎn)，運(yùn)用潮流趨勢(shì)就是一種吸引目光的手段，你的設(shè)計(jì)中是否運(yùn)用了當(dāng)下主流設(shè)計(jì)趨勢(shì)？你的設(shè)計(jì)在版式，構(gòu)圖色彩上是否有不錯(cuò)的表現(xiàn)？在當(dāng)下同質(zhì)化嚴(yán)重的背景下，我們需要去發(fā)現(xiàn)趨勢(shì)，去總結(jié)規(guī)律，同時(shí)，也要學(xué)會(huì)思考如何把這些好的設(shè)計(jì)趨勢(shì)，很好的落地到自己項(xiàng)目中去。

大公司引領(lǐng)

那么設(shè)計(jì)趨勢(shì)可以怎么獲取到呢？一般有幾種情況：大公司的引導(dǎo)，比如apple,google這些國(guó)際大公司產(chǎn)品的更新， 因?yàn)槠渥銐虼蟮挠绊懥?，也具備相?duì)資深的設(shè)計(jì)團(tuán)隊(duì)，所以他們每一次項(xiàng)目重大的改版都能影響整個(gè)設(shè)計(jì)圈的變革和潮流！

▲比如ios去年推行了暗黑模式，就有不少產(chǎn)品及時(shí)跟隨做出適配。

設(shè)計(jì)師挖掘

另外一種形式就是設(shè)計(jì)師引領(lǐng)變革，每年都會(huì)一些新的設(shè)計(jì)手法被優(yōu)秀設(shè)計(jì)師們發(fā)掘出來(lái)，一般在綜合類網(wǎng)站如dribbble和behance上先火起來(lái)，受到大批設(shè)計(jì)師的追捧，比如前不久興起的新擬態(tài)風(fēng)格，和越來(lái)越多的3d插圖等等。

▲尤其3d插圖是今年比較流行一種手法，運(yùn)用這種立體元素來(lái)營(yíng)造整體的視覺空間感，這種形式能很好的和其他產(chǎn)品拉開差異性，同時(shí)更好的傳遞信息，但是需要注意這種風(fēng)格和頁(yè)面其他元素之間的協(xié)調(diào)性。

▲包括根據(jù)內(nèi)容定制的扁平插圖，設(shè)計(jì)師通過(guò)這種輕快的色彩，讓整個(gè)設(shè)計(jì)活潑輕盈，同時(shí)更符合當(dāng)下年輕人群的審美，這些風(fēng)格也大多數(shù)能從設(shè)計(jì)網(wǎng)站上感知到

總之，設(shè)計(jì)風(fēng)格需要我們定期去歸納和總結(jié)，需要我們?cè)谄綍r(shí)看設(shè)計(jì)時(shí)候，多留一分洞察行業(yè)變化的心思，提煉出趨勢(shì)運(yùn)用到我們?cè)O(shè)計(jì)里面去，關(guān)于更多的設(shè)計(jì)趨勢(shì)可以去我Pinterest看，我會(huì)定期總結(jié)分享出來(lái)的！

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

泡沫和斑點(diǎn)風(fēng)格 

前面我們分析了：趨勢(shì)的由來(lái)，一般是由國(guó)內(nèi)外知名公司比如蘋果，谷歌，或者知名產(chǎn)品淘寶，天貓雙11等等通過(guò)影響力帶領(lǐng)，那么另外一種就是設(shè)計(jì)師發(fā)掘的，本周和大家分享：泡沫和斑點(diǎn)的設(shè)計(jì)風(fēng)格，為什么叫泡沫和斑點(diǎn)，其實(shí)是我蝦扯蛋取的，叫什么風(fēng)格，自己定義為什么趨勢(shì)不用太在意，你能GET到那個(gè)風(fēng)格代表的核心元素和含義就行

這種風(fēng)格運(yùn)用很廣，無(wú)論在平面設(shè)計(jì)，還是UI設(shè)計(jì)、插畫設(shè)計(jì)中，最近都頻繁的出現(xiàn)，我們今天就來(lái)分析下這個(gè)風(fēng)格的特點(diǎn)？

它的特點(diǎn) 

隨機(jī)形狀

在形狀上，沒有明確的特點(diǎn)和規(guī)律，都散落在界面的各個(gè)角落，圖形大多是圓形，也有流動(dòng)的不規(guī)則圖形，他們都沒有絕對(duì)的規(guī)律，排布也很隨機(jī)，質(zhì)感上則扁平，立體，漸變都有，看起來(lái)特別像我們生活中常見的氣泡。

▲Wed ze這個(gè)網(wǎng)站就是運(yùn)用這種橢圓流動(dòng)的氣泡，讓整個(gè)頁(yè)面形成一種流體風(fēng)格，動(dòng)感同時(shí)也很時(shí)尚，很能體現(xiàn)出產(chǎn)品AR/VR的行業(yè)特征

▲同樣的Scotsman這個(gè)網(wǎng)站同樣運(yùn)用氣泡來(lái)布局，通過(guò)氣泡很好的散落在畫面兩側(cè)，配合微動(dòng)效，整個(gè)頁(yè)面更加的靈動(dòng)和有趣，同時(shí)畫面中間也是利用了這種氣泡風(fēng)格來(lái)突出焦點(diǎn)

▲sweet同樣采用了流動(dòng)不規(guī)則氣泡作為整個(gè)設(shè)計(jì)主風(fēng)格，流動(dòng)同時(shí)很時(shí)尚

▲液體動(dòng)態(tài)匯合，透過(guò)氣泡融為一體，形成和水一樣靈動(dòng)自由的效果

多元質(zhì)感

立體：質(zhì)感上有很多表達(dá)形式，可以運(yùn)用C4D做出這種立體糖果色，它使得整個(gè)視覺風(fēng)格比較突出，畫面沖擊力強(qiáng)，適合運(yùn)用在一些重視覺偏營(yíng)銷的場(chǎng)景下

扁平+色彩疊加：除了立體質(zhì)感風(fēng)格，扁平化和色彩疊加也運(yùn)用的比較多，色彩更為通透，整個(gè)畫面節(jié)奏也更容易把控，配合動(dòng)效視覺效果更佳

漸變+微質(zhì)感：和扁平疊加風(fēng)格不同，微擬物結(jié)合一些弱投影和漸變撞色讓整個(gè)設(shè)計(jì)看起來(lái)更加的現(xiàn)代

圖案填充：這種效果比較特殊，在圓角氣泡里面填充圖案，圖形，整個(gè)設(shè)計(jì)會(huì)瞬間提升潮流感。

明亮色彩

在色彩上，這種風(fēng)格色彩比較明亮，類似馬卡龍配色風(fēng)格，這樣配色更能凸顯它的多變和豐富多彩，當(dāng)然同色系的搭配，也能表現(xiàn)出官方，科技感的一面

▲比如上圖對(duì)于橙色的運(yùn)用

運(yùn)用場(chǎng)景 

對(duì)設(shè)計(jì)趨勢(shì)關(guān)注的最后，我們一定要去思考落地；否則就很不能算已經(jīng)掌握了這個(gè)趨勢(shì)。

網(wǎng)頁(yè)中的運(yùn)用

網(wǎng)頁(yè)中，氣泡可以作為構(gòu)圖中心，通過(guò)構(gòu)圖形式很好的融入這種風(fēng)格，也可以作為產(chǎn)品類型網(wǎng)站的裝飾性元素，使頁(yè)面更豐富有趣的

界面中的運(yùn)用

界面中，可以作為動(dòng)態(tài)導(dǎo)航，或者菜單來(lái)設(shè)計(jì)，讓整個(gè)產(chǎn)品調(diào)性更加年輕化，通常作為個(gè)性化的表達(dá)

在一些動(dòng)態(tài)可視化，或者智能場(chǎng)景中運(yùn)用，或者在一些特殊內(nèi)容表達(dá)上運(yùn)用這種布局形式，和內(nèi)容很好的形成一種互動(dòng)

作為界面中的DNA，比如上圖就是運(yùn)用氣泡作為設(shè)計(jì)DNA在啟動(dòng)界面和登錄頁(yè)面都運(yùn)用氣泡到極致

其他場(chǎng)景

除了在網(wǎng)頁(yè)運(yùn)用，其實(shí)在平面設(shè)計(jì)，LOGO設(shè)計(jì)，插畫設(shè)計(jì)中，這種氣泡風(fēng)格，也同樣適用，關(guān)鍵在于我們?nèi)绾稳レ`活搭配組合。

總結(jié) 

今天的分享，更多只是拋磚引玉，希望大家養(yǎng)成這種培養(yǎng)視覺洞察力的習(xí)慣，去發(fā)現(xiàn)一些設(shè)計(jì)行業(yè)的規(guī)律，并學(xué)會(huì)掌握規(guī)律的變化，這樣才能讓自己的設(shè)計(jì)不斷進(jìn)步，做出讓人亮眼的作品！加油！

文中圖片來(lái)源網(wǎng)絡(luò)，侵權(quán)刪 / 題圖：Peter Tarka

原文地址：我們的設(shè)計(jì)日記

作者：sky

最終效果

<點(diǎn)圖片查看大圖>

1、打開PS軟件，按Ctrl + N 新建畫布，尺寸為1920 * 1080像素，分辨率為72像素/英寸，如下圖。

2、把前景色設(shè)置為藍(lán)灰色#a4b0b5，然后用油漆桶工具把背景填充前景色。

3、先來(lái)制作氣泡的高光部分，需要完成的效果如下圖。

4、新建一個(gè)組，命名為“高光”。

5、在工具箱選擇“橢圓選框工具”，羽化設(shè)置為0像素。

6、用橢圓選框工具拉出下圖所示的橢圓選區(qū)。

7、點(diǎn)擊圖層面板下面的蒙版按鈕，添加蒙版，如下圖。

8、設(shè)置高光顏色，高光統(tǒng)一用下面的顏色，不是純白。把前景色設(shè)置為淡灰色#f3f3f5。

9、在組里新建一個(gè)空白圖層，用油漆桶工具填充前景色。

10、按住Ctrl鍵 + 鼠標(biāo)左鍵點(diǎn)擊當(dāng)前組的蒙版縮略圖載入選區(qū)。

11、選擇菜單：選擇 > 修改 > 收縮，數(shù)值為5。

12、按Shift + F6 把選區(qū)羽化8個(gè)像素。

13、按Delete鍵兩次，刪除選區(qū)部分色塊，按Ctrl + D 取消選區(qū)，再把圖層不透明度改為50%，如下圖。

14、新建一個(gè)圖層，用橢圓選框工具拉出下圖所示的選區(qū)。

15、用油漆桶工具把選區(qū)填充前景色，按Ctrl + D 取消選區(qū)，效果如下圖。

16、用橢圓選框工具拉出下圖所示的選區(qū)，并把選區(qū)羽化10個(gè)像素。

17、按Delete鍵兩次，刪除選區(qū)部分色塊，取消選區(qū)后效果如下圖。

18、新建一個(gè)空白圖層，用鋼筆工具勾出下圖所示的選區(qū)，羽化5個(gè)像素后填充前景色。

19、取消選區(qū)后添加圖層蒙版，選擇畫筆工具，畫筆不透明度設(shè)置為10%，前景色設(shè)置為黑色。

20、用畫筆把高光兩端過(guò)渡涂抹自然，如下圖。

21、新建一個(gè)圖層，用鋼筆工具勾出下圖所示的選區(qū)，羽化2個(gè)像素后填充前景色，取消選區(qū)后把混合模式改為“濾色”。

22、新建一個(gè)圖層，用橢圓選框工具拉出下圖所示的選區(qū)，羽化40個(gè)像素后填充前景色，然后取消選區(qū)。

23、添加圖層蒙版用剛才設(shè)置為畫筆擦掉一些不需要的部分，效果如下圖。

最終效果

1、新建一個(gè)600 * 600像素的文檔，背景填充暗藍(lán)色：#072A89，新建一個(gè)圖層，用橢圓選框工具拉出下圖所示的正圓選區(qū)，填充跟背景相同的顏色，如下圖。

2、新建一個(gè)圖層，按Ctrl + Alt + G 與前一圖層編組。然后在當(dāng)前圖層下面新建一個(gè)圖層，用鋼筆勾出下圖所示的選區(qū)，羽化8個(gè)像素后填充白色。取消選區(qū)后添加圖層蒙版，用黑色畫筆把兩端的過(guò)渡稍微涂抹一下，大致效果如下圖。

3、調(diào)出正圓選區(qū)，新建一個(gè)圖層，選擇菜單：編輯 > 描邊，寬度4，取消選區(qū)后效果如下圖。

4、執(zhí)行：濾鏡 > 模糊 > 高斯模糊，數(shù)值為4，確定后把圖層不透明度改為：45%，效果如圖。

5、新建一個(gè)圖層，用鋼筆勾出下圖所示的選區(qū)，按Shift + F6羽化3個(gè)像素后填充白色。取消選區(qū)后用涂抹工具把邊緣涂抹一下，局部用模糊工具稍微模糊處理。然后添加圖層蒙版，用黑色畫筆把邊緣過(guò)渡擦出來(lái)，效果如圖。

6、新建一個(gè)圖層，用鋼筆勾出左邊高光部分的選區(qū)，羽化2個(gè)像素后填充白色。取消選區(qū)后添加圖層蒙版，用黑色畫筆把右邊過(guò)渡擦出來(lái)，如下圖。

7、新建一個(gè)圖層，用鋼筆勾出下圖所示的選區(qū)，羽化15個(gè)像素后填充白色。取消選區(qū)后添加圖層蒙版，用黑色畫筆把左邊空隙部分擦出來(lái)，如下圖。

8、新建一個(gè)圖層，用鋼筆勾出下圖所示的選區(qū)，羽化3個(gè)像素后填充白色。取消選區(qū)后用涂抹工具把邊緣涂抹一下，效果如圖。

9、新建一個(gè)圖層，用鋼筆勾出下圖所示的路徑。轉(zhuǎn)為選區(qū)后填充白色。取消選區(qū)后用模糊工具稍微模糊一下，添加圖層蒙版，用黑色畫筆把兩端過(guò)渡擦出來(lái)，效果如圖。

10、新建一個(gè)圖層，同上的方法再制作其它的小光束，過(guò)程如圖。

11、新建一個(gè)圖層，用鋼筆勾出下圖所示的選區(qū)，羽化3個(gè)像素后填充白色，不透明度改為：40%，效果如下圖。

12、新建一個(gè)圖層，用鋼筆勾出下圖所示的選區(qū)，羽化5個(gè)像素后填充白色。取消選區(qū)后添加圖層蒙版，用黑色畫筆把邊緣部分的過(guò)渡擦出來(lái)，再把圖層不透明度改為：20%，如圖。

13、同上的方法制作右邊高光，過(guò)程如圖。

14、新建一個(gè)圖層，同上的方法制作頂部的小高光，效果如下圖。

15、新建一個(gè)圖層，同上的方法制作左邊較淡的高光，過(guò)程如圖。

16、新建一個(gè)圖層，再給頂部加上一塊小高光，如下圖。

17、感覺底部細(xì)節(jié)還不夠。新建一個(gè)圖層，用鋼筆再加上一些小線條，效果如下圖。

最后微調(diào)一下細(xì)節(jié)，完成最終效果。

氣泡制作方法有很多，最快的方法就是用濾鏡，不過(guò)效果不夠細(xì)膩。下面介紹用純手工的方法制作，過(guò)程雖然復(fù)雜一點(diǎn)，不過(guò)效果比較逼真。

最終效果

<圖1>

1、新建一個(gè)800 * 600像素的文件，選擇漸變工具，顏色設(shè)置如圖2，由上至下拉出圖3所示的線性漸變作為背景。

<圖2>

<圖3>

2、新建一個(gè)組，用橢圓選框工具拉出下圖所示的正圓選區(qū)，給組添加圖層蒙版。

<圖4>

3、在組里新建一個(gè)圖層，用鋼筆勾出左側(cè)邊緣的暗部選區(qū)，羽化20個(gè)像素后填充暗紫色：#77445F，局部用加深及減淡工具調(diào)整一下明暗。然后添加圖層蒙版，用黑色畫筆把底部的過(guò)渡擦出來(lái)。

<圖5>

4、新建一個(gè)圖層，用鋼筆勾出左上角的暗部選區(qū)，羽化15個(gè)像素后填充暗青色：#29575B，如下圖。

<圖6>

5、新建一個(gè)圖層，把前景顏色設(shè)置為淡綠色：#A1C169，用透明度較低的畫筆給左上角增加一些高光，如下圖。

<圖7>

6、新建一個(gè)圖層，用鋼筆勾出頂部的高光選區(qū)，羽化12個(gè)像素后拉上與背景相同的漸變色，如下圖。

<圖8>

7、把當(dāng)前圖層復(fù)制一層，混合模式改為“顏色減淡”，按住Alt鍵添加圖層蒙版，用白色畫筆把中間需要增亮的部分擦出來(lái)，如下圖。

<圖9>

8、新建一個(gè)圖層，用鋼筆勾出右上部邊緣的高光選區(qū)，羽化2個(gè)像素后拉上與背景相同的漸變色，確定后把圖層不透明度改為：60%，效果如下圖。

<圖10>

9、新建一個(gè)圖層，用鋼筆勾出底部高光選區(qū)，羽化30個(gè)像素后填充淡黃色：#E0D6A2，取消選區(qū)后添加圖層蒙版，用黑色畫筆把兩端的過(guò)渡涂抹自然。

<圖11>

10、新建一個(gè)圖層，按Ctrl + Alt + G 創(chuàng)建剪貼蒙版，把前景顏色設(shè)置為淡藍(lán)色：#98B6C0，用畫筆把下圖選區(qū)部分涂上前景色。

<圖12>

11、新建一個(gè)圖層填充近似白色的淡色：#FEFFFF，用橢圓選框工具拉出下圖所示的選區(qū)，羽化6個(gè)像素后按Delete刪除，得到底部的高光。

<圖13>

12、同上的方法給氣泡的右側(cè)邊緣添加淡黃色高光，如下圖。

<圖14>