iOS 9人机界面指南：iOS 技术 (3D Touch、Live Photos、Wallet以及Apple Pay)

本篇目录

3.1 3D触摸(3D Touch)

轻压和重压(Peek and Pop)
主屏幕快捷操作(Home Screen Quick Actions)
3.2 Live Photos

3.3 钱包(Wallet)

3.4 苹果的移动支付平台(Apple Pay)

译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。

3.1 3D触摸(3D Touch)

3D Touch 给 iOS 9 用户提供了一个新的交互维度。在所支持3DTouch的设备上，人们可以通过按压应用的图标去快速选择应用定制的操作。在应用内，人们可以使用多种按压操作去获取一个项目的预览，可以在独立的视图里打开一个项获取相关操作。(了解更多在你的代码中如何添加3D Touch支持，参阅 Adopting 3D Touch on iPhone .)

3.1.1 轻压和重压(Peek and Pop)

轻压让用户可以在不离开他们当前环境的情况下预览一个项和执行相关操作。支持轻压的该项会在轻压后给出一个小矩形视图作为反馈。

在Safari中的一个轻压视图

01.png

在Safari轻压中的快速操作

02.png

当用户按压在一个支持轻压的项上时出现轻压，用户手指抬起后会消失
当用户在轻压视图下再更加重一点的按压称之为重压，重压可以查看该项的详细视图
当用户在轻压视图中向上滑动，可以提供与该项相关的快速操作
当用户轻轻按压在屏幕，支持轻压的这个项会展示一个你提供的矩形视图，示意可以进行下一步交互操作。那个视图应该够大，这样才能让用户手指不会混淆内容，这个视图应该足够细节，这样可以让用户选择是否去更加重一点按压从而转换到轻压视图。

重要：你在应用中始终如一提供轻压和重压的体验是至关重要的。如果你在有些地方支持轻压和重压，在某些地方不支持，用户有可能认为你的应用或者他们的设备出现了问题。

使用轻压去为该项提供一个生动的，内容丰富的预览。当轻压能够给用户提供关于该项的足够信息，从而帮助他们扩展当前的任务，这样做是最好的。例如，在用户决定好是在Safari中打开信息中的网页还是分享这个链接给朋友之前，用户可以使用轻压预览信息中URL的页面。在表单视图中，轻压可以给用户提供一个行项的详细内容。

为每个轻压提供重压。虽然一个轻压可以提供给用户所需要的大部分信息，但是你应该可以让用户过渡到重压，从而让用户放开当前正在进行的任务，转移专注力到该项上来。重压的内容应该与用户点击该项后的内容一致。
不要为同样一个项授予轻压和编辑菜单(Edit menu)两个功能。当同一个项的这两个功能都启用的时会很混乱。(获取更多编辑菜单信息，参看 Edit Menu.)
在轻压操作里，避免展现类似按钮的界面元素。如果用户抬起手指去点击像按钮的元素，轻压会消失。
如果可能，提供轻压快捷操作。 在轻压里，用户可以向上滑动去显示该项的相关操作。例如，Mail里的轻压快捷操作包括回复全部，转发和删除信息。并不是每个轻压都需要快捷操作，但是如果你已经为该项提供定制的点击并长按的操作，那么最好在轻压里提供相同的操作从而替代点击并长按操作。(注意在网页视图中，轻压快速操作是自动提供的。)
不要将轻压作为唯一开启该项的指定操作的方式。不是每一个设备都支持轻压和重压，一些用户可能选择关掉3D Touch, 因此在你的应用中去寻找其他方式实现轻压的功能是非常重要的。当你的应用在较旧的设备上运行时，可以把轻压的快捷操作映射到一个视图里，让用户通过点击并长按获得。
3.1.2 主屏幕快捷操作(Home Screen Quick Actions)

主屏幕快捷操作可以在主屏幕给用户呈现方便的、有用的、应用特定的操作。

20151117193423831.png

Camara的主屏幕快捷操作

20151117193427647.png

Mail的主屏幕快捷操作

当用户在主屏幕采用比点击且长按更重的按压，按压在应用图片上时，出现屏幕快捷操作

它会显示一个你提供的短标题，一个图标和可选的副标题
它不支持其他定制的内容
它可以随着你应用的更新，更新显示的信息
使用主屏幕快捷操作去开启引人注目的、高价值的任务。例如，Maps可以让用户不需要打开Maps，通过在当前位置附近搜索就可以获得回家的方向。一个应用至少需要把一个有用的任务放在主屏幕快捷操作里；你可以提供最多四个快捷操作。

避免使用主屏幕快捷操作去减少应用里导航的内容。如果用户访问你应用的重要区域非常困难和耗时，那么首先去修改你的应用的导航，这样做是可以让所有用户都获益的。接着，可以去为有用的深层次链接提供主屏幕快捷操作，从而开启这些有用的、创造性的任务。

不要把主屏幕快捷操作作为通知用户的一种方式。iOS用户期望以其他方式接收应用中的信息(更多信息参看 Notifications)。

为主屏快捷操作提供一个简洁的标题(可有副标题)和一个模板的图标。标题应该直接传达这个操作的结果；例如，“回家的方向”，“新建联系人”，和“新建信息”。你也可以提供一个副标题给用户更多上下文信息。例如，Mail使用一个副标题在主屏快捷操作的重要位置去告诉用户有未读信息。 不要把你的应用名字或者无关的信息放在标题和副标题里，同时要考虑到使用本地化的用语。

保持标题的简洁不会被切断从而帮助用户快速理解操作是非常重要的。如果你提供的副标题一行显示不全，系统会截断；如果你没有副标题，系统会把一行展示不完全的长标题以两行展现。

你可以从很多系统提供的模板图标中选择图标，你也可以创作定制的模板图标。更多关于图标尺寸、内边距和定位的详细引导信息，可以下载主屏快速操图标模板 https://developer.apple.com/design/downloads/Quick-Action-Guides.zip。更多关于设计模板图标的信息，参看Template Icons。

系统会自动安排图标在快速操作列表中的位置是在左侧或者在右侧，这依赖于你的应用的图标在用户主屏幕的位置。(摒除图标在列表中的位置，在自左向右的语言中文字总是左对齐。)这里有主屏快捷操作的多种展现方式的例子。

2015111719395581.png

3.2 Live Photos

Live Photos 让用户在丰富的声音和动作环境下，捕捉和再现他们喜爱的回忆。从iOS 9开始，相机(Camera)应用可以捕捉附加的内容(拍照之前和结束后的声音和额外的画面)为传统的、静止的图片增加生活气息。

20151117195929709.png

在iOS9.1及之后的版本中，你的应用可以让用户享受和分享Live Photos。这个指引可以帮助你给用户提供更好的体验。

在不支持Live Photo的环境中，把Live Photo像传统照片一样展示。不要在支持Live Photos的环境中，自定一种与Live Photo相似的体验。

不要分开展现Live Photo的附加画面和声音。要让用户在不同的应用中体验Live Photos时，有一致的视觉呈现和交互方式。把Live Photo拆分开展现是一个很坏的体验。

确保用户可以区分Live Photo 和传统静止图片。在用户分享照片时，帮助他们做好区分是特别重要的。最好在用户查看一个LivePhoto的时候，展现一点移动作为提示。万一这个提示没有起到作用，你可以在LivePhoto上展示一个系统提供的标记。LivePhoto不要展现一个像视频里回放按钮的界面元素。

20151117195933538.png

注意：上图这种情况，不支持像照片应用里全屏浏览滑动切换照片时的显示的

把用户所做的调整应用到Live Photo的所有帧中。如果你的应用可以让用户为照片添加滤镜或者调整，应确保它可以作用于整个LivePhoto中。如果你不支持调整用户想分享的LivePhoto的所有内容，要让他们知道可以以传统照片的方式分享。 让用户在决定分享前，可以预览这个Live Photo的所有内容。如果你的应用UI可以让用户选择照片分享，要为他们提供一个把Live Photo作为传统照片分享的方式。 如果你使用系统提供的标记，应该把它放在每个LivePhoto上同样的位置。标记可以放在一个不会影响用户查看照片的角落。确保在你的应用中采用一致的方式添加标记，这样可以让用户依靠它去识别LivePhoto。iOS有两种方式提供标记：

覆盖。这种覆盖的方式包含一个阴影，适合覆盖在照片上
纯色。这种纯色的方式(无阴影)可以被用来创建一个可调色的图片模板
iOS也提供了很多纯色标记，其中，图片上一个删除线代表现在的LivePhoto被当做是一个传统的照片
在用户下载一个Live Photo的时候给他们一个好的体验。尤其重要的是，用户需要知道他们正在下载的是一个LivePhoto，他们需要知道什么时候可以播放它。如果你为一个Live Photo展示一个未播放的进度指示器，确保这个指示器与你的应用中其他的下载体验一致。

3.3 钱包(Wallet)

Wallet应用是帮助用户查看和管理各种数字化票券的，他们是一些物理个体的数字展现，例如登机牌、优惠券、会员卡、奖励卡和各种票。Wallet也可以让人们添加他们的信用卡、借记卡和储值卡结合Apple Pay使用。你可以在应用中创建一个票券，分发给用户，并且在有更改时进行更新。

20151117200658941.png

使用PassKit框架可以方便地用自定义内容来收集一个票券和使用户票券库中的票券。(想要学习Passbook技术的核心概念和PassKit接口的使用方法，请参考Passbook Programming Guide。)以下几点可以帮助你创建一个用户乐意保留并使用的票券。

设计一个在各个设备上呈现很好票券。当你选择一个票券的样式——比如登机牌，优惠券，票据，奖励卡或者通用的票券——你会获得一个特别的布局和一系列区域去处理(更加详细关于不同票券的样式，参看Pass Style Sets the Overall Visual Appearance)。这个系统在各个设备上合理展示你的票券，所以正确使用票券的区域是非常重要的。例如，在Apple Watch上，条状图(strip)和缩略图(thumbnail)图片是不显示的，所以你不希望把基本的信息放到这些元素里。更多Apple Watch票券的布局，参看Designing Passes for Apple Watch.

使用合适的票券区域展现文本。在你的票券中使用允许VoiceOver的用户获取票券中的所有信息的区域，保持你的票券外观的一致性。避免将文本嵌入图片或使用自定义的字体也是一个很好的方法，因为不是所有的图标会展示到所有的设备上，这样对用户来说阅读这样的文字会有困难。
避免使用识别一个设备的语言。你不能预料到哪些用户将会查看你的票据的设备，因此你不想使用可能在一个特别设备上不起作用的语言。比如，文字告诉用户“滑动去查看”内容，当这个发生在Apple Watch上将会不起作用。
尽可能，不要只是简单复制已有的物理票券。Wallet 已经建立了有美感的设计，票券也都配合这种设计以看起来更好。所以不要只是复制物理票券的外观，抓住这次机会设计一个符合Wallet 组成和功能的干净简洁的票券样式。
对放在票券正面的信息精挑细选。用户期望扫一眼票券就能快速获得他们需要的信息，所以票券正面的信息应该是整洁且易读的。如果有用户可能会需要的额外信息，将它们放到票券的背面要比挤在正面好得多。注意，Apple Watch上的票券没有背面。
通常情况下，避免使用纯白色背景。通常，一个好看的票券应该使用鲜艳的纯色背景或者使用强烈的，充满活力的图片作为背景。当然，在设计背景时还要确保内容的可读性。
在商标文本区域显示你的公司名称。所有票券的商标文本区域的文字都使用了统一的字体。为了避免和其他票券发生冲突，还是建议您在商标文本区域输入文字，不要使用自定义字体。
使用白色的公司商标。商标图片放置在票券左上角公司名称的旁边。最好提供一个白色的，单色的，不包含文字的商标。如果你想要增强商标的效果，又想要与文字风格匹配的话，可以增加一个在y轴方向上有1像素偏移，有1像素模糊和透明度为35%的黑色阴影效果。
如果可以的话，使用矩形的条形码。类似于PDF417这样的长方形条形码比正方形二维码更适合票券的布局。如下右图所示，正方形的二维码会使两边有空白区域并且会在垂直方向上使上下方内容变得拥挤。
20151117200655246.png

为性能去优化图片。因为用户通常会通过电子邮件或者Safari接收票券，所以让下载的越快越好是非常重要的。为了提高用户体验，使用能满足视觉效果的最小的图片文件。
在合适的时候更新票券以增强其效用。即使一个票券代表的是一个并不会改变的物理实体，数字的票券也可以通过映射真实世界的一些事件来提供更好的用户体验。例如，当某个航班延误时你可以更新登机牌上的信息，这样用户就能够通过查看电子登机牌来获得当前的信息。
3.4 苹果的移动支付平台(Apple Pay)

Apple Pay是苹果公司面向iOS移动设备推出的一种简单、安全、个人的移动支付方式。当用户在购买实体商品和服务时时，可以使用Apple Pay快速、安全地提供个人联系方式、收货地址以及付款信息。

20151119171818225.png

通过用Apple Pay支付，用户无需每次购物都要创建账号或填一遍个人信息。Apple Pay显著加快了支付流程，有助于消除前期的各种信息登记，进而为用户的“无障碍”选购过程提供更好的体验。欲了解更多信息，请参阅 Apple Pay Programming Guide. Apple Pay的用户界面非常清晰、简洁高效、低调。它包含三个界面元素，各出现在不同的上下文情境中。

20151119171829850.png

按钮。Apple Pay的按钮用来告诉用户，他们可以在当前的情境下(比如商品页面)完成购买。当用户点击了Apple Pay的按钮，立即显示支付上拉菜单(见下文) 开始帮助用户完成支付流程。用户通过“设置Apple Pay”的选项Apple Pay的相关银行卡信息绑定操作。通过调用PKPaymentButton API口可以找到这两个按钮(想要了解更多信息，请查阅 PKPaymentButton Class Reference)。有关使用Apple Pay支付按钮的更多详情，请参阅Identity Guidelines.

20151119171822334.png

Apple Pay支付标识。当用户需要在授权支付之前选择付款方式并敲定其他信息时，他们期望看到Apple Pay的支付标识。Apple Pay的支付标识应该同其他付款方式以相同或类似的格式显示。

20151119171826213.png

支付上拉菜单。在用户提交订单以及完成相关支付之前，Apple Pay会显示一个包含了联系方式、收货地址以及与结账相关付款信息的支付上拉菜单。尽管用户依然可以在支付上拉菜单里做些微调，比如选择不同的送货方式，但他们不用做出重大改变或输入其他信息。当用户看到该支付上拉菜单，他们应该能够立即完成交易并授权付款。

对于可以使用Apple Pay付费的用户，Apple Pay的用户界面应当始终显示。如果用户的移动设备支持Apple Pay，并且他们已经激活了相关可用的银行卡因此可以通过将Apple Pay设为默认支付方式来满足用户的期望。

如果用户无法使用Apple Pay服务，就不要显示任何Apple Pay的用户界面。如果用户使用的设备不支持Apple Pay，仍强行将其作为一个支付方式选项，可能会对用户造成混淆。但是，如果用户使用的设备是支持Apple Pay，但没有绑定任何信用卡或借记卡，你可以在界面中显示“设置Apple Pay”的按钮。

当用户点击了Apple Pay的按钮，立即显示支付上拉菜单。当用户决定使用Apple Pay来结账时，如果还要迫使用户经历额外步骤，会使支付流程显得复杂，增加不必要的矛盾，并可能会让用户感到沮丧受挫。当用户点击了Apple Pay按钮，不要显示其他警告或模态对话框视图。如果用户可以提供像打折或促销代码之类的信息，请在用户点击Apple Pay按钮之前找到一种方式来接收该信息。

Apple Pay按钮与其他可见的支付按钮应保持相同的尺寸大小或更大。将Apple Pay按钮放置在醒目的位置，可以帮助用户轻松找到它。

20151119171833455.png

使用Handoff功能帮助用户完成在Apple Watch上发起的购买。 Apple Watch佩戴者可以在商店完成支付，但他们无法完成由Apple Watch第三方应用程序调用的支付行为。当Apple Watch佩戴者发起了由第三方应用程序调用的支付行为，则显示一条消息告诉他们请在iPhone上完成支付。为了更好的用户体验，还可以使用Handoff功能深层链接到你的iOS应用程序上，并立即显示包含预设好的相应付款信息的支付上拉菜单。

有关使用Apple Pay支付按钮以及Apple Pay支付标识的更多信息指南，请参阅 Apple Pay Identity Guidelines.

3.4.1 自定义支付上拉菜单 (Customizing the Payment Sheet)

根据完成交易付款所需要了解的信息，以及所要传达给用户关于本次购物的信息，来自定义Apple Pay支付上拉菜单所要显示的内容。

支付上拉菜单仅显示对完成交易付款有必要的信息。如果Apple Pay支付上拉菜单显示了些无关的信息，用户可能会感到困惑或焦虑。举个例子，如果商品是在线交付或通过电子方式完成，需要联系人的电子邮件地址是有意义的，而不是收货地址。在这种情况下，要求收货地址可能给用户产生会有什么东西将意外被派件到家中或公司的错觉，或许还可能导致他们对个人隐私被访问产生不必要的担忧。

支付上拉菜单允许用户可以选择更换送件或取件方式。用户可以从你在支付上拉菜单中设定的几种交付方式中随意选择一种。通过用文本标签控件、报价以及可选的第二行预计到达日期，来具体描述一种收货方式。另外，你还可以设定交付方式为“派件”或“取件”，让用户指定一个可接收快递送货上门或需要运输服务取件的位置。

使用并排项来描述周期性付款和一些购买费用的小计。 并排项包含了一个标签文本和花费数值。并排项被用来：

表明用户授权一个定期付款项目，比如“每月订阅 $19.99” 告知用户关于额外费用，比如“礼品包装$5.00”和“税费 $4.53” 显示优惠券或折扣信息带来的减价，比如“周五特价 -$2.00”
描述某个项目需要按实际计费，比如运输服务“时间&距离 …”
不要用并排项来显示所要购买的商品的构成清单。

创建并排项标签时，尽可能显示在同一行。并排项标签应该具体、容易理解。如果行条目标签字符数过长，那么很难让你的用户一看就懂。

商户名称需要紧紧跟随在同一行的“Pay”字符后面作为一个整体。确保所使用的商户名称以及相应的开销支出，必须与用户检查自己的信用卡或银行对账单时的数据保持一致。这一点很重要，因为它有助于用户确信他们的开销支出是无误的。如果你的应用程序只是作为中间媒介，而不是最终的商户支付，请明确向用户表明这个具体说明“付款给 最终的商户名称(通过 你的应用程序名称)。

如果总价花费在支付授权时还不明确，请向用户传达有可能会有额外费用的信息。举个例子，一次汽车旅程从支付授权时刻起到驶向最终目的地，它的开销报价可能会受行车距离或时间的影响变化。或者，一个客户可能想要给点小费在商品已派件之后。对于这样的情况，在支付上拉菜单中给予一个非常明确的解释说明是很有必要的。当你使用一个并排项来配置最终总价的更新信息时，总价金额会自动显示为“总价待定”。另外，如果你是预授权支付一个具体金额的订单，确保支付上拉菜单准确地反映了这一信息。

3.4.2 简化结账流程(Streamlining the Checkout Process)

Apple Pay使得购物变得快速、简单，对此人们会欣然接受的。更少的步骤和更少的需要用户手动输入的信息，使得整个结账流程更好。

始终使用Apple Pay的最新数据信息。假设用户一直保持Apple Pay个人信息的完整性和时刻更新，那么不要依赖于任何先前收集的信息。即使你以前已收集过用户的联系方式、交付方式和支付信息，也要在结账时获取来自Apple Pay的最新信息。在结账环节，尽量避免用户输入本可以从Apple Pay获取的任何信息。

使用Apple Pay加快购买。对于单个商品项目的购买，让用户只需通过点击商品页面上的Apple Pay支付按钮，即可显示支付上拉菜单并进行即时结算。购买单个商品时，无需采取额外的步骤，也无需将商品添加到购物车，用户喜欢在应用程序中体验到这种便利性。对于多个商品被添加到购物车中会使用相同的交付方式被送到相同地址的情况，一旦用户有意向支付时，会通过显示支付上拉菜单的快速结账流程来支持。

在显示支付上拉菜单前需提前收集好赎回代码或促销代码。因为在Apple Pay支付上拉菜单中没有办法输入这些代码，请务必在显示支付上拉菜单之前收集好相关代码。

如果人们可以将购买的商品派送到不同地方，或以不同的速度发货，请在显示支付上拉菜单之前提前收集好该信息。对于这种极端情况，你需要在显示支付上拉菜单之前得到发货信息，因为在支付上拉菜单中没有办法来指定多种交付方式和地址。一般情况下，在支付上拉菜单中务必收集到交付方式和地址信息。

显示订单确认页面或致谢页面。在交易完成时，通过使用订单确认页，以这种直接的用户体验来显示关于商品能派送到的预计时间以及用户如何跟进订单状态的信息。

如果合适的话，请在你的订单确认页上提到Apple Pay。尽管在你的确认页面上提到Apple Pay不是必要的，如果你愿意选，可以使用其中的一种格式：
“Visa****1234(Apple Pay)”
“用Apple Pay已完成付款”