10-tips-designing-for-apple-watch-1

编者按:今天这篇是国外某位亲历WWDC 2015的设计师写的,他把官网视频里提到的小技巧都提炼成图文分享出来,特别实用,推荐学习 >>>

欢迎关注译者微信号:设计译言唷。

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

最近我去了趟旧金山,参加了苹果的 WWDC,并学习了如何为 Apple Watch 设计应用。我很乐意与大家分享这些小技巧,来帮助各位做出更棒的产品。

在这篇文章中提到的大多数东西,都可以在这两个 WWDC 2015 的视频里找到:

为 Apple Watch 做设计 & Apple Watch 设计中的小技巧。你还可以看看苹果官方的 Apple Watch 人机界面指南

请时刻牢记,你的设计要考虑性能

通过分析苹果官方在 WWDC 上的演示情况,看见平均每一次用户与 Watch 的交互操作所耗费的时间,在 2 到 5 秒之间。假如你只能从这篇文章中记住一点,那它应该是——为用户提供信息时,要尽可能的快。这一点对于 Watch 来说真的非常非常重要。

1. 优化 JPG 图片

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

2js20150617

降低 JPG 的质量

3js20150617

使用大小正好的图片

2. 优化 PNG 图片

4js20150617

使用 PNG-8 替代 PNG-24

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

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

使用 ImageOptim 来压缩图片,效果拔群。

5js20150617

ImageOptim 截图

3. 使用逐步加载

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

6js20150617

在加载的同时给用户看其他的信息

4. 确保缺省图片占位符与图片大小一致

否则,图片加载出来的瞬间,剩余的内容就会「向下跳」一下,这会干扰到用户的当前操作,特别是当用户正在向下滑动屏幕的时候。

8js20150617

缺省图片占位符

7js20150617

图片加载出来后,右侧因为图片比缺省图片占位符要高,内容被挤到下面

5. 内容排序有讲究

考虑到用户与 Watch 只有很短的交互时间,所以要尽可能快的展示重要的信息。

10js20150617

信息排序有讲究

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

9js20150617

Watch 上的后退按钮与标签

11js20150617

iPhone 上的后退按钮与标签

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

7. 把元素做大

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

12js20150617

确保元素足够大,以便点击

8. 使用正确的字体(SF Compact)

13js20150617

San Francisco 字体

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

9. 为 Watch 调整图标

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

14js20150617

移除文字,使图形更简洁

15js20150617

简化图形并缩小尺寸

16js20150617

展示手表的功能

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

相机应用的 Watch 版只有快门功能,右侧为 Watch 上的相机应用图标

10. 在 Sketch/PS 里设计时,不用担心 padding 的问题

17js20150617

Apple Watch 自带 padding

当我在为 Watch 做设计时,内容到边框的距离曾让我很困惑。对于 Apple Watch 的设计来说,请牢记表盘的边框会为 app 提供一个天然的 padding。

11. 留意色盲用户

译注:考虑到电池续航问题,苹果官方的 Apple Watch 人机界面文档鼓励使用黑色作为 app 的背景。为了在黑色上显眼,大量 app 使用红绿等强对比色,但这在色盲/色弱用户看起来,也许并没有什么差别。

18js20150617

色盲用户所见到的世界

时刻反思你的界面在色盲用户看起来是如何的。

shejiyiyan_UISDC

【优设字体设计好文】

第一波:字体气质从何来?
《量身打造的学问!如何准确地传达出字体的气质?》

第二波:字体创意设计之移花接木!
《超实用教程!字体设计第一战之移花接木!》

第三波:人气超火的英文字体免费下载!
《流畅精致!40款优雅如诗的纤细字体免费下载(可商用)》

原文地址:medium
译者:设计译言

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量96万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏