设计 Windows 应用商店用户体验

设计 Windows 应用商店用户体验

  • Comments 0

我们利用最近的某些活动机会,演示了部分应用商店体验 - 这些活动包括:我们的 //BUILD/ 大会、应用商店预览活动以及上周的 CES。我们认为,现在正是介绍应用商店客户的浏览和搜索目录以及在 Windows 8 中更新和漫游应用的全面体验的大好时机。Jonathan Wang 是我们应用商店客户团队的项目经理,他将会介绍应用商店的各项元素以及我们的设计动机。

-- Antoine


当我们着手设计 Windows 应用商店的时候,我们拥有一些设计目标和原则,它们引导我们实现我们的最终体验。我们应用商店设计的基本构建基块确保人们可以很容易地发现并迅速获取应用。虽然这是比较明显的目录或市场目标,但是,当目录的大小和多样性像我们期望的那样在 Windows 应用商店中快速增长的时候,它实际上非常具有挑战性。

在这篇博文中,我将向您分解介绍应用商店各主要部分:登录页面、编辑主题页面、数据生成列表、应用一览页面、搜索、浏览、安装和更新体验。我将讨论这些用户界面之间的关系,以及我们如何应用 Windows Metro 风格设计语言实现高效查找应用这一目标。

应用商店分解图显示了链接到编辑、应用说明和类别页面的应用商店登录页面。编辑和类别页面也链接到应用说明页面。Windows 应用商店分解

设计为用于查找的登录页面

我们在以前的博文中提到,我们应用商店的主要设计原则之一是设计用于查找。我们基于内容第一,框架屈居其后的概念构建了 Windows 8。应用商店登录页面含有最少的框架成分,可将应用推到最前沿,让应用的品牌和个性吸引您的眼球。

应用商店/聚焦类别,包含 Evernote、Cut the Rope、eBay 和 Paintplay 应用,另加有关推荐应用的编辑内容;游戏类别包含有关推荐游戏的编辑内容,再加上 2 个游戏应用
Windows 应用商店登录页面

在应用商店登录页面上,我们将继续展示全新和令人兴奋的内容,经常性变化,让消费者期望在应用商店中始终有更多的东西去探索。在登录页面中,将特色内容与导航内容集成在一起(如类别和特色应用列表)。我们的可用性实验室和个人消费者访谈的调研表明,人们更多地会倾向于只从当前应用商店中搜索他们想要的东西,因为大多数浏览经历并不十分吸引人。因此,我们设计了一个登录页面,将我们的特色内容、数据驱动列表和类别一览集成到一个具有凝聚力和吸引力的浏览体验中。

导航简单而且符合 Windows 8 Metro 风格的用户界面,因此,Windows 8 的用户会感觉熟悉而且很容易在应用商店中畅游。应用商店类别会出现在屏幕的上方,显示每个类别中具有特色的应用。要想浏览,您只需用手指轻击、向左或向右平移即可,在应用商店的整个类别中和总体宽度内很容易地看到新的和有趣的应用。如果您感兴趣,只需在类别名称上轻轻一击,还可以深入查看一个特定类别中的应用。

应用商店的水平长视图,具有下列类别:聚焦、游戏、娱乐、图片、音乐和视频、书籍和参考、新闻和天气、生活方式 水平滚动以查看更多类别(点击图片放大)

在许多新的应用商店类别中,我们将展示按照各种因素编辑选取的一系列应用,包括它们是否在平台上发挥了巨大作用或者充分说明了 Metro 风格设计原则。如果存在某个特别主题元素能链接到我们想展示的多个应用,我们将创建一个从登录页面链接来的特别“主题”页面,以展示这些应用。客户还将能够查看最流行的应用的特色列表,以及我们所认为的每个类别中最出色的应用。我们将展示由具有良好势头的“后起之秀”开发商提供的应用,以及那些由具有完善的开发高品质应用记录的开发商创建的应用。最后,我们还将根据消费者的以往购买历史记录提供应用方面的建议。

为了对我们的类别有所感觉,并且更好地了解您可在应用商店中发现的各种类型的应用,您可以使用捏合手势缩小并查看类别的宽度,然后点击跳转到某一特定类别。从“开始”屏幕即可使用该手势。我们把这个手势称为“语义式缩放”,因为它允许您放大或缩小,从而看到页面上更多或更少的详细内容。应用商店缩小的视图可立即展示全部应用类别,即使这个目录很大而且支持各种各样的类别,也能确保消费者获得高效的导航。即使目录和类别扩展之后,这种设计也有助于确保高效的导航。我们使用标准的 ListView 控件,以及使用 HTML 和 JavaScript 的 Metro 风格应用的开发人员商可获得的语义式缩放控件,来构建登录页面。

显示应用商店登录页面,包括聚焦、游戏、娱乐、图片、音乐和娱乐缩小以便查看更多类别

鉴于类别众多,缩放真正改善了应用商店的平面导航结构,这是 Windows 8 中 Metro 风格用户体验设计的核心架构元素之一。

搜索和浏览应用商店

搜索已经成为用户界面的一个非常重要的组成部分,是目前消费者在网上商店中发现所要购买东西的最常见方法之一。Windows 应用商店履行了搜索合约,您可以通过点击“搜索”超级按钮在您使用的任何应用中进行搜索。这便于您在打开应用商店应用后搜索新的应用。甚至无需启动应用商店,我们也能够轻松搜索应用商店。

查看天气应用,使用右侧的搜索窗格,在应用商店中设置搜索“数独”从 Windows 中的任意位置搜索应用

如果您在浏览网页或使用另一个应用时碰巧想到一种应用,只需点击“搜索”超级按钮、输入您的搜索词、然后选择应用商店查看您查询的搜索结果。

在应用商店中您将使用相同的用户界面进行搜索,这样您会以统一的方式获得相同的功能。

应用商店主页,搜索窗格位于右侧,设置为在应用商店中搜索“intern apps”
在应用商店中使用搜索

一旦您开始键入,便会在搜索窗格中立即出现文本建议。对于大多数人而言,这是一个有用的快捷方式,在使用触摸键盘时则尤其有用。如果某条文本建议是一个应用,它会显示一个“推荐”结果,点击它会直接将您带到应用列表页面,而无需先进入搜索结果页面,因此在消费者和应用列表页面之间的步骤最少。即使在搜索建议中,应用的品牌图标也提供即时识别。

如果您并未想到某个特定的应用,输入了较为一般的搜索查询,我们将带您到达一个搜索结果页面。

“intern apps”的结果显示 10 个应用搜索结果页面

从这个页面,您可以浏览按相关性初步排序的结果。您还可以按价格、最高平均用户评级和发行日期等不同的属性进行排序。为了减少结果的数量,您可以按类别或价格进行筛选。

我们的类别视图使用相同的设计模型,同样将体验简化为最少、最有效的理念,以提高查找能力。点击登录页面上的类别标题便可访问这个类别页面。这个视图允许您随意浏览该目录的深层内容。我们将类别页面设计成与搜索结果页面非常相似,提供同样丰富的筛选和排序选项。而且,和登录页面和搜索用户界面类似,类别内的导航超级简单 - 没有分页;连续滚动即可看到更多应用。

游戏类别,包含 28 个应用,以及筛选器:所有价格,免费、免费试用和付费。
类别页面

应用一览页面

应用一览可使消费者了解他们需要知道的关于应用的所有信息(在此,开发商描述他们应用的亮点,并证明应用是消费者所需要的)。

Cut the Rope/应用商店 > 游戏 > 填字游戏/***** 平均评分 (1023)/1.49 美元/按钮:购买/试用/应用的图像和说明
应用一览页面让应用品牌绽放光彩

为了切实彰显应用的个性,应用一览页面使用来自应用包的视觉元素实现应用的品牌颜色和标志。除应用说明和功能列表外,您还可以使用平均用户评级和用户提交的评论判断该应用的品质,以及此应用是否满足您的需求。您可以翻阅屏幕截图,它们已通过 FlipView Object 控件实现,开发人员亦可使用此控件。给予屏幕截图极其突出的位置,因为对许多人来说,视觉效果最好地描述了应用。应用一览还将向您展示年龄评级和所需的应用权限列表,比如访问位置传感器或您的文档库。

通过我们桌面应用认证的桌面应用还可以有应用一览页面。通过搜索和浏览可以在应用商店中发现这些内容,其中包括一个应用开发商的链接,这样消费者就可以在那里购买这些应用。

Contoso/从开发商处获得应用/进入开发商页面(链接)/应用概述
桌面应用一览页面

安装应用

在 Windows 8 上安装应用简单、快速而且可靠。

假设您已经登录到 Windows 应用商店,只需在应用一览页面点击即可安装免费和试用应用。就是这样。对于付费应用,我们将要求您提供密码,以确认您的购买。如果您不想每次购买时都输入您的密码,我们有一个关闭此安全步骤的设置,但是我们认为有孩子的那些用户会喜欢这个为非有意购买设置的小障碍。

我们坚信,帮助用户发现有用的应用程序可以为用户提供更贴心的服务,因此我们清醒地意识到,当用户开始安装应用程序之后,我们应该让用户继续其应用程序发现之旅,而不应该打断这一过程。我们认为您没有必要盯着进度条,数着逝去的每一秒钟。同样,也不会让您在刚购买应用后停留在应用一览页面上无所事事。相反,只要安装一开始,我们就将您带回到您原先查看的页面,这样您就可以继续您的购物体验;在很多情况下,您先前查看的是登录页面、类别页面或另外一个强烈推荐试用应用列表。我们的实验研究证实,人们喜欢获得一个应用、然后继续发现更多应用的延续性。

您仍然可以通过进度指示器看到安装正在进行,我们还将您正在安装的应用的图块添加到“开始”屏幕。而且,如果在安装过程中您确实想了解安装进度,您可以点击进度指示器查看详情。

安装详情页面列出四个应用,每个应用均显示进度条和“下载中...”
查看正在安装的应用

当安装完成后,一则通知会告诉您此应用已就绪。点击此通知将启动这个应用,这样您就可以在它就绪后立即开始使用。这个新应用的图块始终在您的开始屏幕末端显示,您可以轻松地将它从此处移动到您喜欢的任何地方 - 因此,您可以随心所欲地组织您的开始屏幕上的各个应用。

更新应用

我们也确保更新是一种轻松的和可预见的体验。我们会每天检查一次您所安装的任何应用是否有更新。然后,应用商店的图块将显示可用更新的数量,向您明确指出,在应用商店中存在着待处理事项。

当您到达更新页面时,只需点击一个按钮即可更新您的全部应用。所有更新均自动选择。我们鼓励做到,一旦开发商提供便及时更新所有应用。

应用更新/ 8 个可用更新您可以快速而轻松地安装应用更新

安装更新的速度非常快 - 当您的计算机处于闲置状态时,我们将在后台择机下载(但不安装)这些更新,而当您位于对产生数据流量进行收费的移动宽带网络时,我们确保不这样做。当然,如果您不想自动下载更新,你可以在应用商店设置中关闭这个功能。更新过程开始后,我们就将您带回到应用商店中的先前页面,这样在安装更新的同时,您还可以浏览新的和有趣的内容。

重新获取应用

我们注意到您可能有多台电脑并且可能想在每台电脑上使用这些应用,您可以在总共五台 Windows 8 电脑上轻松安装和运行您的所有应用。每当您在一台新设备上安装一个应用时,这台设备便被添加到允许运行该应用的设备列表。对于第六台设备,如果您想在当前设备上安装应用,系统会提示您删除您的一台设备。

您的应用/显示 9 个应用查看您的所有应用并重新安装

我们还允许您按已经安装在特定设备上的应用进行快速筛选。这样,可以轻松地获得一台设备上的应用并安装在另外一台设备上。事实上,如果这些应用已经实现了漫游并且您有一个连接帐户(如果您使用 Windows Live ID 登录到 Windows8),还可在这些设备上保存各个应用的设置和状态。

达成适当的平衡

设计 Windows 应用商店时,我们的设计试图在优化通过策划内容查找偶然发现的应用以及消费者能够轻松发现他们直接搜索的应用之间达成平衡。我们一直通过强调应用一览中每个应用以及应用本身的品牌图标和颜色来吸引消费者。发现、安装和更新应用都设计得尽可能简单快捷。由于对于消费者而言,应用的发现过程将比以往任何时候都更加容易,我们认为新的 Windows 应用商店为开发商提供了有史以来最大的机会。

Jonathan J. Wang


请下载此视频并在您常用的媒体播放器中进行观看:
高质量 MP4 | 低质量 MP4

  • Loading...
Leave a Comment
  • Please add 1 and 2 and type the answer here:
  • Post