Apple Watch界面设计规范之UI设计基础(1/2)

一、为Apple Watch而设计

Apple Watch体现着如下几个方面的主题思想:

  • 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digital Touch来“传心跳”或“传画” - 这些全新的沟通方式是极具个人色彩的。加速感应器和心率传感器可以日复一日的向佩戴者提供其运动行为方面的个人数据。苹果推出的其他任何设备都不曾与用户建立起如此紧密的关联。在你为Apple Watch设计应用的时候,时刻留意这种个人化的关联是非常重要的。
  • 整体。Apple Watch旨在使硬件与软件的边界更加模糊。数码表冠是经过精心打造的实体控件,帮助用户在软件当中进行精巧的导航操作。Taptic Engine可以与提示信息或界面操作结合起来,为用户提供微妙的触觉反馈。Force Touch - 一种可以由硬件感知按压力度的触摸方式 - 为软件的情境化控制方式带来了一个全新的维度。即便是Retina显示屏的物理边缘也被考虑了进来 - 隐性的边缘渲染方式允许你打造出“边到边”的全屏UI设计。上乘的应用设计方案需要贯彻这种软、硬件一体的体验原则。
  • 轻量。Apple Watch应用在设计上要注重快速、轻量的交互流程,并充分利用屏幕显示空间及其位于手腕位置的这一重要特性。出于隐私和可用性方面的考虑,界面当中信息的获取和移除方式都应该是非常快捷的。举个例子,Apple Watch上的Short Look信息提示方式的设计原则,就是首先以最小化的方式提供少量提示信息,如果用户持续关注,再为其展示更全面的信息。Glance则是通过一种易访问的、可通过轻扫手势操作的界面形式将应用内部的信息呈现出来。为Apple Watch设计应用时,要遵从于佩戴者使用该设备时的体验情境,例如短暂而高频次的交互会话,以及狭小的屏幕显示空间等等。

Watch应用是对iOS应用的补充,而非替代品。如果说我们能以“分钟”来度量iOS应用的人机会话时间,那么对于Watch应用来说则需以“秒”计。交互流程必须简短快捷,界面必须简单易懂。

01-apple-watch-human-interface-design-guideline-ui-ux-experience-app

二、应用解析

Apple Watch必须配合用户的iPhone才可以运行你的应用。

界面风格

Watch应用支持两种导航方式:

  • 层级式。这种方式与iOS的导航风格相吻合,最适用于拥有层级化信息结构的应用。在层级式导航的应用当中,用户在每屏当中只能做出一个选择,直到他们到达目标位置。要继续导航到其他地方,用户需要折返一部份或是全部的层级来做出不同的选择。
    对于交互流程较为复杂的应用来说,层级式导航比扁平化的、基于页面的导航机制更加适用。
  • 页面式。基于页面的界面形式允许用户通过横向轻扫的手势在不同的内容页之间进行导航。这种模式最适用于那些数据模型简单、且不同页面之间不存在直接数据关联的应用。
    界面底部的圆点指示符可以让用户了解目前所处的位置。要尽可能将页面总数控制在很小的范围内,使导航保持简便快捷。

你不能将以上两种导航方式组合起来使用。在设计阶段,必须从两者当中选择一种最适于你的应用内容的方式,并以此为基础进行设计。

无论使用哪种导航方式,你的应用都可以模态化的呈现内容。模态化界面可以使用户不受干扰的完成任务或获取信息,但是相应的,他们将暂时无法与应用当中的其他部分进行互动。

交互方式

  • 基于行为的事件。轻点(单击)是用户与应用进行互动的主要方式。列表行、按钮、切换等控件都是通过轻点来进行操作的。这些事件接下来会被传递到WatchKit扩展的代码当中。
  • 手势。你不能在应用中添加任何定制化的手势。系统已经代你制定了标准的手势行为:
    • 通过纵向轻扫使当前界面滚动。
    • 通过横向轻扫在基于页面导航的界面之间前后查看。
    • 从屏幕左边缘向右轻扫,可以返回父级界面。
    • 轻点选项控件或其他交互元素。轻点事件会由系统处理并传递到WatchKit扩展的相关行为方法当中。

    Apple Watch不支持多指手势,例如捏合等。

  • 按压(Force Touch)。如此小屏只能容纳为数不多的界面控件,因此苹果带来了一种全新的交互方式:按压。正如可以感知到普通的轻点,Watch的Retina屏幕同样可以灵敏的感知到按压。按压用来唤出与当前界面相关的情境化菜单(如果有)。你可以在应用中使用这种菜单来展示与当前内容相关的各种操作选项。更多相关信息请参考菜单。
  • 数码表冠(The Digital Crown)。可以精准滚动的实体控件,使浏览长页面等任务变得更加轻松,而且屏幕不会被手指遮挡。

三、Glance

Glance是Apple Watch当中的一种快捷视图功能,它能将应用当中的重要信息提取出来,并以简明的形式呈现。理想情况下,Glance具有适时性和情境关联性。成组的Glance(s)汇总了用户最为关注的应用当中的重要信息。Glance采用的是拉取机制,而非推送。所以,与推送提示有所不同,是否通过Glance访问信息是由佩戴者自己决定的。

02-glance-apple-watch-human-interface-design-guideline-ui-ux-experience-app

Glance具有以下几方面的特性:

  • 基于模板。Glance界面的上下两部分有各自独立的模板。你可以在Xcode当中挑选合适的模板,并按照相应的规格设计你的内容。
  • 不可滚动。所有信息都要集中呈现在一屏当中。
  • 只读。轻点Glance界面当中的任何地方都会打开相应的应用。
  • 非强制。不是所有的应用都需要Glance视图,用户可以自主选择在Glance(s)中显示哪些应用的信息。

Glance界面的底部区域是预留给点状页码指示符的。

根据用户当前所处情境来配置Glance的信息。滞后的或是不相关的信息会使Glance失去价值。通过时间和地点信息来传达相关性。

Glance可以与其对应的应用建立深度关联。利用Handoff功能,Glance可以在用户轻点的时候,向与其对应的应用传递当前视图中显示的信息;应用启动之后,便可以根据这些信息来呈现不同的界面或是在已有界面当中进行相应的配置调整。

Glance必须向用户提供有用的信息。不要只是为了给你的应用增加一个启动入口而提供Glance视图。

四、通知(Notifications)

作为快速、轻量的互动功能,Apple Watch上的通知由两部分组成:Short Look与Long Look。当有本地或远程通知需要呈现给用户时,Short Look会首先出现。Short Look当中包含着最少量的必要信息 - 这也是出于隐私方面的考虑。如果佩戴者放低手腕,Short Look便会消失。如果佩戴者保持手腕姿势,或是在Short Look的界面上轻点,那么Long Look视图便会呈现。它会提供更加详细的信息及更多的功能,而且只能由佩戴者主动关闭。

要注意向用户发送通知的频率。用户有可能将频繁发送的通知视为干扰,并在Apple Watch上禁止你的应用发送通知。一定要确保通知信息与用户期望具有相关性。

Short Look通知

Short Look可以让用户了解到哪个应用接收到了通知消息,并且只会向用户呈现简要信息。Short Look的界面是基于固定模板的,其中包含应用的名称和图标,以及通知的标题。系统会将应用名称渲染成该应用自身的关键色。

03-short-look-apple-watch-human-interface-design-guideline-ui-ux-experience-app

保持通知标题的简短、易聚焦。可供展示通知标题的空间很小,所以要尽量保持言简意赅。标题无需展现通知信息当中的详情,只进行大致的示意即可。

可定制的Long Look通知

Long Look会显示通知信息当中的更多详情。系统为Long Look提供了一套默认外观,但是你的应用可以对其进行定制,例如展示定制化的图形元素或品牌信息。所有应用的Long Look在结构上都是一致的。系统提供了一套标准的头部框,其中包括应用图标及名称。底部则是关闭按钮及若干应用自身定制的按钮。头部和底部之间就是你的定制化内容所显示的区域。

04-short-look-apple-watch-human-interface-design-guideline-ui-ux-experience-app

应用内容可以被头部框所覆盖,也可以与其下边缘相接。对于照片和其他图形类的内容,你可以让它们默认被头部框覆盖。而对于以文字内容为主的通知信息,则要在Xcode当中选中“Offset Notification Content”,使内容从头部框下边缘以下开始显示。

对于定制化的Long Look界面,应用必须提供一套静态界面,在某些时候也可能需要提供动态界面。相比于静态界面,动态界面具有更灵活的可配置性,但两者本质上都是使用你的图形与品牌元素来展示相同内容的通知信息。如果动态界面对你来说不可行,那么静态方式可以作为替代。

Long Look通知当中最多可以显示4个自定义按钮。Apple Watch可以利用iOS应用当中的交互式通知功能在Long Look中显示相关的操作按钮。这些按钮会根据通知信息的类型而自动显示出来。

关闭按钮会始终呈现在Long Look通知的底部。该按钮位于4个自定义按钮下方。

五、模态表单(Modal Sheets)

模态表单有利也有弊。模态表单可以临时性的阻断用户与应用其他部分的互动,使他们不受干扰的完成任务、获取信息,或是在由按压手势唤出的情境菜单中完成选项流程。

要使应用中的模态体验保持在最少的程度。通常,只在这些情况下考虑使用模态表单:

  • 获取用户的注意力在当前环节是至关重要的。
  • 某个独立的任务必须被完成,或是被显性的放弃,否则用户数据将处于模棱两可的状态。

模态界面通常由单一界面构成,或者也可以由一系列基于页面式导航的界面构成。呈现方式上唯一的区别就在于底部是否有页码指示符。

06-short-look-apple-watch-human-interface-design-guideline-ui-ux-experience-app

模态界面的左上角用来放置关闭按钮。当用户点击该按钮时(或从屏幕左边缘向右轻扫),系统会将模态界面关闭掉,不再有相关的后续操作。关闭按钮的呈现是强制性的,不过你可以定制其标题。你也不需要在内容当中另外添加关闭按钮了。关闭按钮的典型标题有“关闭”和“取消”,字色始终保持白色。

如果任务当中需要“接受”操作,你还需要在模态界面当中添加接受按钮。请使用标准的接受按钮。点击该按钮后,模态界面同样会被关闭,然后后续行为得到执行。

保持模态任务的简练。不要在初始的模态界面中再次显示一个新的模态界面。

本文来自Be For Web
英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserE...
译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/4156/

(0)
TinadminTinadmin
上一篇 2015-03-05
下一篇 2015-03-10

相关推荐

  • 腾讯高级交互设计师的自我总结

    ——关于转岗、给新人的建议、交互与产品设计、腾讯ISUX的总结 1.能聊聊您从网页设计师变成前端工程师再转为交互设计师的过程么,有什么建议能给和您一样自学交互的同学呢? 答:回想起来挺有意思,过程很丰富,说明…

    交互设计 2015-12-01
  • UED 戊戌狗年第一波招聘已送达!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-02-28
  • 让人最不喜欢的交互设计错误列表,来看看你中枪了没!

    好的交互设计可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最不喜欢的交互设计错误列表,来看看你中枪了没!1缺…

    2017-08-02
  • 一波三折,卢卡斯叙事艺术博物馆方案的前世今生

    📌 编辑 | Ann3月14日MAD建筑事务所卢卡斯叙事艺术博物馆动工卢卡斯叙事博物馆效果图(洛杉矶)©MAD“ 这是一家艺术博物馆,但我更把她定位成关于人类的博物馆。流行艺术可以洞察社会,反映人们想变成什么,要什么,和自己真正是什么——这就是关于人的故事、历史和信仰体系的叙事艺术。我经常笑说,需要有博物馆去支持那些人们少闻但乐见的罕见艺术。这座博物馆就是我达成这个愿望的梦想。谢谢马岩松,我欣赏的天才建筑师。我心里一直想着这应该是一个极...

    2018-03-17
  • 影响网页内容的七种设计误区

    如果你的设计当中出现了这些问题,请不要担心。它们的解决方案并不复杂,通常也不需要经过复杂的重设计来完善,只需要进行适当的调整即可。

    2017-05-03
  • [学生看过来]国外的大学交互设计学科的专业与相关分析!

    标签:交互设计专业 交互设计5个重要组成部分 Five Dimensions of Interaction Design。 交互设计Interaction Design 缩写为:IxD,也可以理解成Human-Computer Interaction 人与机器互动设计,旨在通过设计让电子…

    交互设计 2015-01-26
  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31
  • Android 和 iOS:两个系统交互设计的不同之处在哪?

    iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。1dp(Android)=1pt(iOS)
    以48dp@160dpi计算的话
    mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用
    hdpi 72px (240dpi, 1.5x)低分辨率
    xhdpi 96px (320dpi, 2x) 同iOS @2x
    xxdpi 144px (480dpi, 3x) 同iOS @3x
    xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

    2017-05-06
  • 按钮体验设计:最佳的感受,形式和状态

      按钮体验设计:最佳的感受,形式和状态 按钮是一个普通的,几乎我们每天都要接触的设计元素.除了这个,由于按钮是一个在网页或者app上创造流畅的会话流体验的必不可少的元素,所以它值得我们为按钮这样最基本的元…

    2016-03-24