深度體驗(yàn)液態(tài)玻璃UI設(shè)計(jì)一個(gè)月,和你聊聊真實(shí)感受!
哈嘍,這里是設(shè)計(jì)夾,今天分享的是「液態(tài)玻璃 UI 使用體驗(yàn)」。
在 WWDC25 大會(huì)上,蘋果推出了全新的系統(tǒng)設(shè)計(jì)語言——Liquid Glass (液態(tài)玻璃)。雖然網(wǎng)絡(luò)上對(duì)新設(shè)計(jì)的評(píng)價(jià)褒貶不一,但作為行業(yè)領(lǐng)頭者,蘋果這次的更新確實(shí)敢于嘗試。雖說用戶體驗(yàn)上還存在一些問題,但也讓我們看到了蘋果未來的設(shè)計(jì)方向。
那蘋果為什么要搞液態(tài)玻璃 UI 呢?通過近一個(gè)月的真實(shí)使用體驗(yàn),今天聊聊我的感受以及對(duì)新設(shè)計(jì)風(fēng)格的看法~
一、什么是液態(tài)玻璃?
這種透明的效果像屏幕表面覆蓋了一層玻璃或水滴,界面高光會(huì)隨著滾動(dòng)和點(diǎn)擊等交互而實(shí)時(shí)變化。
它不只是改改風(fēng)格那么簡(jiǎn)單,而是能適配 iOS 26、macOS 26、iPadOS 26 這些全平臺(tái)系統(tǒng)的通用設(shè)計(jì)體系,這其實(shí)也預(yù)示著未來用戶體驗(yàn)和感官體驗(yàn)的方向要變了。
具體來說,有這幾個(gè)特點(diǎn):
- 實(shí)時(shí)響應(yīng):隨著用戶滾動(dòng),玻璃背景的透明度、反射和折射等效果會(huì)產(chǎn)生細(xì)微變化。
- 玻璃質(zhì)感:帶著輕盈的深度感,就像玻璃蓋在內(nèi)容上,界面和內(nèi)容能融合到一起。
- 全平臺(tái)統(tǒng)一:同一套設(shè)計(jì)語言能用在 iPhone、iPad、Mac、Watch 和 Vision Pro 上。
液態(tài)玻璃是自 2013 年 iOS 7 扁平化設(shè)計(jì)以來最大的變化,這種風(fēng)格有點(diǎn)像 Windows 早期推出的“Aero Glass”。
但 Windows 只是有了透明的視覺效果,蘋果的“Liquid Glass”做的更精致,是基于物理原理的界面,甚至有點(diǎn)回到擬物化時(shí)代的感覺。
二、液態(tài)玻璃的優(yōu)缺點(diǎn)分析
我認(rèn)為的優(yōu)勢(shì):
① 全平臺(tái)延續(xù)統(tǒng)一感
所有系統(tǒng) (iOS、macOS、watchOS、VisionOS) 用一套視覺語言,不同設(shè)備間的體驗(yàn)?zāi)芨B貫。
哪怕一開始要花點(diǎn)時(shí)間適應(yīng),但在 iPhone 上熟悉了界面風(fēng)格,到了 iPad、Mac、Vision Pro 上也能自然銜接,學(xué)起來更輕松,體驗(yàn)卻更豐富。
② 界面更有互動(dòng)感
界面會(huì)對(duì)滾動(dòng)、觸摸這些操作做出自然的視覺反饋,就像觸摸物理世界里的東西一樣,能讓用戶更投入,加強(qiáng)使用的沉浸感。
③ 增強(qiáng)內(nèi)容沉浸感
界面和背景無縫融合,用戶能更專注于主要內(nèi)容。而且它能根據(jù)場(chǎng)景調(diào)整——比如深色背景會(huì)調(diào)亮一點(diǎn),復(fù)雜背景會(huì)模糊一點(diǎn),這樣信息傳遞更貼合當(dāng)下場(chǎng)景,也能引導(dǎo)用戶關(guān)注重點(diǎn)。
我認(rèn)為的缺點(diǎn):
① 可讀性下降
透明效果和背景融合看著很吸引人,但很容易讓文字 “站不穩(wěn)”。背景和界面元素融到一起時(shí),內(nèi)容對(duì)比度顯著降低,導(dǎo)致難以閱讀內(nèi)容,看久了眼睛也會(huì)特別疲勞。
白色文字搭配玻璃背景,文字是不是很難看清?
② 分散注意力
那些玻璃光澤、高光效果很容易分散注意力,讓用戶沒法專注在需要的信息上。就算折射效果做得再精細(xì),這些動(dòng)畫也會(huì)喧賓奪主,尤其是需要快速完成任務(wù)的時(shí)候,效率會(huì)很低。
③ 可訪問性下降
對(duì)有視覺或認(rèn)知障礙的用戶來說,這些視覺效果可能會(huì)讓他們更累,更分心。
比如老人或視力不好的用戶,通常喜歡高對(duì)比度、輪廓清晰、靜態(tài)的界面,半透明和實(shí)時(shí)變化的元素只會(huì)讓他們更難集中。
④ 應(yīng)用間的風(fēng)格不統(tǒng)一
設(shè)計(jì)語言一旦更新,很多 APP 應(yīng)用都會(huì)改版來適配新系統(tǒng),尤其是蘋果這種定義 UI 標(biāo)準(zhǔn)的引領(lǐng)者,不跟著改很快就顯得過時(shí)。但問題是,不是所有應(yīng)用都能同步跟上。
資源少的小應(yīng)用、設(shè)計(jì)保守的品牌應(yīng)用,或者要考慮兼容性的應(yīng)用,很難跟上液態(tài)玻璃的節(jié)奏,慢慢就會(huì)被這個(gè)設(shè)計(jì)潮流甩在后面。
用戶用起來就會(huì)覺得很割裂:有的 APP 應(yīng)用像玻璃風(fēng)格一樣透明,有的還是扁平風(fēng)格的。
三、蘋果的戰(zhàn)略:為 XR 和 Zero UI 做準(zhǔn)備
雖然有缺點(diǎn),但這套設(shè)計(jì)展現(xiàn)了一個(gè)策略——通過液態(tài)玻璃,悄悄讓用戶適應(yīng)“感官界面”的思考方式。在轉(zhuǎn)向成熟的XR空間交互界面之前,先讓用戶提前體驗(yàn)“感官化的空間計(jì)算和設(shè)計(jì)邏輯”。
① 強(qiáng)調(diào)基于物理的界面
玻璃紋理、光線反射折射、三維運(yùn)動(dòng),這些都是營(yíng)造 3D 空間感的典型元素。這不只是 2D 屏幕上的圖形,而是融合了現(xiàn)實(shí)和數(shù)字的感官體驗(yàn),多了一個(gè)新維度。
結(jié)合 visionOS 來看,這明顯是在讓用戶慢慢適應(yīng) XR 體驗(yàn)。
② 從觸摸到手勢(shì)的過渡
液態(tài)玻璃打破了以清晰按鈕、選項(xiàng) tab 為主的界面模式,核心是增強(qiáng)“光澤、動(dòng)感、深度”這些視覺交互,并且實(shí)時(shí)響應(yīng)用戶操作。這種 “實(shí)時(shí)響應(yīng)” 的體驗(yàn),正是最近常說的“無界面 (Zero UI) ”和空間計(jì)算界面的方向。
傳統(tǒng) UI 靠清晰的邊界和功能提示——比如“這是一個(gè)按鈕”、“請(qǐng)點(diǎn)這里”。但在無界面或空間計(jì)算里,界面得主動(dòng)響應(yīng)用戶的意圖和場(chǎng)景,深度融入其中。
所以液態(tài)玻璃可以看作是“沉浸式交互”的預(yù)演:引導(dǎo)用戶的注意力關(guān)注不斷變化的提示 (例如光澤、移動(dòng)和深度變化),把它們當(dāng)成合適的觸發(fā)點(diǎn)和反饋,訓(xùn)練用戶以后能自然地理解和使用“界面”。
③ 全平臺(tái)統(tǒng)一設(shè)計(jì),統(tǒng)一用戶認(rèn)知
這套界面已經(jīng)用在蘋果所有 OS26 系統(tǒng)上。所以 iOS 生態(tài)的用戶,其實(shí)只能自然而然地適應(yīng) (或者說接受) 蘋果推動(dòng)的這種體驗(yàn)。如果無法接受,那只能離開這個(gè)生態(tài)了。
我一直覺得 Vision Pro 的 UI“很科幻”。但看了液態(tài)玻璃后忽然明白:如果先讓這種“以感官為中心的界面”在手機(jī)上變得常見,等 Vision Pro 普及了,用戶其實(shí)不用怎么學(xué)就能自然適應(yīng)。
這是一個(gè)慢慢改變我們體驗(yàn)方式的過程:從“看 (視覺焦點(diǎn))”到“感覺 (感官焦點(diǎn))”,從基于觸摸的界面到基于感官的用戶體驗(yàn)的平滑過渡。
設(shè)計(jì)語言不只是“好看”或“酷炫”的設(shè)計(jì)體系,它是用戶和產(chǎn)品之間的體驗(yàn)紐帶,也是品牌理念最直接的體現(xiàn)。
所以在視覺美觀和功能性沖突的情況下,我們不能只盯著“效果多棒!”“動(dòng)畫多復(fù)雜!”,更要想 “以后我們?cè)撛趺撮喿x和處理信息?”
最后
總的來說,液態(tài)玻璃的視覺體驗(yàn)確實(shí)很精致,但畢竟現(xiàn)在我們還是用二維的屏幕。就算它是為未來的 XR 做鋪墊,但對(duì)當(dāng)下的用戶來說,這種變化到底有沒有真正帶來更好的體驗(yàn),還是另一回事。
蘋果液態(tài)玻璃確實(shí)有戰(zhàn)略考量,但要覆蓋整個(gè)系統(tǒng),還是不夠通用。只要 UI 界面上有可見的元素,就必須保證看得清、好操作,而不是藏在手勢(shì)或者其他交互操作里。
所以我對(duì)蘋果這次更新,多少有點(diǎn)保留意見。當(dāng)然液態(tài)玻璃的美感確實(shí)沒話說。
最后,UI 設(shè)計(jì)的新時(shí)代好像要來了,作為設(shè)計(jì)師,我還是挺期待的。如果你有什么想法想分享,歡迎留言咱們一起聊聊~
慢慢來比較快,如覺得有幫助,
請(qǐng)點(diǎn)個(gè)贊&推薦,分享給更多的朋友,謝謝!
作者:Clip設(shè)計(jì)夾
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)