蘋果設(shè)計(jì)進(jìn)化史!Siri 界面為什么變成屏幕四周跑馬燈?
最近喚醒 Siri 時(shí),你是否注意到它不再是屏幕中央的一個(gè)圓球,而是化作了環(huán)繞 iPhone 四周的柔和光暈?這個(gè)看似微小的變化,實(shí)際上代表了 AI 和語音交互設(shè)計(jì)的一次重大突破。
從 2011 年的擬物化麥克風(fēng)圖標(biāo),到如今的「隱形」邊緣光效,Siri 的界面進(jìn)化史濃縮了整個(gè)移動(dòng) UI 設(shè)計(jì)的發(fā)展軌跡。每一次改版都不僅僅是視覺風(fēng)格的更新,更是蘋果對「人機(jī)交互應(yīng)該是什么樣子」這一根本問題的深度思考。
對于設(shè)計(jì)師而言,這個(gè)案例提供了一個(gè)絕佳的觀察窗口:如何在保持功能完整性的同時(shí),讓界面變得更加「無形」?如何平衡用戶的即時(shí)反饋需求與長期的使用體驗(yàn)?最重要的是,當(dāng) AI 成為我們?nèi)粘9ぷ髁鞒痰囊徊糠謺r(shí),我們應(yīng)該如何重新定義「界面」本身?
讓我們跟隨多年來一直在收集整理界面設(shè)計(jì)案例的優(yōu)設(shè)細(xì)節(jié)獵人( https://www.uisdc.com/hunter ),一起回顧 Siri 十多年來的設(shè)計(jì)演變,看看每一次迭代背后的設(shè)計(jì)邏輯,以及它們?nèi)绾螢槲覀兘裉斓?AI 產(chǎn)品設(shè)計(jì)提供啟示。
階段 1:擬物化 (iOS 5 - iOS6)
最早期的 Siri 界面是帶有紫色亞麻紋理背景的全屏對話界面(Linen Texture Background)和一個(gè)寫實(shí)的麥克風(fēng)圖標(biāo),展現(xiàn)了典型的擬物化(Skeuomorphism)風(fēng)格。這是喬布斯時(shí)代和 Scott Forstall 主導(dǎo)下的標(biāo)志性設(shè)計(jì),通過模仿現(xiàn)實(shí)世界物體的外觀和質(zhì)感,幫助用戶理解和使用新的數(shù)字界面。
當(dāng)用戶點(diǎn)擊麥克風(fēng)后,圖標(biāo)會發(fā)光以表示正在聆聽,而交互則以對話氣泡的形式呈現(xiàn)。
接下來的發(fā)展眾所周知,隨著用戶逐漸熟悉觸摸屏,擬物化設(shè)計(jì)開始被視為繁瑣、沉重且”不真誠”(使用人造紋理模仿實(shí)物)。當(dāng) Jony Ive 接手人機(jī)界面設(shè)計(jì)后,他在整個(gè)公司推廣更為現(xiàn)代、簡潔、輕盈的扁平化設(shè)計(jì) (Flat Design)。iOS 7 的發(fā)布標(biāo)志著這一重大轉(zhuǎn)變,Siri 的界面也隨之迎來改版。
階段 2:全屏沉浸式體驗(yàn) (iOS 7 - iOS 13)
采用扁平化設(shè)計(jì) (Flat Design),去除了所有裝飾性元素、紋理和陰影,專注于內(nèi)容本身。Siri 界面更新為全屏模糊背景 (Blurry Background) 配合動(dòng)態(tài)彩色聲波 (Colorful Waveform)。
Siri 界面:iOS7 對比 iOS6
聲波動(dòng)畫 (Waveform Animation) 成為此版本最核心的視覺元素——一條彩色的、不斷變化的線條根據(jù)用戶說話的音量和語調(diào)實(shí)時(shí)跳動(dòng),如同聲譜圖 (Spectrogram),為用戶提供了非常直觀的”正在聆聽”反饋。
然而,這個(gè)設(shè)計(jì)存在明顯痛點(diǎn)。Siri 占據(jù)整個(gè)屏幕,導(dǎo)致用戶無法在與 Siri 交互的同時(shí)查看或操作之前正在使用的 App。例如,當(dāng)你正在查看地圖并喚醒 Siri 詢問天氣時(shí),地圖界面會完全被遮蓋。
隨著手機(jī)性能提升和用戶對多任務(wù)處理需求的增長,這種「全屏遮擋」模式顯得越來越低效和過時(shí)。用戶期望語音助手能作為一個(gè)「輔助層」存在,而非一個(gè)獨(dú)立的「應(yīng)用」。
階段 3:緊湊式光球 Compact Orb (iOS 14 - iOS 17)
iOS 14 采用緊湊式設(shè)計(jì)風(fēng)格,來電通知、Siri 都從全屏改為了更小、更不打擾的組件。Siri 順勢改成屏幕底部的 Siri 光球 (Siri Orb)。
這個(gè)彩色的球體并非靜止的。它會像呼吸一樣輕微脈動(dòng),在你說話時(shí)會根據(jù)你的聲音產(chǎn)生更復(fù)雜的、流動(dòng)的、變形的動(dòng)畫效果。它感覺更「有機(jī)」、更「智能」,仿佛一個(gè)有生命力的實(shí)體。
這是對上一代全屏聲波問題的直接回應(yīng)。通過將 Siri 縮小為一個(gè)浮動(dòng)的球,用戶可以在喚醒 Siri 的同時(shí),繼續(xù)看到屏幕上的主要內(nèi)容,實(shí)現(xiàn)了真正的非打斷式交互 (Non-interruptive Interaction)。
Siri 的回答也從全屏對話變成了屏幕頂部或底部的「通知式卡片」,只顯示關(guān)鍵信息,不會遮擋整個(gè) App。
雖然光球已經(jīng)很小,但在某些場景下,它仍然可能遮擋屏幕底部的關(guān)鍵按鈕或內(nèi)容。這為下一階段的改進(jìn)埋下了伏筆。
階段 4:動(dòng)態(tài)環(huán)境發(fā)光邊框 Ambient Edge Glow (iOS 18+)
喚醒 Siri 時(shí),它會化作環(huán)繞屏幕四周的柔和光暈(Edge Glow)。這道光暈隨著交互動(dòng)態(tài)變化,使 Siri 不再是屏幕上的一個(gè)「物件」,而是「融入」了整個(gè)系統(tǒng)環(huán)境。在 iPhone 的靈動(dòng)島 (Dynamic Island) 上,Siri 的動(dòng)畫與之自然融合,進(jìn)一步增強(qiáng)了整體的連貫性。
這是緊湊式設(shè)計(jì)的終極進(jìn)化。光環(huán)幾乎不占用任何像素空間,將視覺干擾降到最低。它只是一個(gè)「狀態(tài)指示」,告訴用戶 Siri 已被喚醒并正在聆聽。
這種設(shè)計(jì)理念是讓技術(shù)「退后一步」,變得更加環(huán)境化和背景化。語音助手應(yīng)該像空氣一樣,需要時(shí)即刻響應(yīng),不需要時(shí)則完全隱形,而不是一個(gè)需要你時(shí)刻關(guān)注的 UI 元素。
配合靈動(dòng)島和 iPhone 15 Pro 上的操作按鈕 (Action Button),這種輕量化的視覺反饋?zhàn)?Siri 的調(diào)用和交互變得前所未有的快捷和無感。
寫在最后
Siri 的界面進(jìn)化之路,本質(zhì)上是從一個(gè)被打開的應(yīng)用,演變成一個(gè)「疊加在系統(tǒng)上的輔助層」,最終趨向于一個(gè)「融入系統(tǒng)環(huán)境的智能體」。這個(gè)過程清晰地展示了蘋果對未來人機(jī)交互的思考:更強(qiáng)大,但更無形。
對于今天的設(shè)計(jì)師而言,Siri 的界面變化為我們提供了 3 個(gè)重要啟示:
- 漸進(jìn)式改進(jìn)勝過激進(jìn)式重設(shè)計(jì) - 蘋果用了十年時(shí)間逐步優(yōu)化,每次迭代都解決了上一版本的核心問題
- 用戶需求的變化決定設(shè)計(jì)方向 - 從單任務(wù)到多任務(wù),從應(yīng)用思維到系統(tǒng)思維
- 最好的界面是沒有界面 - 技術(shù)越先進(jìn),界面應(yīng)該越「無形」
隨著 AI 技術(shù)的快速發(fā)展,我們正站在人機(jī)交互的新拐點(diǎn)上。ChatGPT、Claude、Midjourney 等工具的界面設(shè)計(jì)都在經(jīng)歷類似的探索過程。作為設(shè)計(jì)師,我們需要思考的不僅是如何讓語音交互或 AI 更好炫酷,更是如何讓 AI 更好用、更自然、更融入用戶的工作流程。
想要獲得更多蘋果界面設(shè)計(jì)的深度洞察和 AI 產(chǎn)品的設(shè)計(jì)靈感?
推薦關(guān)注優(yōu)設(shè)細(xì)節(jié)獵人( https://www.uisdc.com/hunter ),這里匯集了大量精選的界面設(shè)計(jì)案例分析,包括:
- 蘋果最新系統(tǒng)的界面設(shè)計(jì)解讀
- AI 產(chǎn)品的交互設(shè)計(jì)趨勢分析
- 國內(nèi)外優(yōu)秀產(chǎn)品的設(shè)計(jì)細(xì)節(jié)拆解
- 實(shí)用的設(shè)計(jì)方法論和工具推薦
每一個(gè)案例都經(jīng)過深度研究和專業(yè)解讀,幫助設(shè)計(jì)師快速獲取行業(yè)前沿動(dòng)態(tài),提升設(shè)計(jì)敏銳度和實(shí)戰(zhàn)能力。在這個(gè) AI 重塑設(shè)計(jì)行業(yè)的時(shí)代,保持對優(yōu)秀設(shè)計(jì)的敏感度,就是保持競爭力的關(guān)鍵。
作者:龍爪槐守望者
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)