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

2023-3-26    ui设计分享达人

众所周知,「用户体验五要素」出自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在各个层次上的要求更加明确。


作者:Viola_1241
链接:https://www.zcool.com.cn/article/ZMTUxMTIzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档