对于设计师来说,AppleWatch是一个全新的事物。与网页、桌面客户端和移动应用程序的设计相比,AppleWatch的设计引入了许多新的限制,但它也开辟了无限的可能性。我最近去了旧金山参加Apple的WWDC并学习如何为AppleWatch设计应用程序。我很乐意与您分享这些技巧,以帮助您制作更好的产品。本文中提到的大部分内容都可以在这两个WWDC2015视频中找到:AppleWatch设计和AppleWatch设计技巧。您还可以查看Apple的官方AppleWatch人机界面指南。请始终记住,您的设计应该考虑性能。通过分析苹果在WWDC上的官方演示可以看出,每个用户与Watch的平均交互时间在2到5秒之间。如果您从这篇文章中只能记住一件事,那应该是这个——向用户提供信息时,要尽可能快。这对Watch来说真的非常重要。1.优化JPG图片AppleWatch用户通常边走边看4cm的屏幕。所以他们需要的是更快的加载速度,而不是高分辨率的图片。降低JPG的质量使用大小合适的图像2.优化PNG图像使用PNG-8而不是PNG-24使用PNG-8而不是PNG-24可以显着减小图像大小。此外,您可以使用黑色背景代替透明背景。我不会在网络和移动设备上这样做,但在Watch上,我们可以更好地控制图像的显示方式。在90%的时间里,这些图像将在黑色背景下显示。使用ImageOptim压缩图像,效果出众。ImageOptim截图3.使用渐进加载如果你需要加载一些大的东西,比如照片或地图,请同时向用户显示其他信息。不要让用户傻等。加载时向用户显示其他信息4.确保默认图像占位符与图像大小相同。否则图片加载的一瞬间,剩下的内容就会“往下跳”,干扰用户当前的体验。动作,尤其是当用户向下滑动屏幕时。defaultimageplaceholder图片加载后,由于图片高于defaultimageplaceholder,右侧内容被挤压到底部。尽快显示重要信息。注意信息的排序6.Watch返回按钮的标签不是父界面的标题,而是当前界面的标题。Watch上的返回按钮和标签iPhone上的返回按钮和标签在iPhone/iPad上,通常既有当前界面的标题,也有返回按钮的标签,保存在屏幕顶部的导航栏中。Watch没有空间同时显示两者,因此苹果决定只保留当前界面的标题——这是用户比较关注的地方。7.使元素变大。越大越好。确保每个可点击元素至少为75像素(38毫米手表)或80像素(42毫米手表)。确保元素足够大,可以点击8.使用正确的字体(SFCompact)SanFranciscofontApple官方为移动/桌面和Watch提供了两种字体。在Watch上,使用SanFrancisco的Compact版本。与普通版相比,它在字符之间留有更多的空白,使小字体看起来更清晰。9.调整Watch的图标AppleWatch上的应用程序图标是圆形的,并且明显小于移动设备上的图标。在大多数情况下,简单地缩小移动应用程序中的图标以适应Watch的尺寸是不合适的。这里有一些提示,可帮助您让您的应用在Watch上保持可识别性。删除文本,使图形更简单简化图形并减小尺寸以显示手表的功能您的手表应用程序与手机应用程序的工作方式相同吗?有些Watch应用只提供辅助功能,比如Watch版的Camera应用,只提供手机版的快门功能。可以调整图标以展示这种功能差异。Watch版的相机应用只有快门功能,右侧是手表上的相机应用图标。10.在Sketch/PS中设计时,您不必担心填充问题。AppleWatch带有填充物。当我为Watch设计时,内容到达边界的距离曾经让我感到困惑。对于AppleWatch设计,请记住表盘的边框为应用程序提供了自然的填充。11.谨防色盲用户译注:考虑到电池寿命问题,Apple官方AppleWatch人机界面文档鼓励使用黑色作为app的背景。为了在黑色上脱颖而出,大量的应用程序使用了红色和绿色等强烈对比的颜色,但这对色盲/色弱用户来说可能没有任何区别。色盲用户看到的世界始终考虑您的界面对于色盲用户的外观。
