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

2019-04-21 10:29:00

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

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

一、关于小屏

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

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一致，只是排列方式不同）；
非充电模式：真正的闲置状态，用户没有操作则一直保持息屏。