看完Adobe Max 2019，90%的设计师都把电脑砸了…

上周出席了苹果的 WWDR Events（加速器活动），非常感谢公司提供的珍贵学习机会。本次 Apple Watch 体验的活动主旨，是向开发者提供设计、交互和技术方面的指导和帮助。

Apple Watch 作为一款极具前瞻性的产品，硬件已经发展到 Apple Watch Series 5，系统也已经更新到 watch OS 6。智能手表是目前除了手机之外， 最方便人眼观看且较为成熟的商业化硬件。这次加速器活动带给我的触动很大，原以为 Apple Watch 只是一款小众产品，实际上国内早已有众多公司和设计师深耕于此。若以 UI 设计师的角度出发，我们目前正身处于科技变迁速度极快的时代，硬件和软件都在围绕人类、网络不断进化和迭代，在这种大环境中，我认为设计师需要以更加场景化、智能化的角度来重新审视「设计」。设计的本质是「解决问题」，问题时刻在改变，这就要求设计师时刻保持「新鲜的学习态度」。

通过近距离接触苹果一线技术人员，还是获得了相当多的第一手资讯。因此总结了活动中与设计、交互相关的心得体会，以此文分享给大家。这篇文章分成两大部分，前半部分将分享 5 个 Watch app 的设计原则和技巧；后半部分则以荔枝的 Watch app 为案例，提出优化方案。

5 个 Watch app 的设计原则

1. 设计原则一：单一功能

大部分 Watch App 都依赖于手机端的 Apple App，可以说是手机端功能的移植或延伸。如果设计师并不充分了解 Apple Watch 的使用场景，则很有可能「过分贪心」，在小小的表盘中保留过多的功能。基于硬件屏幕小、使用场景通常是在碎片化时间里「瞥一眼」的特性，交互的设计需要做到非常克制，做到保留最核心的功能，以适应佩戴设备的使用场景。

以「50音起源」这一款优秀产品为例，在手机上，它有起源、速查、学习、测试、词卡等多个功能模块，但是当它以 Watch app 呈现时，则只保留了词卡一个功能。

2. 设计原则二：专注

限于 Apple Watch 的硬件特性，屏幕的实际可点击区域非常小。都知道，在 iPhone 上的最小的点触面积是 44 x 44 points，换算为物理尺寸大约是 6.86 毫米。以 Apple Watch 自带的解锁的界面为例，我们可以看到，数字键盘已经几乎撑满整个屏幕，但每个实际上这里每个按钮的宽度大概只有 6.00 毫米，触摸区域比起 iPhone 的最低建议还要小。

充分了解屏幕的尺寸限制后，再把日常使用场景考虑到设计中，就能明白：在 Apple Watch 上的交互体验并不会非常愉悦，用户很有可能因为「失去耐心」而放弃交互和功能复杂的产品。因此，设计师需要在屏幕上提供足够显眼的操作和轻量的交互选项，尽可能避免让用户同时进行多种类型的任务。

以菜单层级为例，假如用户想要使用一个功能，需要进入三层才能找到，可能不到半分钟，他就会放弃了。比较可取的方法是，避免复杂的导航和过深的层级，让用户每次都能顺利完成一个主要任务；遵守 HIG 的规范，如果一定要放置按钮，在水平方向上也不要放置超过 3 个。

3. 设计原则三：易读

上文多次提到「使用场景」这个概念，现实生活中，使用 Apple Watch 的场景主要有三种：工作/学习等静态场景、走路/轻量运动等微动态场景、运动/跑等强动态场景。尽管有静有动，但三种场景都会伴随着抬手/翻腕的动作，而在动态场景下，眼睛和大脑对信息的处理速度都会降低，因此信息的可读性必须非常高。

文本信息作为 Apple Watch 的主要展示对象，我认为设计师需要从字体、字号、字重、色彩对比度等多方面综合把控，确保用户能快速获取到重要的信息。

字体

在之前的 WWDC 中，苹果介绍了「New San Francisco Fonts」字体家族，其中的「SF Compact」就是专门为 Apple Watch 设计的英文字体。和 SF 的区别在于，Compact 将字母的笔画变得更加竖直了， 因此在小屏幕的辨识度也更好了。

每个应用建议只使用一种字体，以避免混乱。如考虑到品牌性问题时，对于较大的文字元素，则可以使用自定义字体。但如果还是以展示信息为主 ，则建使用系统字体。另外，苹果推荐应用使用系统字体，因为可以享受「动态字体」的功能。

字号与字间距

当字号小于 19 号时，推荐使用 SF Compact；大于 20 号时则推荐使用 SF Compact Display。眼球追踪的速度可见，当字号在 16-19 号时，使用 SF Compact Text 效果较好；大于20时，Display 效果较好。

SF 等字体已经设置好默认的字间距，这个字间距是根据小屏幕最佳阅读性设定的，所以不建议设计师手动调整字体的字间距。

字重

避免使用 Thin 字重，因为经过研究发现，Thin 及更轻的字重，用户会难以甚至在 Apple Watch 中阅读，辨识度较差。

颜色对比度

虽然 HIG 中也提到了色彩对比度，但并不像网页的 WCAG（Web Content Accessibility Guideline，网页内容无障碍指南）一样直接列出对比度的数值。在 WCAG 中，强对比度的推荐数值是 7:1，值得参考。

4. 设计原则四：简明的

Watch App 需要在小屏幕上帮助用户解决问题，即使对于同一个工具来说，在手机和手表上需要完成的使命也不一样。好的 Watch App 需要做到简洁明了，帮用户做好决定，而不是提供众多选项让用户去选择。

手表作为一款独立的产品，在功能和特性上都和大家熟悉的手机相差甚远。在设计时，手表不应该被设计师看作「迷你版的手机」，功能都应该做到快速、方便地被使用。

以支付宝为例子，你只会看到界面的上半部分展示了账户余额，下方只有付款码、余额宝和查汇率三个功能。如果把支付宝入口添加到表盘，点击支付宝时就会打开付款码。

换个角度，要是能让用户第一次打开时，可以去自定义选择自己想要的功能，不也很好吗？实际上，在使用了一段时间后，我根本不想在这小小的手表上，操作任何复杂的交互。付款码是非常适合手表的功能，我享受到了抬手快速支付的愉悦体验。回归本质，支付宝的核心功能，不正是钱包吗？

5. 设计原则五：实时的

手表、时钟，必须实时，才能让人感觉可靠。处于信息爆炸时代的我们，都已经对「实时性」衍生出极强的依赖。我们需要足够快的网速来刷新网页，需要社交软件实时将信息实时传达到自己手上，否则将产生焦虑和不信任感。

关于实时性，Watch app 有两点需要注意：实时信息要确保实时性、把用户在意的实时信息展示出来。

第一点，实时信息如果不实时，将会令用户产生不信任感，需要实时展示的内容通常是持续化更新的、即将到来的、进行中的事件。举个例子，天气应用需要根据用户实际的地点，展示当地、当下气候信息。

第二点，设计师需要做到心中有数，结合场景将用户最关心的重要实时信息传递给用户。许多 Watch app 都会向用户展示时间、地点等实时性很强的数据信息，提醒、消息也需要实时传达给用户。举个例子，Keep 在游泳时，会实时展示游泳距离、运动时长和圈数，这些都是动态变化的、用户想要实时获取的信息。

6. 小结

以上就是本次分享的活动主要内容。小结和快速回顾一下在进行 Watch app 设计时需要注意的 5 个设计原则：

• 只保留最核心的单一功能
• 让用户保持专注，避免使用复杂的交互
• 保证文本信息的易读性，通过多方面综合把控
• 简明扼要，帮用户解决问题
• 保证实时性，将重要的实时信息传达给用户

以荔枝音频节目为案例的优化

在展示优化方案之前，先和大家快速地简单了解 Apple Watch 的核心功能和交互方式。

1. 快速了解：手势

Apple Watch 中，屏幕上有两种交互手势：扫和点。其中「扫」可以是纵向或横向的，纵向的扫可以滚动当前界面，横向的扫可以切换基于页面导航的界面。「点」也分成了轻点和重点（Force Touch）。「扫」和「点」也可以组合成「拖动」。需要注意的是，Apple Watch 是不支持多指手势的，例如双指的捏合。

2. 快速了解：导航

目前提供了两种导航形式，一种是「page-based（基于页面的导航）」，用户可以左右轻扫来切换页面，不同的页面上可以放关联度较低的内容；另一种是「Hierarchical（分层导航）」，是纵向的列表项，用户可以通过上下轻扫找到自己需要的功能。HIG 指出，两种导航形式不能同时使用。

优化一：交互优化 – 导航调整

可以见到，目前打开荔枝的 Watch App，映入眼帘的是三个功能，较为直观和简洁。虽然在手机端打开荔枝，Watch App 会自动打开播放器页面，但是「正在播放」是在第二层级当中的。结合上文提到的专注原则，我认为播放是音频产品最核心的功能，应该将核心功能放在最佳位置。

因此我把导航从「类分层导航」调整为标准的「基于页面的导航」。结合目前业务重心，将「订阅更新」替换成「我的喜欢」。于是新的导航形式是：正在播放、订阅更新、最近收听三个页面，以分页的形式，放置在了同一级层级。

优化二：UI 优化 – 播放器页面

目前播放器页面的封面图，直接平铺在了表盘最底层，不仅影响信息阅读，其美观度也有很大的可优化空间。另外，重要的标题信息，不仅展示力度较弱，信息密度上来说，也只展示了一行。

总结来说，播放页的优化原则是增加操作的便利性，提升信息的识别度。因此，我首先将标题设计成两行，并作为此页面的重点展示。音乐控制器也进行了优化，除了对图标进行视觉优化之外，还增加了进度条的展示；重要性较低的封面，则只在底部模糊处理，作为装饰使用，减少视觉干扰。

优化三：UI 优化 – 列表

可以看到，目前的设计中，历史收听是以列表形式展现的，包含了封面和标题两个信息。我将列表从第二层级调整为第一层级后，也去掉了封面。这样的处理，主要是考虑到在如此小的屏幕上，图像识别度很低，用户只能通过文字去识别内容。去掉封面后，不仅更为简洁，也更加高效。

总结

非常荣幸可以借此机会，和大家分享本次 Apple Watch 加速器活动的心得与感悟；另也以荔枝音频节目为案例，提出了少许拙见。希望大家能为我们多提思路和宝贵意见，感谢各位的阅读。

最后还要感谢公司提供了如此珍贵的学习机会，感谢此次活动中给予我许多帮助的 momo，感谢帮助我促成此文的杰哥。

欢迎关注作者的微信公众号：「Lizhi Design Lab」