/【设计聚焦-交互设计】灵动岛(Dynamic Island):挖孔屏幕的创口贴还是多元交互的新起点

【设计聚焦-交互设计】灵动岛(Dynamic Island):挖孔屏幕的创口贴还是多元交互的新起点

在iPhone 14Pro和Pro Max中,苹果采用了一个饱受争议的缺口安置用于人脸识别的TrueDepth摄像头,并将其发展成为新一代iPhone界面的关键部分。在这一代iPhone机型正式发布前,外界预测均认为苹果公司会在屏幕上设计一个药丸形状的切口和一个打孔切口。
         
而事实正是如此,在iPhone 14Pro和Pro Max的动态岛内部确实有两个隐藏的切口以放置实现Face ID所必要的硬件,这两个切口之间以及周围的空间均可以显示内容并进行交互。这个名为灵动岛(Dynamic Island)的药丸形状的新区域不仅容纳了摄像头硬件,还被设计为一个形状变化坞的中心用于发布关键的iPhone警示。
         

         
苹果公司将灵动岛设计为可以根据所显示的内容,实时变化大小和形状的模块坞。在静止状态下,动态岛是显示屏上一个比凹槽还小的圆形黑色区域,占据的空间远小于前代的屏幕方案。
         

(左图为iPhone14 Pro,右图为iPhone13 Pro)

挖孔屏幕的创口贴?

iPhone14发布之后,引发朋友圈刷屏以及业内关注的让人眼前一亮的创新却是一个不起眼的“灵动岛”,然而这个匠心独具的解决方案却陷入了“抄袭安卓厂商”的争议。
     
在苹果试图将屏幕上的缺口隐藏起来的同时,其他智能手机制造商也已经在尽可能地缩小摄像机的体积以及打孔面积。早在灵动岛问世之前,安卓智能手机厂商早已尝试过多种解决方案,其中不乏与灵动岛极为相近的想法。
     
但是安卓厂商将诉求仅停留在设计一个能够掩盖摄像硬件模组挖孔给用户带来不适感的“创口贴”,而没有去深刻思考基于屏幕挖孔带来的全新的设计机会。
     

LG V10

LG V10在正面使用了两块屏幕,主屏是5.7英寸/2K显示屏,在主屏上方还有一块2.1英寸160*1040分辨率的副屏。副屏的左侧被用作放置打孔前置镜头硬件的同时其剩余屏幕区域也被开发为一个功能任务栏,虽然也具备一定的交互功能但是与主屏之间显得非常割裂,本质上讲仍可以将其视为一种硬件的延伸。
     

华为nova

华为nova系列的解决方案是围绕屏幕挖孔区域制作一些如屏幕解锁动效、环形电量显示等基础的交互模式。
     

荣耀V20

相比华为navo系列,荣耀V20则是更进一步——基于屏幕左上方的单挖孔,将UI与前摄药丸联动形成一个胶囊状交互模块坞。其实灵动岛的雏形在这里已然呼之欲出,但是荣耀V20也只是将交互推进到了实时通话与自拍等使用场景便止步于此了。
     

     
相比于安卓厂商的“创口贴式”缝合设计,苹果iPhone14 Pro的不同之处在于:他从简单的信息提醒升级到系统设计交互的不同——通过带有强烈视觉反馈的动效进行互动,强化了用户与摄像模组挖孔处周围屏幕的交互。
     
灵动岛迎合了屏下打孔摄像头的需求,以一种既融入交互界面又置于前端中央的方式将其巧妙地融入IOS中。诚然,苹果公司或许是从其他安卓厂商的解决方案中获得了灵感,但是设计的再思考成就了灵动岛——自静态向动态,自无趣向有趣,它的存在意义从遮瑕的创口贴已然蜕变为令人耳目一新的屏幕交互新主角。
     



     

基于灵动岛实现的交互模式

灵动岛能够显示前台和后台任务,比如计时器和音乐控制台,它还能更进一步地显示Face ID解锁、Apple Pay支付、来电等交互界面。因为它是一个交互式的模块,所以用户可以通过点击来展开它。

以解锁iPhone为例,用户将看到灵动岛上显示解锁图标。当连接AirPods时,也能够在灵动岛上看到连接状态。下面列举了灵动岛的功能。

灵动岛:显示输出和警报


     

         

Apple Pay交易确认


         

使用麦克风或摄像头时的隐私警示


         

AirPods连接状态和电池寿命

iPhone充电状态和电池寿命


         

低电量警报
         

         

静音模式打开或关闭
         

         

Face ID解锁
         

         

配件连接
         

左右滑动查看更多


     
灵动岛:后台活动
     

         

地图导航


         

来电和通话时长
         

         

歌曲播放状态


         

活动定时器


         

SharePlay会话
         

         

屏幕录制


         

语音备忘录录音
         

左右滑动查看更多


     

灵动岛:分离岛

由于iPhone14 Pro的摄像头硬件是安装在两个通过软件连接的独立切口中,灵动岛也可以根据实际使用场景的需要分离成两个独立的部分以同时显示不同的信息。
     

     



     

多元交互的新起点

于如此丰富的交互场景和交互模式,灵动岛强大的交互能力以及新奇的交互体验引发了电子消费者的又一波“集体高潮”。作为一种开创性的屏幕交互方式,灵动岛除了由苹果公司开发人员提供的诸多基础交互场景,还能被应用于全生态乃至跨系统开发者的交互需求中去。
     

第三方app

第三方应用程序开发人员可以使用苹果公司提供的API接口接入灵动岛并在相关区域显示内容。部分开发者已经创作出以灵动岛为交互中心的小游戏或者是有趣的第三方应用功能。而一些app比如Spotify和YouTube已经实现播放内容时在灵动岛上面展示内容。
     

     

随着第三方app开发者的接入,灵动岛的交互潜力将被一步步发掘,届时将形成一个庞大的新生态,能够极大地满足用户的交互体验。

基于灵动岛的游戏交互

第三方开发者Kriss Smolka在社交平台上分享了自己以灵动岛功能为基础所创建的一款小游戏《Hit the Island》。这款游戏仿照自经典游戏《Pong》,让用户通过滑动底层的面板来和灵动岛区域进行互动,从而累积积分。此产品一经上线就获得了广泛好评,虽然游戏的实现并不困难且玩法较为单一,但是这反映了灵动岛的一个新的可能。
     
灵动岛可以变形的设计让他可以适应多种不同的游戏类型。除了《Hit the Island》这样的迷你游戏之外,类似于《怒首领蜂》之类的竖屏弹幕射击游戏也可以将灵动岛变成敌人的存在。而一些可以横版MOBA游戏,也可以借助独特的UI设计,让游戏开发商将灵动岛区域设计成合适的辅助工具页面,帮助用户进行操控。总而言之,灵动岛的出现让第三方开发者看到了更多的可能性。
     

不止于iPhone的灵动岛

自iPhone14 Pro系列推出灵动岛获得巨大成功之后,有相关人员推测苹果公司将在下一代iPad甚至Macbook上也相继推出灵动岛。虽然这些言论并未得到官方的回复,但是灵动岛作为一个成功的UI交互设计所能适配的屏幕必然不止于iPhone。
     

(iPad灵动岛设想图)

有媒体发现,一款名为“dynamicSpot”的App已经在Google Play商店上架,该App能够模仿iPhone14 Pro系列中灵动岛的UI设计并且在开发者的不断更新迭代下所支持的使用场景甚至超过了iPhone14 Pro。根据开发者的描述,在目前的形式下,它支持音乐播放控制、计时器、电池状态等功能,还将推出更多功能。包括苹果“灵动岛”所没有的个性化定制功能。
     

     

     
近日,在微软Ignite大会上曝光了一张全新的系统截图,疑似正在开发的Windows 12系统。该截图显示,主屏幕上面有长条的“胶囊”形态UI设计,类似iPhone 14 Pro系列“灵动岛”。虽然微软方面已经对此表示了否认并称该截图用于展示Windows“Next Valley”系统的设计理念,但是相信日后各种“类灵动岛”的交互设计以及设计理念还是会被越来越多的开发者所接受。
     

     
综上,不论后续会有多少厂商或开发者套用灵动岛的交互设计,灵动岛(Dynamic Island)都将会是交互设计史上又一个“顶级”的案例。它源于“遮瑕”却不止于“遮瑕”——交互体验的新爆点;它秀于iPhone也将不止于iPhone——多元交互的新起点。       

本文来自微信公众号“网易雷火UX用户体验中心”(ID:LeihuoUX)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。