智能手表界面设计指南：面向所有人的设计

如果我们将疫情前后的生活联系起来，可以看到人们现在更关注个人健康、健身和卫生。可穿戴设备能够帮助世界保持这一趋势。

近年来，健身手环、智能手表、VR、智能服装、蓝牙耳机和其他许多新的可穿戴新技术应运而生。但是，我们今天重点关注智能手表。

今天这篇文章完全来自作者个人经历，并结合了Android Wear OS，Apple Watch OS和Samsung的One UI的原理。

01

为什么我们仍然需要智能手表？

• 首先，现在几点？

• 想知道是谁来电？

• 收到一条短信，值得处理吗？

• 我今天燃烧了多少卡路里？

• “嘿，Siri。在印度1美元是多少钱？”

• 不管怎样，智能手机都让人分心。

不仅如此，我们可以根据手表功能做更多的事情。几乎所有手表可以追踪你的脉搏、血氧饱和度、血压等。

现在让我们深入探讨我们的实际主题——智能手表界面设计指南。

02

指南

没有一件杰作是单凭一个想法就可以创造的，都是需要做足准备才能开始。我在这里帮助你完成“你的”准备。我准备了一份项目清单，以供你在创造下一个杰作时查看。这些项目根据三个简单的原则组合在一起——设计、无障碍和易用性。

让我们看看在设计智能手表时，这三个原则对我们有哪些启发。

1.空间与布局

考虑到Apple手表40mm的屏幕尺寸，比iPhone8小了40.2％。设计一个分辨率如此之小的东西，对于任何一个设计师来说，让所有内容看起来都清晰易读是至关重要的。全球的公司都利用这一机会使人们的生活得更轻松（并从中赚钱，但这不是今天的主题）。

2.手势

每个人都希望能够在如此小的屏幕上做一件事——轻松访问。但我们如何实现呢？

在设计智能手机时，我们通常不会考虑基于手势的导航，但将手势应用到像智能手表这样较小的屏幕上是一个好主意。例如，Apple的“向右滑动返回”可以节省在手表的每个屏幕上执行“返回”操作的空间，并且它也很有效。

Apple

3.返回动作

正如上面所说，“滑动返回”不仅是一个例子，它还是一个使生活变得轻松的解决方案。受到Apple“向右滑动返回”的启发，android在其操作系统中实现了这一手势，以替代其屏幕底部的虚拟按键。

Verge

在智能手表上使用类似的手势可以帮助你非常轻松地在页面或应用程序之间进行切换。它还可以节省物理按钮的点击次数（如果有）。

4.屏幕上的操作限制

你的研究可能会告诉你“一切都是我们的主要行动”，但还是要将其缩小到一或两个。这有助于用户在正确的时间点选择正确的事情。

Google

在像智能手表这样小的屏幕上，很难在一个页面中容纳所有的东西。如果这样做，可能会导致用户无法专注于重要的事情。还可能导致混乱、恼怒、沮丧，并让用户抓狂，这是我们不希望发生的。

5.避免复杂的功能或用户流

避免创建超过两个或三个级别的层次结构。浅层次结构使人们更容易快速找到他们想要的东西。超过两个或三个级别的信息可能会导致人们在使用时迷路。

Google

6.避免意外操作

考虑到手表在人体上的位置，屏幕上出现意外操作的可能性很高。为了避免此类操作或使用户从此类意外操作中恢复过来，建议使用“点击并按住”之类的手势来完成关键操作，或者在某些情况下，简单的“撤消”操作就可以解决问题。

7.边距和填充

分组可以帮助用户更快、更有效地理解和组织信息。在用户界面中，可以通过组件之间的边距和填充来实现。

换句话说，用户界面元素的间距对于使设计符合人体工程学是至关重要的，且有助于你按预期进行设计。

8.按钮和动作

在设计按钮时，要避免使用颜色作为显示交互效果的唯一方法。WatchOS使用圆角矩形作为指示按钮和列表交互的主要方式。这将确保色盲患者能够像其他用户一样感知信息。此外，在屏幕上使用更丰富的色彩元素会影响电池寿命。

Google 和 Apple

9.排版

在智能手机或网络等其他平台上，你可以使用任何字体。但对于智能手表，你必须明智地选择字体。字体选择的失误可能会对你的设计产生很大的影响。例如，Montserrat宽大的字体覆盖了更多屏幕空间，使信息变得更少，导致无法一次显示所有最需要的信息。

最好不要使用任何花哨或有衬线的字体，因为它们在小的屏幕上不太清晰。尝试使用一些Sans系列字体，例如Roboto、SF Text、Helvetica，它们可以提供更好的字体拓展和大小。这些字体系列提供了各种样式，可满足你的所有需求。

无论如何，要让字体发挥出创意。

10.颜色

任何智能手表的主要目标之一都是能够随时清楚的看到信息。为了使信息在不同的光照条件下都能很好地显示，建议使用易于感知的明亮颜色，并使文字清晰易读。

定义明确的调色板不仅有助于品牌塑造，而且还可以在不同屏幕之间创建视觉的连续性。在使用颜色时，你必须记住以下三个关键原则：

• 考虑上下文。确保你选择的颜色发送的是合适的消息。例如，如果一个冥想App在冥想期间使用鲜艳的红色作为背景色，会让人不舒服。
• 考虑对比。Apple建议文本使用浅色，因为使用这种颜色更容易获得合适的对比度和清晰度。
• 考虑色盲。许多色盲的人很难区分红色和绿色。不要将这些颜色组合作为传递消息的唯一方法。

Google

Google使用单色调色板来帮助区分屏幕上的元素。Google表示：“深色背景更适合社交环境，因为它们可以减少屏幕的干扰”。即使在OLED屏中使用，深色也可以更好地延长电池寿命。

11.微交互

微交互通过增加交互设计的深度来创造更自然的体验。微交互包括图标动画、视图之间的页面转换、按钮动画以及所有其他交互元素。

微交互是唯一可以通过设计传递自然情感的强大设计元素。例如，“放入回收站”、“文件上传成功”等动画图标。换句话说，微交互可以使交互更顺畅，使体验更流畅。

研究人员发现，界面动画的最佳速度在200到500毫秒之间。任何短于100毫秒的动画都是瞬间的，根本无法被识别。

Dribbble

如果你认为进行大量微交互可以增强用户体验，那你就错了。动画或微交互应尽可能巧妙，以使体验无缝。

12.触觉反馈（振动反馈）

在屏幕上进行微交互可以使用户感觉用户界面无缝过渡，但如果用户是色盲或需要某些辅助功能，该怎么办？

这时就轮到“触觉反馈”进入场景了。

要确保触觉反馈行为不会与系统行为冲突。

13.警报

作为用户，我应该能够管理不同应用程序的警报。

在上图中，Apple认为我们收到通知时需要知道的最重要的信息是：

• 从哪个App？

• 来自谁？

而在手机上，我们甚至可能希望看到：

• 从哪个App？

• 来自谁？

• 什么时候收到的？

• 消息的内容是什么？

• 可进行的操作，等等。

我认为Apple是对的。如果你想显示更多有用的信息，普通用户不会说“不”，但如果你想限制信息，他们也不会抱怨。

始终将警报的用户界面设计得尽可能简单。因为我们关注的是内容，而不是设计。

14.输入

由于智能手表的屏幕面积很小，因此用户很难使用内置键盘（如果有）输入内容。为了使体验朝着积极的方向发展，最好尽量减少使用内置键盘，并在屏幕上以下拉菜单或多项选择的形式进行输入。

15. 表盘

设计表盘时，你不能限制自己的创造力，但必须限制需要在表盘上显示的数据。信息应该集中在用户希望一眼就能看到的地方。以下是Apple和Google在其表盘上显示的一些内容。

• 第一个显然是时间和日期

• 未读的通知数

• 播放控制（如果音乐正在播放）

• 脉搏

• 天气

• 健身指标，例如卡路里，距离，步数等

• 设备连接

• 电池状态

在你的朋友圈或同事中进行简单的非正式研究可以为你提供更多洞察力，以了解你的用户对手表的期望。如果这对你没有帮助，你总是可以从Google或Apple那里获得启发，它们已经为我们做了足够的研究。

16.屏幕规格

不是每个屏幕都能准确呈现你的设计和色彩。屏幕刷新率低的屏幕将无法渲染你为项目设计的炫酷动画。

因此在开始设计之前，要核验设备的功能。这可以帮助你了解设备硬件的限制。

03

测试你的设计

盘子上的食物可能看起来很美味，但是你能保证它的味道吗？

不能。同样地，你的设计在设计工具上看起来可能让人惊叹，但在真正的手表上可能效果不佳。在将其发送给开发人员之前，一定要使用预览工具或图像在手表上对其进行测试。

建议：在设计工具上，始终尝试将缩放级别保持在100％，以进行高级预览。这是因为在设计的时候，我们将窗口保持在200％或300％的缩放比例，这会让我们觉得我们设计的一切都清晰可辨，但事实并非如此。

在媒体上，我们可以看到很多关于移动应用的用户界面和用户体验设计的文章，但很少有关注智能手表界面设计的文章。本文是我对Designer Community的贡献，以填补这一空白，希望它能帮助设计师们打造下一代智能手表。

参考文章：查看链接 ↗

作者：Avinash Bussa

译者：设计小菌

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们

我 们

服务.体验.交互设计传道者

公众号

「yizhizhaojun」

一只朝菌设计学园

联络微信

平菇老师

「zhaojundesign」

「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。

教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。

清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。