<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          iPhone 14正式發布!從設計師角度聊聊蘋果的靈動島功能

          2022-9-9    ui設計分享達人

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

          iOS 16 UI設計 交互設計 靈動島

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

          iOS 16 UI設計 交互設計 靈動島

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

          iOS 16 UI設計 交互設計 靈動島

          交互設計的野心

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

          iOS 16 UI設計 交互設計 靈動島

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

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

          iOS 16 UI設計 交互設計 靈動島

          樁樁件件,蘋果在設計上的騷操作,正經是沒有停過的。

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

          iOS 16 UI設計 交互設計 靈動島

          挖孔屏交互的設計公約數

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

          iOS 16 UI設計 交互設計 靈動島

          iOS 16 UI設計 交互設計 靈動島

          首先,在絕大多時候,「靈動島」會向兩邊拉長作為基礎的狀態展示,通過圖標和數據構建出一個典型的非模態的提示框:

          iOS 16 UI設計 交互設計 靈動島

          比如 Airpods pro 的電量

          iOS 16 UI設計 交互設計 靈動島

          比如指示距離

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

          iOS 16 UI設計 交互設計 靈動島

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

          iOS 16 UI設計 交互設計 靈動島

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

          iOS 16 UI設計 交互設計 靈動島

          iOS 16 UI設計 交互設計 靈動島

          iOS 16 UI設計 交互設計 靈動島

          「靈動島」甚至有分裂樣式來支持多樣狀態的呈現。

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

          iOS 16 UI設計 交互設計 靈動島

          iOS 16 UI設計 交互設計 靈動島

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

          iOS 的通知設計邁向次世代

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

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

          iOS 16 UI設計 交互設計 靈動島

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

          iOS 16 UI設計 交互設計 靈動島

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

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

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

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

          和 TouchBar 同源不同命

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

          iOS 16 UI設計 交互設計 靈動島

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

          結語

          iOS 16 UI設計 交互設計 靈動島

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

          作者:陳子木
          來源:優設

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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合