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

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

　　Aero(毛玻璃)效果的歷史
 

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

　　蘋果早期UI界面使用拉丁語中的「水」一詞來命名，也就是 Aqua 風格，從控制窗口開關的按鈕到滾動條，似乎都是用晶瑩剔透的水滴制作而成，并且被頭頂?shù)墓庠唇o充分地照耀著，呈現(xiàn)出令人忍不住想舔一口的強烈水晶質(zhì)感。先被用在蘋果的 iMovie 軟件上，2001年被推廣至整個系統(tǒng)、蘋果網(wǎng)站使用，以便和蘋果硬件的視覺風格融合。成為2000年以后幾年整整一代UI設計師、網(wǎng)頁設計師，美術工作者喜歡的風格。以至于一段時間內(nèi)泛濫成災。
 

　　蘋果早期Aqua風格
 

　　OS X早期版本的Dock(桌面最下部)只墊了半透明白色底，沒做高斯模糊。
 

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

　　2017年，毛玻璃效果全面回歸 Windows 10，并且細節(jié)、質(zhì)感也得到提升。直至今年，蘋果推出了最新版的桌面系統(tǒng) Mac OS Big Sur。重新設計了系統(tǒng)、內(nèi)置應用的圖標和界面，運用大量的毛玻璃、半透明界面元素，界面更為扁平。新的毛玻璃效果更加注重功能說明，強調(diào)視覺重心。配合彩色漸變的新壁紙，設計語言上更為時尚簡潔。
 

　　在58兼職中的應用
 

　　這次我們在58兼職在線賺錢改版項目中，引入毛玻璃效果的設計語言。
 

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

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

　　1. 用戶年輕化：15-30歲之間用戶占比75%
 

　　2. 文化程度相對較高：高中以上學歷人群占比84%
 

　　3. 職業(yè)集中為學生、寶媽和自由職業(yè)人員等幾類人群
 

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

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

　　相應的，毛玻璃效果的引入適當解決了兼職的一些問題。我們在個人中心、任務詳情頁和排行榜等多個地方運用了毛玻璃背景，有效的解決了頁面層級和統(tǒng)一性的問題。
 

　　1. 表達層級
 

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

　　兼職多個頁面毛玻璃效果
 

　　2. 品牌一致性
 

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

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

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

　　在線賺錢頁部分入口圖標繪制
 

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

　　說了這么多，那我們該如何實現(xiàn)毛玻璃效果呢?言歸正傳，下面以圖標為例，講解如何利用Sketch和AE，制作出帶有毛玻璃效果的動效圖標。教程如下：
 

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

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

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

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

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

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

　　第五步：圖標繪制好之后，將其導入AE中，這里需要使用插件工具：AEUX，無縫銜接After Effects
 

　　第六步：成功導入AE后，整理圖層?？梢钥吹?a href="http://5wd995.cn/ui/2773.html" target="_blank">圖層與Sketch基本一致，將多余的圖層(小眼睛取消的圖層)刪除，帶小鎖的可忽略。同時先隱藏在sketch實現(xiàn)的毛玻璃效果，留下基本圖形并命名為圖層1、圖層2
 

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

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

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

　　第十步：最后開始針對圖標加入自己想要的動態(tài)效果，這樣一個毛玻璃風格的動效圖標也就出來了
 

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

　　最終效果
 

　　寫在最后
 

　　互聯(lián)網(wǎng)領域變化的很快，每年的設計趨勢都在變化，人們的需求和期望都因為新技術和環(huán)境的發(fā)展，有了不同的感受。作為設計師，我們對設計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設計的本質(zhì)功能，強化自己的設計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產(chǎn)品設計中，以產(chǎn)生最大化收益。
 

　　互聯(lián)網(wǎng)領域的設計更需要與時俱進，不斷的學習、創(chuàng)新。更多資訊請持續(xù)關注AAA教育。