快好知 kuaihz

给苹果表做 app?先看看这 11 个小技巧

对于设计者来说,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 厘米大小的屏幕。所以他们需要的是更快的加载速度,而不是高清图片

降低 JPG 的质量

使用大小正好的图片

2. 优化 PNG 图片

使用 PNG-8 替代 PNG-24

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

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

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

ImageOptim 截图

3. 使用逐步加载

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

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

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

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

缺省图片占位符

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

5. 内容排序有讲究

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

信息排序有讲究

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

Watch 上的后退按钮与标签

iPhone 上的后退按钮与标签

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

7. 把元素做大

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

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

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:苹果  苹果词条  技巧  技巧词条  看看  看看词条  app  app词条  11  11词条  
设计

 只言片语系列:用户体验杂谈

《只言片语》致力于通过简短聚焦的知识和经验,让大家加深对设计的理解,以及从更多的角度看待“设计”。我更希望大家从设计师的身份中脱离出来,更多的关注设计对象。以一...(展开)

设计

 产品经理怎么和领导打交道

稍微盘点一些平时就很常见的现象:1、很多产品经理觉得自己行,可领导不知道自己行,把一个不错的项目安排给似乎不是很胜任的同事了–心里不平衡;2、对团队对项目的问题...(展开)