娱乐应用

Applies to Windows and Windows Phone

下面我们介绍帮助你创建功能强大且流行的媒体应用的设计思想。

概述

Windows 8.1 使用的设备空前广泛,从以触控为中心的平板电脑到高分辨率的便携式计算机以及台式机。Windows 8.1 中的很多新功能特别适合媒体和娱乐体验,从而为内容发布者提供了与其受众保持紧密联系的新方法。

Windows 应用商店还为内容发布者提供分发、促销以及销售其内容的巨大机会。Windows 应用商店中的商务条款允许你使用 Microsoft 提供的商业引擎。如果你愿意,你可以使用你自己的商业引擎,使你可基于你自己的条款来运行你的企业,并使灵活性和收益最大化。

本文档重点介绍 Windows 8.1 中对媒体和娱乐发布者来说特别重要的功能,其中包括:

  • Windows 应用商店应用—一种用于以内容为中心的应用的设计语言。
  • 动态磁贴和 Toast 通知—通过及时、相关的通知促销你的内容(即使在你的应用未运行时),从而将用户带回你的应用。
  • “搜索”合约和“共享”合约—查找和共享媒体内容现在是顶级操作系统功能,该功能可创建更一致的用户体验并且使用户更有可能在你的应用中查找和共享内容。
  • “设备”合约—用户可以将内容从电脑发送到联网的设备,如电视、音频-视频接收器,从而能够对查看和参与进行分组。

媒体应用中的布局和导航

娱乐应用通常对不同类型的媒体拥有很多不同的类别。例如,电影应用可能会允许你按流派、按特定导演或演员、或者按你之前的电影首选项或特别推荐内容来浏览电影。同样,对于音乐应用, 用户可以按艺术家、唱片、流派以及特别推荐内容来浏览内容。若要使媒体应用获得最佳最终用户体验,最重要的是 以某种有意义的方式组织内容以便用户可以快速自信地找到他们所需的内容。对 Windows 应用商店应用使用分层和其他导航模式 将使你的应用更快速、更流畅、更易于使用,从而使你的用户可以快速找到所需内容。

有关为你的应用选择最佳导航模式的帮助,请参阅导航模式

在操作时请参阅平面导航模式,它是应用功能大全系列的一部分。

分层模型

娱乐和媒体应用通常有很多故事和图像 可供用户发现和领会。使用 Windows 8.1 中推荐的导航和交互模式, 你可以呈现内容,从而使故事和图像成为体验的焦点。 采用一般到具体的方式显示信息使用户能够快速找到他们要找的内容。

应用的中心页

若要在你的应用中支持丰富且种类各异的体验,请对 Windows 应用商店应用使用分层模型。你的应用的登录页(也称为 hub)可以在一个图面中显示特别推荐的内容、根据以前的兴趣爱好为用户推荐的内容、当前正在播放的内容、已保存的队列、流派以及类别,你可以轻松平移这些内容。你可以突出显示每个类别组,通过点击 标题,你可以显示更多内容,如下图中所示。

显示示例中心页的图像

在应用的中心页显示内容类别平面并且在每个类别中显示 相关的媒体内容以将用户吸引到这些类别。 若要让用户知道该类别中还有更多内容,请向标题添加 (>) 形标志。

显示组中还有更多内容的图像

书签、收藏夹和播放列表

用户通常会保存播放列表或将媒体添加到队列 供以后访问。如果你的应用采用便于访问的方法支持此内容,那么想获得无缝体验的用户会重复使用此方法来访问他们喜爱的媒体。

在你的登录页中添加一个称为“书签、收藏夹或播放列表”的部分, 它是用户所保存的所有媒体内容的集合。使用户 能够选择带有书签的项目并通过将这些项目移到队列顶部、从队列中删除或者在队列中对它们进行排序来管理这些项目。 以下示例显示在“为以后保存”队列中收集的内容。

演示用户保存的内容组

语义式缩放

在登录页和类别页中,用户可以使用语义式缩放 轻松查看整个图面以及快速访问他们感兴趣的内容。

触摸交互设计页包含 有关应用如何支持平移的详细信息。下面的这个图像显示了语义式缩放的组视图。

显示内容类别的示例

当使用语义式缩放时,你可以通过选择组并环绕该组来重排主页上的类别位置。现在,你的用户可以个性化应用登录页,这为用户提供了使用你的应用的另一个理由。

用户还可以使用顶部应用栏进行导航,如下图所示。

显示环绕的类别的示例

你还可以在特定类别页中使用语义式缩放,以在 该类别中不同的电影或歌曲之间导航。用户使用语义式缩放可快速 在不同歌曲和视频之间跳转。

点击中心视图中的项目

案例 1:即时播放

当用户点击登录页或部分页上的媒体项目时,应该播放该媒体项目。由于用户希望这样,因此最好使它成为点击的默认响应。该图像显示即时播放的交互。

显示即时播放的交互

同样,用户会希望获得他们所播放媒体的详细信息, 因此在应用栏中提供了一个按钮,允许用户从全屏视图导航到详细的项目视图。下面的这个图像显示这种情况的模拟。

访问内容详细视图的交互

媒体应该继续播放,即使当它不再是全屏视图时也会如此。 继续播放媒体控件,即使当媒体 不是全屏时也会如此。这样做,用户会在打开媒体控件时获得相同的体验,而无论是否缩小应用都是如此。

点击切换按钮进入全屏模式,或者点击 UI 中呈现的视频或音乐应该 继续全屏播放模式。

或者,如果应用没有为媒体提供详细信息体验,那么可通过应用栏按钮来打开或关闭其他信息 而不是切换到应用栏中的详细信息视图。你可以在下图中查看此演示。

在播放期间显示其他信息的交互

案例 2:详细项目视图

有些情况下,通过点击将用户定向到详细项目页面而不是立即播放媒体可能更有意义。例如,如果一个电视剧中包含多个剧集,那么需要在媒体开始之前为用户提供一个列表选项。此外,如果媒体是按次计费,那么用户必须在媒体开始之前首先付费,因此你会希望首先显示付费信息。

下面的这个图像显示了从电视节目的促销页上的聚合内容中选择特定媒体的过程。用户点击特定剧集的一个图像,可阅读有关该剧集的信息并且可阅读评论,再次点击可显示播放该剧集的选项。

浏览特别推荐内容的交互

若要返回到该剧集的详细信息页,请点击顶部应用栏中的“后退”按钮或点击“完全视图”按钮来切换到其他视图。

购买体验示例

现在正在播放体验

当实际播放媒体时,你的应用可以通过提供显示用户内容的体验来使自己独具一格。将你的媒体播放体验设计为完全沉浸式, 没有任何版式。当用户希望通过点击播放时, 可以在媒体上显示媒体控件。 该图像显示完全沉浸式的视频播放体验。

没有应用版式的沉浸式视频体验

对于有播放列表概念的音乐和视频应用,现在正在播放体验使用户能够轻松管理播放列表并进行导航。假如要在画布上或顶部应用栏中 放置一个播放列表按钮,该按钮使用 其中的播放列表来显示可滚动的浮出控件。用户可以通过上下移动项目或从列表中删除项目来选择和管理项目。下面的这个图像显示“现在正在播放”列表。

从播放列表浮出控件中选择音乐

或者,如果你希望总是在“现在正在播放”屏幕中显示播放列表,你可以使用列表视图模式和垂直滚动来使用户轻松导航播放列表。 确保页面的剩余部分宽度固定,以便页面不会在两个方向平移,这样会使用户感到困惑。在播放列表旁边的固定宽度区域中 显示其他信息。

你也可以让用户横向滑动来选择项目以及管理此处所示的播放列表。

管理播放列表项目的示例

在上一剧集或视频剪辑和下一剧集或视频剪辑之间进行导航

通常用户在一行观看多个相关剪辑或剧集。 通过提供“上一个”和“下一个”按钮,允许用户快速导航到他们的下一个剪辑或剧集。该图像显示播放体验中的“上一个”和“下一个”按钮。

播放体验中的“下一个”和“上一个”控件

对于上一个和下一个交互更加常见的音乐应用,这些命令 最好呈现在画布上,如后面的“命令”部分所述。

命令

媒体控件

对于播放音乐和视频的媒体应用,将播放控件放置在一个一致的位置中可帮助你的用户与媒体充满信心地进行无缝交互。若要了解有关命令的详细信息,请阅读 Windows 应用商店应用的命令设计

由于“播放/暂停”按钮和传输滑块通常是媒体播放的关键控件,因此可以将这些控件放置在画布上并且在用户点击或轻扫屏幕时显示。“播放/暂停”应该是一个切换按钮,该按钮反映在点击时发生的操作。 例如,当播放音乐时,按钮应该将“暂停”显示为操作,反之亦然。该图像显示媒体应用中的控件。

媒体控件的示例

如果你的应用使用传输滑块,则“后退”和“前进”按钮发生功能重复,因为用户可以使用滑块来使电影或歌曲后退或前进。为避免出现这种情况,请不要同时使用传输控件和后退/前进控件。

其他媒体控件(如“上一个”和“下一个”(歌曲或剧集)实际取决于应用的方案。例如,如果正在播放电影,那么“上一个”和“下一个”没有太多意义,但对于音乐播放列表或具有很多集的电视连续剧来说,它们非常有用。如果在应用中使用“上一个”和“下一个”控件,那么将它们与“播放/暂停”和传输滑块放在一起以便当用户点击或轻扫时,他们可以同时看到所有可用的控件。

不要显示在给定上下文中没有意义的控件。例如,当开始一个新的音乐播放列表时,在开始播放之前,“上一个”按钮将不再有效(因为用户刚刚开始播放列表还没有“上一个”曲目)。

当点击和轻扫时显示媒体控件。当从边缘轻扫时显示应用栏。 当用户轻扫以显示应用栏时,也会显示画布上的媒体传输控件,以便用户可以在使用应用栏命令的同时与媒体交互(如果他们希望这样做)。

除了 UI 媒体控件之外,你还可以为用户提供对媒体播放体验的更多控制,方法是允许他们使用媒体键盘按钮或媒体遥控器按钮来控制应用,例如:

  • 播放
  • 暂停
  • 快进

硬件按钮上提供音量控制滑块和静音按钮,在你的应用中不应该重复。

对于媒体播放不太重要的其他命令可以放在应用栏中,如在全屏模式之间切换,关闭字幕以及元数据。 有关使用应用栏的详细信息,请阅读应用栏指南和清单

对于管理播放列表,还应考虑在应用栏中放置“从播放列表中删除”、“清除队列”、“保存队列”、“在队列中上移”以及“在队列中下移”按钮。

窄窗口大小

当用户将应用的大小调整为较窄宽度时,媒体控件的交互应该是相同的:

  • 点击媒体画布可以显示媒体播放控件。 播放/暂停 保持较窄宽度非常重要。
  • 其他控件(如传输滑块、“上一个”和“下一个”)可以放在较窄宽度中。

该图像显示窄媒体应用中的“播放/暂停”按钮。

调整为窄宽度的媒体应用的示例

后台播放和前台播放

如果你的媒体应用正在播放音乐并且用户切换到另一个应用,那么你的应用可能会允许用户在后台收听音乐。 适合后台播放的最佳媒体方案示例为音乐、流广播、播客以及音乐视频。 播放视觉媒体(如电视节目和电影)时,如果用户切换到另一个应用,那么你的应用应该自动暂停。这样,当用户切换回你的应用时他们可以从他们停下的位置开始,而不会错过任何内容。

通过阅读 MediaControl.Soundlevel | soundLevel propertyWindows 应用商店应用中的音频播放文章,来了解有关后台媒体播放的详细信息。

系统传输控件

对于在后台播放媒体的应用,系统传输控件使用户能够查看应用正在播放的内容以及控制播放,而无需切换回你的应用。用户可以按他们设备上的硬件音量按钮,从应用之外快速流畅地访问媒体控件和元数据。提供有关曲目和艺术家名称的信息,以便用户知道正在播放的内容。如果你的应用正在加载内容或正在下载,你可以向用户提供状态以便他们知道媒体播放的状态。 下面的这个图像显示系统传输控件。

系统传输控件示例

回到媒体播放体验

如果用户正在使用你的应用,来回导航以向播放列表中添加多个歌曲或购买新的音乐,那么有一个一致的地方可导航到“现在正在播放”的音乐/视频非常重要。这样用户便可以快速回到“现在正在播放”体验。

下面这个图像显示当用户正在进行其他媒体相关任务时可轻松访问的导航栏。用户可以在需要时快速导航到应用的“现在正在播放”部分。

当前正在播放的内容显示在 UI 中并且可以选择返回到“现在正在播放”

评级和评论

评级和评论媒体内容是大多数媒体应用的重要方案。考虑在应用各个部分的顶部放置用来显示评论的星星,以便用户快速评论媒体内容。对于撰写评论的用户来说,你可以在顶部显示一个文本框,以为即将出现的触摸键盘留出空间。按 Enter 提交评论。需要时,可以针对较长的评论放大文本框。

用户可以通过点击此处所示的标题查看更多评论。

评级内容的交互

媒体应用中的版式

遵循字号渐变指南来创建内容结构和韵律感。若要使媒体应用的版式符合 Windows 8 版式,请对内容的主要字号使用 11pt Segoe Semilight,对标题和副标题使用 Segoe UI Light 20pt。如果你需要较小的字号,请对简短字幕和片尾使用 Segoe UI Regular 9pt。不要指定 9pt 以下的字号。

对标题保守使用 42pt Segoe UI Light。避免设置标题,如将“音乐”或“电影”设置为 42pt。 对电影、唱片集或音乐曲目的名称保留最大字号。使用最大的字号时,应用字距和版式正确的标点符号非常重要。 使用真正的引号、撇号和破折号代替直引号和连字号。以下示例显示了标点符号的正确用法和错误用法。

文本格式的示例

尽管 Windows 8 个性化需要使用句子大小写,但你可决定所有都大写、所有都小写或者首字母大写更适合你的内容。请注意,这些版式处理将不会迁移到到很多本地化的语言。还要确保一致地使用大小写样式,并且区分不同的内容部分,而不仅仅是向应用的版式中添加视觉兴趣性。

如果你决定脱离该指南,所使用的字号请尽量不要超过 4 个。使用颜色和字号来帮助区分以相同字号显示的内容。

字体指南包含有关字体最佳做法的详细信息,如大小、颜色和字号。

合约

共享

“共享”合约为用户提供一种在两个应用之间共享内容的熟悉且自然的方式。从媒体应用共享内容或将内容共享到媒体应用的很多方案都使你的应用与众不同。如果你希望使你的用户能够共享该应用中的内容,则该应用应当是共享来源。如果你希望使你的用户能够使用其他应用中的数据,则该应用应当是共享目标。你还可以根据应用的具体需要来支持这两种情况。

从你的娱乐应用共享

共享娱乐内容是娱乐应用的主要方案。通过使用“共享”合约,你可以让你的用户将他们发现的令人感兴趣的视频或他们听过的歌曲共享给支持该格式的任何应用。这样便可以支持很多吸引人的方案,如在社交网络上共享有趣的视频或者通过电子邮件向朋友发送电影或歌曲建议。它还允许通过 Windows 上的其他应用(如照相机筛选应用、自动调整应用等),将你的媒体应用中的音乐、照片或视频按照有趣的方式转换。

共享视频内容

共享到你的娱乐应用

如果你的应用可以支持存储照片、音乐或视频以便与亲朋好友共享或公开,则应用应当向共享目标合约注册。这将使用户非常方便地利用你的应用来组织其他应用中的媒体并扩大受众面。

如果你的媒体应用可以按照有趣的方式转换来自其他应用的内容 – 无论它是向照片应用特殊滤镜、自动调整音乐录音、构建全景还是执行其他操作,它都应当向共享目标合约注册。这将使用户非常方便地利用你的应用和其他应用中的内容来释放你的应用的价值。

搜索

搜索是媒体应用中的一个重要方案,媒体应用通常显示来自多个类别的搜索结果。“搜索”超级按钮为包括 Web 在内的所有用户的搜索需求提供了集中体验,同时应用内搜索框有助为你的用户提供一个完全自定义的搜索体验。

若要了解有关搜索的详细信息,请阅读搜索指南。 下面的这个图像显示典型的搜索体验。

搜索体验示例

如果你的应用具有更高级的搜索方案,包括筛选和搜索范围,那么会在适当的时候在应用画布上提供这些内容。

而且,使用查询建议可帮助自动完成用户的搜索查询并使用户的搜索速度更快,而无需键入整个字符串。

设置

适用于媒体应用的所有设置,如用户帐户信息、订阅信息、隐私设置以及通知设置等都应该位于“设置”超级按钮中。它为用户提供了一个调整其设置的地方。而且通过不同的设置,还可以防止应用 UI 混乱。 该图像显示媒体应用中的设置。

设置 UI 示例

设备

“设备”合约为你的媒体应用提供一个插入的出色选项。你的用户可能希望在电视上观看电影或视频并在音频设备上播放音乐。与“设备”合约集成,你的用户只需一次点击即可完成该操作。 以下图像显示了正在播放到某个设备的内容。

设备体验示例

已连接且处于活动状态

磁贴和通知

对于媒体应用中的动态磁贴,有很多吸引人的方案。电影应用的磁贴显示为用户推荐的最新电影、DVD 上可用的新版本、无病毒的流行视频—所有这些都有助于再次吸引用户。 同样,对于音乐应用,磁贴显示喜欢的艺术家发行的新专辑、现在正在播放的音乐或者根据用户的兴趣推荐的艺术家,当用户意外在你的磁贴上发现新内容时会继续将用户吸引到你的应用中。 这些图像显示了提供信息的动态磁贴。

媒体应用的磁贴示例

使用户能够将不同的电影流派、电视频道、艺术家以及播放列表固定的到“开始”屏幕,从而使用户看到为他们最感兴趣的内容定制的通知,并且能够快速访问他们最关心的内容。这是将用户再次吸引到你的应用的另一个方法。 下面的图像显示了媒体应用的固定磁贴。

媒体和娱乐应用的固定磁贴示例

如果你允许用户选择加入以便他们在应用未运行使可以通过 Toast 通知查看重大新闻,那么这会使用户能了解到最新的新闻并且将他们吸引到你的应用中。不过,请确保 Toast 通知是用户可以通过应用设置(通过“设置”超级按钮访问)启用的选项,因为对于某些用户来说,这些可能有点冒昧。

漫游

漫游可在设备之间移动设置和首选项。 大多数人都不止有一台 Windows 电脑。创建一个应用,使该应用能够在他们的所有 Windows 8 电脑中提供一致的用户体验,会为用户提供他们所需的体验。尽可能漫游应用设置、保存的媒体内容、收藏夹、“最近观看”历史记录以及在查看某些媒体时用户停止的位置。可以在应用设置指南漫游应用数据指南管理应用数据中找到关于漫游的其他指南。

方向和窗口大小

纵向和横向

为 Windows 8.1 设计你的媒体应用时,应考虑所有设备大小、屏幕分辨率和方向。Windows 8.1 通过在应用中为较大设备包含更多内容,从而便于为纵向布局和高分辨率屏幕缩放设计。在横向视图和纵向视图中显示你的应用。对于应用中的某些视图,如观看电影,将视图锁定为横向可能非常有意义。

窗口大小调整

Windows 8.1 可让用户将多个应用并排放在屏幕上,支持用户执行多个任务。 将应用设计为可以在较窄宽度中很好使用是提高应用在屏幕上的时间,从而使用户使用时间较长的最好方法。这可让用户在使用应用的同时执行多个任务,从而使得他们将你的应用保留在屏幕上更长时间,甚至在他们进行其他事项时也是如此。

在许多备受关注的情况下,用户将需要对媒体应用进行多任务处理。用户可能希望在浏览网页时观看实时的流式体育比赛,或者在阅读新闻时聆听其 Spotify 播放列表。一定要为所有大小的窗口定制核心的播放体验以支持这些常见情形。

该图像显示调整为较窄宽度的娱乐应用的示例。请注意,每个页面都有定制的有用视图,这允许用户在对应用进行大小调整时保持上下文不变。

窄媒体和娱乐应用的示例

由于用户可以将窗口调整到任意宽度,甚至最小化,因此纵横比可能有很大不同。应相应地显示视频和其他媒体内容。如果窗口的纵横比与媒体内容的纵横比不匹配,请将媒体内容显示在上下黑边中,以便内容不会拉伸。

初始屏幕

通常,媒体应用需要从 Web 下载新内容。若要使你的应用速度更快并且快速响应,请不要等待每个类别的所有图像均下载完毕后再显示登录页。这会使用户失去耐心。下载完内容磁贴后就向用户显示应用登录页,然后异步加载图像和其他数据。 该图像显示了初始屏幕的示例。

初始屏幕示例

音乐和视频最佳做法

音乐应用

建议说明

将应用注册为后台媒体

如果你的应用可以播放音乐播放列表,则即使在用户切换到其他应用后,也可以让你的应用继续在后台播放。有关详细信息,请参阅如何在后台播放音频

响应所有硬件媒体按钮

注册并响应“播放”、“暂停”、“播放/暂停”、“下一曲目”、“上一曲目”和其他媒体按钮事件,以便用户可以从遥控器或媒体键盘按钮控制你的应用。有关详细信息,请参阅如何为媒体控件配置键

在系统传输控件中提供“正在播放”信息

支持在后台播放的应用应该在系统传输控件中提供曲目名称、艺术家姓名和唱片集封面,以便用户掌握关于正在播放的曲目的丰富信息,甚至在他们不在应用中的时候。如果你的应用在用户更改曲目时有一个延迟,请使用“正在加载下一曲目”填充曲目名称字段,以便不会觉得你的应用没有响应。有关详细信息,请参阅系统传输控件开发人员指南

 

视频应用

建议说明

为应用选择正确的流类型

在大多数情况下,将应用注册为仅前台媒体

如果用户在开始视频时有后台音乐正在播放,你的视频流将自动暂停任何后台音乐,以便用户可以听到来自视频的声音。当用户切换离开应用时,自动暂停视频,以便用户稍后可以在离开的位置继续观看,不会错过视频的任何一部分。有关详细信息,请参阅 Windows 应用商店应用中的音频播放

如果用户播放音乐视频或创建视频播放列表,将应用注册为后台媒体

当用户将你的应用视为音乐播放器或排队处理视频时,他们希望即使在切换离开应用以后,也能够继续听到播放的声音。有关详细信息,请参阅如何在后台播放音频

响应所有硬件媒体按钮

注册并响应“播放”、“暂停”、“播放/暂停”、“下一曲目”、“上一曲目”和其他媒体按钮事件,以便用户可以从遥控器或媒体键盘按钮控制你的应用。有关详细信息,请参阅如何为媒体控件配置键

 

相关主题

认识 Windows 应用商店应用
Windows 应用商店应用的 UX 指南
媒体播放详细信息 (HTML)
媒体播放详细信息 (XAML)

 

 

显示:
© 2015 Microsoft