Windows 应用
折叠目录
展开目录

资讯应用

本主题介绍如何为 Windows 8.1 构建出色的资讯应用。

概述

Windows 8.1 使用的设备空前广泛,从以触控为中心的平板电脑到高分辨率的便携式计算机以及台式机。这些不同的外观规格为新闻发布者提供了在各种使用情况和方案中提供出色体验的独特机会。

全新的 Windows 应用商店还为应用提供分发、促销内容以及利用内容赚钱的机会,同时还允许你为订阅运行自己的商业引擎。  

本文档重点介绍 Windows 8.1 中对资讯应用来说特别重要的新功能,其中包括:

  • 内容先于 chrome 对于 Windows 8.1,当操作系统淡出到后台时你的内容便是主宰。与以往相比,读者的参与性更强,更不容易分心。
  • 允许亮出你的品牌 Windows 8.1 允许你使用动态磁贴、初始屏幕、你的徽标等将你的品牌的威望和认知带到应用中。
  • “共享”合约和“设备”合约—新的顶级操作系统功能,使内容更加可共享并且帮助你的应用充分利用附近的设备。
  • 通知—使用动态磁贴和 Toast 通知来提醒用户有新的内容并且提高了参与性和重复使用。

资讯应用中的布局和导航

资讯应用通常在很多不同的类别中显示新闻。使用 Windows 应用商店应用的分层导航模式,你可以更加快速流畅地使用你的应用,同时仍然将用户关心的内容置于前面。

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

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

分层模型

在资讯应用中,通常用户有很多内容需要发现和使用。而且,若要管理信息密度,资讯应用和网站通常包含很多不同的类别。例如,通常在顶层页面上有特别推荐的“重大新闻”或“新闻头条”部分。还可能有其他各种类别,如政治、世界新闻、科技、体育、金融以及娱乐,某些文章被拉出并且显示在应用的顶层。对布局和交互使用 Windows 8.1 中的分层模型,你的应用能够将感兴趣的内容置于顶层来呈现给用户,而不是将它隐藏在选项卡或菜单后面。该顶层登录页或“中心”可以提供许多可以看到的变化,吸引用户,并将他们吸引到应用的各个部分。

当你考虑应用的布局时,根据相对重要性以及它们如何吸引最多用户来划分方案和类别的优先级。例如,新闻头条或重大新闻类别通常对于资讯应用的大多数用户来说非常重要,因此它们应该主要在应用的中心页中特别推荐。

该图演示了资讯应用示例的分层模型。

资讯应用的分层模型示例

应用的中心页

你的应用的中心页可以在一个可轻松平移的图面中显示新闻头条、重大新闻、为用户推荐的内容以及所有不同类别中特别推荐的文章。每个类别组都可以将吸引人的内容提升至中心。点击组标题,用户便能够深入到特定部分并且查看更多内容。

新闻类别

在应用的中心页中列出应用的所有类别并在每个类别中显示几篇文章以将用户吸引到该类别。你可以通过在组标题旁边显示计数来指示类别中还有更多文章,如此处所示。

显示如何指示有更多新闻文章的示例

重大新闻

重大新闻是资讯应用的主要方案,因为用户通常都会对最新、最重要的新闻感兴趣。你可以将重大新闻和逐步展开的故事突出显示在中心页的前端,方法是使它们比中心的其他内容更大,以及根据新闻的优先级使用字号和颜色变量。

以下示例通过使用内容的放置位置和大小以及在标题前面有红色的“直播”来区分直播事件,从而将用户吸引到该内容。

如何指示有直播内容的示例

书签/保存以供日后使用

用户保存文章以及将文章标记为书签可在日后继续阅读它们。如果你的应用采用快速流畅的方法支持此内容,那么用户将继续启动你的应用,因为返回到他们保存的文章对他们来说是无缝体验。 在中心页中添加一个以某些内容(如“书签”或“收藏夹”)命名的部分,用于存储用户保存的所有文章。下面提供了一个示例。

书签的示例

用户可以向“书签”或“收藏夹”部分添加文章,当他们阅读完时可以删除这些文档。

语义式缩放

语义式缩放使用户能够在一个视图中快速导航。例如,用户可以快速收缩和平移以从中心上的热门新闻头条转到中心页上的最新新闻类别。 以下示例显示用户如何使用语义式缩放在不同的新闻类别之间快速移动。

语义式缩放如何支持快速导航的示例

下面是资讯应用中使用语义式缩放的一些示例。

语义式缩放的其他示例

当使用语义式缩放时,用户可以通过选择组并环绕该组来重排主页上的类别位置。 这样你的用户便能够个性化应用的中心页,从而使他们更加喜欢你的应用。例如,用户可能首选应用的“科技”类别并且想将该类别放置在应用的“政治”类别前面。 通过为用户提供该功能,你可以根据用户的偏好定制应用的外观。

排列类别的示例

也可以在特定类别页中使用语义式缩放,以在该类别中的不同文章之间进行导航。语义式缩放允许用户在文章之间快速跳转。

应用的文章视图

应用的文章视图就是显示你的内容的位置。在该视图中允许用户享受他们的体验,从而使你的应用称为杰出应用,因为用户就是在你的应用的这个位置花费了他们的大部分时间。直观地显示你的内容并使该视图在视觉上令人愉悦,这一点非常重要。 另外,确保该视图中的导航高效也非常重要。

资讯应用的文章视图应该水平平移,以便用户可以使用他们的手指在内容之间轻松移动。 此外,考虑将文章分为多个页面。将一篇文章分成多个页面可使你的用户了解到他们已看了多少内容,并且让他们轻松转到所需位置。

指示在文章之间水平平移的示意图

但是,若要获得真正出色的布局和用户体验,在你编写新闻文章时,请考虑查看该文章的用户:

  • 使用平板电脑
  • 使用便携式电脑
  • 使用台式电脑

这些方案中的每个方案都会从考虑用户使用模式的不同布局中获益。例如,当用户在平板电脑上阅读新闻时,他们使用横向和纵向视图,但在便携式电脑和台式电脑上,他们最有可能采用横向视图阅读。因此,请记住应设计具有两个方向的文章视图。而且,为平板电脑设计的布局还应该针对触摸导航进行优化。正如前面所建议的那样,最好将内容分为多个页面。以触摸为中心的添加页面的方法是使用文章中的“吸附点 ”创建“减速块”。这告诉用户当他们快速平移浏览文章时他们在文章中所处的位置。

由于横向对于便携式电脑和台式电脑用户来说更常见,因此请考虑如何对文章进行布局以避免使用令人厌烦的列集。一个布局技巧是使用跨越多个列的内容插入、图像或其他媒体元素。你可以添加引用或让跨越整个页面的标题来向布局中添加变量。而且,对于便携式电脑和台式电脑方案,用户主要使用键盘和鼠标进行导航。因此,需确保你的布局能够对键盘和鼠标输入进行响应,这一点很重要。

你可以在文章视图中显示相关文章和评论,以使用户继续他们的阅读体验并在你的应用中停留更长时间。此处显示了它的外观。

查看相关文章和评论的用户

在文章之间导航

用户通常会对特定主题或新闻类别感兴趣,并且可能浏览与其相关的多个文章。 如果应用中的内容通常比较简短,让用户在文章结束后向右平移以到达下一篇文章,在文章开头的前面向左平移以到达上一篇文章。 也可以在该视图中提供语义式缩放,使用户能够快速切换到不同的文章。

文章布局示例

如果每个帖子或文章的内容通常较长,则考虑在顶部应用栏中放置“上一篇”和“下一篇” 按钮,以便用户可以轻松切换到其他文章。除了允许用户在文章之间来回轻扫之外,你还可以提供这些按钮。你可以使用 此类按钮的不同视觉样式(例如,显示上一篇和下一篇 文章的文章缩略图),以便让用户更好地预览他们将要切换到的内容。或者,你 可以使用标准的“上一个”和“下一个”标志符号,而使顶部应用栏半透明 或透明,以便它不会分散对内容的注意力。 下面是顶部应用栏中此类按钮的示例。

具有顶部应用栏的 UI 示例(演示“上一个”和“下一个”)

命令

常用任务的命令(如“添加到书签”、“添加新源”以及“将磁贴固定到‘开始’屏幕”)应该全都位于底部应用栏中,因为它将这些命令合并在一个用户可以可靠地找到它们的位置。

若要了解有关命令的详细信息,请参阅 Windows 应用商店应用的命令设计

书签

当用户保存文章以供日后阅读或者阅读一篇文章但在下次之前不能完成该文章时,用户通常会从中心页将文章标记为书签。吸引人的资讯应用应该支持这两种情况,从而使用户在阅读一篇文章时能够使用中心页或类别页的底部应用栏将所选文章标记为书签。 书签按钮应该是一个切换按钮—一个添加或删除书签的按钮。

始终漫游书签以便用户可以继续阅读他们标记为书签的文章,而无论他们使用的设备如何。 确保为了保持一致性该按钮仍然位于应用栏的左侧,如下面的示例所示,尽管在中心页上该按钮的功能为上下文功能,但在文章视图中它又是全局功能。

在应用栏左侧显示书签按钮的示例

有关应用导航层次结构的详细信息,请参阅 Windows 应用商店应用的导航设计

文本选择

在应用中启用内容选择,尤其是文章视图中的文本,因为用户通常会从文章中选择摘录。 系统自动显示用于复制所选内容的上下文菜单。

合约

你的新闻应该在适当的位置利用 Windows 8.1 合约丰富用户的体验并帮助将此应用与其他 Windows 体验联系起来。若要了解有关合约的详细信息,请参阅应用合约和扩展

“共享”合约

“共享”合约为用户提供一种在两个应用之间共享内容的熟悉且自然的方式。共享应用中的内容和将内容共享到应用的很多方案都可以明确积极地使你的资讯应用与众不同。通过 Windows 8.1 中的“共享”,你可以获得所有这些方案,而不必向你的应用中集成其他代码。如果你希望使你的用户能够共享该应用中的内容,则该应用应当是共享来源。如果你希望使你的用户能够使用其他应用中的数据,则该应用应当是共享目标。

从你的资讯应用共享

新闻类别中的大多数应用都关于使用新闻内容。共享文章和有趣的报道是如今资讯应用的一个关键功能,因此我们认为这样的每一个应用都应该是“共享”合约的来源。

作为共享来源意味着使你的资讯应用中的内容(无论它采用 URI、位图、HTML、文本、存储项还是自定义数据类型)可供能够使用这些格式的其他应用使用。此功能可以创造出很多吸引人的方案。你很容易即可想到使用此合约进行社交共享的场景。你可以让你的应用立即共享到社交网络、博客应用和邮件应用。

通过新应用共享的示例。

除了社交共享,该合约还能够通过将新闻报道与笔记应用、新闻聚合器和其他共享目标共享,从而完成研究、计划和存档任务。例如,如果我希望将某篇新闻文章中的选定摘录与该文章的链接(供日后参考)一起保存到我的笔记本,我可以在共享来源提供了表示该信息的正确数据类型时执行此操作。

通过支持共享来源合约,你还可以使你的应用直接共享到“点击并发送”支持的近场邻近感应设备。

作为源应用,一定要尽可能多地支持对于将由用户共享的内容有意义的数据类型。这会使用户有可能将你的应用的内容与广泛的共享目标应用共享。在下面的示例中,Contoso News 是源应用。它正在共享焦点文章的文本、缩略图和链接。“共享”窗格列出了支持共享这些内容类型的快速链接和共享目标应用。

通过新应用共享的“共享”窗格选项示例。

共享到你的资讯应用

某些资讯应用擅长聚合其他应用中的文章,从而为用户提供一种从大量来源中以熟悉且自行安排的方式组织和使用信息的方式。这些应用应该在支持共享目标合约上进行投入。

作为共享目标意味着允许你的应用以一种有趣且有意义的方式使用共享来源应用提供的数据。在下面的示例中,你可以将来自某个资讯应用的文章共享到新闻聚合器,以便稍后阅读。

共享到新闻聚合器应用的示例。

若要了解有关“共享”合约的详细信息,请参阅共享和接收数据

评论以及与其他社交应用的集成

资讯应用可以通过使用户能够发表评论或讨论文章以及使用与“共享”超级按钮集成的应用标记文章来创造价值。通过依赖与“共享”超级按钮集成的应用,你可以为用户实际用于共享的应用定制你的应用的共享体验,这会通过将用户的所有共享集中在一个合并的体验中来帮助用户。而且,你无需花费时间为特定社交网络编写代码,因为当启动新的社交网络时,你的应用会自动与它们集成。

资讯应用中的版式

在资讯应用中使用版式网格和大小渐变会创建一个视觉层次,使用户能够快速轻松地扫描和使用很多信息。尽管使用在类型渐变中指定的 Segoe UI 字体适合新闻内容,但你可以考虑使用 Calibri(我们建议的用于 Windows 应用商店应用中文档的字体)或 Cambria(我们建议的“传统文档”字体)。Georgia 字体是 Web 上新闻站点的流行选项,因此对于你的资讯应用来说也是熟悉的选项。

如果你决定指定备用系统字体,请务必确认 Windows 8.1 安装了这些字体并且不需要安装单独的应用,如 Microsoft Office。 如果你使用自己的自定义或授权字体,请确保你拥有足够的法律权利将这些字体包含到你的应用中。 无论你使用的字体如何,Windows 8.1 类型渐变提供有关你应该使用的大小和样式的最大数量的最佳指南。

在整个应用中使用少量字体大小(如类型渐变指南中所推荐)会创建内容的结构和韵律感。如果有多个元素在类型渐变方面使用相同的字体大小,且传达不同类型的信息,那么考虑使用颜色和字号来建立信息层级。以下示例显示如何使用大小、颜色和字号来创建这样一个层次。

字号和信息层次的示例

有关字体(如大小、颜色和字号)的最佳实践的详细信息,请参阅文本和版式指南和清单

内容的新鲜感

在新闻方案中,务必使你的应用内容保持最新。让我们看一下向用户指示新鲜感的元素。

上次更新内容的时间

向用户显示“上次更新时间”信息可使用户相信你的资讯应用的可靠性。在画布上采用不引人注目的方式显示有关上次更新的信息。该信息应该采用类型渐变的第三个信息样式 (9-point) 显示。 下面提供了一个示例。

演示内容新鲜感的示例

文章发布时间

显示文章发布时间是使用户了解他们所读内容新鲜感的另一个常用方法。对于此类时间戳,使用第三方信息类型渐变样式并使用颜色和字号将其与布局中使用同一类型渐变的其他内容区分开来。

刷新内容

资讯应用应该始终显示最新的内容。为了确保你的应用中的内容最新,需要找机会下载数据。例如,当用户阅读某篇文章时,为中心页下载新内容,以便当用户返回该页时,它能够保持最新。 但是,当用户正在使用无线移动连接时,不要在后台下载数据,因为当漫游或使用移动宽带时,应用应该最大程度减少后台数据使用。

此外,确保你的应用可以在内容不可脱机使用时通知用户,从而处理脱机方案。

如果你的应用需要更新用户当前所在页面中的内容,请在画布顶部区域指示更新进度,如进度控件指南和清单所述。 此外,可使用动画插入新内容以及从画布中删除旧内容,如列表动画指南和清单所述。下图显示了图像顶部具有进度条的示例。

进度条的示例

如果你的资讯应用在一段时间内未更新其内容并且用户切换到了该应用,则考虑使旧内容变暗并在画布上显示进度以指示正在更新很多内容。

确保即使在更新内容时应用也会进行响应。 此外,如果连接信号较弱,请确保设置一个超时值并且显示应用的脱机 UI。下图显示了更新期间变暗的中心页内容。

显示正在更新内容的示例

已连接且处于活动状态

动态磁贴和通知能够在用户位于“开始”屏幕上时显示新内容。通过使用这些功能,你可以与用户建立联系并且通过活动使你的应用活跃起来。

磁贴和通知

在磁贴上显示最新的新闻头条和重大新闻可重新吸引用户并且当他们突然注意到应用磁贴上令人感兴趣的新闻头条时会继续将他们吸引到你的应用中。下面是显示新闻标题的应用磁贴的示例。

你的应用磁贴如何吸引用户的示例

使用户能够将不同的新闻类别磁贴固定到“开始”屏幕,这样用户便可以查看为这些类别定制的通知并且可快速访问他们感兴趣的特定新闻类别。 这是将用户再次吸引到你的应用的另一个方法。

如果你允许用户选择加入重大新闻的 Toast 通知(即使在你的应用未运行时也会显示),那么应用可以在最新新闻方面使热心用户保持最新并且将他们吸引到你的应用中。 这应该是一个选择加入设置,用户可以借助通过“设置”超级按钮访问的应用设置来启用该设置,因为未经请求的通知可能会让未明确表示对查看重大新闻的 Toast 感兴趣的用户烦恼。 下面是 Toast 通知的示例。

Toast 通知的示例

漫游

由于大多数人都不止有一台 Windows 电脑,因此你的资讯应用可以通过在他们的所有 Windows 电脑之间提供一致的用户体验来为用户提供他们所期望的体验。你可以在他们的所有电脑之间漫游应用设置、文章书签、收藏的新闻类别、阅读首选项以及你的应用中对用户有用的任何其他数据。若要了解漫游应用数据的最佳实践的详细信息,请参阅漫游应用程序数据指南

窗口大小调整

Windows 8.1 可让用户将窗口大小重新调整至任意大小,甚至到最小宽度,以及将多个应用并排放在屏幕上,支持用户执行多个任务。 将应用设计为可以在较窄宽度中很好使用是提高应用在屏幕上的时间,从而使用户使用时间较长的最好方法。这可让用户在使用应用的同时执行多个任务,这样,即使他们在做其他事情也可以将你的应用保留在屏幕上。

用户调整你的应用大小的原因有多种。或许新闻文章内有传出的链接,而且用户希望在其浏览器中启动新链接而不离开新闻文章。或许用户只是希望你的应用旁边的其他应用变大些。无论用户出于哪种原因调整你的应用,一定要使调整操作不会导航而且不会失去用户刚才正在阅读的文章。

当用户将你的应用调整为高度大于宽度时,请考虑将页面流调整为垂直平移。有关窗口大小调整的信息,请参阅窗口大小调整和屏幕缩放指南

窄宽度资讯应用的示例

初始屏幕

如前所述,资讯应用必须经常从 Web 下载新鲜的内容。若要使你的应用速度更快并且快速响应,请不要等待每个类别的所有图像均下载完毕后再显示登录页;等待会使用户失去耐心。下载完文章磁贴后就向用户显示应用的中心页,然后异步加载图像和其他数据。

以较短的时间等待显示中心页时,显示初始屏幕以及通知用户你的应用正在下载内容的消息。下面提供了一个示例。

初始屏幕示例

Windows 应用商店应用的命令设计
认识 Windows 应用商店应用
Windows 应用商店应用的导航设计
触摸交互设计
Windows 应用商店应用的 UX 指南

 

 

显示:
© 2017 Microsoft