Apple Watch 设计技巧和窍门

《Apple Watch 设计的技巧和陷阱》

大家好

我是迈克·斯特恩 我是Apple用户体验主讲师 今天很高兴和大家在一起 今天的讲座主题是 面向Apple Watch的设计 具体来说 我们将会讨论 一些设计技巧和陷阱 星期三我举行了另外一场 相同主题的讲座 但是内容有点不一样 如果你们没有参加那个讲座 也没有关系 我不会感到难受 但是我希望你们能够 比较容易地理解我所讲的内容 上次的讲座讨论 三个重要的主题 我将简要进行回顾 这三个主题分别是 个性化交流 整体设计 和轻量级交互 个性化交流主要讨论 高效和低效的个人间交流 并且参考它们 来设计我们的Apple Watch APP信息交流模型

现在新技术让Apple Watch 上的交互操作变得 更加人性化和个性化 因此很重要的一点是 你的Apple Watch APP设计 应该充分利用这些技术 让用户体验得人性化和个性化

整体设计是指模糊 软件和硬件之间的界线 这可以通过APP界面的 外观设计来实现 你将可以APP界面 与Apple Watch表盘 无缝融合 我们需要使用 Force Touch显示屏的功能 并且正确使用这些功能

对于Digital Crown 也是同样如此

现在...要特别说一下 Taptic Engine 触觉反馈技术 你可以使用这些技术 提供更加拟真 完善和细致入微的 APP使用体验

交量级交互是指 设计可以快速查看 和处理的交互操作 我们应该利用 Watch位于用户手腕上 这一独特优势

这三个主题是一些基本的 技术和知识 可以帮助你为 Apple Watch 设计出色的APP 通知和Glance 今天我们所讨论的内容 在某些方面与 这三个主题相关 但是本讲座还是有所不同

在今天的讲座中 我们不会重复以前的话题 我们将会讨论一些非常具体的事情 比如设计要素 控件等 帮助你设计具有 吸引力的Apple Watch APP通知和Glance等

我们还会介绍 许多开发人员在设计Apple Watch APP时 经常会遇到的10个陷阱 Apple Watch是一个全新的 Apple产品 即使像我这样的人 以前也没有为可穿戴式设备 设计过APP 因此有一些内容可能不容易理解 或者会让人感到陌生 我们会看到 一些普遍性的错误做法 让我们来回顾一下 在以前的开发工作中 遇到的一些问题 你们对此有意见吗？ 你们准备好了吗？ 是吗 好的 好极了 我早就想要一吐为快了 让我们闲话少说 我们来看第一个常见的陷阱 这是...

这... 可不是良好的用户体验 第一个 常见陷阱 是蜗牛般的APP速度

Apple Watch的目的 是提供便利性 如果你的APP需要很长的时间 来安装 需要很长的时间来启动 或者需要很长时间载入页面 对用户来说将是很不方便的

APP的UI设计 和图片生成方式 对APP的性能 具有十分重要的影响

你的设计应该确保高性能

因此 举例来说 尽可能的话 你应该使用 渐进式页面载入方法 这意味着在用户进入页面之后 用户不需要等待 整个页面载入完之后 才能看到内容 他们可以先看到一些内容 然后再看到其它载入的内容

让用户等待是不合适的 我们应该避免这一点 当用户点击按钮载入新页面 或者当他们扫动页面时 应该立即能够看到页面内容 这种期待是合理的

让我们来看一个例子 假设我们有一个APP 它列出附近的 Apple零售店地址 现在 在这个屏幕上 显示所有的零售店 我们看到商店名称和地址 以及它们与我们的 当前位置之间的距离 现在 所有这些信息 都将显示在 零售店详细信息屏幕上 很多数据已经可用 而且本地存储在Watch上 当我们转到详情页面时 立即可以看到大量的内容 其他内容 例如营业时间 或交通路线信息等 它们全部是文本 载入速度很快 现在可能还有一张零售店... 照片 不应该让用户等待 图片在Watch页面... 上显示 更好的做法是让用户 首先进入详情页面 让他们知道等待查看的 内容是什么 我的意思是 可以显示一个图片标签 这个标签 说明将在页面上 载入的内容是什么 用户可能根本不想 查看零商店照片 这样 他们可以 查看页面上的其它内容 看到想要的内容之后 就可以离开了

如果你使用这样的进度指示 你需要始终使用占位图片 为将要载入的内容 预留出空间 这样做的原因是 当图片最终载入时 你不希望页面高度发生改变 因为如果你正在查看... 图片下方的内容 这些内容将会从... 视图中消失 它们实际上会转到底部位置 这样会让用户感到困惑 因此你需要保留 这个图片显示区域

如果你使用这项技术 你还需要思考 如何设置页面上的 内容显示顺序 你应该将载入时间更长的内容 放到页面底部位置

当照片不在屏幕上时 将需要更多的时间载入它 然后用户才能滚动看到它 当用户首次进入这个页面时 用户可能不会意识到 照片此前并不在当前屏幕

第二个提高性能的设计方法是 优化你的图片 最后的办法是压缩图片 在你制作图片时 很重要的一点是 选择合适的压缩类型 和正常的设置 举例来说 对于照片 大多数时候你会使用JPEG JPEG是一种有损格式 这意味着 你看到的JPEG图片 其视觉质量和图像保真度 有一定的损失 但是在中等压缩率下 并不会有什么影响 这不会严重影响 你看到的图像质量 让我们来压缩这张图片 它给人以膨胀感 看上去是像素图片 让我们来压缩这张图片

在最高质量JPEG设置下 它的大小是125 K 我们降低质量设置 看到文件大小 开始急速下降 在最高压缩率 和最低质量设置下 它的大小仅为25 K左右 大约为最高质量图片的20% 文件大小缩减非常明显 但是看上去惨不忍睹 通常情况下 当你压缩JPEG时 需要使用适中... 的压缩率 我们需要找到 一个图片质量下降临界点 让我们把它们放在... 一起比较 几乎很难看到 图片质量有区别 但是文件大小减少了三分之二 只有在近距离观察时 才会看到 压缩造成的细微差别 但是用户不会 这样认真地观察它们 这不符合我们的习惯 用户的Watch使用高分辨率的 视网膜显示屏 而且会经常移动 因为手表系带在 他们的手腕上 因此很难看到这些细微差别

接下来 让我们来看PNG 现在 PNG几乎已经成为 除照片之外的其他大多数图片 所使用的格式默认设置下 PNG使用24位颜色 这意味着可以使用数百万种颜色 来绘制图片 但是对于图标等大多数图片来说 这已经远远超过实际需求

当你保存PNG图片时 应该知道你还可以使用 8位颜色设置

这意味着可以 使用256种或 更少的颜色 来绘制你的图片 但是对于这个图片来说 这已经绰绰有余 事实上 只有当颜色数量为200 或更少时 我们才会开始看到 图片中的递色和色调分离 使用8位PNG 可以大幅减小 文件大小

在这里你可以看到 文件大小缩减幅度 非常显著 几乎减小了十倍 图片质量却没有明显的区别

当你的APP使用 大量的图片时 总体文件大小缩减 是十分惊人的 特别是当你使用 图片序列动画时 这可以显著减小你的APP大小 因此你应该认真考虑 使用这项技术

接下来 你需要做的事情是 避免使用不必要的透明图片 透明图片意味着需要 Alpha通道 Alpha通道会增加文件大小 因此应该尽量避免 除非你确实需要使用它 有时候 你确实需要 使用透明图片 例如 这个天气... Glance图片 这个图片显示在半透明 黑色背景上 使其背后的表盘变得模糊 因此你需要透明设置 以显示彩色信息 但是这个天气APP中的 一个类似的标 并不需要这种透明格式 它始终显在黑色背景上 由于我们无需改变黑色背景 因此不需要alpha通道

最后一项图片... 优化技术是 尽量使用实际所需要的图片大小 当你在运行时发送图片时 这一点显得尤为重要 图片和视频的尺寸大小 只需要满足Watch 显示要求... 就可以了 尤其是当图片可能 会超出显示屏边界时 应确保使用合适的图片 和视频尺寸 让我们来回顾一下 高性能设计 意味着需要在页面上 逐步载入内容 这意味着对内容进行排序 让用户不会发现 你在逐步载入内容 另外应该通过压缩 来优化图片 避免使用 透明图片 以及使用正确的图片尺寸 如果想要更多的信息 我建议观看这个讲座视频 这个讲座从工程设计的角度 详细地讨论 一些性能优化技巧和陷阱

现在 我想为你们介绍一个 另外一个很好的APP性能优化技术

这项技术非常有用 其主旨是 避免APP变得过于复杂 这是第二个常见陷阱

前面我说过我不会重复 我的上次讲座的内容 可能并非完全如此 因为我需要重复一下以前的内容

Apple Watch并不是 小型化的iPhone 这一点很重要 因此我再次强调 我们看到很多开发人员 经常陷入这种误区 我们很多人会自然而然地 将想将iPhone APP 移植到Watch 但是结果发现Watch APP 难以使用和浏览 Apple Watch 十分适合... 快速查看 以进行方便 简0单的交互操作 那么 iOS APP上的哪些信息和功能 是用户确实想要而且能够 快速和方便地... 查看和操作的？

应确保仅关注最重要的信息 不要将过多的信息和功能 堆积到你的APP上 这是提高Apple Watch 可用性的一个很好方法 例如 iPhone上的日历表APP 具有许多Apple Watch 日历表APP 所不具备的功能

Apple Watch日历表APP 不支持搜索 不能添加事件 不能管理你的日程 不能查看未来几天 过去几天的事件 Apple Watch上的 日历表APP 仅包含iPhone APP 全部功能的一部分 但是很符合Watch的... 使用情况 可以检查你的日历表 查看今天有什么活动 接下来几天有干什么安排 可以查看日历表中的 每项活动的具体细息 你可以接收和拒绝邀请 当你赶上不会议 或需要放弃会议时 你可以联系会议组织者

这些都符合Watch的 使用情况 你并不需要 iPhone上的所有功能 Apple Watch APP应该 是iPhone APP的补充 如同我们刚才 在日程表APP上看到的那些 应该在Apple Watch 上提供 全部iPhone功能 的一小部分功能 或者也可以扩展... iOS APP的功能 例如 这个Apple Watch版本 的照相机APP 将AppleWatch变成 iPhone摄像头的... 取景器 允许遥控设置你的iPhone 以便在一定距离为你 和你的朋友拍照 确保所有人都位于镜头之中 它功能iOS照相机APP的功能 现在 我想要你们思考 如何使用你的 Apple Watch APP 做同样的事情 如何为你的APP 实现以前无法实现的功能

第三个常见陷阱 是导航过于烦琐 烦琐的导航是效率低下 的使用流程造成的 导致用户难以 找到他们想要找到的东西 不正确的APP结构模型 通常会导致烦琐的导航

Apple Watch... 有两种... 主要... 结构模式 第一种基于页面的模式 我们看到一系列依次排序的页面 你可以扫动切换不同页面

这是天气预报APP使用的模式 你扫动切换不同的城市

另一种结构模式是 层级模式 在层级模式中有一系列的 高层次类别或内容摘要 然后你点击 进入详情页面 或使用更具体的功能

股票APP就是 这种层级APP的例子之一 在顶层有一个股票列表 如果点击其中一支股票 就会弹出一个子视图 显示选定股票的更多具体信息

在watchOS中 不能混合使用这些模式

因此你不能首先 使用页面模式 然后在更低级别 转换到...层级模式 相反地 你也不能 首先使用层级模式 然后在更低级别 转换到页面模式 其原因在于屏幕尺寸

为了便于理解 让我们来看 层级APP中的 这个子视图 我刚才高亮显示左上角的 返回箭头图标 你点击这个图标 将返回上级视图 但是它是一个很小的图标 它的点击区域 并不十分明确 它比箭头肯定要大一些 但是也大不了多少

为了更简单地 返回上级视图 可以从屏幕左边缘扫动

这将帮助你返回到上级视图 在这里很容易看清楚 现在的问题是 在页面模式APP中 如何使用类似的操作 返回到上一个屏幕 因为Watch 显示屏尺寸很小 因此很难同时支持 这些操作手势

你必须决定哪些模式 最适合你的APP 你选择的结构模式应该 便于用户找到他们想找的东西 而且只需要最少的扫动和点击 一般来说 选择层级还是 页面结构主要取决于 APP显示屏幕数量 想要显示的 信息类型 对于扁平结构的信息 即所有信息部分都是同级别的 这时适合使用页面模式 页面模式不应该 有过多的分页屏幕 因为扫动切换屏幕是 是一个相对较慢的内容浏览方法 天气预报APP符合这些条件 大多数人只想看 少数几个城市的天气 因此不应该含有大量的项目 这些扫动切换 不会变得过于烦琐

在天气信息的含义方面 所有城市基本是相同的 因此不需要进行 层级化信息组织和分类

另一方面 层级化APP 更适合大型或复杂的数据结构 许多人使用股票APP 同时查看多支股票 和市场行情 使用概览列表 然后导航到单支股票或市场行情 是很容易完成的操作 只需要滚动屏幕 找到你想要的股票 然后选择它

在这个层级 有大量的信息可供用户查看 用户可以轻松找到 他们所需要的信息 甚至根本不需要导航 这就提高了效率

假设我们将这个APP 设计成为分页APP 用户将需要花费大量的时间 才能找到...他们想要的信息 因为这里会有数不清的分页内容 如果他们按正确的方向扫动查找 情况会好一点 如果方向出错 他们必须反过来... 重新开始

选择合适的模式非常重要

过度使用模式表单 也会造成烦琐的导航

现在模式表单支持 多视图分页 我看到开发人员 通过使用模式表单 来绕过无法从层级结构 转到分页结构的限制 我强烈反对这种做法 首先 模式表单不显示时间 我认为 大多数时候 用户想... 要在他们的 Apple Watch上看到时间

模式表单的动画 是非连惯性的 它看起来就像是这个 单独的信息窗格 在主界面上滑动 让用户感觉得好像 失去对主APP的控制 它发现一种分离信号 感觉好象操作发生中断 如果用户的APP导航操作 频繁地触发这些表单模式动画 用户体验将会变得不流畅 让人感觉突兀...和不连贯

为了避免过多使用模式表单 和过于烦琐的导航 不应该设置过多的模式表单 互相滑动切换和 来回跳转 在iOS也同样如此 因为这样会让用户觉得 他们始终处于这种操作模式中 永远都不会结束 他们会很困难或 感觉难以 回到正常的APP操作模式

无论你选择什么结构类型 都应该使用 简单的结构 在层级APP中 不应该设置两个以上的层级 最多不应该有超过两个 最多三个层级 如果超过这个限值 需要将会需要花费更多的时间 来查找他们想要的内容 他们会感觉无法 跳出你的层级结构 对于分页APP 如我前面所说的那样 应该避免过多的页面 扫动切换所有这些页面 将需要大量的时间 让人感觉非常烦琐

烦琐的导航会严重降低效率 前面我还讲到一个设计原则 即轻量级交互 轻量级交互的是为了 实现高效率的导航 或者说它的主要目的 是提高效率

我们继续 第四个常见陷阱是标签混乱 这里我指的主要是 页面标题和 模式表单的"Close"按钮 和"Dismiss"按钮 我们先来看页面标题

在这方面 一个常见的情况是 在层级结构APP中 右上角的标题显示"Do Not Disturb"位于右侧 它实际是一个"返回"按钮 或"返回"按钮标签 而不是当前视图标题

但是实际上不是这么回事

如果我们以这种方式使用标题 将会有多个屏幕 在快速Glance上 使用相同的标题 它们将会具有相同的标题 因此应该避免这样做 现在 我理解... 开发者为什么这样做 错误原因... 是一样的 它不是"Back"按钮 因此在这里 不应该使用"Back"

前面我说过 我理解为什么人们将它 视为"Back"按钮 因为它看上去 如同iPhone或iPad 上的"Back"按钮

但是在iPhone或iPad上 有足够的空间同时显示 "Back"按钮和标题

在Apple Watch上 显示屏更小 不能同时显示二者 因为那样将会不美观 因此你必须选择显示其中之一 相比之下 显示标题 比显示“Back”按钮更重要 更重要的是用户应该知道 当前所看的内容是什么 而不是了解上一屏幕 或父级屏幕的内容

在标签方面 另一个... 常见的误区是 模式表单"Close"按钮 或"Dismiss"按钮 这些按钮可以重命名 因为相比于显示"Dismiss" 显示 "Close"或"Done" 或"Cancel"更容易让人接受

但是 无论怎么重命名 都必须明确地让用户知道 这些标签是可操作的 用户需要知道 他们可以 点击这个标签 从而会触发特定的操作 实际上不仅仅是触发操作 这将会关闭模式表单 并返回前一屏幕

这显然不是你想要的 因为你将它用作标题 用户并不知道它们是可操作的 用户将会想办法 关闭这个模式表单 但是会长时间停留 在此...屏幕之中

从很多方面来看 不应该这样做 前面我说过 即将在层级结构APP中 也不应该将标题视为 "Back"按钮 在这里使用左尖括号 并加上Back字样 会让用户感到困惑 首先 模式表单 屏幕底部向上滑动 而不是从右向左滑动 你不能使用左边缘扫动 退出当前屏幕 当用户看到这种情况 他们会看到十分困惑

第五个常见的陷阱是 在Apple Watch上 使用菜单控件 作为主要的APP导航方式

菜单很适合环境相关操作 例如使用 编辑一条新消息的菜单 对于视图模式首选项 例如日历表APP 可以使用菜单切换 日程表显示外观

但是当你使用菜单 进行导航时 将会造成可用性问题

主要问题是 即使用户可以导航 他们也不知道其在 APP结构中所处的位置

例如 在一个层级结构APP中 这个箭头具有很重要的作用 这让用户知道 APP的结构是什么样的 它让用户知道 这是一个层级结构APP 更重要的是 它让用户知道 当前位置是一个子视图 因此他们可以返回 以进行APP导航 这一点很重要 用户必须知道这个基本信息

同样地 在页面模式APP中 屏幕底部的这些圆点 告诉用户 这是一种页面模式结构 并告诉他们有多少个页面 以及他们所处的相对页面位置 并且提醒用户 他们可以通过侧向扫动 在这些页面之间导航 信息很丰富 而且操作也很多 它告诉用户如何与APP 进行交互

如果使用菜单作为导航方法 将不会屏幕图标 来提示如何导航 正如前面我说的 你无法看到关于 是否可以导航的提示 这样 你会觉得 你正在查看的屏幕是 唯一的APP屏幕

因此 最好的方法是 在你的APP中始终使用 直观的层级结构或页面结构 而不要尝试使用菜单导航

下面的内容可能有点偏题 但是它与菜单有关 因此我觉得有必要有说一下 这是我额外给你们 讲解的一种陷阱 你们不需要另外付学费给我 但是我不介意收点小费

如前所述 在菜单中 菜单具有非常明显的外观样式 这里可以看到 按钮有 深色的线性图标 它们位于这些浅灰色圆圈上 它们有浅色的标签 其外观特征是十分明显的 如果你将APP UI 设计成这个样子 可能会让用户感到困惑 他们可能会认为 按显示屏时太用力了 因此才会进入这个屏幕 他们想要查找APP菜单 然后他们意识到 他们并不想导航到任何位置 或在这里进行任何操作 因此他们尝试点击空白位置 关闭当前屏幕 但是很显然 这不会有任何反应 因为这并不是在菜单之中 这样 用户感觉你的APP卡住了 这对用户来说 不是良好的使用体验 原则上来说 在你的APP中 使用这样的... 大图标作为导航方式 本身并没有错 但是应该将这些图标 与菜单控件区分开来 不应该使用这些深色图标 和浅灰色背景 而应该尝试加入 你的全局彩色颜色 在这里不应该使用深色图标 而应该使用白色 并且为按钮添加边框 或者进行其他一些区分 应尽量将它们与菜单控件的外观 区分开来

关于菜单就讲到这里 我的讲座部分也到此为止 现在我想邀请我的同事 雷切尔·罗斯上台 有请雷切尔

谢谢米克

大家好 我是雷切尔·罗斯 我也是APPLE的 用户体验主讲师 接下来我会讨论 这个清单上的其它项目 在Apple Watch上 很重要的一点是 让用户能够快速确定 哪些是可点击的 哪些是不可点击的 在这个方面 一个常见的问题是 按钮看起来并不像是按钮 Watch具有自己的设计语言 它并不等同于iOS

在iOS上 我们主要通过 屏幕上的颜色或位置 来告诉我们 某个项目是否可以点击

如果控件位于工具栏或导航栏中 并且具有不同的颜色 用户可以知道 它是可操作项目 比如在这里的地图上 我们知道 角落上的 每个项目都是可点击的 因为它们的位置和颜色 告诉我们这一点

现在 在Apple Watch上 大多数控件 都位于这些圆角矩形 或圈圈之内 这是因为显示屏 空间非常有限 没有专门的区域 来放置导航栏或工具栏

状态栏之外的任何内容 都位于视图之中 因此没有专门的位置来放置控件

通过颜色来指示可操作项目 也有一点困难 因为在 Apple Watch上 页面标题是彩色的 我们使用这种方法来强调 上下文相关性和品牌信息 这也有助于增强可用性 因为标题颜色 让你更容易知道你在哪个APP之中 尤其是当你远距离查看时 你可能在等待公汽 需要转移视线看车来了没有 这种颜色标识有助于你 快速识别内容

这里有两个APP 具有非常相似的内容 左边是Yelp APP 右边是Foursquare APP 它们具有相似的内容 但是Yelp使用红色 作为品牌专用颜色 Foursquare使用粉色 页面标题颜色让你知道 处在哪个APP之中

同样地 屏幕左侧是Timer 右侧是Runtastic Six Pack 颜色帮助强化这些APP的身份

许多人说 他们不知道 如何设置颜色 那我们可以 使用Global Tint颜色

在iOS 另一个约定成俗的做法是 为可点击项目添加V形符号 例如 我们在设置行文字标签旁边 和App Store中的开发者 姓名旁边添加这样的符号

但是我们在Apple Watch 中使用这些V形符号 将会占用太多的空间

如果语音留言标签再长一些 或者字体再大一些 将会导致文字缠在一起 或者被截断

而且会看上去杂乱不堪 Apple Watch的屏幕 是非常有限 增加V形符号会影响 图标和文字受到的关注度 而图标和文字所传达的 信息是十分重要的 如果使用圆角矩形 不需要添加V形符号 来表示可交互性 它们明显看上去就是可点击的

在Apple Watch 我们的 另一个惯常做法是 将按钮放入圆圈 如果没有圆圈

这些电话图标看上去 将会比较滑稽 它们看上去更像是状态指示符 或装饰性符号

但是增加圆圈之后 就可以 准确无误地表明它们是按钮 由于交互时间很短 而且需要快速做出决定 我们应该能够让用户 快速进行操作 我看到一个电话 是否接听 还是应该挂掉？ 这些圆圈能够明显 指示这两种操作选项

但是它与圆角矩形不一样 圆形是一种革命性的新概念 这一点与iOS相似

在iPhone上 当按钮看上去不是很明确时 我们使用圆圈

圆角矩形同样如此 你经常会看到 App Store中的分段控件 和"Buy"按钮使用圆角矩形 如果我们不使用圆角矩形 "Buy"按钮可能看上去并不明显 我们一致认为 应该明确地告诉用户 如何在App Store中 购买APP

因此在Apple Watch上 圆角矩形和圆圈 帮助用户明确理解 哪些项目是可以操作的 而且由于这些交互操作非常简短 如米克所说的那样 你只有几秒钟的时间 比如说一个人举起他的手臂 不一会他感觉有点累了 每一秒都很重要

因此 应该将任何 可点击的项目 放入圆角矩形或圆形 同样重要的是 不要将这些形状 用于不可点击项目 如果这样做 它们看上去可点击 如果不能 将会让用户感到困惑

在iOS中 有时候 我们使用这些着色背景 来分组具有相似性的项目

因此开发人员可能也想在 Apple Watch上这样做 但是如果你这样做 所有这些项目看起来 都是可点击的 如果用户使用你的APP 并认为这些项目是可点击的 他们尝试点击 而没有任何反应 他们会认为APP存在问题 如果你遇到这样的情况 你最好使用分隔线进行分组 如同我们 在股票APP中所做的那样

这些线条表明 哪些项目是相关的 还可以帮助你 查找不同的水平列表

因此 应该确保 按钮看上去像是按钮 确保不可交互内容 看上去就是不可操作的

这样我们就进入下一个主题 即点击区域不足 发现可交互项目仅是一个开始 但是如果用户不能 轻松地点它们 仍然会存在可用性问题 增强触感设计 是Apple Watch的 一个非常重要的内容 当用户在运动过程中 使用你的APP时 尤其需要注意这一点

在Photoshop 或Sketch中 这些项目看起来很容易使用 你坐在舒适安稳的办公室椅子上 桌上有大屏幕显示器

即使你使用鼠标 在模拟器中操作

也非常容易 但是在Watch上 如果这些项目的尺寸不够大 将很难以进行点击

在Watch上 滚动操作很简单 你可以使用数字表冠 手指扫动操作也很简单 因此不要害怕内容 移出当前视图 尤其是当你可以避免裁剪 和更便于点击按钮

在Apple Watch上 对于42mm规格 圆形控件尺寸 应不低于80xy 80像素 对于38mm规格 应不低于75x75像素 但是更大的尺寸不会带来问题 我们来看 Chipotle的设计 主要操作 也就是设计者想要 用户在Watch app上 执行的操作 是订购玉米煎饼 他们这个漂亮而巨大的 按钮来执行此操作 你将可以毫不费力地 点击这个按钮

现在 对于矩形按钮 在42mm Watch上 其高度绝对不应该小于53像素 在38mm Watch上 不应该小于50像素 但是我们看到 几乎所有系统按钮 都大于这个尺寸 高度通常为80像素 或更大 同样是越大越好

应该始终确保 将按钮扩展到画布的完整宽度 即使标签比较简短 因为这个按钮不如 这个按钮容易点击 特别是当你想要出门散步时

在某些情况下 需要并排使用两个按钮 也可以这样做

但是必须使用 非常简短的文本标签

并排设置三个带有文字标签 的按钮是不适当的做法 即使文字极其简短

如果你有单独数字 多个字符或图标 虽然可以并排设置三个 但是这样看上去会很拥挤 尤其是在更小尺寸的Watch上 会让用户无法准确地点击

请绝对不要并排超过三个 并排设置三个以上的按钮 可能导致无法使用 会让用户感到十分不便

因此应该设置较大的点击区域 因为你需要让用户 能够轻松地点击按钮

现在星期五下午 我们将会有一些娱乐活动

接下来 我想讨论易读性 如果不容易阅读显示的内容 将很难使用APP

当你查看Photoshop 或Sketch 甚至模拟器中的字体时 可能会错误地认为 字体很容易识读 你坐在桌子前 面前是大屏幕显示器 而且办公室灯光明亮 在这种环境 显示很正常 但是在Watch 显示效果可能是... 这样的 很难看清楚 当你准备上火车时 抬起手腕 不容易立刻看清

更大的字体更容易识讯 你不会只想在Photoshop 或Sketch或模拟器上查看它们 你需要在手腕上查看 这些APP内容

对于最重要的内容 当用户需要这些内容时 必须清晰可见 当你出门办事 或者去赶公交车时 或者当你做仰卧起坐时

或者在晴朗天气跑步锻炼时 能否轻松地识读这些信息？ 人们希望能够 迅速看到想要的信息

为了提高易读性 我强烈建议 使用SF Compact字体 这是Apple Watch 系统字体 当然也可以使用自定义字体 但是即使大小合适较细字体 也不如San Francisco 字体容易识读

San Francisco 是专门为了 在现有数字显示屏上 实现最高易读性而设计的 我可以介绍很多 关于此字体设计的背后故事 但是你最好还是自己 去听字体设计团队的讲述 如果你没有参加 之前在这里举行的讲座 我强烈建议你观看在线视频 这个讲座详细介绍了 此字体开发过程中 一些非常有趣的事情

使用系统字体的最好方法 是使用系统字体样式 这样你可以利用 Dynamic Type的好处

当用户调整他们 喜欢的字体大小时 Dynamic Type 可以比例缩放

如果用户更改他们 喜欢的字体大小 而你的APP不能调节 以符合他们的设置 他们将会感到失望 更糟糕的是 他们可能会根本 无法使用你的APP

实施Dynamic Type很简单 你只需要使用这里的 五个文本样式中的 其中一个样式

然后 对于用户指定的 每个文字设置 系统将会调整多个属性 确保最优的易读性 和版式完整性

我们调整大小

我们还调整前导格式 这是文字行之间的垂直间隙

我们调整跟踪 即字符之间的间隔

如果你使用自定义字体 将必须手动进行 所有这些大小调整

如前所术这 我们有五种样式 即Headline、 Body、 Caption1、 Caption2 和 Footnote 这称为Footnote是有原因的 不要因为它看上去较小 而将它用于你的有文字内容

对于任何Watch内容和项目 都是越大越好 尤其是字体

前面迈克讲过 我们尽量 模糊硬件和软件之间的界线 在Apple Watch上 明亮的背景颜色 和 不必要的衬边 更容易突显出这种界线

这让人突然屏幕很小 而且所有内容都堆积在中间

Apple Watch 的屏幕尺寸很小 你需要为你的内容精打细算 充分利用每个像素 不要将空间浪费给衬边

亮色的背景不可取 因为大多数平台区域是黑色 亮色背景给人以冲击感 而且 状态栏的颜色是无法更改的 因此它始终显示为黑色 这样 内容显示区域 就会变得更小

我看到很多人将图片 放在背景之中 让他们的APP变得更加有趣 有时候可以这样做 但更多时候不应该这样做 这会让用户忽略内容

这会增加文件大小 因为你需要更多的图片 从而延长启动时间 就如迈克刚才所说的那样 而且让文字更不容易识读 另外 交互操作时间 是非常短的 你必须尽量消除 防碍交互操作的事情 在Watch上 几秒钟的时间 都是非常宝贵的

虽然在Photosh中 缺少衬边看上去 会非常不舒服 但是在Watch上却很好 这是因为表盘的缘故 表盘就像是衬边 我的意思是 你并不需要加入衬边 你可以将这个屏幕资产 用于内容和控件 从而减少裁剪 和文字重叠

几分钟前我说过 侧对侧按钮更容易点击

如果你的APP使用黑色背景 将会与表盘无缝融为一体 感觉是硬件的组成部分

用户更容易 将注意力放到你的APP上

但是 这并不意味 你的APP变得单调 有很多种方法来传达 品牌宣传信息 和添加个性化项目 而不必依赖于彩色背景

让我们来看一些很不错的例子 Hailo是英国流行的 的士打车APP 在这个APP中 全程可以看到 明亮的黄色和可爱的汽车图标

Citymapper APP 使用黄色来作为品牌颜色 他们使用Citymapper 图标集作为载入图片 但是最重要的是 这些图标传达出 他们为人所知的幽默感 在有些地方 需要为用户提供指示 这里的机场选项 在这方面做得很好

Rules！ 是一个 非常有趣的记忆游戏 他们使用iPhone APP中 贯穿始终的背景材质 并将它转化成为 Apple Watch 上的按钮材质 另外 还使用这些可爱的人物 生动有趣的动画 这样的APP绝对不会感到无聊 也不会与其他APP混淆

当然 你也可以使用

其他可用的方法 让你的APP变得生动有趣

因此 应避免使用 明亮背景作为装饰 而且不应该 将它们嵌入你的内容 应该让表盘来做这些事情

但是 归根结底 如果用户不能立即 找到你的APP 所有这一切都将失去意义

与iOS不同 Apple Watch图标没有标签 因此十分重要的一点是 用户应该能够 通过图标找到你的APP 毫无疑问 你会注意到 Watch App图标是圆形 而且明显更小 这会带来设计上的挑战

这里的大多数Watch App图标你应该不会感到陌生 因为你的iPhone上也有 这些APP图标

将你的Apple Watch图标 与iOS图标完全保持一致 可以让用户更快地 在Watch上找到APP

Citymapper Nike+ Running 和Procreate都是直接将 他们的App图标 直接转换为Apple Watch图标 因为这些图标的形状非常简单 在圆形格式下也很容易识别

但是有时候 进行这种转换存在困难 为此 我向你们介绍一些技术 帮助你修改App图标 在小圆圈中也容易识别

首先要做的事情是 尽可能简单化 可以移除哪些内容 而不影响APP中的品牌识别？

首先从文字开始 小字号的文字更难以识读 是否可以消除全部文字？

Yelp正是这样做的 他们的醒目图标和标志性红色 足以让APP容易识别

然后 我们开始消除文字 如果不能消除文字 可以考虑使用缩写

如果你的图标含有丰富信息 可以考虑进行简化 因为这会让小尺寸的图标 更容易识读

以愤怒的小鸟为例 我们很多人都认识它 把它按比例缩小 并放入圆圈的做法 在Apple Watch 上并不太合适 . 这些白色的空白区域 看上去很别扭 不应该这样显示

因此 Iconfactory团队 重新绘制这个小鸟图标 以更好地在小圆圈中显示 现在 你看到它正在瞪着你 很多特征已经被减化 或者被移除 鸟嘴上的鼻孔不见了 羽毛和眉毛也变得更简单

在小尺寸下 含有大量细节的 复杂形状更难以看清 应该尽可能进行简化

另外 除非有令人信服务的理由 需要放弃当前的色彩模式 否则应该保留当前的色彩方案 和整体视觉样式 颜色是一个非常重要的 品牌元素 能够非常有效地 帮助用户找到 你的App图标

如果消息突然用红色显示 将会怎么样？

你可能会认为 这是一个不同的APP 或者是beta版本或试用版本

我们来看Fanatee 如何简化他们的 游戏Letter Zap 的APP图标

他们移除了文字 因为小字体文字 在Watch上不易识读 而且他们放大了闪电图标 但是 更重要的是 他们保留了绿色和金色 色彩设计 从而让APP非常容易识别

即便如此 还是会有人认为 放弃使用很久的文字 或更改使用很久的图标 是一件冒险的事情 但是 只要保留APP图标的 整体颜色和视觉样式 APP还是容易识别的

正如迈克前面所说的那样 你的目标不是在Watch上 提供iPhone APP 的全部功能 因此 有时候使用 完全相同的App图标 可能并不合适

WatchAPP应该 为iPhone提供补充功能 因此 补充性Watch App 图标思想可能更为合适

前面我们讲到过 iPhone照相机APP 提供不计其数的功能 你可以拍摄照片 编辑和分享照片 但是在Watch APP仅用作一个 快门按钮遥控器

因此 虽然我们可以直接使用 这个App图标 将它放入圆圈 就此了事 但是 这给人的感觉并不太好

相反 我们应该运用 补充功能思维 这仍然是一个容易识别的相机图标 但是一些材质细节更简单 保留了原有的色彩方案 并且着重强调快门按钮 因为这是APP的功能 即按下快门按钮

另一个典型的例子 是Sky Guide

将图标遮罩放入圆圈 并不是合适的做法 让识别变更困难 这种做法不合适的原因 在于APP的功能

在iPhone上 Sky Guide 告诉你想要观察的一切内容 在星空中 我现在能看到什么？ 但是在Watch上 它的功能是提醒你 你所在区域有哪些天文现象 比如国际空间站将会 飞掠你所在的空域

因此他们运用前面所说的 补充性App图标概念 这样的图标在圆圈中 看起来很不错 而且暗示天文事件

而且 他们使用相似的色彩设计 和视觉样式 因此相互关系十分清楚

如果你在想方设法 修改你的iOS图标 以运用于Apple Watch 你可以尝试使用这些方法

这些Apple Watch图标 与对应的iOS并不一样 但是相似度是十分明显的 因此 APP很容易找到

前面我多次讲到 Watch图标 和iOS图标不必完全相同 但是需要具有相似性

这样 今天的内容全部讲完了

在你们设计Watch时 我希望 这些技术成为你们的有用工具 从而能够避免一些 常见的可用性陷阱 我们已经看到 一些非常不错的Watch APP 我期望你们能够 为watchOS 2 开发优秀的APP

本周我们举行了很多场次的讲座 今天上举行的 “WatchKit技巧与陷阱讲座” 非常有价值 网上有大量的资料 尤其是关于 “设计优质APP页面” 本周真是成果丰富 我希望你们有所收获 后面还有多场讲座 希望你们能够参加 我们明年将会再见 谢谢