中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

01 前言

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

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

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

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

Windows Vista /Mac OS X 10.10（Yosemite）

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

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

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

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

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

新的毛玻璃效果更加注重功能說明，強調(diào)視覺重心。配合彩色漸變的新壁紙，設(shè)計語言上更為時尚簡潔。

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

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

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

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

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

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

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

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

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

（1）表達(dá)層級

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

?兼職多個頁面毛玻璃效果

（2）品牌一致性

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

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

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

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

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

說了這么多，那我們該如何實現(xiàn)毛玻璃效果呢？言歸正傳，下面以圖標(biāo)為例，講解如何利用Sketch和AE，制作出帶有毛玻璃效果的動效圖標(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)辨識度，我們最后再將第二步的圖形再次復(fù)制，去掉填充。增加漸變描邊，色值為：#EAF1FF – #DFD5FF

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

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

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

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

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

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

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

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

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

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

最終效果：

06 寫在最后

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

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

作者：牟凱旋、訾亞磊

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

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