从 Watch OS 4.0 学习小屏设备的交互设计模式

人人都是产品经理 04-19

作为可穿戴设备的代表,Apple watch 在我们的生活已经非常普及了。通过这个设备,我们可以实现很多普通手表所不具备的功能,它究竟是如何实现的呢,让我们看看笔者是怎么说的吧:

自 2015 年 Apple Watch Series 1 发售以来,目前已经经历了 4 代,可穿戴设备已经逐步融入我们的生活。而这种小屏又始终戴在手腕上的设备,交互方式也有所不同。本文将总结出一些基础理论和方法,为一些小屏设备的设计提供思路。笔者将从以下几个方面来说明其设计方法:

一、关于小屏

Apple watch 有两种尺寸,分别是 38mm(272px*340px)、42mm(312px*390px)。如何在如此小的屏幕上承载那么丰富的功能,其精妙的界面表现和框架设计很值得我们去学习。

1.1 Watch os 空间结构

通过几天的亲身使用体验发现,Apple watch 的主要有 5 大功能模块:表盘、应用中心、控制中心、通知中心、DOCK 栏(最近或收藏)。

采用明确的模块划分,每屏只展示一类信息,并利用屏幕边缘手势或物理按键来触发隐藏的功能。

设计师利用了 Z 轴的空间布局,将几个功能模块合理的分布:

顶层:在任意界面短按右侧的按键调出 DOCK 栏,DOCK 栏可以自定义最近使用或收藏的应用;

中间层:在 " 表盘 " 状态下,上拉调出 " 控制中心 ",下拉调出 " 通知中心 ",和手机一致;

底层:可以理解为 home 页,包含 " 表盘 " 和 " 应用中心 " 两个状态,短按表冠进行切换;

tips:当 x、y 平面空间不够时,可以向 z 轴方向借空间。

1.2 应用中心的布局

很值得一提的是 Apple watch 应用中心的布局方式,设计师打破了常规的宫格或卡片式布局方式,而是采用正六边形排列法:每个 APP icon 周围都围着 6 个 icon,且 icon 的尺寸大小从屏幕中心向周围逐渐递减。这很好地解决了屏幕小,但内容无限多的情况。

这个设计的原理也很有意思,在此对设计师的脑洞可以说是很佩服了。

原理 1:" 开普勒猜想 ",在每个球大小相同的情况下,没有任何装球方式的「密度」比面心立方堆积法要高。

原理 2:挪威数学家 Axel Thue 将开普勒猜想运用到二维平面,正六边形排列法(每个球旁边都围六颗球的排列法)是平面上密度最高的装球法。

1.3 APP 导航框架

Apple watch 的 app 导航框架也很统一,主要有两种方式:

Hierarchical(分层级):分层式导航布局,也就是列表,竖直方向滑动(或滚动表冠)进行切换,能容纳的内容较多,方便后期扩展。

Page-based(分页面):基于页面的导航布局,也就是整页卡片,水平方向滑动进行切换,能容纳的内容较少,需要对页面数量做限制。

不仅仅针对小屏设计,对于所有的界面设计都是如此。在同一个产品里,界面样式不宜过多,统一操作语言,可以降低开发和用户学习成本。

1.4 互动方式(User Interaction )

在界面手势方面,引入边缘交互和 Force Touch,既不占用当前屏幕的空间,又能快速调出隐藏功能,极大地简化了界面信息。

Apple Watch 旨在模糊设备和软件之间的界限。例如,Force Touch 和 Digital Crown 让用户可以与屏幕内容无缝交互。应用程序应该增强用户对硬件和软件的整体设计感。在物理按键方面,主要有以下的操作方式:

(1)滚动表冠,作为一个亮点功能,为更精确的控制和加速滚动而设计;

(2)其它的按键操作和手机类似,用户容易接受和记忆。

二、关于场景

Apple Watch 主要可以分为两大使用场景:佩戴场景和闲置场景。两类场景的互动方式有很大差别,界面的设计模式也有所差异。通过场景分析,我们可以进一步了解产品框架和功能布局。

2.1 佩戴场景

佩戴场景的主要行为特征为:短暂互动和快速扫视。

短暂互动:手腕翻转、手臂抬起的动作只能保持几秒钟,人与 watch 互动的时间控制在几秒钟内才是比较舒适和自然的状态;

快速扫视:手腕保持抬起的时间为几秒,而人在行进过程中视线不易聚焦,所以人眼大多数情况都是快速扫视 watch 屏幕。

根据场景和用户行为特征,通过细分场景和转移功能的设计方法,将功能进一步划分。

细分场景:区分 " 行走 " 与 " 静态 " 场景,根据功能特性来进行场景归属;

转移功能:对于更复杂的功能,已经不适合在 apple watch 上承载的,就交给手机端去实现。

功能划分结果如下图:

行走场景下的功能(抬手可见):

表盘:最基础也是最重要的功能,翻转手腕即可看见;

通知:突发功能;Short Look- 最小化信息 - 保护一定程度的隐私,快速获取;用户手腕抬高或点击 Short Look,展示 Long Look ——提供了更多详细信息和功能;

Glance:2.0 及以前的功能,与手机运行的 APP 关联,最小化关键信息;(可以思考一下)

辅助操作:手机当前打开的功能,便于辅助操控手机。

静态场景下的功能(非抬手可见):

应用中心:在表盘界面短按表冠调出,包含所有已安装的 watch APP,点击 icon 即可打开相应 APP;

控制中心:在表盘页面下边缘向上滑动调出,包含常用的功能开关;

通知中心:在表盘页面上边缘向下滑动调出,包含未查看、处理的通知列表;

DOCK 栏:按下侧边按钮调出,包含收藏或者最近使用过的 APP 界面缩略图,最多 10 个。

2.2 闲置场景

闲置场景的主要行为特征为:弱互动和短暂视线停留。

弱互动:弱互动甚至不互动,少数场景下需要有反馈,如充电、通知等;

短暂的视线停留:人与设备距离较近的情况下,有较短的视线停留。

这类场景下的界面模式相对简单很多,主要为以下几个模式;

Nightstand 模式:也叫 " 床头钟 " 模式,在充电且立放的时候触发。界面内容包括:充电状态、通知小红点(有通知时出现)、时间、日期、闹钟(设置了闹钟时出现);几秒后息屏,感应到震动则立即亮屏;

充电 - 普通模式:充电且平放的时候,仅显示充电状态,数秒后消失(升级到 4.3 版本之后,显示的信息类别和 Nightstand 一致,只是排列方式不同);

非充电模式:真正的闲置状态,用户没有操作则一直保持息屏。

三、关于用户故事

通过用户故事分析,我们可以确立产品的功能范围,以用户为中心来进行设计。

3.1 梳理故事

首先进行 " 骨干故事 " 梳理,可以先分两级故事线,如果故事颗粒度还不够,可以继续细分三级故事等等。

一级故事:一级故事一般以时间线为顺序,故事的的颗粒度比较大;

二级故事:二级故事是一级故事的细分,故事颗粒较小,不一定要按照严格的时间顺序;然后对故事细节和需求痛点进行分析,找到一些机会点,转化成功能。

3.2 故事转化

根据用户故事和需求痛点,将其转化成为产品功能,以此确立产品功能范围。

当然,功能范围不仅局限于用户故事,也需要结合市场需要、商业模式等等因素来综合考虑,不过本文仅围绕用户故事地图来展开思考。

3.3 功能信息架构

最后简单的梳理来以下信息架构,更加直观地了解 Apple watch 的功能范围。

四、结语

本文的构思框架来源于《用户体验要素》,用倒叙的方式讲述了产品的表现层 - 框架层 - 结构层 - 范围层的相关内容。

这也是我第一次发表文章,还有很多思考或表达不足的地方,也希望有更多感兴趣的小伙伴进行探讨和交流。

参考资料

watch os 人机交互指南:https://developer.apple.com/design/human-interface-guidelines/watchos/overview/themes/

书籍:《用户故事地图》、《用户体验要素》

本文由 @Rinoa   原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

相关标签: 交互设计 watch 开普勒

人人都是产品经理
以上内容由“人人都是产品经理”上传发布 查看原文
最新评论

相关阅读

分享 返回顶部