在官方交互設(shè)計指南之前,我們團(tuán)隊已經(jīng)在開發(fā)AndroidXR的系統(tǒng)產(chǎn)品了,當(dāng)然我也在一直關(guān)注Google AI glasses 以及project aura設(shè)備的上架。 因為這2個設(shè)備才是真正的意味著可以觸及到普通消費(fèi)者,而在春節(jié)期間,谷歌官方更新了AndroidXR在AIglasses的設(shè)計規(guī)范,我們詳細(xì)閱讀了這篇文章,將其可用的官方指南作為我們的設(shè)計指南。
![]()
我第一時間看到了并且將其分享給身邊那些打算做空間計算的朋友,看看AndroidXR與vision OS的區(qū)別。 1.談透明屏設(shè)計:讓虛擬與現(xiàn)實在眼前共存
—— 來自 Jetpack Compose Glimmer 團(tuán)隊的設(shè)計實踐分享
當(dāng)我們談?wù)摻缑嬖O(shè)計時,傳統(tǒng)總是從一個固定的容器開始 —— 手機(jī)、平板、電腦屏幕。設(shè)計師往往填充屏幕的矩形區(qū)域,排列內(nèi)容、布局元素。但如果屏幕不是屏幕?如果我們面前看到的“畫布”,不是一塊黑色矩形,而是現(xiàn)實世界本身?這就是設(shè)計透明屏的核心挑戰(zhàn)。
![]()
本文來自 Google 設(shè)計師 David Allin Reese 及 Jetpack Compose Glimmer 團(tuán)隊,講述他們?nèi)绾螢轱@示式 AI 眼鏡這種新型透明屏界面重新構(gòu)建設(shè)計語言。
2.重新定義界面:現(xiàn)實即畫布
普通屏幕的界面設(shè)計依賴于容器(屏幕矩形、柵格、層次結(jié)構(gòu)),但透明屏不同:界面并不浮于一塊固態(tài)屏幕之上,而是直接疊加在現(xiàn)實世界之上。你看到的不再是統(tǒng)一暗背景,而是千變?nèi)f化的真實環(huán)境 —— 天空、街道、人臉、風(fēng)景。如何在這樣的背景上層疊界面?如何不讓 UI 成為視覺噪音?這是設(shè)計師面臨的新問題。
設(shè)計的首要目標(biāo)從“填滿屏幕”轉(zhuǎn)向“尊重世界”:界面需要恰到好處地出現(xiàn),在用戶需要時出現(xiàn),用戶不需要時消失。
2.界面不是貼在鏡片上,而是在視野中投射
透明屏界面并非直接貼在眼鏡鏡片上,而是“投射”到大約 1 米遠(yuǎn)的虛擬空間。也就是說,用戶在閱讀內(nèi)容時需要有意識地將視線從現(xiàn)實世界轉(zhuǎn)移到這個深度平面。這不是無意識的一瞥,而是一個物理的、不可忽視的注意力移動。設(shè)計必須具備吸引用戶注意力的能力,同時保持界面與現(xiàn)實世界的融合。
這個距離感不僅是技術(shù)限制,更是影響視覺可讀性的關(guān)鍵因素。界面必須清晰、直觀,讓用戶一瞥就懂,而不是漫長聚焦。
3.光與顏色:重新理解“黑”和對比度
在透明顯示技術(shù)上,“黑色不是顏色,它是透明”。這不是設(shè)計風(fēng)格,而是物理現(xiàn)實 —— 這種顯示只能添加光線、不能阻擋光線。所以原來在平板和手機(jī)上習(xí)以為常的設(shè)計套路(大量明亮色塊、柔和對比、陰影)在透明屏上完全失效。
![]()
嘗試將傳統(tǒng) Material Design 的色彩系統(tǒng)直接移植到透明顯示上,會遇到兩個問題:
![]()
高亮面會發(fā)出刺眼光暈(halation),文本模糊難辨。
飽和色在真實背景下消失或失真,無法提供穩(wěn)定對比。
解決思路:
使用深色表面 + 明亮內(nèi)容:深色作為“虛擬容器”,能提供穩(wěn)定可讀的對比;亮色文本和圖標(biāo)更易辨識。
將“黑”定義為 UI 的基礎(chǔ)語義:它不是顏色,而是“無光”容器。
設(shè)計更加中性、穩(wěn)定的色彩體系,以適應(yīng)真實世界亮度和色彩動態(tài)變化。
在透明顯示中,標(biāo)準(zhǔn)的字號、像素密度概念不再適用。取而代之的是 視覺角度(visual angle) —— 用戶從約 1 米遠(yuǎn)閱讀界面時,字體大小看起來有多大。視覺角度遠(yuǎn)比像素更決定可讀性。
![]()
Google 設(shè)計團(tuán)隊與視覺科學(xué)團(tuán)隊合作,確定了最低可讀視覺角度,并根據(jù)此構(gòu)建了可在多種環(huán)境下保持清晰的字體體系。此外,他們對 Google Sans Flex 進(jìn)行了字間距與光學(xué)尺寸調(diào)整,以增強(qiáng)透明界面的閱讀體驗。
5. 動效:引導(dǎo)注意,而不是吸引注意
在透明顯示中,動效不是為了炫酷,而是為了自然引導(dǎo)注意力的轉(zhuǎn)移。UI 出現(xiàn)、消失、移動的動畫必須尊重人的注意心理:
![]()
過快的轉(zhuǎn)場會錯失用戶注意力;
完全靜態(tài)又難以捕獲視線。
設(shè)計團(tuán)隊發(fā)現(xiàn),一些界面動畫需要比傳統(tǒng)界面長得多的時間,以便在用戶周圍真實環(huán)境干擾下仍然保持可感知和不突兀。
![]()
6.設(shè)計哲學(xué):讓技術(shù)輔助,而不是占據(jù)視野
透明屏設(shè)計的核心,不是把信息塞滿用戶視野,而是 在用戶需要時出現(xiàn),在不需要時消失;不是“覆蓋現(xiàn)實”,而是“增強(qiáng)現(xiàn)實”。設(shè)計要尊重人的注意力、理解人類視覺習(xí)慣,并與真實世界達(dá)成和諧共存。
![]()
總結(jié):三大設(shè)計啟示
界面與現(xiàn)實共存:不再是邊框矩形,而是投射視野中的層次空間。
重新定義色彩與對比:黑=透明;深色容器 + 亮內(nèi)容更易閱讀。
視覺角度重于像素密度:實際閱讀體驗來自視角,而非像素本身。
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.