编注:我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。 文章代表作者个人观点,少数派仅对标题和排版略作修改。

苹果有许多不为人知的设计细节让自家产品更加贴合用户真实场景所需,从而变得更加好用。类似 Apple Watch 这样看似常见的苹果产品,站在普通用户和站在设计师的角度出发去观察、体验,结果也是完全不同的。

所以借此机会想和大家聊聊 Apple Watch 里一些可圈可点的设计思路和体验巧思。

和手机、电脑、平板不同,智能手表作为随时可穿戴的贴身电子产品,可以 24 小时为用户提供帮助和检测(当然它得有电),带来的是一种全新的使用体验。苹果则将 Apple Watch 的产品重点放在健康和健身功能的监测上,试图与专用的运动追踪器竞争。比如「睡眠」的健康质量、时长追踪,日常的健身追踪功能,「活动」应用中增加的社交分享,还增加了「呼吸」应用以促进正念……一切都围绕着生活和健康的全方位记录。并且 Apple Watch 的系统 watchOS 与其他苹果产品服务集成,以达到信息同步、体验不断连的生态体验。

鉴于这些原因,这款设备上优秀软件的设计标准与手机或者电脑也不尽相同,但不论如何,一款优秀的软件必然是结合了设备特性与用户需求的综合品。

发展历程

打开网易新闻 查看精彩图片

已有的所有 Apple Watch 表款

Apple Watch 于 2015 年 4 月发布并迅速成为全球最畅销的可穿戴设备:2015 财年第二季度售出 420 万块,截至 2022 年 12 月,就有超过 1.15 亿人在使用 Apple Watch。直到现在,苹果公司每年 9 月都会推出新一代的 Apple Watch,改进内部组件和系统,苹果公司将每一代 Apple Watch 标为 Series,但也有一些例外——比如 SE、Ultra,以及 Nike+、爱马仕、史努比等合作款。

历代更新功能点速览

Apple Watch 发展至今已经有 10 代,从历代新增的功能点可以看到,如今我们觉得「理所当然」的设计&功能,并不是苹果一开始就构思设计出来的——「Stay hungry, stay foolish」,保持好奇和求知欲,去学习、去了解,然后慢慢根据用户真实需求迭代自己的产品。

打开网易新闻 查看精彩图片

历代功能速览

最新的 watchOS 11 走到哪一步了?

今年最新发布的 watchOS 11(Series 10)没有太多的功能更新,主要还是以健康&健身为侧重点做了功能更新,然后针对界面、组件的显示交互形式做了更新。

实时活动现显示

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

智能组件叠放

在 WWWDC24 的介绍视频中提到了一个概念是「相关性」和「互动性」。

「相关性」是智能叠放中的建议小组件使用时间和日期、位置、起床和就寝时间等信号确定优先级以自动智能显示,供用户查看即时信息。此外,还会根据不同场景自动添加实用的小组件,如出国旅行时自动添加「翻译」App 小组件,即将下雨时添加 「天气」App 小组件等

「互动性」则是用户可以直接操作小组件进行轻量级的操作,而不仅仅是「查看」。

打开网易新闻 查看精彩图片

训练新工具:训练负荷

运动负荷功能也在迈向专业化。「训练负荷」功能通过综合心率、海拔、锻炼时长、年龄体重等数据,计算用户在训练过程中的运动强度和训练负荷,并划分为「轻松」「适中」「困难」和「竭尽全力」 四类标签,帮助用户科学安排运动计划,还可在锻炼结束后对其进行手动调整。在手机中查看时也会更加直观地了解到自己的身体训练状态。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

操作手势更新

适用于 Apple Watch Series 9 及后续机型和 Apple Watch Ultra 2 的互点两下手势,可用于滚动浏览「信息」「邮件」或「天气」等任何 App,单手操作更方便。

打开网易新闻 查看精彩图片

去年的 watchOS 10 的亮点多多

今年最新发布的 watchOS 11(Series 10)主要是一些已有内容展示形式的更新,整体升级个人感觉表现平平。而去年 9 月 Apple 发布 watchOS 10(Series 9)迎来了有史以来变革最大的一次系统更新,感觉可以拎出来讲的东西更多。

比如平台上所有的应用程序几乎都经过了重新设计而变得更加一目了然——在手表交互的诸多创新中,智能叠放小组件便于用户随时通过旋转数码表冠获得最相关的信息,数据联动的新功能则得以更好地帮助骑行者保持最佳状态。

打开网易新闻 查看精彩图片

变化点主要是

  • 功能:新增可自定义配置的小组件

  • 界面:多种页面布局形式,以满足不同场景

widget 堆叠小组件

可以说,WatchOS 10 中最大的变化是增加了 widget 小组件功能,可以从任何 App 的界面唤出堆叠小组件功能。

苹果将 iPhone 主屏幕上的自定义小组件功能加入到了手表上,当你从屏幕底部向上轻扫或使用侧面表冠从手表表面向上滚动时,就会触发该功能。就像 iOS 的主屏幕一样,并且手表也保持交互多平台的统一,通过长按和删除或固定应用程序来进一步自定义小组件,此外还新增了小组件置顶功能。

打开网易新闻 查看精彩图片

新的布局方式

表盘外形和界面圆角更加圆润,为了更一目了然,苹果更新了新的布局方式:基于屏幕形状的新系统,决定了控制、标签和内容的大小及位置,这让 app 布局更统一,控制更清晰。

打开网易新闻 查看精彩图片

为了让不同的内容适应屏幕,苹果做了三种不同的布局,并能够自动适应不同尺寸的 Apple Watch:

  • Dial(拨盘)

  • Inforgraphic(图表)

  • List(列表)

打开网易新闻 查看精彩图片

新的设计风格

此外,watchOS 10 几乎改变了所有系统自带 app 的设计风格,利用背景内容做了很多设计。

打开网易新闻 查看精彩图片

再例如,健身记录 app 结合了体能训练 app 与模块表盘的优点,用滑动与模块彻底重制了原本横向滑动的操作界面。

打开网易新闻 查看精彩图片

发布十年,有哪些变化点

外形更加圆润。日常佩戴中,圆润的表盘更加时尚,这也和苹果的界面设计风格更加融合,方形腕表则太过商务。

打开网易新闻 查看精彩图片

屏幕界面更大,贴和表盘的外观设计,所呈现信息也更多。

打开网易新闻 查看精彩图片

整体表身更薄:

打开网易新闻 查看精彩图片

原则与规范

  1. 一眼可知(Glanceable)

  2. 操作性强(Actionable)

  3. 快速响应(Responsive)

苹果发现,用户对于智能手表的交互耐心最多只有 10 秒,所以传达简洁明了的信息——抬手可得,并且在极小的屏幕里具备操作性强的交互方式,就是 Apple Watch 这些年来设计的重心。不管更新了多少代手表,所坚持的设计原则来来回回都是这几个,未曾有大的变动。

打开网易新闻 查看精彩图片

界面足够轻量

相关最重要的操作应该在 App 中始终可见,并且足够轻量,为用户提供实用性的服务。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

功能一目了然

最理想的状态是:所获得信息一目了然,避免长时间交互和操作。交互应做到可发现和可预测。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

提供辅助操作

在设计界面的时候,很多想要展示的操作,实际上都是属于辅助操作,不属于用户的「主线任务」。

打开网易新闻 查看精彩图片

其实,提供一种辅助也是重要的操作,如筛选、排序等,与视图中已经存在的主要操作交互时,排序和筛选都是轻巧和可操作的方法,既可以缩短平铺长列表让列表更易于浏览,也更符合日常的行为操作习惯。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

用户体验

根据用户真实生活中场景出发,我们也需要对功能的显示有所取舍,而不是一股脑的都展示给用户,让用户去做寻找、去判断。我发现苹果在 Apple watch 的设计中,针对「功能显示」这个点,在不同场景也有不同的表达方式。

始终显示

苹果在 watchOS 8 中加入了一个功能——Always-On Display,始终显示。用户不用每次抬起手腕,就能看到表盘的基础信息。苹果对新增这个功能的设计原则是:从「激活使用状态」切换为「始终显示状态」,应该让人看不出来,而不是大幅度的更改界面或者重组信息,否则从始终显示转换到激活运作状态会变得卡卡的。

不同 app 的使用场景下,苹果的建议处理方式是这样的:

  • 降低:界面保持稳定一致,只是进一步调暗比较亮的元素和次要文字内容,但是又不至于暗的看不清楚文字,从而使想强调、保持可见的信息更加凸显。

  • 场景:超市里提慢慢两大袋购物袋的时候,能更加方便快捷得看到自己的购物清单。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

  • 隐藏:隐藏重要个人信息,以防放下手腕时被其他人看到。

  • 场景:餐厅里的炒股盯盘精英。

打开网易新闻 查看精彩图片

需要时才显示

比如邮件中的「新邮件」按钮,只有需要时才展示。对于绝大用户来说,信息、邮件等类似功能一般在手表上以浏览为主,尤其是浏览置顶的未读信息,但是如果真的需要一个回复,那么也真的有新建按钮,不用的时候可以隐藏起来。

这个现在看到合理丝滑的设计,也不是一下子就出现的,她在 2020 年才被设计出来并在 WWDC 上重点讲解。

打开网易新闻 查看精彩图片

界面表达

Apple Watch 在交互方面还要求拥有明确的导航定位,即在浏览 app 的层级结构时,用户能够清楚的知道在哪个层级。具体实现方面,主要依靠:

打开网易新闻 查看精彩图片

新的材质

watchOS 10 加入了新材质:独特而实用的层级结构,利用半透明效果建立层级关系,帮助用户了解他们在系统或 App 中的位置。这些材质最大化了内容的空间,同时让系统元素如 Status Bar 在内容滚动时也能看到。

打开网易新闻 查看精彩图片

新的页面切换方式

Scroll(滚动)

列表视图时,可以使用旋钮纵向滚动浏览信息内容,比如「邮件」的浏览方式。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

Paginate(分页)

而对于有很多页面的 App,苹果新增了一种新的新导航模式——垂直分页。比如「健身记录」,使用旋钮,能看到健身记录的总览和活动、站立、锻炼环的详情,不同视图的切换。垂直分页将 App 里的多个信息视图分割成为针对特定用途的不同页面,并且还有页码指示器以指示当前所在页面位置。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

还有一个细节,很多元素会在表盘的很多 app 里呈现,苹果设计的是,让这个元素变化比例、位置以及信息密度而存在,以确保实现流畅的动画效果,而不是引入一个额外全新的元素去打破这种平衡。这种元素恒存(Object Permanence)有助于为用户在浏览页面内容时,提供视觉锚点

打开网易新闻 查看精彩图片

Widget 组件

多变的锁屏组件

iOS 16 可以在手机锁屏设置一些复杂的 widget,同理,在 watchOS 9 中,也加入了一些 widget 的设计。

打开网易新闻 查看精彩图片

在表盘上,苹果为手表屏幕的每个角落都进行了独特的功能设计,称为「accessory Corner」。视表盘的不同有多种渲染方式,有时是平的,有时为了匹配刻度表而显示成弯的。

打开网易新闻 查看精彩图片

角落配饰可以放圆形的地图、心率等种种内容的配置项,灵活配置,并且各种形态适配。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

贴一张精密绝美的表盘设计

丰富的页面堆叠组件

不同的布局以满足多种应用的内容信息,而标题、字体大小、粗细、页面都间距保持统一。

  • 三行式文本布局:传达文本信息,比如新闻,提供新闻标题和简要内容。

  • 成组布局:加上色彩条内容是一个模块或者群组内容,比如日历,可以看到具体的日历和所属的日程颜色;

  • 图形化布局:针对有额外辅助文本的,一种进度条类型,一种圆环形态。

  • 大文本布局:数字占比比较大的,文本信息比较关键的,比如日历月份组件。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

背景颜色

使用颜色,帮助用户识别并建立更好的场所感,让用户明确感知所处的场景、空间。比如每个活动、锻炼和站立的记录圆环也是有自己所对应的专属背景颜色,让人一眼识别,强化用户的心智。这都能提高使用中的实用性,而不仅仅是为了视觉效果。

打开网易新闻 查看精彩图片

此外,使用语意系统颜色的元素,在明亮的背景材质上显示时,会自动调整其对比度。这一点是我之前没有注意到的。

打开网易新闻 查看精彩图片

风格趋势

计时器、秒表 app 采用了大图标、扁平化的设计,操作更加直观。几乎所有 app 都有了相似的设计:四角的按钮、扩张的界面,简约又略带立体的 UI 设计。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

还有什么惊喜的?

碰撞检测

为了实现碰撞检测功能,Apple 开发了一种先进的传感器融合算法,利用 Apple Watch 上更强大的全新陀螺仪和加速计,目前 Apple Watch 已拥有所有智能手表中动态范围最高的加速计。为了创建该算法,苹果在专业碰撞测试实验室使用普通乘用车模拟真实世界中的事故,包括正面碰撞、追尾、侧面碰撞和翻滚,从这些全新运动传感器收集数据。除运动数据外,碰撞检测还使用气压计、全球定位系统和 iPhone 上的麦克风作为输入,以检测能表明严重碰撞的各种特征。

当 Apple Watch 检测到严重车祸时,如果用户在 10 秒倒计时后仍无反应,设备就会向用户报告并拨打急救电话。紧急救援人员将收到用户的设备位置,并与用户的紧急联系人共享。Apple Watch 和 iPhone 上的碰撞检测功能结合在一起,可以无缝协作,为用户提供高效的帮助。当检测到严重车祸时,紧急服务呼叫界面将出现在 Apple Watch 上,因为它可能是眼下最方便的交互设备;而如果手机也在连接范围内,则会通过 iPhone 拨打电话。

打开网易新闻 查看精彩图片

我之前在滑雪摔倒的时候也遇到了这个提示,我的感受是「当朋友关心你前刃后刃滑的 6 不 6 的时候,只有 Apple Watch 关心你摔得疼不疼!!!」

打开网易新闻 查看精彩图片

史努比表盘

watchOS 10 正式版系统中最值得关注的一项更新,就是引入了史努比表盘。此表盘的主角是 Peanuts 漫画中闻名世界的史努比,展现了这只小狗顽皮有趣的性格。

打开网易新闻 查看精彩图片

作为这段合作旅程的起始,Apple Watch 团队从加州圣克拉拉的山景城(Mountain View)向北驱车两小时,来到位于 Santa Rosa 的 Charles M Schulz 工作室和博物馆,在那里认识了 Paige 及其团队,并建立起了与漫画历史更深层次的连结。Paige 告诉我们,与苹果团队的这次会谈,是疫情后工作室进行的首次面对面会议——为了确保深度合作的顺利开展,让创意团队亲自见面显得尤为重要。此后,双方又在 Apple Park 的圆形建筑内进行了第二次头脑风暴。与此同时,来自温哥华 WildBrain Studios 的《史努比秀》(The Snoopy Show)导演 Rob Boutilier 也将专业动画知识带入了整个项目。-- 卷宗

最终,他们为 Apple Watch 表盘构思了 148 段各具特色的片段,将它们串联在一起,构成了长达十二分钟的史努比和他的小伙伴、黄色小鸟糊涂塌客之间欢乐互动的动画。

打开网易新闻 查看精彩图片

根据《花生》漫画经典四格故事板内容发展而来的表盘动画。在这段动画中,史努比用耳朵为小伙伴糊涂塌客遮挡雨水。

Apple Watch 产品营销部门的埃里克 - 查尔斯(Eric Charles)说:「史努比有一种弥合代沟的方式。史努比漫画真正有趣的地方在于,史努比最终所处的场景对于伴随着他成长的受众和正在接触他的新受众来说仍然具有亲和力。」并且,苹果创建了一个史努比决策引擎,可以计算出展示这些片段的最佳时间,而不会出现过多的重复。

「在设计与创作的过程中,Apple 和工作室团队都希望选出最贴近联环漫画和 Shults 原画的风格,所以我们最后挑选了 80 年代的史努比版本」,Paige 补充道。不过,表盘上的史努比也是一个折中的成果:他的鼻子比 70 年代时的更短,比 90 年代时的更直。而比起具有现代感的 3D 外观,类似于《史努比秀》的 2D 形象显然更符合原作的精神。

打开网易新闻 查看精彩图片

设计细节

由此出发,Paige 还为我们介绍了 Charles Schultz 的一个有意思的创作技巧,他使用一种特殊且罕见的钢笔来绘制漫画,这种来自 Esterbrook 的 914 Radio 笔尖,在每次使用时都需要在墨水瓶中蘸取墨水。得益于此,Schultz 可以创造出从粗到细的各种线条变化。「这种活跃的绘画赋予角色生命,且图画有着明显的手工绘画痕迹,而不是数字化的,这也是我们希望在表盘动画中保留的特点」

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

Charles Schultz 在创作《花生》时喜爱使用 Esterbrook 的 914 Radio 笔尖,从而获得从粗到细的各种线条变化,在这种手工痕迹中赋予角色生命。这一笔触特点也被保留在了 Apple Watch 的表盘动画中。

打开网易新闻 查看精彩图片

史努比与自己的好伙伴——黄色小鸟「糊涂塌客」(Woodstock)生动鲜活地出现在 Apple Watch 的史努比表盘上,构成了 148 段跟随周遭环境变化的专属动画:他们与表针互动玩耍、对天气情况与假期节日做出反馈,甚至会在用户锻炼时活动起来,在用户手腕下垂、表盘熄屏时安静休息……

打开网易新闻 查看精彩图片

除了洞悉分针的位置并与之互动,史努比还了解诸多情境,会根据一天的时间、当地的天气和用户实际活动,显示相应的动画效果。例如当夜幕降临他会对着月亮嚎叫,或对着流星许愿;他会为你庆祝生日,在圣诞节装扮狗屋,为万圣节的狂欢盛装打扮;在暴风雨雪天气,也会化身船长或者打着伞抵抗风雨。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

当你将手表设置为潜水锁定时,史努比则穿上潜水装备,漂浮在屏幕上;而当你在运动、听音乐,或者工作、阅读时,史努比自然也会伴你左右。

Apple Watch 表盘也成为了史努比「百变造型秀」的舞台。与过去手表上的静态呈现不同,Apple Watch 的动态特性让史努比在不同的动画设计下生动了起来,仿佛成为了一只能与主人互动的电子宠物。正如 Paige 所总结的那样:「我小时候会随身带一个史努比毛绒玩具,而拥有 Apple Watch 让我在长大后也可以有史努比陪伴左右,两者带来的快乐是相同的。」

打开网易新闻 查看精彩图片

在最新的史努比表盘种,上个月为庆祝万圣节,苹果公司特别为 Apple Watch 用户带来惊喜——在史努比表盘中新增了三款万圣节主题动画。此次新增的万圣节动画主题包括木乃伊史努比、南瓜史努比、零食袋史努比。

打开网易新闻 查看精彩图片

「Apple 和《花生》漫画都有很强的个性,究其核心,我们两个团队都渴望以真实的方式与粉丝建立联系,」Paige 总结道,「在 Schultz 工作室,我们希望忠于史努比的 DNA,同时探索 Apple Watch 的新科技。通过相互尊重,现代科技公司和拥有丰富传统和悠久历史的漫画公司便能够和谐共存。我始终认为,真正的合作不是一方压倒另一方,使其黯然失色,而是找到平衡,并发挥每个贡献者的优势。」

在这样对细节的无微不至的关注和打磨中,彰显着联结 Apple 和 Shultz 工作室的又一共同点:既对工作至真至纯的热爱——用户不自觉的微笑,是他们最期待的赞美;而 Apple 特立独行的设计美学,亦诞生于此——通过物理上的呈现以及行为上的引导和塑造,推动了大众对设计的理解和认知。

PS. 史努比在各界都是合作的宠儿,比如 NASA 也有在 1968 年成立名为「 银史努比奖 」的奖项,用来鼓励在太空计划工程里有努力追求品质与安全性的人员。

打开网易新闻 查看精彩图片

银史努比奖奖章

结语

穿戴设备的缺点一直非常明显:屏幕狭小、输入速度慢、交互时间较短、处理速度慢、储存空间小,这也要求需要把 App 设计的更加精简、动态、灵敏。而 Apple Watch 明确了它的三大核心功能:运动和健康等个人数据收集、少量信息的浏览&简单沟通、简单操作和不断打磨的交互细节,并且保持着一致的设计原则,让自己的产品更加细致地服务用户,让用户感觉到愉悦,这值得我们思考和学习。

打开网易新闻 查看精彩图片

https://sspai.com/post/94242?utm_source=wechat&utm_medium=social

作者:雷蒙斯与狗

责编:克莱德