設計沉思錄 | 你的設計為什么那么糙?

0 評論 2724 瀏覽 23 收藏 13 分鐘

編輯導讀:毛玻璃效果注重功能說明,強調視覺重心,在UI設計中應用很廣。文章從毛玻璃效果的歷史發展出發,對其在58兼職產品中的具體應用設計進行了梳理和總結,希望能給大家作為參考,并在工作中產生助益。

01 前言

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

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

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

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

Windows Vista /Mac OS X 10.10(Yosemite)

蘋果早期UI界面使用拉丁語中的「水」一詞來命名,也就是 Aqua 風格,從控制窗口開關的按鈕到滾動條,似乎都是用晶瑩剔透的水滴制作而成,并且被頭頂的光源給充分地照耀著,呈現出令人忍不住想舔一口的強烈水晶質感。

先被用在蘋果的 iMovie 軟件上,2001年被推廣至整個系統、蘋果網站使用,以便和蘋果硬件的視覺風格融合。成為2000年以后幾年整整一代UI設計師、網頁設計師,美術工作者喜歡的風格。以至于一段時間內泛濫成災。

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

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

2017年,毛玻璃效果全面回歸 Windows 10,并且細節、質感也得到提升。直至今年,蘋果推出了最新版的桌面系統 Mac OS Big Sur。重新設計了系統、內置應用的圖標和界面,運用大量的毛玻璃、半透明界面元素,界面更為扁平。

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

圖片來源于網絡

04 在58兼職中的應用

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

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

在改版前,我們聯合用研和交互,發放了調研問卷并輸出了《用戶調研報告》。調研后,發現兼職在線賺錢人群有以下特點:

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

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

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

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

(1)表達層級

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

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

(2)品牌一致性

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

(3)視覺呈現效果

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

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

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

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

以上圖圖標為例

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

第二步:將繪制好的圖形復制,并水平翻轉,添加蒙版。填充漸變色,色值為:#F2F7FF – #FFFFFF

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

PS :高斯模糊數值和圖層位置可根據視覺美觀度做適當調整

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

加入游戲按鍵元素,這樣毛玻璃靜態圖標就繪制完成

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

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

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

第六步:成功導入AE后,整理圖層??梢钥吹綀D層與Sketch基本一致,將多余的圖層(小眼睛取消的圖層)刪除,帶小鎖的可忽略。同時先隱藏在sketch實現的毛玻璃效果,留下基本圖形并命名為圖層1、圖層2

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

第八步:新建調整圖層,放在圖層2的下方,并設置alpha遮罩

第九步:給調整圖層添加高斯模糊,強度為100

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

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

最終效果:

 

06 寫在最后

互聯網領域變化的很快,每年的設計趨勢都在變化,人們的需求和期望都因為新技術和環境的發展,有了不同的感受。

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

 

作者:牟凱旋、訾亞磊

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@牟凱旋、訾亞磊

題圖來自 Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!