美文网首页移动设计iOS点滴
【翻译】苹果手表应用设计的11个建议

【翻译】苹果手表应用设计的11个建议

作者: yilufeng0 | 来源:发表于2015-06-17 00:22 被阅读193次

    本文为 Artiom Dashinsky 文章的翻译 原文链接:原文链接

    苹果手表包含新的约束及可能性,是我们以往做web、桌面及移动端设计时没有碰到过的全新类型的设备。
    最近,我去旧金山旅游,从WWDC学到了一些苹果手表应用设计方面的东西。希望将这些小技巧与大家分享,从而帮助大家创建更好的产品。

    这篇文章中提到的大部分建议都可以在WWDC 2015的Designing for Apple Watch&Apple Watch Design Tips and Tricks章节中找到解释。你可以查看苹果官方文档 Watch Human Interface Guidelines


    始终铭记你是为性能而做的设计

    苹果在WWDC上的分析表明,用户与手表的平均交互时间是2~5秒。如果有一件事是你必须记住的,那就是本文这些内容。始终以最快的速度为用户显示所要的内容。相较于其他平台这个是最重要的。

    1、优化你的JPG

    苹果用户使用折4cm大小的屏幕不断移动浏览,相较于高质量的图片用户可能更专注加载速度的快慢。

    使用较低质量的JPG

    Paste_Image.png

    尽量使用图片的实际尺寸,避免裁剪

    Paste_Image.png

    2、优化你的PNG图片资源
    使用PNG-8代替PNG-24

    Paste_Image.png

    使用PNG-8代替PNG-24帮助你显著降低文件的大小。另外,使用黑色背景来代替透明也是一个可行的方法。对于web/移动端时应尽量避免这样做,但是在手表上我们应该对显示资源做尽可能多的控制。并且在90%的情况下,这些资源会显示在黑色背景上。

    在保存未来动画的图像序列是,这项技术可以尤为显著提高性能。

    使用ImageOptim 压缩你的图片,效果更优。

    Paste_Image.png

    :png8与png24的区别

    3、使用渐进式加载

    如果你要加载类似于图片、地图之类的重内容资源,同时显示用户内容的其余部分。不要因为等待图片的加载而占用整个屏幕。

    Paste_Image.png

    4、确保占位图与要显示的图片尺寸一致

    否则的话,一旦图片加载完成,其余的内容就是出现跳跃,同时会让用户感到迷惑(特别是当他已经开始了滚动的时候)

    【此处原文为视频】

    5、将内容进行更明智的排序

    将正确的内容以最快的方式显示非常重要,对于如此短的交互时间更甚。

    Paste_Image.png

    6、手表上的返回按钮不在包含标签,取而代之的是屏幕的标题

    Paste_Image.png Paste_Image.png

    iPhone/iPad中我们习惯于在屏幕顶部同时使用标题和返回标签。在手表上没有足够的空间用于同时使用,所以苹果决定只留下屏幕的标题也就是用于现在看到的样子

    7、使用大的元素

    越大越好。确保每一个可点击元素在38mm屏上至少75px,42mm屏幕上至少80px

    Paste_Image.png

    8、使用恰当的字体(SF紧凑型

    Paste_Image.png

    苹果针对移动/桌面设备和手表设备有两套不同的字体。针对于手表有专门的San Francisco字体系列的紧凑版本。与普通版本相比,紧凑版本字体相邻字符间有更多的空间,从而可以在小字号时显示的更清楚。

    9、针对手表调整你的图标

    苹果手表上的应用图片以圆形显示,并且相较于移动设备尺寸更小。而且缩小你普通应用图标的方法在手表上是不奏效的。这里有一些建议可以帮助你确保识别你的应用在手表上依然被识别出。

    移除文本,使标志更简约

    Paste_Image.png

    简化的小尺寸图形

    Paste_Image.png

    适应手表的功能
    你是否想让你的手表应用拥有与移动端应用相同的功能?有时,手表应用仅仅只是完成一个功能,例如在iPhone上的照相应用在手表上仅仅只是一个快门。尝试从功能的不同来呈现你的图标。

    10、不用担心在Sketch/Photoshop上的填充

    Paste_Image.png

    Photoshop/Sketch文档中为手表进行设计时,内容与边缘的距离让我非常困扰。在web或者移动设备设计上是没有这种困扰的。对于苹果手表谨记它有一个硬件挡板为应用提供天然填充。

    11、考虑色盲用户

    Paste_Image.png

    在次可以查阅文档--check how your interface will be seen by color blind users

    这是我的第一篇翻译,难免有不妥之处,望批评指正!!

    相关文章

      网友评论

        本文标题:【翻译】苹果手表应用设计的11个建议

        本文链接:https://www.haomeiwen.com/subject/wslsqttx.html