用「用户体验五要素」整理「Live Activities设计规范」

Recommand
苏州/UX设计师/2年前/1052浏览
用「用户体验五要素」整理「Live Activities设计规范」Recommand

为了更好的记住&理解「Live Activities设计规范」,使用比较熟悉的「用户体验五要素」对内容进行整理。

众所周知,「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书:战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为:为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。

「Live Activities设计规范」由苹果出品,原文为英文,上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」,使用比较熟悉的「用户体验五要素」对内容进行整理。

1. 战略层——为什么做

原文提供的Live Activity定义如下:
A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

从原文可以提炼出Live Activity显示特点:

1. 内容是频繁更新的、有进度/状态显示的、用户关心的。

2. 内容的信息量是一眼就能看完的程度。


但上述仍是表象,并非实质,接下来思考这几个问题:

1. 为什么显示的是进度/状态频繁更新的内容?

2. 为什么要强调用户关心的?

3. 为什么信息量是一眼就能看完的程度?

没有Live Activity频繁更新主要靠push推送。但push容易被其他APP的push覆盖,且随着各种APP的频繁使用,用户获取关键信息的效率和通过push打开APP的次数反而在下降。


进度/状态频繁更新的内容,说明每个状态存在的时间短,如果被覆盖/忽略,同一状态就不再复现,用户所关心的,或APP所希望用户关心的,就看不到了。比如:什么时候取外卖、待付款、上传成功等等。


当下我们所处的时代是信息泛滥的时代,需要对信息作精简,但用户的操作是可以多条线进行的,比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。


信息内容和量是官网一直在强调的,需要精简,只展示用户需要的,基本达到一眼看完的程度,目的就是知道变化的是什么,当前状态是什么。

分析了这么多,大胆推测一下Live Activity的设计初衷是:快&准确&轻。而终极目的是打动用户,形成好体验,进而推动口碑和销售;为各APP提供新的通知形式,互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。

2. 范围层——做到什么程度

关于这个层次相当于规定功能范围&信息边界限制,就是什么要,什么不能要。这部分的信息官网给出许多,在此将其分类梳理如下,为避免大家不好查找官网/译文对应出处,在句未已标注。

1)硬性限制

1. 仅iPhone支持,iPadOS、macOS、tvOS或watchOS不支持。(源自:平台注意事项)

2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。(源自:什么是Live Activity-锁屏)

3. 支持用户手动清除锁屏状态下的Live Activity(源自:实际操作)

4. 支持用户直接关闭对应APP的Live Activity(源自:最佳实践方式第3/c条)

5. 支持Live Activity自动开始&结束。(源自:最佳实践方式第6/f条)

6. 限制跟踪活动/状态时长不超过8小时。(源自:最佳实践方式第1/a条)

7. 限制活动/进程结束后展示时长不超过4小时。(源自:最佳实践方式第8/h条)

8. 支持更改背景颜色&不透明度。(源自:设计有用的Live Activity第5/e条)

9. 限制内容布局。(源自:设计有用的Live Activity第5/e条)

10. 限制不同设备的展示尺寸。(源自:规范)

2)非硬性限制

1. 避免在Live Activity中显示敏感信息。(源自:最佳实践方式第4/d条)

2. 避免在Live Activity中显示广告和促销活动。(源自:最佳实践方式第5/e条)

3. 只提供正在进行的任务/事件的关键摘要。(源自:最佳实践方式第2/b条)

4. 在任务/活动结束前,给用户提供关闭Live Activity按钮。(源自:最佳实践方式第6/f条)

5. 点击Live Activity直接定位到对应页面,无需用户二次导航。(源自:最佳实践方式第7/g条)

6. 考虑在活动结束后,锁屏上在合理时段后自动删除Live Activity(源自:最佳实践方式第8/g条)

3. 结构层——这些东西如何组成?

(个人猜测)由于是提供一个展示区域,且展示区域有限,所以对于层级架构,一级展示什么,二级展示什么,各阶段展示什么,这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。

4. 框架层——规划用户操作行为

通过Live Activity的展示形式,可以总结为2点:吸引、查看(摘要&详情)。

1)吸引

1. 一般是在原深感摄像头两侧展示(电话会直接展示扩展型),分为紧凑型和最小化。

2. 紧凑型在仅有一个活动/事件的时候展示,虽被原深感摄像头分割两端,但仅作为一条信息展示,为了视觉上的统一,这里的颜色不支持开发设置,使用的是系统默认色值。

3. 最小化在存在多个活动的时候展现,左侧和原深感摄像头粘连,右侧独立成岛。

4. 不管是紧凑型,还是最小化,都可以通过点击原深感摄像头区域,进入APP内页,或者长按唤出扩展型。

2)查看

1. 进入内页的查看基本就是各家显神通了,这里主要讲扩展型和锁屏。

2. 原则上是不支持在扩展型和锁屏做复杂操作的,基本点击是进入APP。

3. 扩展型是用户长按紧凑型/最小化唤起的展示区域,内容是可以自定义的,当然官方也给了相应的建议,具体如下。内容信息种类多的可以采用这种信息左中右排布,底部预留大按钮。内容信息少的可以采用左内容右操作的方式。

4. 根据一致性原则,锁屏展示的布局框架应该与扩展型差不多,同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行,是会全部展示的,所以要注意品牌的传递,避免用户混淆服务方。

5. 表现层——如何呈现这些东西

对于如何呈现这些东西,苹果还是写了很多建议,确保视觉上的一致性和美观。

1)颜色

1. 紧凑型状态下,为了保证两侧信息的连贯,除了语句阅读连贯,还需要在图形和颜色上具有一致性,视觉上连贯。

2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的,当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。

3. 设计师不仅要考虑最佳状态,还有深色&浅色模式下的,以及不同环境光、设备亮度下的显示。还有一点很容易忽视的,就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取,还需要考虑美感问题。

2)间距布局

1. 紧凑型和扩展型之间的布局要保持一致,两者间的变化过渡效果是可以预测的。

2. 一般来说,扩展型和锁屏状态下的信息间标准间距是20pt。

3. 在某些情况下,例如图形和按钮,您可能需要使用更紧凑的边距,以避免挤满边缘或形成混乱的外观。

3)圆角

1. 内容和Live Activity边缘之间的边距需要保持一致,请遵循SwiftUI规则。

1内容和Live Activity边缘之间的边距需要保持一致,,发现以圆角边界为测距点得到的间距关系较为舒适。即:圆形/大致为圆形的图形保持上下,3. 以及左侧或者右侧间距一致即可;方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一,才能确保间距的一致性。

4)尺寸

需要适应不同机型的尺寸。具体的尺寸规范如下。

a. 灵动岛

动态岛使用44个点的角半径,其圆角形状与原深感摄像头相匹配。

b. Live Activity大小

下表中列出的所有值均以pt为单位。
ps:左侧为宽度,右侧为高度。

以上就是整理分析的全部。

在整理分析过程中加强了对「用户体验5要素」各个层划分的理解,也对Live Activity在各个层次上的要求更加明确。

5
阅读原文
|
Report
|
19
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
UI
UI
UI
UI
作品收藏夹
ui
ui
ui
ui
作品收藏夹
交互设计
交互设计
交互设计
交互设计
作品收藏夹
文档交互体验
文档交互体验
文档交互体验
文档交互体验
作品收藏夹
设计理念
设计理念
设计理念
设计理念
作品收藏夹
2023总结
2023总结
2023总结
2023总结
作品收藏夹
大家都在看
Log in