這篇文章主要分享怎麼做一套毛玻璃拟态圖标，以及在這基礎上如何發散創意。有的人問為什麼做了那麼久 UI，還去聽基礎課呢？我覺得在不同的階段，對于基礎内容會有不一樣的理解，會碰撞出不同的火花。
先分析一下圖标的結構。圖标有三層：底部幾何色塊、毛玻璃主造型，帶有含義的白色圖形。
再分析俯視角度時圖标的表現，方便用工具表現。
最後是顔色的歸納。作者用了飽和度非常高的顔色，基本都在右上角最尖尖的位置。
分析完以後可以開始臨摹了...因為造型比較簡單，我沒有臨摹，直接創意發散做了另一套。選主題的時候我随便開了個 APP（當時打開的是微博），覺得個人中心的快捷入口圖标主題可以拿來試試。我選了深色作為背景，所以這套圖标用到界面會比較難适配，和原 APP 風格也不符合。在這裡單純利用主題來做練習。
做底部的幾何色塊時，形狀可以盡量跟主圖形相關性大一些，加強它們之間的關聯性，如果實在沒法關聯的也不必勉強。
我降低了幾何色塊的面積，增加了多一層毛玻璃形狀層，并且讓白色的圖形更靈活，而不是雕刻在毛玻璃層上。這是我理解了原作者圖标的結構之後，自己進行的改變，效果還行。
做的過程中，發現草稿箱如果裡面放一張白色的卡紙，視覺效果還不錯，所以我又做了另一種效果。最終呈現出來的效果隻有草稿箱比較出彩，其它很牽強。
拿「照片」這個圖标來進行拆分，參數分别如下：
這是最後呈現的效果：
封面圖參考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做會更逼真吧。
臨摹一套圖标的時候，要帶着目的去臨摹，分析原作者每一步的處理。然後把圖标拆分成不同的變量，修改這些變量的時候或許會得到不錯的想法。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
