編輯導(dǎo)讀：毛玻璃效果注重功能說(shuō)明，強(qiáng)調(diào)視覺重心，在UI設(shè)計(jì)中應(yīng)用很廣。文章從毛玻璃效果的歷史發(fā)展出發(fā)，對(duì)其在58兼職產(chǎn)品中的具體應(yīng)用設(shè)計(jì)進(jìn)行了梳理和總結(jié)，希望能給大家作為參考，并在工作中產(chǎn)生助益。

01 前言

Aero效果是當(dāng)下UI設(shè)計(jì)繞不開的話題，Aero即Authentic（真實(shí)），Energetic（動(dòng)感），Reflective(反射性)，Open（開闊）四個(gè)單詞的縮寫。即可從一個(gè)窗口看到下一個(gè)窗口，表現(xiàn)為一種透明式的毛玻璃效果，毛玻璃的朦朧感搭配柔和的漸變，營(yíng)造一種視覺感官的舒適感與呼吸感。

毛玻璃效果之所以被大家應(yīng)用和認(rèn)可除了它能帶來(lái)的優(yōu)秀視覺表現(xiàn)，更重要的是其本身的功能意義，它能幫助設(shè)計(jì)師更好的拉開信息層級(jí)并達(dá)到視覺統(tǒng)一。近期我們?cè)诩媛?“在線賺錢”項(xiàng)目中大量嘗試和應(yīng)用Aero效果，來(lái)提升頁(yè)面品質(zhì)感和視覺統(tǒng)一性。

02 Aero(毛玻璃)效果的歷史

毛玻璃視覺其實(shí)可以追溯到2007年微軟發(fā)售的 Windows Vista和Windows7，隨之后來(lái)的OS X 10.10（Yosemite）和iOS7中大量出現(xiàn)毛玻璃效果，比如底部快捷菜單欄、通知中心和多任務(wù)切換窗口等，蘋果公司加大了模糊程度，透明效果基于扁平，更順應(yīng)當(dāng)時(shí)UI扁平化的設(shè)計(jì)趨勢(shì)。

Windows Vista /Mac OS X 10.10（Yosemite）

蘋果早期UI界面使用拉丁語(yǔ)中的「水」一詞來(lái)命名，也就是 Aqua 風(fēng)格，從控制窗口開關(guān)的按鈕到滾動(dòng)條，似乎都是用晶瑩剔透的水滴制作而成，并且被頭頂?shù)墓庠唇o充分地照耀著，呈現(xiàn)出令人忍不住想舔一口的強(qiáng)烈水晶質(zhì)感。

先被用在蘋果的 iMovie 軟件上，2001年被推廣至整個(gè)系統(tǒng)、蘋果網(wǎng)站使用，以便和蘋果硬件的視覺風(fēng)格融合。成為2000年以后幾年整整一代UI設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師，美術(shù)工作者喜歡的風(fēng)格。以至于一段時(shí)間內(nèi)泛濫成災(zāi)。

蘋果早期Aqua風(fēng)格? ?OS X早期版本的Dock（桌面最下部）只墊了半透明白色底，沒做高斯模糊。

03 趨勢(shì)輪回，Aero(毛玻璃)效果的回歸

2017年，毛玻璃效果全面回歸 Windows 10，并且細(xì)節(jié)、質(zhì)感也得到提升。直至今年，蘋果推出了最新版的桌面系統(tǒng) Mac OS Big Sur。重新設(shè)計(jì)了系統(tǒng)、內(nèi)置應(yīng)用的圖標(biāo)和界面，運(yùn)用大量的毛玻璃、半透明界面元素，界面更為扁平。

新的毛玻璃效果更加注重功能說(shuō)明，強(qiáng)調(diào)視覺重心。配合彩色漸變的新壁紙，設(shè)計(jì)語(yǔ)言上更為時(shí)尚簡(jiǎn)潔。

圖片來(lái)源于網(wǎng)絡(luò)

04 在58兼職中的應(yīng)用

這次我們?cè)?8兼職在線賺錢改版項(xiàng)目中，引入毛玻璃效果的設(shè)計(jì)語(yǔ)言。

為什么引入Aero(毛玻璃)效果?

在改版前，我們聯(lián)合用研和交互，發(fā)放了調(diào)研問(wèn)卷并輸出了《用戶調(diào)研報(bào)告》。調(diào)研后，發(fā)現(xiàn)兼職在線賺錢人群有以下特點(diǎn)：

1. 用戶年輕化：15-30歲之間用戶占比75%
2. 文化程度相對(duì)較高：高中以上學(xué)歷人群占比84%
3. 職業(yè)集中為學(xué)生、寶媽和自由職業(yè)人員等幾類人群

從調(diào)研報(bào)告中看出，兼職用戶并非真正意義上的下沉用戶，用戶對(duì)界面的設(shè)計(jì)要求相對(duì)比較高。

Aero(毛玻璃)效果解決的問(wèn)題

相應(yīng)的，毛玻璃效果的引入適當(dāng)解決了兼職的一些問(wèn)題。我們?cè)趥€(gè)人中心、任務(wù)詳情頁(yè)和排行榜等多個(gè)地方運(yùn)用了毛玻璃背景，有效的解決了頁(yè)面層級(jí)和統(tǒng)一性的問(wèn)題。

（1）表達(dá)層級(jí)

通過(guò)背景毛玻璃化，可以中和扁平化圖文帶來(lái)的生硬不立體。與其他元素疊加后視覺上產(chǎn)生層次，將信息層級(jí)更好的表達(dá)出來(lái)，虛化背景強(qiáng)化前景。增加層級(jí)以后可以更加凸顯功能，而不是為了模糊才模糊。

?兼職多個(gè)頁(yè)面毛玻璃效果

（2）品牌一致性

除了表達(dá)層級(jí)，用戶也可以在扁平生硬中找到一些柔和的元素，甚至是情感。運(yùn)用毛玻璃去包裝UI界面，更是有助于提升業(yè)務(wù)的品牌感以及品牌的一致性。

（3）視覺呈現(xiàn)效果

不僅僅是在背景上，圖標(biāo)也加入毛玻璃效果，使圖標(biāo)出現(xiàn)通透的層次效果，更加精致，有效的提升視覺品質(zhì)感。

在線賺錢頁(yè)部分入口圖標(biāo)繪制

05 實(shí)操部分：Aero(毛玻璃)效果的制作

說(shuō)了這么多，那我們?cè)撊绾螌?shí)現(xiàn)毛玻璃效果呢？言歸正傳，下面以圖標(biāo)為例，講解如何利用Sketch和AE，制作出帶有毛玻璃效果的動(dòng)效圖標(biāo)。多圖預(yù)警，教程如下：

以上圖圖標(biāo)為例

第一步：首先在Sketch中繪制游戲手柄圖形，填充漸變色，色值為：#73A3FF – #7526FF 想要效果更好可適當(dāng)添加色韻（彌散陰影）

第二步：將繪制好的圖形復(fù)制，并水平翻轉(zhuǎn)，添加蒙版。填充漸變色，色值為：#F2F7FF – #FFFFFF

第三步：將第一步繪制好的圖形再次復(fù)制，置于蒙版上面。添加高斯模糊數(shù)值為45，并將其透明度改為70%

PS ：高斯模糊數(shù)值和圖層位置可根據(jù)視覺美觀度做適當(dāng)調(diào)整

第四步：為了更好的增加圖標(biāo)辨識(shí)度，我們最后再將第二步的圖形再次復(fù)制，去掉填充。增加漸變描邊，色值為：#EAF1FF – #DFD5FF

加入游戲按鍵元素，這樣毛玻璃靜態(tài)圖標(biāo)就繪制完成

第五步：圖標(biāo)繪制好之后，將其導(dǎo)入AE中，這里需要使用插件工具：AEUX，無(wú)縫銜接After Effects

插件下載地址：https://aeux.io/guide/download.html

安裝教程 ：https://blog.51cto.com/14367150/2405430

第六步：成功導(dǎo)入AE后，整理圖層。可以看到圖層與Sketch基本一致，將多余的圖層（小眼睛取消的圖層）刪除，帶小鎖的可忽略。同時(shí)先隱藏在sketch實(shí)現(xiàn)的毛玻璃效果，留下基本圖形并命名為圖層1、圖層2

第七步：制作AE毛玻璃效果，復(fù)制圖層2，將副本透明度改為50

第八步：新建調(diào)整圖層，放在圖層2的下方，并設(shè)置alpha遮罩

第九步：給調(diào)整圖層添加高斯模糊，強(qiáng)度為100

第十步：最后開始針對(duì)圖標(biāo)加入自己想要的動(dòng)態(tài)效果，這樣一個(gè)毛玻璃風(fēng)格的動(dòng)效圖標(biāo)也就出來(lái)了

PS：由于AE自帶的毛玻璃效果可能會(huì)沒有Sketch中實(shí)現(xiàn)好，所以建議在做動(dòng)效的時(shí)候，將原來(lái)隱藏的Sketch實(shí)現(xiàn)的毛玻璃效果預(yù)合成，在圖標(biāo)定格的時(shí)候動(dòng)態(tài)出現(xiàn)

最終效果：

06 寫在最后

互聯(lián)網(wǎng)領(lǐng)域變化的很快，每年的設(shè)計(jì)趨勢(shì)都在變化，人們的需求和期望都因?yàn)樾录夹g(shù)和環(huán)境的發(fā)展，有了不同的感受。

作為設(shè)計(jì)師，我們對(duì)設(shè)計(jì)的思考不能只停留在表象層面，而更多的需要圍繞信息傳達(dá)這一設(shè)計(jì)的本質(zhì)功能，強(qiáng)化自己的設(shè)計(jì)意識(shí)，同時(shí)要時(shí)刻保持對(duì)趨勢(shì)的敏感度。將新趨勢(shì)合理的運(yùn)用在產(chǎn)品設(shè)計(jì)中，以產(chǎn)生最大化收益。

作者：牟凱旋、訾亞磊

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@牟凱旋、訾亞磊

題圖來(lái)自 Unsplash，基于CC0協(xié)議。