2021-4-1 周周
這篇文章主要分享怎么做一套毛玻璃擬態(tài)圖標(biāo)，以及在這基礎(chǔ)上如何發(fā)散創(chuàng)意。帶著這個(gè)想法，我開(kāi)始逛“避寒寺”和“追波”，找可以參考的作品。這套作品我挺喜歡的，作者還做出了 3D 視角的。
先分析一下圖標(biāo)的結(jié)構(gòu)。圖標(biāo)有三層：底部幾何色塊、毛玻璃主造型，帶有含義的白色圖形。
再分析俯視角度時(shí)圖標(biāo)的表現(xiàn)，方便用工具表現(xiàn)。
最后是顏色的歸納。作者用了飽和度非常高的顏色，基本都在右上角最尖尖的位置。
分析完以后可以開(kāi)始臨摹了…因?yàn)樵煨捅容^簡(jiǎn)單，我沒(méi)有臨摹，直接創(chuàng)意發(fā)散做了另一套。選主題的時(shí)候我隨便開(kāi)了個(gè) APP（當(dāng)時(shí)打開(kāi)的是微博），覺(jué)得個(gè)人中心的快捷入口圖標(biāo)主題可以拿來(lái)試試。我選了深色作為背景，所以這套圖標(biāo)用到界面會(huì)比較難適配，和原 APP 風(fēng)格也不符合。在這里單純利用主題來(lái)做練習(xí)。
做底部的幾何色塊時(shí)，形狀可以盡量跟主圖形相關(guān)性大一些，加強(qiáng)它們之間的關(guān)聯(lián)性，如果實(shí)在沒(méi)法關(guān)聯(lián)的也不必勉強(qiáng)。
我降低了幾何色塊的面積，增加了多一層毛玻璃形狀層，并且讓白色的圖形更靈活，而不是雕刻在毛玻璃層上。這是我理解了原作者圖標(biāo)的結(jié)構(gòu)之后，自己進(jìn)行的改變，效果還行。
做的過(guò)程中，發(fā)現(xiàn)草稿箱如果里面放一張白色的卡紙，視覺(jué)效果還不錯(cuò)，所以我又做了另一種效果。最終呈現(xiàn)出來(lái)的效果只有草稿箱比較出彩，其它很牽強(qiáng)。
拿「照片」這個(gè)圖標(biāo)來(lái)進(jìn)行拆分，參數(shù)分別如下：
這是最后呈現(xiàn)的效果：
封面圖參考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做會(huì)更逼真吧。
臨摹一套圖標(biāo)的時(shí)候，要帶著目的去臨摹，分析原作者每一步的處理。然后把圖標(biāo)拆分成不同的變量，修改這些變量的時(shí)候或許會(huì)得到不錯(cuò)的想法。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：牙線y2x
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com