這篇文章主要分享怎么做一套毛玻璃擬態(tài)圖標(biāo)，以及在這基礎(chǔ)上如何發(fā)散創(chuàng)意。某天上了木鼠老師的圖標(biāo)公開課，課上有示范毛玻璃擬態(tài)效果的圖標(biāo)，我就躍躍欲試想做一套。有的人問為什么做了那么久 UI，還去聽基礎(chǔ)課呢？我覺得在不同的階段，對于基礎(chǔ)內(nèi)容會有不一樣的理解，會碰撞出不同的火花。

木鼠老師更多教程 ???https://xue.uisdc.com/uidesign/

帶著這個想法，我開始逛“避寒寺”和“追波”，找可以參考的作品。這套作品我挺喜歡的，作者還做出了 3D 視角的。作者名字我忘存了，如果有朋友知道的話，在評論幫我補上叭。

先分析一下圖標(biāo)的結(jié)構(gòu)。圖標(biāo)有三層：底部幾何色塊、毛玻璃主造型，帶有含義的白色圖形。

再分析俯視角度時圖標(biāo)的表現(xiàn)，方便用工具表現(xiàn)。

最后是顏色的歸納。作者用了飽和度非常高的顏色，基本都在右上角最尖尖的位置。

分析完以后可以開始臨摹了...因為造型比較簡單，我沒有臨摹，直接創(chuàng)意發(fā)散做了另一套。選主題的時候我隨便開了個 APP（當(dāng)時打開的是微博），覺得個人中心的快捷入口圖標(biāo)主題可以拿來試試。我選了深色作為背景，所以這套圖標(biāo)用到界面會比較難適配，和原 APP 風(fēng)格也不符合。在這里單純利用主題來做練習(xí)。

做底部的幾何色塊時，形狀可以盡量跟主圖形相關(guān)性大一些，加強它們之間的關(guān)聯(lián)性，如果實在沒法關(guān)聯(lián)的也不必勉強。

我降低了幾何色塊的面積，增加了多一層毛玻璃形狀層，并且讓白色的圖形更靈活，而不是雕刻在毛玻璃層上。這是我理解了原作者圖標(biāo)的結(jié)構(gòu)之后，自己進行的改變，效果還行。

做的過程中，發(fā)現(xiàn)草稿箱如果里面放一張白色的卡紙，視覺效果還不錯，所以我又做了另一種效果。最終呈現(xiàn)出來的效果只有草稿箱比較出彩，其它很牽強。

拿「照片」這個圖標(biāo)來進行拆分，參數(shù)分別如下：

這是最后呈現(xiàn)的效果：

封面圖參考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做會更逼真吧。

臨摹一套圖標(biāo)的時候，要帶著目的去臨摹，分析原作者每一步的處理。然后把圖標(biāo)拆分成不同的變量，修改這些變量的時候或許會得到不錯的想法。

歡迎關(guān)注作者微信公眾號：「一點牙線」