版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
什么是玻璃擬態(tài)?玻璃擬態(tài)(Glassmorphism),更直觀的說就是玻璃擬物化。它是在2020年末開始在各大設(shè)計(jì)平臺(tái)流行起來的設(shè)計(jì)趨勢(shì)。當(dāng)時(shí)蘋果新發(fā)布的MacOSBigSur操作系統(tǒng)中也使用了這種風(fēng)格,因此玻璃擬態(tài)在設(shè)計(jì)圈就被廣泛流行起來了。概念設(shè)計(jì)這種設(shè)計(jì)風(fēng)格通過將陰影、透明度、深度、描邊結(jié)合到一起創(chuàng)建視覺層級(jí),透明模糊質(zhì)感,形成一種全新的UI設(shè)計(jì)風(fēng)格,因?yàn)榻o人直觀感受像玻璃,所以被被稱為玻璃擬態(tài)(Glassmorphism)。影響玻璃擬態(tài)的美學(xué)因素有透明度、懸浮、色彩、描邊等4大關(guān)鍵要素,正是這些它們相互集合與微妙的光影變化,才形成質(zhì)感豐富的擬態(tài)效果。下面我們看下每個(gè)影響因素具體內(nèi)容是什么?#1.透明度:半透明帶有模糊磨砂質(zhì)感背景#2.懸?。和ㄟ^深度、透明度、陰影營(yíng)造層次感#3.色彩:使用色彩鮮明的顏色與半透明磨砂背景疊加組合#4.描邊:輕微描邊可用來模擬玻璃高光質(zhì)感為什么會(huì)再次出現(xiàn)?任何設(shè)計(jì)風(fēng)格到一定時(shí)間,都會(huì)慢慢退出我們的視線,然后又以新的方式出現(xiàn)在我們面前。早期的擬物化圖標(biāo)火爆的時(shí)候,各大設(shè)計(jì)網(wǎng)站都在舉行設(shè)計(jì)比賽,現(xiàn)今基本很少看到。因?yàn)闀r(shí)代往前走,用戶審美也一樣,手機(jī)系統(tǒng)也大轉(zhuǎn)變,走向扁平化。以蘋果IOS系統(tǒng)為代表的扁平化設(shè)計(jì)風(fēng)格風(fēng)靡一時(shí),影響著眾多設(shè)計(jì)師作品產(chǎn)出。但是什么都是物極必反,扁平化也是會(huì)看膩的。因此設(shè)計(jì)師開始絞盡腦汁想出各種新鮮風(fēng)格,想走出目前的窘境。正好,出現(xiàn)了新擬化風(fēng)格、玻璃擬物化、光感風(fēng)格等,開始在UI設(shè)計(jì)中大量出現(xiàn)。玻璃擬態(tài)的出現(xiàn)也正是打破了純扁平化設(shè)計(jì),讓界面看著有了更多光澤和質(zhì)感,豐富了視覺細(xì)節(jié)。這種風(fēng)格雖然在蘋果大蘇爾系統(tǒng)有使用較多,網(wǎng)上也有很多設(shè)計(jì)好看的優(yōu)秀案例,但至今在移動(dòng)端見到極少,為什么會(huì)這樣?下面部分,我們來分析下這種風(fēng)格一些特征,然后大家就知道了為何沒有被大范圍使用。為何沒被廣泛使用?任何一個(gè)較為明顯的設(shè)計(jì)風(fēng)格出現(xiàn)時(shí),如果沒有大廠帶路,其實(shí)很少有公司敢獨(dú)自冒險(xiǎn)去使用的。畢竟沒人能承擔(dān)起損失用戶的責(zé)任?;剡^頭來,我們看看正在盛行的玻璃擬態(tài)風(fēng)格,這種風(fēng)格,在網(wǎng)上也有很多特別漂亮的設(shè)計(jì)案例。設(shè)計(jì)師GhaniPradita設(shè)計(jì)師GhaniPradita這兩張概念設(shè)計(jì),是我最喜歡Dribbble上的一位設(shè)計(jì)師。他的概念設(shè)計(jì)特別細(xì)膩,用色也是我喜歡感覺。但,這種風(fēng)格第一眼看確實(shí)不錯(cuò),最起碼打破了現(xiàn)階段扁平的UI設(shè)計(jì)。如果它作為前瞻概念探索的方案,是可以吸引老大們注意一下的。我們來看看影響這個(gè)風(fēng)格關(guān)鍵的四大元素,透明度、懸浮、色彩、描邊。大家知道,我們移動(dòng)設(shè)計(jì)基本都是整個(gè)屏幕的,因此有些效果全屏根本看不到,懸浮效果就需要一個(gè)大背景來承載,不然描邊效果也看不到。另外一個(gè)點(diǎn)就是對(duì)比度問題,這種大面積透明度看時(shí)間久了眼睛會(huì)疲憊。另外開發(fā)實(shí)現(xiàn)成本,要計(jì)算這么多模糊,其實(shí)對(duì)系統(tǒng)壓力也蠻大的,加載卡頓、發(fā)熱問題等,當(dāng)然切圖除外,切圖效果也會(huì)折扣。之前騰訊文檔做改版,就運(yùn)用了玻璃擬態(tài)設(shè)計(jì)風(fēng)格,不過也只是先運(yùn)用在Web端的圖標(biāo)上先嘗試。騰訊文檔這樣說來,其實(shí)這種風(fēng)格還是并不差的,而更需要設(shè)計(jì)師們擅于去挖掘它的潛在價(jià)值。它適合用在哪里?接著下面我會(huì)分析下這種風(fēng)格目前可運(yùn)用的一些地方,幫助大家走出困境。如何應(yīng)用這種風(fēng)格?2021下半年,設(shè)計(jì)師如何更好的利用這種風(fēng)格,在概念設(shè)計(jì)探索過程中,做出更新穎、更有設(shè)計(jì)感的界面?首先,來看下目前應(yīng)用比較不錯(cuò)的一些案例,從這些案例中,可以找到合適的切入角度。#1.應(yīng)用在功能局部位置玻璃擬態(tài)風(fēng)格可以運(yùn)用在某些關(guān)鍵功能的局部位置,這樣既不會(huì)影響整體感受,也會(huì)在設(shè)計(jì)上有些亮點(diǎn),突破純扁平化設(shè)計(jì)的壁壘。#2.圖標(biāo)中使用圖標(biāo)中使用是最接近我們能落地,畢竟占面積小,而且直接切圖給開發(fā)。不過這種風(fēng)格也不能單獨(dú)出現(xiàn)在界面中,它需要和整體世界觀一致才可以。不然就會(huì)顯得格格不入。#3.網(wǎng)頁(yè)頭圖中使用騰訊文檔web端Web端使用,整體感受會(huì)比移動(dòng)會(huì)好一些,畢竟面積大,效果展示好。#4.車載HMI設(shè)計(jì)車載HMI設(shè)計(jì)中,也開始出現(xiàn)這種玻璃擬物化卡片設(shè)計(jì)風(fēng)格,畢竟車載設(shè)計(jì)和其他領(lǐng)域有所區(qū)別,擬物化更有觸碰質(zhì)感,顯得車內(nèi)整體更有品質(zhì)感。最后補(bǔ)充說一句,玻璃擬態(tài)風(fēng)格看起來細(xì)節(jié)會(huì)豐
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 第六單元測(cè)試卷(單元測(cè)試)-2024-2025學(xué)年四年級(jí)上冊(cè)統(tǒng)編版語文
- 原創(chuàng)2025年《南方新課堂·高考總復(fù)習(xí)》英語 第三部分 專題三 七選五型閱讀理解配套課件
- 江西省撫州市臨川二中學(xué)、崇仁二中學(xué)2023-2024學(xué)年中考四模數(shù)學(xué)試題含解析
- 第二單元100以內(nèi)的加法和減法(二)(單元測(cè)試)-2024-2025學(xué)年人教版數(shù)學(xué)二年級(jí)上冊(cè)
- 童年故事鈣D測(cè)試練習(xí)卷含答案
- 第一單元(單元測(cè)試)-2024-2025學(xué)年五年級(jí)上冊(cè)語文統(tǒng)編版
- 中班安全課件《路邊的標(biāo)志》
- 采購(gòu)貨物購(gòu)銷合同模板
- 銀行借貸協(xié)議書范本
- 餐飲成本核算與控制培訓(xùn)課件
- 劍橋國(guó)際少兒英語全套教學(xué)課件
- 英語語言學(xué)之Morphology課件
- 隨班就讀學(xué)生檔案材料
- 機(jī)械設(shè)計(jì)-螺旋傳動(dòng)設(shè)計(jì)(千斤頂)
- 課堂教學(xué)改革課件
- 殘疾人基本狀況登記表完整
- 寓言故事《鄭人買履》劇本
- 信息系統(tǒng)及信息安全運(yùn)維服務(wù)項(xiàng)目清單
- 監(jiān)理單位如何對(duì)分包單位進(jìn)行進(jìn)場(chǎng)交底
- 收款賬戶確認(rèn)書
- JJG1054-2009鉗形接地電阻儀檢定規(guī)程-(高清現(xiàn)行)
評(píng)論
0/150
提交評(píng)論