产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

抖店动销抖店体验分提升抖店任何业务可添加微信:ad07668

01.iPhone14Pro功能和交互美学融合而随着iPhone14Pro带来的灵动岛,我们似乎发现,美观和功能,两者其实并未对立关系。不管是完整的屏幕,还是完整的功能,都是为了实现更好的人机交互,以至于能忽视掉挖孔的存在。所以重新在交互性的坐标轴进行排列(图三,右),药丸形的灵动岛,无疑是“目前”最具交互性的方案。▲交互设计和功能性对比自iPhone4


01.

iPhone14Pro功能和交互美学融合

而随着 iPhone 14 Pro 带来的灵动岛,我们似乎发现,美观和功能,两者其实并未对立关系。不管是完整的屏幕,还是完整的功能,都是为了实现更好的人机交互,以至于能忽视掉挖孔的存在。所以重新在交互性的坐标轴进行排列(图三,右),药丸形的灵动岛,无疑是“目前”最具交互性的方案。

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

▲交互设计和功能性对比

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 等视频聊天、拍摄)

2.iPhone 13 系、iPhone 14pro系列

iPhone 13 缩小了20%的刘海:将点阵投影器(dot projector)从边上移动到中央,将泛感光元件【2】(flood illuminator)组合到这个新模组中,实现更小的面积【3】;

而 iPhone 14 pro 在 iPhone 13 的基础上,再缩小了30%的面积。实现原理则是第一次将距离感应器放在了显示屏下方。

可以看出,iPhone 做的“减法”的实际上是“加法”:增强内部元器件的整合、实现屏下距离传感器。因此,技术的成熟,才是 iPhone 做出每次变化的先决条件。

3.灵动岛dynamic island——次级信息呈现逻辑

在“灵动岛”亮相以前,我便觉着iPhone的应用“跳转”十分难用。比如下班后用高德打车后,同时要回微信消息,当跳转到了微信,高德只留一个微小的绿色指南针在左上角。导致我常常因为回复微信,导致和司机错过,因此对师傅很是抱歉。

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

▲安卓折叠屏手机 mate Xs的分屏效果

这个痛点,我觉得安卓很早便给出了解答,便是分屏:将两个应用同时出现在手机屏幕上。这一点在任何国产手机都能做到功能上的解决,但将本就不大的屏幕一分为二,操作上还是过于局促。所以最近兴起的折叠屏手机,主要优势也在此:两个屏幕,两个应用。

不过,折叠屏始终无法普及的原因在于,价格高昂、手机太重,且同时关注两个屏幕的使用场景并不多。对于第二个分屏的信息,我认为更多是“关注”:能看见 app 摘要信息就行,无需过多操作。

02.

灵动岛展示次级信息

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

“灵动岛”保证了一级主屏幕的操作不间断。“次级信息”:比如导航、音乐播放、语音备忘录、倒计时、充电、人脸识别这些系统应用的信息,很多时候并无占用整个屏幕显示的必要,故当退去后台后,能自动融合到 island 悬浮通知里面,保证符合直觉的“岛台”交互逻辑(图七)。

比如自带地图,iPhone 早已经意识到了应该驻留后台信息显示,但对于第三方应用仅仅剩下左上的角标;比如后台音乐的操作,锁屏界面已经实现了悬浮展示(但进入桌面后,却需要进入控制中心后,再找到音乐的小组件);再比如官方展示的人脸识别 、充电显示、铃声静音等,早在“灵动岛”之前就已经有了通知提醒(图九)。

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

▲个人使用 iPhone 11 的通知及后台显示形式

综上,有的是苹果没做的、有的是早就有的,所以“灵动岛”本质作为整合这些信息的平台,更像是为了迎合“挖孔屏”形态出现才挤出的设计(图十);颇有一些“为了这叠儿醋,才包的这盘饺子”的意味。

苹果在最新的官方文档中表明实时活动仅限于iPhone,此外灵动岛的出现将渲染区域氛围4个。

灵动岛不是通知中心,而是可以和后台软件互动,点击进入软件,长按显示小组件。

这可能说明系统级别的通知不能以灵动岛的形式出现,也就是说和之前网上传的视频一样,在药丸下面显示通知,如果转为实时活动那么可以以灵动岛的形式呈现,比如在软件内,该软件有通知,便可以以灵动岛的形式出现。(至于最终效果,就要看软件开发者选择何种方式了)

03.

灵动岛设计规范

以下是苹果官方给出的灵动岛设计规范

除了在锁屏上显示一个直播活动,支持直播活动的设备还可以通过不同的方式显示你的APP信息,具体取决于设备是否也支持动态岛。

  • 在支持动态岛的设备上,系统会在TrueDepth摄像头周围的持久位置显示实时活动。
  • 在不支持动态岛的设备上,系统可以在人们查看主屏幕或使用其他应用时短暂出现的横幅中显示实时活动更新,但前提是应用确定更新重要到足以打断人们。

在灵动态岛中显示您的现场活动时,系统使用以下三种演示方式之一

1.紧凑的

当前只有一个活动处于活动状态时,系统使用紧凑表示。紧凑的演示文稿由两个独立的演示文稿组成:一个显示在TrueDepth相机的领先侧,一个显示在尾随侧。虽然领先和尾随的演示文稿是独立的视图,但它们在动态岛中形成一个内聚视图,表示来自应用程序的单个信息。人们可以点击一个紧凑的直播活动,打开应用程序,获取活动或任务的更多细节。

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

2.最小的

当多个应用处于活动状态时,系统使用循环最小表示法在动态岛中显示其中两个活动。系统选择一个活的应用看起来依附于动态岛,而另一个看起来分离。与紧凑的直播活动一样,人们可以点击一个最小规模的直播活动,打开应用程序,获得更多关于活动或任务的详细信息。

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

3.扩大了

当人们以紧凑或最小的演示形式触摸并举行现场活动时,系统会以扩展的演示形式显示内容。

产品经理必学!灵动岛产品设计规范!产品设计图手绘效果图简单?

为了确保您的Live Activity在所有可以支持它的设备上都能正常工作——以及在所有系统确定的演示文稿中——除了锁屏演示之外,您还需要支持动态岛的所有三种演示文稿类型。

抖店动销抖店体验分提升抖店任何业务可添加微信:ad07668

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 470473069@qq.com 举报,一经查实,本站将立刻删除。