很多用户在了解各种自己感兴趣的内容以及各种自己感兴趣的内容,通过了解相关的各种功能进行了解,很多视频内容的交互是用户想要去了解的,对于各种相关的内容使用方法以及有关灵动岛的射击灵感都是很多用户所不了解的,小编为大家整理了iPhone14Pro灵动岛设计详细分析的全部内容一起来了解一下吧!
iPhone 14 的发布会,Dynamic island 成为最大的亮点。发布会上优秀的动画演示(图一),对手机屏幕的形态和交互,提出新的创新方向。
iPhone14Pro灵动岛设计详细分析
不过需要思考,灵动岛动画解决的实际问题是什么,其形态是对挖洞的无可奈何妥协,还是真的追求实用的人机交互?
本文将从四个章节,梳理手机正面屏幕设计的趋向,及具体分析 iPhone 灵动岛的设计。
一、全面屏的两个思路——物理的,还是交互的?
图二:常见的手机正面形态及分类
如果列举出至今所有的手机正面形态设计(图二),那么有:“药丸岛”(iphone 14 pro)、刘海屏(iPhone X 、华为 mate)、挖孔屏(三星、华为)、屏下摄像头(小米 Mix4)、物理升降摄像头(一加 7pro)。可以看见手机厂商的创新,留下了如此丰富的屏幕种类;
图三:各类屏幕形态的实用性分析
假如从美观度和功能上,绘制出两条轴线(图三,左)。毫无疑问,对手机正面最完整的是屏下摄像头,但因此牺牲了摄像质量,故功能性最差;而iPhone、华为代表的刘海屏,尽管占据的面积大,但摄像体验及支付级别解锁功能最为完善,故功能排序靠前。
总之,追求“美观”必然牺牲了功能性:面容识别的快捷,光线传感控制屏幕亮度的准确自然,屏下摄像头被牺牲的画质【1】。这一切仅仅为了实现一块“物理”完整、美观的屏幕。
而随着 iPhone 14 Pro 带来的灵动岛,我们似乎发现,美观和功能,两者其实并未对立关系。不管是完整的屏幕,还是完整的功能,都是为了实现更好的人机交互,以至于能忽视掉挖孔的存在。所以重新在交互性的坐标轴进行排列(图三,右),药丸形的灵动岛,无疑是“目前”最具交互性的方案。
之所以强调“目前”,是因为其余的挖孔或者刘海形态手机,通过 UI 设计,也具有发展出优秀的交互方案的潜力;这是我认为值得期待的地方。
二、强大的原型机prototype——iPhone X
自iPhone 4 时代开始的“Home键”屏幕,如今几乎已经消失(除了 SE)。iPhone X 可以说是定义了苹果的下一个十年,今年的 iPhone 14 pro 也是自 iPhone X(2017)五年以来,正面屏幕的第三次改变(图四)。
图四:iPhone X 以来的正面形态变化
就趋势而言:从 iPhone X 引入刘海屏后,至今一直在做“减法”来凸显屏幕本身:iPhone12 第一次变成了直角边框;iPhone 13,第一次缩短了刘海的长度;iPhone14 pro 正面刘海再次缩小为药丸孔。
但正面的“减法”并非真的如图形一样,用剪刀就能实现,而应该深入看看如何“减”掉刘海。
1、iPhone X 的“刘海”元器件多达 8 种
用于 Face Id 系统(图五,左):距离传感器(探测到脸部接近)、泛感光元件(发射红外光识别脸部轮廓,且不受夜晚影响,不受眼镜影响)、点阵投影器(绘制你脸部的点阵景深图)、红外镜头(捕捉人脸被投射的红外光能量信息、点阵景深信息);
麦克风(通话、视频录制拾音清晰)、扬声器(听筒和声音外放),环境光传感器(根据环境光线,自动调节手机亮度),前置摄像头(Facetime 等视频聊天、拍摄)
图五:从 iPhone X 到 iPhone 13pro,刘海结构的改变
2、iPhone 13 系、iPhone 14pro系列
iPhone 13 缩小了20%的刘海:将点阵投影器(dot projector)从边上移动到中央,将泛感光元件【2】(flood illuminator)组合到这个新模组中,实现更小的面积【3】;而 iPhone 14 pro 在 iPhone 13 的基础上,再缩小了30%的面积。实现原理则是第一次将距离感应器放在了显示屏下方(图五,右)。
可以看出,iPhone 做的“减法”的实际上是“加法”:增强内部元器件的整合、实现屏下距离传感器。因此,技术的成熟,才是 iPhone 做出每次变化的先决条件。
三、灵动岛dynamic island——次级信息呈现逻辑
1、设计的初衷是为了解决问题而出现
在“灵动岛”亮相以前,我便觉着iPhone的应用“跳转”十分难用。比如下班后用高德打车后,同时要回微信消息,当跳转到了微信,高德只留一个微小的绿色指南针在左上角。导致我常常因为回复微信,导致和司机错过,因此对师傅很是抱歉。
这个痛点,我觉得安卓很早便给出了解答,便是分屏:将两个应用同时出现在手机屏幕上。这一点在任何国产手机都能做到功能上的解决,但将本就不大的屏幕一分为二,操作上还是过于局促。所以最近兴起的折叠屏手机,主要优势也在此:两个屏幕,两个应用(图六)。
图六:华为折叠屏手机 mate Xs的分屏效果
不过,折叠屏始终无法普及的原因在于,价格高昂、手机太重,且同时关注两个屏幕的使用场景并不多。对于第二个分屏的信息,我认为更多是“关注”:能看见 app 摘要信息就行,无需过多操作。
2、“灵动岛”设计,则是为了优雅的解决问题:对“次级信息”以悬浮的形式进行展示,而不影响“一级屏幕”。
“灵动岛”保证了一级主屏幕的操作不间断。“次级信息”:比如导航、音乐播放、语音备忘录、倒计时、充电、人脸识别这些系统应用的信息,很多时候并无占用整个屏幕显示的必要,故当退去后台后,能自动融合到 island 悬浮通知里面,保证符合直觉的“岛台”交互逻辑(图七)。
图七:悬浮的次级信息,不打断主屏幕的交互
在需要更进一步获取信息时,可以通过“长按”的方式获得卡片信息;直接“单击”,进入这个应用进行具体操作。当从 app 退出时,它们也会自动悬挂在island里面,最多可以悬挂 3 个,颇有一些 iPad 上的后台逻辑(图八)。
图八:“灵动岛”类似 ipad 后台切换的交互
3、接下来是对“灵动岛”的吐槽
为了等这个“药丸”的形式,苹果把本应该早就做的“次级信息”显示,留到了现在才做。
比如自带地图,iPhone 早已经意识到了应该驻留后台信息显示,但对于第三方应用仅仅剩下左上的角标;比如后台音乐的操作,锁屏界面已经实现了悬浮展示(但进入桌面后,却需要进入控制中心后,再找到音乐的小组件);再比如官方展示的人脸识别 、充电显示、铃声静音等,早在“灵动岛”之前就已经有了通知提醒(图九)。
图九:个人使用 iPhone 11 的通知及后台显示形式
综上,有的是苹果没做的、有的是早就有的,所以“灵动岛”本质作为整合这些信息的平台,更像是为了迎合“挖孔屏”形态出现才挤出的设计(图十);颇有一些“为了这叠儿醋,才包的这盘饺子”的意味。
图十:并不是只有药丸屏才能做灵动岛的,iPhone X 的半岛也能【4】
未来,会有哪些信息(app)才需要以“灵动岛”的形式展示呢?结合宣传动画分析,“次级信息”基本分为三个方向的整合(图十一):
1、需在屏幕驻留的文字、图像为主的信息:如地图导航、airdrop 传输情况等;2、后台进行的音频类:如接电话、放音乐、录音、倒计时等;3、即时交互反馈:如充电、静音、人脸识别等。超过这三类信息后,桌面可能会变得杂乱无章。
图十一:灵动岛 展示信息的分类
四、是 pill hole(挖孔)还是 island(岛)——苹果的正负形游戏
尽管对这个灵动岛的 UI 设计夸赞很多,但也需要知道,“岛”是“挖孔”的一个有趣的转译,硬生生被挖去的一块屏幕,打造成交互的灵动岛,不得不佩服 Tim Cook 真是营销鬼才。更为实在的翻译应该是“A Hole”。
其实对比 Macbook pro (M1 pro)官方对于刘海屏幕的解释也可以知道,“刘海”的形态对于 Macbook来说,是“赠送”了刘海两侧的状态栏空间;而这个理由之所以能说得通,是因为图形的有趣图底关系,模糊了对原始形态的认知(到底是“增加”了两侧,还是“挖走”了刘海?,显然官方更乐意宣传前者)【5】。
从图像的正负形描述上,island 是无边的大海上的一个岛屿,重点是为屏幕“增加”了一个岛屿的正形(暗示了“次级信息”交互功能的增加);pill hole(药丸孔),是在完美的表面剪去一个洞,重点强调“缺失”的负形,即被破坏的屏幕。(见图十二,理解两种差异)
图十二:关于“正行”的岛,和“负形”的洞(洞的图片,来自大坝工程的泄洪道【6】)
不过尽管在 UI 交互下了大功夫,那炫酷的宣传动画似乎将劣势转变为优势,但这些动画效果,仅仅为使用中 1/10 的时间,在看视频、新闻的单一 app 场景中,还是以一个静态的药丸呈现在额头上,成为你无法忽视的一部分。
且在特定的光线下,摄像头等元器件就会穿帮,无法融入 island;并且用其进行交互时,能够点击的区域,只有左右窄窄的两端(图十三)。这个也是宣传视频存在的误导,毕竟真正“交互”的 island ,比你预想的要小很多。
图十三:因为实际区域小,第一下误触按压到了摄像头;在特定光线下穿帮的“药丸”
对于 iPhone 14 Pro 系列,主要分析了“灵动岛”,抛去形态后,其实设计解决的问题一直是“次级信息”的展示、通知和交互;最后,对于这个“药丸”的形态,尽量通过图形学,剥离其营销话语后的 dynamic island 的实际体验。未来,对于后续第三方 app 和“灵动岛”的适配,将会是值得期待的部分。
以上就是小编为大家带来的有关“苹果14灵动岛是什么”的全部内容了,想了解更多灵动岛想干的内容尽请关注游人网的最新动态。
灵动岛教程大全 | ||
灵动岛相关游戏 | 灵动岛介绍 | 灵动岛支持机型 |
小米灵动岛设置 | 华为灵动岛设置 | 灵动岛设置 |