如何优雅地为Apple Watch设计APP?
UI设计
Rayn_Allen
Mobile App and Web Designer
7人收藏 2512次学习

如何优雅地为Apple Watch设计APP?

 

随着Apple Watch的大火,许多IOS设计者投入到了疯狂地投入到了Watch端APP的开发中,在讨论基于Apple Watch平台的APP设计之前,我们有哪些需要注意的呢?又如何设计一款适配于Apple Watch的优雅产品呢?

我们先来看看设计时我们需要考虑的几个基本要素和原则。

Physical Attachment

首先,“Physical Attachment”是Apple Watch和用户互动的主要方式,我们必须从这个角度仔细考虑Physical Attachment是如何影响用户体验的。 

苹果公司一直说“Apple Watch是一款试图和用户在情感层面上进行互动的产品”。你怎么看待这句话呢?

通过佩戴不同的Apple Watch表带,选择不同颜色,不同款式的表盘,用户可以表现自己不同的品味,审美偏好,也可以表达出低沉或高亢等等情绪或者一些其他的个人特质。

那么APP呢?你设计的APP是不是也有一样的功能?也可以帮助用户表达他们的情绪和特质?

少即是多

我们第二个要记住的事实是“Apple Watch is just a watch”

它并不是你的智能手机,有更大的内存和硬盘空间,所以在设计Apple Watch端的APP的时,我们必须尽可能地保持“轻量化”,让图片尽可能地小而简洁。

过大的图片会拖慢我们的加载速度,这对用户来说是一种极其糟糕的体验,而且这在APP介绍Apple审核时也会出现问题。

所以,在设计前问问你自己,“你真的需要在APP里加上动画么?”

我们不妨想象下,如果你是在上世纪九十年代设计网站,那个时候还需要通过电话线连入网络,你会在网页上使用自定义的字体,动画和视频么?

不论动画的质量如何,如果载入动画造成了延时的话,这对用户来说就是糟糕的体验。记住,你是在一个只有邮票大小的,必须通过手机的无线网络才能上网的Apple Watch上设计产品!

这是Apple Watch天生短板,我们应该尽量避免它。

在Apple Watch的设计中,保持简洁,提升体验速度,这是最重要的。我们要学会尊重用户的时间,并且克制自己炫技的冲动,让UI交互的每一步都是有意义,不要使用不必要的动画效果。

“If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds. So keep interactions brief and interfaces simple.” 

– Apple Watch Human Interface Guidelines

颜色与排版

颜色排版的使用在形成自己APP的风格中至关重要,有关键的几点我们需要记住。

颜色

  • 颜色可以帮助形成APP在视觉上的延续性和形成品牌的风格,在设计时要保持色调的一致性。

  • 界面使用黑色背景,这样的话Watch界面与屏幕的物理边框和维持一个没有屏幕边缘错觉,产生悬浮的效果。

  • 使用高对比度的颜色的文本,用户不会在Apple Watch上进行长时间的阅读,我们只需要醒目的颜色以抓取用户的注意力。

  • 设计时为色盲人群考虑。

排版

自定义字体有一万种好,但我们必须意识到系统字体才在新产品上运行得更加流畅,我们应该尽可能地使用系统字体。

“Above all, text must be legible. If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.”

                      – Apple Watch Human Interface Guidelines

系统字体的优点包括:

  • 字体紧凑,在水平方向上占据更少的空间。
  • 在较大规格的文本中,系统字体分布较为松散,更适合阅读
  • 当标点在文本中占据较大比例时,文本会自动调整变小。
  • 调整文本样式时较为方便。

文本样式

文本样式是对字体用途的描述,比如“标题”“正文”之类。如果你使用系统内置字体的话,你可以得到IOS系统免费的支持,很方便地修改字体样式。如果你使用自定义字体的话,你必须自己费力去调整字体的一些特征。

 

 

界面空间设计

"一寸山河一寸金",Apple Watch的UI空间十分有限,我们要利用有限的空间尽可能地提升用户的交互体验。

比如说,使用较大的按钮方便用户控制,通过force touvh menu的使用完成操作等。而且,我们不需要在APP上费尽心机地展示自己的LOGO,这样会占据宝贵的界面空间。通过颜色和图片的设计,我们也能更好地完成这点。

“Space on Apple Watch is at a premium, and every occurrence of a logo takes space away from the content that users want to see.” 

                          – Apple Watch Human Interface Guidelines

                                            iOS的屏幕大小对比

 

另外,因为Apple Watch表盘设计中包含了物理的填充边框,因此我们在设计APP时并不需要设计边框上去。

a) 实际屏幕大小 b) 表盘边界

在开发APP时没有边框看起来会很奇怪,但你只要自己把Apple Watch表盘的边框记在心里就好了。

 

适应屏幕尺寸

因为Apps需要在两种不同尺寸的Apple Watch(38mm和42mm)上运行显示,如果设计时采用了绝对的固定尺寸的话,在不同型号的Watch上会产生偏差。所以我们需要通过“相对单位”的设置来允许Apps在两种尺寸上自动调节尺寸。

Device Size

Width (in pixels)

Height (in pixels)

38mm

272

340

42mm

312

390

导航设计

在WatchKit apps中,你会遇到两种完全不同的导航设计。

分别是“Hierarchical 分层设计”“Page Based 水平设计”

Hierarchical 分层设计

“Hierarchical”分层设计包含一个垂直列表,允许用户点击每个选项,到达他们想到达的界面。

Page Based 水平设计

“Page based”是一种水平设计的导航,它由一系列平行关系的页面构成,通过手指滑动实现页面切换,底部的小点表示了页面的次序关系。

交互设计

Apple Watch中目前有四种实现交互的方式。

  • 系统点击——即简单的点击进入,确认。
  • 手势控制——可以通过垂直或水平的滑动调出导航菜单;可以通过向左划出边框的动作回到前一界面。
  • Force Touch——通过用力长按屏幕,调出当前页面的菜单
  • Digital Crown 旋转——通过侧面表冠的点击实现控制的操作

需要注意的是:

1> Watch只支持这么四种手势:系统的点击、force touch、digital crown旋转,不支持自定义手势。交互方式上会比较受限,在手机App上能实现的手势很多都在Watch上用不了。

2> Crown的所有操作都是Watch定义好的,不要试图对Crown的操作做任何定义。

Glance设计

"Glance"是呈现在屏幕上的对重要信息的一个简略概览,比如时间,地点等。

“Glance”界面的设计是建立在一系列分布在屏幕上下两部分的预定义模板上。当用户点击浏览界面时,会直接打开对应的APP程序。

 

而Glance的设计又是基于Group的,Groups 是应用对象容器,你可以把它当成html里的divs。Groups没有默认的外观,但有位置,圆角半径,大小,边缘和背景等属性设置,我们可以根据自己的需要设计排版来使用这些。

这里是一些“Glance”屏幕设计的模板:

苹果希望Glance能在不同时间不同地点展示不同的内容。

那么问题来了,Glance是依靠模板展现的,并且一旦你选定一个模板就不能改了。

也就是说不同内容都要用同一个模板展现,所以选模板很重要,需要能适应所有的情况,这需要我们在设计时慎重考虑。

用户界面元素设计

“As you design your app’s graphical elements, remember that each custom element should look good and function well by itself, but it should also look like it belongs with the other elements in the app, whether they’re custom or standard.” – Apple Watch Human Interface Guidelines

动画

Apple Watch不支持动画,只支持帧动画,而且动画从手机传输到Apple Watch上的动画会造成一定的延迟,因此我不推荐太多的动画使用(即使你的动画是活蹦乱跳的小孩)。

即使在使用时,也最好使用watchkit存储预渲染动画软件包的静态图像序列,这样用户也可以很快的加载进去,而不是从手机端慢慢地转移。

按钮

最好在按钮上使用符号而不是文字作为标识,而且一个界面不要同时出现超过三个按钮。

因为这是在Apple Watch上,屏幕很小,所以我们也还要记得把按钮设计得尽可能大,不要让用户在按按钮时感到困难。

按钮在设计时也可以以一个图像或一种颜色为背景,或者对文本设置不同的颜色加以区分。

图标

图标是PNG格式。你可以通过创建索引颜色来节省空间,在Apple Watch的主菜单屏幕上,图标并不包含文字内容。

Download this Apple Watch icon template 这里有模板供你使用。

Apple Watch应用图标尺寸参考:

Asset

38mm Watch (in pixels)

42mm Watch (in pixels)

Notification Center icon

48 x 48

55 x 55

Long-Look notification icon

80 x 80

88 x 88

Home Screen icon

80 x 80

80 x 80

Short-Look icon

172 x 172

196 x 196

 

图像

因为所有的屏幕尺寸上都会使用同一个图像,加载图像的速度和效率是很重要的,所以我们需要尽可能地压缩图像。试着用颜色索引在一个纯黑色的背景中保存PNG格式的图像,而不是在一个透明背景中保存。

你可以利用类似于tinypngpngout 和 pngcrush之类的工具来压缩图像。如果你用的是Mac的话,可以选择免费工具ImageOptim来使用。

滑块

滑块可以让用户点击图像的左侧和右侧调整数值。

如果开发者不提供图像的默认值是一个加号(+)和负(-)

小结

Apple Watch是一片崭新的大陆等待着我们共同去开发。

就我看来,Apple Watch的核心思想在于将设备和用户连接起来,形成一个良好的互动,其中的关键可能在于生理数据的收集,比如心率之类的。如果你看完我的这篇文章,在这方面有心得或者想法,可以订阅我的课程和我交流一下。

附加资源:

 

 

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
课程交流
lilu
2015-05-05

test2

lilu
2015-05-05

test