iPhone 14正式發(fā)布!從設(shè)計師角度聊聊蘋果的靈動島功能

2022-9-9    ui設(shè)計分享達人

蘋果的發(fā)布會經(jīng)常會被視作為「科技春晚」,而如果你看過幾次,大體上還是能夠看出一些套路的。最近幾年的發(fā)布會,基本上都會讓最小的 Apple Watch 系列先來暖場,然后才會上諸如 iPhone 和 Mac 這樣的重頭戲。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

在 Apple Watch Ultra 為整個發(fā)布會打出一波小高潮之后,新的 iPhone 14 從造型、配色到芯片上的「擺爛」,讓人感到蘋果的9月特別活動開始進入了一種疲軟的情緒。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

直到 iPhone 14 Pro 出現(xiàn),全新的打孔屏替代了劉海,「靈動島」在交互上的突出表現(xiàn),透出了屏幕,iPhone 14 所帶來的疲軟氛圍一掃而空,以設(shè)計聞名的蘋果再一次將「你大爺始終是你大爺」打在公屏上。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

交互設(shè)計的野心

必須承認,蘋果在交互設(shè)計上的野心從來未曾淡褪。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

最近幾年,iPadOS 系統(tǒng)從 iOS 系統(tǒng)當中獨立出來,大屏觸控交互連年升級,iPad 就點名道姓地頂著 Mac 產(chǎn)品線來競爭了。iOS 系統(tǒng)也開始在系統(tǒng)個性化和美化上越走越遠,去年 Safari 的交互升級蘋果狠狠的秀了一波操作:

而今年 WWDC 上,「前臺調(diào)度」這一新交互干脆把性能門檻拉到最新的 M1 芯片級別,讓性能為交互體驗作出犧牲,雖然不少人詬病,但是也足以看出蘋果在交互設(shè)計上的認真。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

樁樁件件,蘋果在設(shè)計上的騷操作,正經(jīng)是沒有停過的。

老實說,早在 iPhone X時代,使用挖孔屏的 Android 手機廠商就沒少嘲諷 iPhone 的劉海,這回「靈動島」這套高成本交互設(shè)計方案狠狠壓在 iOS 打孔屏上,蘋果算是懟著過去幾年 Android 打孔屏的友商們的臉一頓輸出,把正確答案糊在對面臉上,一點不客氣。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

挖孔屏交互的設(shè)計公約數(shù)

iPhone 系列從 iPhone 14 Pro 開始,肯定是要革除劉海,啟用挖孔屏了?!胳`動島」這套設(shè)計不僅僅僅只是針對通知系統(tǒng)的重新想象,它將通知系統(tǒng)幾乎修改成了一個隨時待命的彈窗通知系統(tǒng),它自動疊加在界面層之上,可小可大,可以模態(tài)也可非模態(tài)。也正是因為這一點,整個圍繞著「靈動島」存在的即時通知系統(tǒng)的復(fù)雜度,比起之前的通知彈窗復(fù)雜了不止一個數(shù)量級。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

首先,在絕大多時候,「靈動島」會向兩邊拉長作為基礎(chǔ)的狀態(tài)展示,通過圖標和數(shù)據(jù)構(gòu)建出一個典型的非模態(tài)的提示框:

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

比如 Airpods pro 的電量

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

比如指示距離

不過在導(dǎo)航模式之下,為了更加清晰地提供視覺指示,「靈動島」還會拓展成更大的非模態(tài)視覺提示:

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

而對于不同類型的 APP,在非模態(tài)的狀態(tài)和信息呈現(xiàn)上,還有一些特征性的元素,「靈動島」會提供不同的彈出框樣式來盡量貼合不同的需求,比如 Face ID 就是方形的:

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

而作為第三方參與到這次的 「靈動島」演示的APP ,Lyft 還展示了「靈動島」在長條模式下的多狀態(tài)呈現(xiàn)的樣式,比如 Lyft 和通話單獨存在以及同時存在的時候:

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

「靈動島」甚至有分裂樣式來支持多樣狀態(tài)的呈現(xiàn)。

而在可以交互的模態(tài)彈出框上,目前「靈動島」在演示中還僅僅只提供了通話、音樂等常見的樣式:

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

而在發(fā)布會上,還提供了視頻通話、倒計時等一些系統(tǒng)自帶功能在「靈動島」上的模態(tài)交互展示,這也意味著可能在當前,「靈動島」暫時還沒有打算開放出太多的可交互的功能,相反蘋果更加傾向于控制好當前這一功能的復(fù)雜度和穩(wěn)定性。

iOS 的通知設(shè)計邁向次世代

作為剛剛問世的動態(tài)交互控件,「靈動島」和剛剛問世時的「桌面小組件」的待遇是類似的,帶有通知和展示性質(zhì)的非模態(tài)彈窗通知,會相對更多一些,一些涉及交互的模態(tài)彈出通知,類型會有所控制,就目前官方展示的功能而言,可交互的數(shù)量并不算多。

但是就和如今的通知欄、桌面小組件一樣,可交互的控件類型會逐漸增加,而「靈動島」作為一個固定的硬件缺口,在 UI 界面當中,則逐漸變成了一個實體的即時通知控件「核心」,這種轉(zhuǎn)變無疑是化腐朽為神奇,將瑕疵變?yōu)閮?yōu)勢。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

但是就「靈動島」本身作為狀態(tài)呈現(xiàn)、偶爾交互的控件,它更多是作為現(xiàn)有通知體系的一個補充,而非替代。另外,在新的下拉通知界面的設(shè)計上,常駐信息呈現(xiàn)會集中在屏幕上端,而推送通知則會在更加觸手可及的屏幕下半部呈現(xiàn)。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

與此同時,它還針對通訊類的 APP 進行了專門的樣式優(yōu)化:

通訊類 App 的通知現(xiàn)在具有獨特的外觀,這些 App 在征得用戶許可后,可同步它們的狀態(tài),以反映用戶當前的系統(tǒng)級專注模式狀態(tài)。

在這種情形之下,iPhone 本身的硬件完整性,會進一步往前推進,可以預(yù)見到的是 iPhone 15 系列可能會全面使用挖孔屏,「靈動島」將會接管多數(shù)的狀態(tài)指示性的通知。而對于設(shè)計師而言,APP 的通知系統(tǒng)的功能設(shè)計要求和工作量,則會繼續(xù)往上提升一個層級。

說道這里,我不由得想起了當年為 Macbook Pro 所適配的 TouchBar 這一功能。

和 TouchBar 同源不同命

TouchBar 和 「靈動島」在某種意義上是類似的,兩者都是「作為副屏拓展交互并指示狀態(tài)」而存在。但是 TouchBar 在鍵盤上,某種意義上挑戰(zhàn)了用戶的習慣,違反了日常交互時候「所見即所得」的基礎(chǔ)邏輯,用「靈活性」擠占「可靠性」的空間,最終被放棄。

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

「靈動島」在 iPhone 14 Pro 的情況看似相似,實則有根本性的不同,它是將一個幾乎無法被忽略掉的物理「窟窿」相對優(yōu)雅的轉(zhuǎn)化為一個實用的狀態(tài)指示、快速交互的功能,成為了更好的系統(tǒng)補充——畢竟對于一個屏幕上的窟窿而言,但凡是能給用戶多提供一點便利,就算是賺回一點印象分了。

結(jié)語

iOS 16 UI設(shè)計 交互設(shè)計 靈動島

當然,在不需要狀態(tài)展示的日常狀態(tài)下,這個挖孔屏上的窟窿還是個窟窿,遮瑕并不能讓瑕疵徹底消失,但是很多時候,用戶在意的是態(tài)度和巧思,不是么?

作者:陳子木
來源:優(yōu)設(shè)

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設(shè)計m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司 

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.yvirxh.cn

存檔