运动应用

Applies to Windows and Windows Phone

不论是使狂热的球迷能够了解最新的体育新闻,还是帮助运动员改善他们在球场上的表现,运动应用能够对用户产生一定影响。诸如磁贴、语义式缩放、搜索和“共享”合约等 Windows 功能在设计吸引运动爱好者的应用时尤其有用。 本文简要介绍了这些功能并提供了大量的示例,来说明现有的运动应用如何使用它们交付出色的用户体验。只需滚动一下,即可获得新的运动应用灵感。

必应 Bing 运动应用的主页面

运动应用的类型

下面是一些常见的运动应用类型:

ESPN 应用的主页面

新闻、信息和视频

这些应用以文章、视频和幻灯片的形式来提供最新的体育新闻。内容会定期更新并且通常在应用的首页提供。例如,打开 ESPN 应用后,你会立即沉浸在最新的体育内容中。可以从 Windows 应用商店(ESPN、Sports Illustrated、NASCAR 和 Yahoo!)中看到这些以提供新闻为主的运动应用。运动和 THE Football 应用。

Chicago Blackhawks 应用的主页面

球迷最爱

这些应用致力于使球迷对某个特定运动团队感到激动和兴奋。它们提供关于特定团队的新闻、照片和视频内容。Chicago Blackhawks 应用就是一个很好的示例。此处是应用的登录页面,它将你带回到黑鹰队赢得斯坦利杯这一具有历史意义且值得骄傲的时刻。 Seattle Sounders FC 和 AC Milan 是另外两个球迷最爱的 Windows 应用商店应用示例。

NFL Final Fantasy 应用使用图表来比较球队的表现数据。

工具和实用工具

此类运动应用可以执行特定的功能,如比较球队数据、教授用户特定的运动技能或允许用户参与某个梦幻联赛。这些应用具有更为线性的导航模式,可引导用户完成某个特定的任务。请参阅 Windows 应用商店中的 Decision Maker 应用、Winchester Ballistics、One Basketball 或 NFL Fantasy Football 2013 以获取灵感。

 

使用磁贴和通知来吸引用户

Windows 8.1 为你的应用提供了多种吸引用户的方式,即使应用未运行。例如,磁贴可以将实时动态的信息带到“开始”屏幕。动态磁贴可以显示用户喜爱的团队获选新秀的简讯或显示实时分数更新。你的应用还可以提供由用户启用的通知以确保体育爱好者不会错过比赛。

“开始”屏幕上具有不同大小的运动应用磁贴

为“开始”屏幕创建一个磁贴,以清晰地展示你的应用。在此屏幕截图中,你可以看到磁贴呈现四种不同的大小:小、中、宽和大。 用户倾向于将设计良好的磁贴放在其“开始”屏幕的首要位置来鼓励其经常使用。若应用的磁贴不是十分具有吸引力,则应用可能在“开始”屏幕上无法引起注意,致使其更容易被遗忘。切勿低估一个极具吸引力磁贴的作用。

动态磁贴:体育世界的节奏极为迅速,赢得比赛、季后受伤或有影响力的选秀可能就发生在一瞬间。借助动态磁贴,你的运动应用可以使球迷了解其喜爱的球队的最新头条,即使应用未在运行也是如此。考虑在你的动态磁贴上显示爆炸新闻、分数更新或赛事提醒。请参阅动态磁贴获取更详细的概述,或参阅 Guidelines for tiles and badges 以了解详细信息。

动态磁贴是必应 Bing 运动应用体验中重要的一部分。在此处应用的动态磁贴在“开始”屏幕上分享了一条头条新闻和一张图片。

动态磁贴显示了头条新闻和足球运动员的图片

辅助磁贴:球迷们通常寻求便捷的方法来跟踪他们喜爱的球员、球队和联赛。使用辅助磁贴帮助狂热的球迷立即获取他们最关心的信息。如果你的运动应用支持辅助磁贴,则用户可以在你的应用中将特定内容的快捷方式直接固定到“开始”屏幕。想要了解更多信息?请参阅 Guidelines for secondary tiles辅助磁贴概述获取更详细的摘要。

例如,在 ESPN 应用中,Toronto Blue Jays 球迷可以将球队的统计数据页面固定到“开始”屏幕。由于此内容被设计为可固定,球迷可以从应用栏(如下面的屏幕截图中所示)的底部单击固定图标。

显示 ESPN 应用的棒球队页面上的顶部和底部应用栏的屏幕截图

在单击固定图标后,用户确认她希望将磁贴固定到“开始”屏幕。

当用户想要将应用的某个页面固定到“开始”屏幕时,将显示弹出窗口。

她按下了“固定到‘开始’屏幕”按钮"",新的辅助磁贴显示在“开始”屏幕上。她将新的磁贴移动到其余运动应用的附近。现在,她的“开始”屏幕有两个 ESPN 磁贴:一个用于常规内容,另一个新的辅助磁贴可将她直接带到最喜爱的球队的页面。

“开始”屏幕上具有不同大小的运动应用磁贴

辅助磁贴使这位 Blue Jays 球迷只需单击一下即可访问她所关心的统计数据。如果你拥有用户可能希望直接访问的内容,则将它们变为可固定!

磁贴大小调整:用户可以更改磁贴的大小,因此请确保你的磁贴在应用支持的所有磁贴大小上都外观良好。针对各个磁贴大小自定义磁贴图像。针对小、中、宽的磁贴大小,该磁贴的设计有所不同。

SofaScore 应用的小、中和宽磁贴

由于 Windows 应用商店应用可以在所有类型的设备上运行,因此请确保提供磁贴图像的比例缩放版本,以便它们在以下屏幕分辨率上可以清晰显示:

  • 1.0 = 1024 x 768 像素
  • 1.4 = 1440 x 1080 像素
  • 1.8 = 1920 x 1440 像素

有关磁贴大小的详细信息,请参阅磁贴和 Toast 图像大小。希望了解关于缩放的更多信息?请参阅 Guidelines for scaling to pixel density

Toast 通知:体育活动随时会发生。动态磁贴在使球迷从“开始”屏幕了解新的体育活动和体育进展情况方面非常出色,但是如果用户需要更为直接的提醒,你的运动应用可以提供 Toast 通知。不论 Toast 是提醒用户新的比赛要开始了,还是其喜爱的球队赢得了世界大赛,用户都可以通过单击该 Toast 打开应用并获取详细信息。

对 Toast 感到好奇?请参阅 Guidelines for toast notifications。有关更深入的说明,请参阅 Toast 通知概述

来自 SportsCenter 应用的 Toast 通知

此图像显示了来自 SportsCenter 应用的 Toast 通知。请注意,Toast 显示在屏幕的右上角。

使用语义式缩放以创新的方式显示内容

通常,运动应用在单个页面上拥有大量高质量的内容。如果应用包含各种不同重大体育事件的新闻报道,登录页面会变得十分拥挤。语义式缩放是一种比较灵活的方式,可用来组织具有较多内容的页面。此功能将内容折叠在逻辑组中,使用户能够更好地理解所有可用的内容并作为访问其所需的特定内容类型的方式。

Sports Illustrated 应用使用语义式缩放来确保其内容易于管理。首次打开应用时,用于可以平移至右侧以查看应用的所有内容。下面的屏幕截图显示了默认视图。

Sports Illustrated 应用内容的默认视图

但是,查看所有可用内容将需要大量的平移操作。要获取可用内容的概览,用户可以使用语义式缩放。当用户使用触控笔势或在滚动鼠标滚轮的同时按 "Ctrl" 键进行缩放时,内容将组织到不同的类别当中,并附带有用的标题和缩略图。

用户使用语义式缩放进行缩小后的 Sports Illustrated 应用

现在,用户可以轻松地浏览内容并导航到特别感兴趣的部分。请参阅语义式缩放获取其他示例和参阅 Guidelines for semantic zoom 获取更多深入信息。

使用中心使球迷身临其境

体育中充斥着大量的激情瞬间、胜利时刻和难忘场面。中心控件将"展示"图像前置和居中放置在你的应用中。展示图像是大型的高分辨率图像,它显示在登录页面上来欢迎用户并吸引他们阅读你应用中的新闻报道。

此处,Chicago Blackhawks 应用便将其球队最荣耀的时刻显示在其展示图像中。用户打开应用时,这是他们将首先看到的内容。

用户打开 Chicago Blackhawks 应用时将看到的大型图像的屏幕截图

必应 Bing 运动应用在其展示图像中显示最新的头条新闻。照片可以吸引用户的注意力并展示从文章中截取的标题。

必应 Bing 运动应用的主页面

有关详细信息,请参阅中心控件指南

使用全屏内容最大程度地扩大影响

虽然存在一个与 Windows 应用商店应用轮廓相关联的网格,但这并不意味着应用的所用内容都必须恰好放入边缘内。可以随意地推送内容,甚至使其超出运动应用设计的边界。下面是超出网格线的内容示例。在应用的左侧,徽标和内容恰好放入边缘内。但是,展示图片从屏幕的顶部布满至屏幕底部以最大化视觉影响。

运动应用的登录页面通常是足球运动员准备踢球的大型图像。

下面的图像将 Windows 应用商店应用轮廓的边缘叠加在同一应用图像之上。大部分的应用内容在边缘界定的蓝色区域内仍显示良好,但是运动员的图像则超出了边界,一直延伸到屏幕的边缘。

与网格线重叠的运动应用的登录页面

Seattle Sounders 应用也使用了跨整个屏幕的图像来产生影响。具有视觉冲击力的背景图像与引人注目的精选内容重叠。甚至是屏幕最右侧的全尺寸广告也被设计为与 Sounders 的体验相贴合。

显示来自 Sounder FC 应用的宽屏幕截图

屏幕空间的各个像素对运动应用的设计而言都同等重要。

使用应用栏轻松导航

在应用的前方和中间位置展示内容,并防止控件在不需要时挡住屏幕。在 Windows 应用商店中,导航栏(也称为顶部栏)和底部栏均隐藏在看不见的地方,直到用户右键单击或从屏幕的顶部或底部边缘轻扫。许多运动应用使用导航栏来包含指向应用不同部分的快捷方式。例如,THE Football 应用的导航栏包含用于世界各地足球联盟的选项卡。它还使用户能够快速访问主页、新闻、视频和社交媒体。

THE Football 应用中的顶部应用栏

除了导航控件外,ESPN 应用还在导航栏中显示最新的比赛得分。用户可以从应用的一个部分跳至其他部分,获取当前比赛得分的快速概览,或者跳至更为详细的特定于比赛的应用内容,这一切操作均可在导航栏中实现。

显示比赛得分和导航控件的 ESPN 应用的顶部应用栏

底部应用栏通常包含与当前视图相关的控件。例如,包含具有大量文字的体育文章的页面可能在底部应用栏中有一个用于更改文字大小的按钮。Sports Illustrated 应用允许用户通过应用栏按照体育联盟来筛选内容。

显示 Sports Illustrated 应用中的底部应用栏的屏幕截图

使搜索更简单

体育世界中存在大量等待了解的内容。通过启用应用内搜索和使用“搜索”合约使你的应用可以从系统的任何位置进行搜索,让用户几乎可以随时获取他们所需的信息。

应用内搜索: 在应用中包含了一个搜索框,允许体育爱好者快速访问他们所需的内容。 如果你的应用中存在仅用于用户键入搜索查询的页面,你可以启用“键入即搜索”功能,以自动将任何键盘输入作为搜索查询。有关“键入即搜索”功能何时适用的详细信息,请参阅 Guidelines for search

有关现有运动应用中的搜索示例,请查看必应 Bing 运动应用。如果用户想要了解某个特定的球员,他可以打开应用并键入该球员的姓名。由于必应 Bing 运动应用在主页面上启用了“键入即搜索”功能,搜索框将打开并在用户开始键入时立即检测搜索。

必应 Bing 运动应用上的“键入即搜索”

必应 Bing 运动应用将在用户键入时优化搜索结果建议。

必应 Bing 运动将在用户键入时优化搜索结果

只需八个按键,用户即可获取其所需的信息。

必应 Bing 运动应用中球员个人资料的屏幕截图

“搜索”合约:使用“搜索”合约使你的应用中的体育内容在系统搜索中可用。如果你的应用加入了“搜索”合约,而且如果用户使用“搜索”超级按钮从系统中的任意位置进行搜索,他们将从你的应用中看到相关的搜索结果。对合约不熟悉?请参阅“超级按钮和合约”以获取更详细的概述,或者参阅应用合约和扩展以获取更详细的说明。

共享对运动的热爱

共享对比赛和球队的喜爱和共同感受的社区人员所关心的运动。Windows 借助“共享”合约使共享更为轻松。当你的应用共享了一个源,用户可以使用另一个已安装的应用(如,Twitter、Facebook 或电子邮件)从你的应用中共享内容。 共享不仅能使你的用户感到满意,还能巧妙地推广你的应用。请参阅超级按钮和合约获取可用于 Windows 应用商店应用的合约的概述。

如果你选择将你的应用注册为共享源,则用户可以使用“共享”超级按钮来随时共享你的应用中的内容。 例如,假设用户正在观看在 NFL Fantasy Football 应用上重播的比赛。她只是在昨天下午与一位好友讨论了此节目,并决定与他共享此视频。 她从屏幕右侧轻扫以显示超级按钮并选择“共享”超级按钮。

在 NFL Fantasy Football 应用中显示的超级按钮。

NFL Fantasy Football 向系统提供了用户想要共享的内容,Windows 显示了安装在用户的系统上可用于处理此类页面内容的应用列表。在此情况下,Twitter、Mail、Evernote Touch、Flipboard 和若干其他应用都能够共享此类内容。现在,用户可以选择她想要共享此信息的方式。不管她是想要写与它相关的推文、通过电子邮件向她的好友发送链接,还是与其他可用应用进行共享,她将永远不必离开 NFL Fantasy Football!

显示 NFL Fantasy Football 应用中共享浮出控件的屏幕截图

你可以自定义用户从你的应用共享内容时应用的表示方法。例如,你可以在默认情况下仅提供指向共享内容的链接,或者和该链接一起提供应用的徽标或共享内容的缩略图。

如果希望你的应用收到其他应用共享的内容,将你的运动应用设置为共享目标。关于如何将应用设置为共享源和/或目标的详细信息,请参阅 Guidelines for sharing content。关于代码示例,请参阅共享源示例共享目标示例

利用社交媒体:通过在你的应用中集成社交媒体,让用户可以感受到体育对话的脉搏。无论你想利用 Twitter 的力量还是要与 Facebook 同步以让用户了解他们的朋友对体育主题的看法,以富有创意的方式呈现社交内容都会产生很大影响。

这个来自 FX 的娱乐应用使用时间线显示社交媒体趋势。用户按照主题(在此案例中是按照电视节目)和社交媒体源过滤时间线。然后,该应用显示单独的帖子以及所有属于该主题的对话的时间线。

来自 FX 应用的时间线,它显示 Twitter 关于电视节目 Archer 的帖子

使数据具有交互性

体育世界充满了统计数据,它们对体育爱好者的体验有重要影响。无论用户要在一场梦寐以求的体育买卖中作出明智的决定、陶醉于最喜欢的曲棍球队的成就中,还是在 MLB 中比较两个指定击球手的 RBI,提供用于可视化数据以及与数据交互的创新方式都能使你的应用脱颖而出。

NFL Fantasy Football 2013 应用使用交互媒体使比赛统计数据生动起来。该应用显示了以时间顺序绘制的梦幻球队的成绩,并使用户可以单击图形的特定点以查看改变比分的比赛的短片。

NFL Fantasy Football 2013 中的交互式数据呈现

相关主题

概述和指南
认识 Windows 应用商店应用
Windows 应用商店应用的 UX 指南
超级按钮和合约
应用合约和扩展
中心控件指南
动态磁贴
动态磁贴指南
辅助磁贴概述
Secondary tile guidelines
Toast 通知概述
Toast 通知指南
窗口大小指南
平移指南
语义式缩放
语义式缩放指南
应用栏指南
共享指南
搜索指南
示例
动态磁贴示例
平移示例 (HTML)
平移示例 (XAML)
应用栏示例 (HTML)
应用栏示例 (XAML)
共享源示例
共享目标示例
搜索示例
语义式缩放示例 (C#/VB/C++)
语义式缩放示例 (JavaScript)
Toast 示例

 

 

显示:
© 2014 Microsoft