Aero毛玻璃效果提升UI界面品質(zhì)感

　　Aero(毛玻璃)效果，說法來源于Authentic(真實(shí))，Energetic(動(dòng)感)，Reflective(反射性)，Open(開闊)四個(gè)單詞的縮寫。即可從一個(gè)窗口看到下一個(gè)窗口，表現(xiàn)為一種透明式的毛玻璃效果。這種效果不僅能帶來的優(yōu)秀視覺表現(xiàn)，更重要的是能幫助拉開信息層級(jí)并達(dá)到視覺統(tǒng)一，提升頁(yè)面品質(zhì)感和視覺統(tǒng)一性，AAA教育的武老師為大家分享Aero毛玻璃效果提升UI界面品質(zhì)感。
 

　　Aero(毛玻璃)效果的歷史
 

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

　　蘋果早期UI界面使用拉丁語(yǔ)中的「水」一詞來命名，也就是 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(桌面最下部)只墊了半透明白色底，沒做高斯模糊。
 

　　趨勢(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)用大量的毛玻璃、半透明界面元素，界面更為扁平。新的毛玻璃效果更加注重功能說明，強(qiáng)調(diào)視覺重心。配合彩色漸變的新壁紙，設(shè)計(jì)語(yǔ)言上更為時(shí)尚簡(jiǎn)潔。
 

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

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

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

　　在改版前，我們聯(lián)合用研和交互，發(fā)放了調(diào)研問卷并輸出了《用戶調(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(毛玻璃)效果解決的問題
 

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

　　1. 表達(dá)層級(jí)
 

　　通過背景毛玻璃化，可以中和扁平化圖文帶來的生硬不立體。與其他元素疊加后視覺上產(chǎn)生層次，將信息層級(jí)更好的表達(dá)出來，虛化背景強(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)繪制
 

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

　　說了這么多，那我們?cè)撊绾螌?shí)現(xiàn)毛玻璃效果呢?言歸正傳，下面以圖標(biāo)為例，講解如何利用Sketch和AE，制作出帶有毛玻璃效果的動(dòng)效圖標(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
 

　　第六步：成功導(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)也就出來了
 

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

　　最終效果
 

　　寫在最后
 

　　互聯(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)生最大化收益。
 

　　互聯(lián)網(wǎng)領(lǐng)域的設(shè)計(jì)更需要與時(shí)俱進(jìn)，不斷的學(xué)習(xí)、創(chuàng)新。更多資訊請(qǐng)持續(xù)關(guān)注AAA教育。