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

本篇目录web

3.1 3D触摸(3D Touch)安全

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

3.3 钱包(Wallet)框架

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

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

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已完成付款”