产品经理的自我修养——产品经理接招Apple Watch

Apple Watch 图片设计

课程目标

1.掌握Apple Watch的设计原则；

2.了解Apple Watch的设计注意事项。

前言

对于设计者来说，Apple Watch 是一个全新的玩意。与网页、桌面客户端和移动应用的设计相比，Apple Watch 的设计引入了许多新的限制，但同时也带来了无穷的可能性。

设计原则

1.时刻考虑性能

苹果表的烂性能已经开始倒逼设计师改设计了。为用户提供信息时，要尽可能的快。这一点对于 Watch 来说真的非常非常重要。

2.设计注意事项

1）优化 JPG 图片

Apple Watch 的用户通常是在行走过程中，瞥一眼那块 4 厘米大小的屏幕。所以他们需要的是更快的加载速度，而不是高清图片。

例1：降低JPG的质量

例2：使用大小正好的图片示例1

使用大小正好的图片示例2

使用 PNG-8 替代 PNG-24 能显著减少图片大小。

此外还可以使用黑色背景来替代透明背景。我不会在网页和移动设备上这么做，但在 Watch 上，我们对于图片的展示拥有更多控制力。并且 90% 的情况下，这些图片都将在黑色的背景下展现。

例3：使用压缩工具压缩图片（使用 ImageOptim 压缩图片）

Apple Watch内容设计

使用逐步加载

若你需要加载一些大东西的时候，如一张照片或者地图，请同时向用户展示其他的信息。不要让用户傻等。

实例：在加载的同时给用户看其他的信息。

图片占位符与图片大小一致

确保缺省图片占位符与图片大小一致。否则，图片加载出来的瞬间，剩余的内容就会向下跳一下，这会干扰到用户的当前操作，特别是当用户正在向下滑动屏幕的时候。

内容排序有讲究
考虑到用户与 Watch 只有很短的交互时间，所以要尽可能快的展示重要的信息。

实例：先给用户看信息，再继续加载图片。

返回按钮

Watch 上的后退按钮的标签不是父界面的标题，而是当前界面的标题。

在 iPhone/iPad 上，通常既有当前界面的标题，也有后退按钮的标签，它们并存在屏幕的顶部导航栏里。而 Watch 没有空间显示两者，所以苹果决定只留下当前界面的标题——这也是用户更关注的。

注意1：Watch 上的后退按钮与标签

注意2：iPhone 上的后退按钮与标签

Apple Watch元素设计

把元素做大

越大越好。确保每一个可以点击的元素至少有 75 px（38 毫米 Watch）或者 80 px （42 毫米 Watch）。

实例1：确保元素足够大，以便点击。

使用正确的字体（SF Compact）

苹果官方为移动/桌面设备和 Watch 提供了两种字体。在 Watch 上，请使用 San Francisco 的 Compact 版本。与常规的版本相比较，它在字符间留有更多的留白，这使得小字体看起来更清晰。

为 Watch 调整图标

Apple Watch 上的应用图标是圆形的，并且比移动端上的明显要小。大多数情况下，仅仅缩小移动 app 里的图标来适应 Watch 的尺寸并不合适。这有一些小技巧帮助你保持你的 app 在 Watch 的识别度。

实例1：移除文字，使图形更简洁

实例2：简化图形并缩小尺寸

实例3：展示手表的功能

你的 Watch 应用与手机应用的功能一样吗？有些 Watch 应用仅提供辅助功能，例如，相机应用的 Watch 版只提供了手机版的快门功能。可以通过调整图标来展示这个功能上差异。

不用担心 padding 的问题

对于 Apple Watch 的设计来说，请牢记表盘的边框会为 app 提供一个天然的 padding。在 Sketch/PS 里设计时，不用担心 padding 的问题。

实例：Apple Watch 自带 padding

小结

众望所归的Apple Watch会带来成千上万的手表应用，冲击应用市场，吸引你的注意。由于屏幕尺寸更小，又始终戴在手腕上，交互方式也有所不同。要在Apple Watch上创造一个美观、舒适的体验，需要新的设计方式。

课后思考

1.寻找优秀的Apple Watch 产品案例？

2.为自有的产品适配Apple Watch？