經常幫很多同學看設計作品，但看完大多都沒讓我留下什么印象，也就是沒有讓人覺得眼前一亮的點；什么是眼前一亮呢，其實就是作品中是否有不錯的想法和視覺亮點，運用潮流趨勢就是一種吸引目光的手段，你的設計中是否運用了當下主流設計趨勢？你的設計在版式，構圖色彩上是否有不錯的表現？在當下同質化嚴重的背景下，我們需要去發現趨勢，去總結規律，同時，也要學會思考如何把這些好的設計趨勢，很好的落地到自己項目中去。

大公司引領

那么設計趨勢可以怎么獲取到呢？一般有幾種情況：大公司的引導，比如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>