你知道2016年最火的最流行的扁平化設(shè)計(jì)新技巧是什么嗎？ 最近在UI設(shè)計(jì)界大熱的一個(gè)詞，還有APP UI設(shè)計(jì)師專門出了一個(gè)教程的新技巧。

它就是手機(jī)UI設(shè)計(jì)風(fēng)格當(dāng)中的新技巧：彌漫陰影效果。

最近各位設(shè)計(jì)師朋友，在追波網(wǎng)（dribbble.com）上經(jīng)常看到的一種特別萌、特別可愛(ài)的UI作品展示效果。如下圖：

在UI中國(guó)、站酷網(wǎng)上 ，宋聚安的設(shè)計(jì)師發(fā)表了一篇《三步制作出這種精美彌散陰影》的原創(chuàng)UI教程。3月上旬掀起了一陣全民 學(xué)習(xí)彌漫陰影效果的風(fēng)。

在此，25學(xué)堂將這套?手機(jī)UI設(shè)計(jì)風(fēng)格當(dāng)中的新技巧：彌漫陰影效果的設(shè)計(jì)手法傳授給大家。

下面的教程的原創(chuàng)作者：宋聚安 ? 來(lái)自廣州的設(shè)計(jì)愛(ài)好者。25學(xué)堂感謝他的分享。

第一步、這里以界面中的圓角矩形按鈕來(lái)做示范，先畫(huà)個(gè)230*60的圓角矩形，色值#ff4683，得到一個(gè)圓角矩形

（新手朋友們要記住想用彌散陰影的話，先別用直角，稍微幾像素的圓角或直接圓角矩形做出來(lái)的效果更好看）如下圖：

第二步、ctrl+j快捷鍵復(fù)制圓角矩形A得到圓角矩形B，透明度設(shè)30%，并向下移動(dòng)10px（記得把B圖層移到A圖層下方）。

第三步、有2種常見(jiàn)的方法實(shí)現(xiàn)。

A方法： ?點(diǎn)開(kāi)PS工具欄中的濾鏡-模糊-高斯模糊功能，設(shè)置模糊半徑為6即可。

B方法：點(diǎn)開(kāi)PS工具欄中的窗口-屬性 - 蒙板，設(shè)置羽化為10。

一個(gè)最簡(jiǎn)單的彌散陰影就做出來(lái)啦?。?！其他的需要各位去發(fā)揮想象創(chuàng)造力了！

需要PSD的小伙伴可以去下載：百度網(wǎng)盤(pán)下載地址

這樣的彌漫陰影效果特別適合用在APP界面設(shè)計(jì)上的一些小元素上。如按鈕、圖標(biāo)、線或者是APP作品展示的方面。有些時(shí)候，我們需要加上這種陰影效果，讓作品一秒變大神啦！

當(dāng)然，我們前端的工程師們，也可以使用css3的陰影效果來(lái)實(shí)現(xiàn)的。不是很難。

使用彌漫陰影效果的APP UI設(shè)計(jì)作品，增強(qiáng)了層次感和空間感，頓時(shí)變得立體很多。

感興趣的小伙伴，趕快去學(xué)起來(lái)吧！