APPLE WATCH 中文手册:通知--自定义通知界面

1417060569412909

自定义通知界面含有两个独立的界面:一个静态界面,一个动态界面。动态界面显示了完整的自定义通知内容样式,并且它可以包含由 WatchKit 扩展提供的定制内容和图形。静态界面是一个简单的界面,它仅仅只含有通知的提示信息,以及您在设计时配置的静态图像以及文本信息。

当您在 storyboard 文件中添加新的通知界面控制器的时候,Xcode 将会创建一个独立的 storyboard 场景,其中包含有一个动态界面和一个静态界面,如图15-1所示。静态界面是必需的,如果需要的话您可以删除动态界面。如果静态界面已经可以显示您想要的全部信息,那么您就可以删除动态界面。动态界面和静态场景都和相同的通知类型相关联,而这个通知类型可以用来指定使用何种通知类别来关联静态界面。

图15-1 静态界面和动态界面

1417059875679389

当合适类型的通知抵达时,WatchKit便尝试显示动态界面。如果您并未提供静态界面,或者出于某些原因您的动态界面不可用,那么Apple Watch 将会用静态界面来代替。Apple Watch 同样也会在您明白告知使用静态场景时显示静态界面。配置动态界面需要调用didReceiveRemoteNotification:withCompletion:didReceiveLocalNotification:withCompletion:方法。如果 这些方法使用WKUserNotificationInterfaceTypeDefault常量来调用完成处理程序的话,那么 Apple Watch将会显示静态场景。

配置自定义界面的通知类型

每个通知界面必须分配一个通知类型,以告知 Apple Watch 何时使用它。到来的通知可以在消息载体中包含类别值。Apple Watch 使用这些类别值来决定显示何种通知场景。如果到来的通知并未包含类别值,那么Apple Watch会展示一个类型被设定为`default`的通知界面。

要给通知界面分配通知类型,请在 storyboard 中配置和场景对应的通知类别(Notification Catagory)对象。该对象的属性检查器含有一个Name 属性,如图15-2所示。在这个属性中输入通知类型的类别名称。您同样也可以使用该对象来指定窗扇的颜色。每个通知场景的Name 属性不能相同。

图15-2 配置通知类型信息

1417059972304890

当生成远程通知时,您的服务器要通过在其`aps`字典中包含category键的值来指定通知类型。`category`的键值要和您在 iOS 应用以及您在通知类别对象中的 Name 属性指定的一样。例如,在图15-2中,类别文本是`MeetingInvite`。

提示:类别字符串同样定义了被添加到通知界面末端的操作按钮(如果存在的话)。欲了解关于支持自定义按钮动作的更多信息,请参阅Adding Action Buttons to Notifications

配置静态通知界面

使用静态通知界面来定义一个自定义通知界面的基本样式。使用静态界面的目的是在 WatchKit 扩展不能及时配置动态界面的时候,提供一个回退界面。创建静态界面的规则如下:

· 所有的图像必须驻留在 Watch 应用包中

· 界面不能包含控件、表格、地图,以及其他交互元素

· 界面的`notificationAlertLabel`输出口必须与某个标签相关联。标签的文本设置为通知的警告信息。其他的标签文本不变,并且只能够在设计时设置。

图15-3显示了在一个日历应用当中的静态和静态场景,其使用了自定义通知界面。通知箭头指向了静态场景,其中包含了自定义图标和两个标签。“Message”标签和`notificationAlertLabel`输出口连接,因此它将在运行时接收通知的警告信息。

图15-3 单一通知类型的静态和动态场景

1417060062362348

除了和`notificationAlertLabel`输出口相连的标签外,在静态通知场景中的标签和图像是不能够改变的。当您在设计界面时请记住这条准则,并确保每个标签的文本是合适的。

配置动态通知界面

动态通知界面给用户提供了一个更丰富的通知体验。借助动态界面,您可以显示很多的内容。您可以添加额外的信息,配置多个标签,动态地生成内容,等等。

实现动态通知界面需要创建一个自定义的WKUserNotificationInterfaceController子类。该子类的实现代码负责在通知需要显示时配置界面。

设计动态界面

配置动态界面和配置其他界面控制器场景十分相似。

您可以在子类中包含标签、图像以及场景中的其他对象,并使用这些输出口以在运行时配置场景的内容。单击通知界面将启动应用,因此通知界面不应当包含交互控制。

· 可在绝大多数界面上使用标签、图像、组以及分隔符。

· 您可能想要在需要的时候使用表格和地图。

· 不要包含有按钮、开关,或者其他交互控件。

在运行时配置动态界面

界面初始化之后,WatchKit将负载数据传输到通知界面控制器的不同方法中。对于远程通知来说,WatchKit 调用didReceiveRemoteNotification:withCompletion:方法。对于本地通知来说,它调用didReceiveLocalNotification:withCompletion:方法。请使用接受到的数据来配置您的通知界面。界面配置完成后,您必须要调用所提供的完成处理代码块来让 WatchKit 知道您的界面已经准备就绪。图15-4显示了处理远程通知的初始化和配置进程。

图15-4 显示自定义通知界面

1417060244348853

始终选择使用 didReceiveRemoteNotification:withCompletion:didReceiveLocalNotification:withCompletion:方法来配置您的通知界面。当实现完这两个方法后,尽快运行所提供的完成处理方法来配置界面。然后尽快运行这个代码块。如果您等待了太长时间,那么Ale Watch将会使用静态界面。

代码表15-1显示了`didReceiveRemoteNotification:withCompletion:`方法的实现例程。这个方法被一个发送远程通知的虚构日历应用所实现,用来提示某个新的会议邀请。这个方法从远程通知负载中获取数据,然后使用这个数据来设置通知界面的标签值。为了简便,这个示例假定服务器发送的键值中都有合适的对应值,但是您自己的代码应该执行必要的错误检查,来保证复杂数据是由有效的。在配置完标签后,这个方法将调用完成处理器,来让 WatchKit 知晓自定义界面已经就绪。

代码表15-1 配置远程通知的自定义界面

// Standard remote notification payload keys.
NSString* apsKeyString = @"aps";
NSString* titleKeyString = @"title";
 
// Payload keys that are specific to the app.
NSString* customDataKey = @"cal";
NSString* invitationDateKey = @"date";
NSString* invitationLocationKey = @"loc";
NSString* invitationNotesKey = @"note";
 
- (void)didReceiveRemoteNotification:(NSDictionary *)remoteNotification withCompletion:(void(^)(WKUserNotificationInterfaceType interface)) completionHandler {
    // Get the aps dictionary from the payload.
    NSDictionary* apsDict = [remoteNotification objectForKey:apsKeyString];
 
    // Retrieve the title of the invitation.
    NSString* titleString = [apsDict objectForKey:titleKeyString];
    [self.titleLabel setText:titleString];
 
    // Extract the date and time from the custom section of the payload.
    // The date/time information is stored as the number of seconds since 1970.
    NSDictionary* customDataDict = [remoteNotification objectForKey:customDataKey];
    NSNumber* dateValue = [customDataDict objectForKey:invitationDateKey];
    NSDate* inviteDate = [NSDate dateWithTimeIntervalSince1970:[dateValue doubleValue]];
 
    // Format the date and time strings.
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
 
    // Call a custom method to get the localized date format string for the user.
    // The default date format string is "EEE, MMM d".
    dateFormatter.dateFormat = [self dateFormatForCurrentUser];
    NSString *formattedDateString = [dateFormatter stringFromDate:inviteDate];
 
    // Call a custom method to get the localized time format string for the user.
    // The default time format string is "h:mm a".
    dateFormatter.dateFormat = [self timeFormatForCurrentUser];
    NSString *formattedTimeString = [dateFormatter stringFromDate:inviteDate];
 
    // Set the date and time in the corresponding labels.
    [self.dateLabel setText:formattedDateString];
    [self.timeLabel setText:formattedTimeString];
 
    // Set the location of the meeting.
    NSString* locationString = [customDataDict objectForKey:invitationLocationKey];
    [self.locationLabel setText:locationString];
 
    // Set the invitation's notes (if any).
    NSString* notesString = [customDataDict objectForKey:invitationNotesKey];
    [self.notesLabel setText:notesString];
 
    // Tell WatchKit to display the custom interface.
    completionHandler(WKUserNotificationInterfaceTypeCustom);
}

当调用完成处理代码块时,如果你想 WatchKit 要显示静态界面的话,请指定WKUserNotificationInterfaceTypeDefault的内容。

测试您的自定义界面

当您准备在模拟器测试您的自定义界面时,如果您还没有确定扩展已制作完成的话,请创建一个自定义编译方案来运行您的通知。使用 Xcode 模板提供的`RemoteNotificationPayload.json`文件来指定您的负载数据。要了解更多关于设置编译方案以及配置负载数据的内容,请参阅The Build, Run, Debug Process

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

(0)
iouedioued
上一篇 2015-06-15 09:55
下一篇 2015-06-15 09:59

相关推荐

  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31
  • 关于加载设计,你要知道的8种策略和4种样式

    加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。

    2017-04-27
  • 【原创译文】面向对象的用户体验设计

    原文:Object-Oriented UX 2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,…

    2015-11-20
  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 一些交互设计原则 | 蓝鲸

    从用户角度来说,交互设计是一种如何让产品更易用,让用户更愉悦的产品设计。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点。以下就介绍一下在交互设计中一些通用的原则。1、前馈/反馈:前馈就是操作之前要给的信息,提示用户点击之后会出现什么、点击之后结果是什么。前馈适用于新产品(还不知道怎么用的产品)。反馈就是用户操作结束后给的信息提示。如:您的操作过于频繁,请稍后再试。2、状态可见原则:比如进度条,...

    2018-04-24
  • 网易考拉海购APP产品体验报告(可下载)

    干货分享:网易考拉海购APP产品体验报告,33张幻灯片解析产品体验

    2016-08-23
  • Sketch强大新技能: 支持多个设计师之间同步组件啦!

    ▵优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。封面设计:Graphéine团队里多个设计师之间经常需要共用一些设计组件和元素,如果可以有一个包含这些组件的 Symbol 库,并且自动和所有人保持同步就好了。现在 Sketch47 就搞定了这个问题, 再也不用像过去一样通过发邮件、QQ 来同步了。如果你的团队需要多人共享一个 Sketch 组件库, 只需把这个包含公共 Symbol 的文件在你的 S...

    2018-03-02
  • 13毫米:触屏按钮的完美尺寸【UXRen译#170】

    作者:Scott Hurff   |  翻译:taitai,校审:天蛙   有种感觉你无以言表但却了然于心——当你在触屏上不能正确操作时,当你不得不小心翼翼地点屏幕上的一个小按钮来触发某个指令时,那种挫败混杂着气恼的滋味。 但假…

    交互专题 2017-08-07
  • Apple Watch超细致的硬件交互设计?什么!硬件还有交互设计?

    阿西导读:交互设计在任何有与人产生交互的设备|系统中,人机交互的范围很广,但交互设计的目的是为了提升整体的用户体验. 冷锻不锈钢,炼就强韧与魅力。 产品的用途,决定产品所用的材质。Apple Watch 设计的初衷是为…

    2015-01-26
  • 用户体验测量的工具:可用性度量

    说到用户体验度量就不得不说用户体验,用户体验即用户在使用产品、系统、服务的过程中建立起来的主观心理感受、因为它是纯主观的,就带有一定的不确定因素;而个体的差异也决定每个用户的真实体验无法通过其他途径来完全模拟或再现。

    2017-05-30