设计案例研究：将网站搬上Windows应用商店

几十年来，设计网站已成为常规惯例。对于 Windows 8，设计人员和开发人员可以使用他们熟悉的 Web 技术（包括 HTML5、级联样式表 Level 3 (CSS3) 以及 JavaScript）来构建 Windows 应用商店应用。下面，我们将探讨如何显示网站的功能从而使 Windows 应用商店应用更出色，并介绍一些使用 Windows 8 平台功能提供附加值、个性化以及更丰富体验的方法。

食品运输车网站和应用本文的基础是食品运输车网站，该网站允许用户浏览他们区域中的食品运输车，使用最新新闻保持更新内容并且提供食品运输车的用户评论。在后面部分的面向设计的案例研究中，我们探讨了重构网站核心功能并以 Windows 应用商店应用的形式对其进行扩展的方法。

我们迁移到 Windows 应用商店应用的目标是突出网站的最佳功能，同时保留网站的核心功能。我们确定 Windows 应用商店应用是允许用户浏览和查找附近运输车的最佳应用。下图显示了食品运输车网站 UI 的结构。下面，我们将介绍如何将这些 UI 组件转换为 Microsoft 设计风格。

1. 布局和导航
2. 命令和操作
3. 合约：搜索、共享以及设置
4. 触摸
5. 缩放和视图
6. 通知

布局和导航

聚焦内容，而不是版式

多数网站都使用已为大家接受的布局模式。主页设计包含支持导航（页眉和页脚）的 UI、实用程序组件（登录、搜索）以及队其他内容（博和新闻）的访问。这些都是常用的网站元素，但这些元素会使用户不关注最重要的任务：查找附近的食品运输车。设计 Windows 应用商店应用时，我们去除很多这样的 UI 和内容，因为它们未直接与应用的主要功能相关。

网站：

• 网站具有常见的两列式布局模式：主要内容在左侧，其他内容在右侧。
• 网站的焦点，即食品运输车，只占用了大约屏幕的三分之一。

Windows 应用商店应用：

登录页面上的所有空间都用于显示此应用的出色功能：查找附近的食品运输车。

示例：突出显示网站主页以及 Windows 应用商店应用主屏幕上的内容。

网站和 Windows 应用商店应用都在主页上显示了特色的食品运输车和类别。 由于网站上的空间有限，因此每个食品运输车类别都由一个图片表示。 当设计 Windows 应用商店应用主屏幕时，我们选择将更多食品运输车信息放在顶层，用于为用户提供更多上下文并且创建更吸引人的界面。

网站：

每个食品运输车类别都由一个图片表示。用户必须转到另一个页面才能看到该类别中的更多运输车，然后选择要查看详细信息的运输车。

Windows 应用商店应用：

每个类别都由一组图片表示，因此用户可以快速确定附近有哪些指定类别的运输车。用户可以从主屏幕直接转到运输车。

遵循 Windows 应用商店应用剪影并使用网格对齐

典型 Windows 应用商店应用剪影的最公认特性就是屏幕区域都专用于内容，上边缘、下边缘以及右边缘都留有很多空白。左边距以及从右侧的浏览项目承担视觉提示作用，内容横跨左右两侧。上边距和下边距提供可固定内容的视觉围栏。页面上的组件对齐到网格，以表现层次结构。

示例：Windows 应用商店应用上设计的食品运输车应用轮廓和网格。

红色基准显示页面上的每个元素如何对齐到网格（请注意，每个单元为 20 个像素）。

A.在整个应用中上边距和左边距一致。
B.我们使用一致的边距来分隔不同的食品运输车类别，如“特色运输车”、“我附近的运输车”和“亚洲运输车”。
C.我们使用一致的边距来分隔运输车类别中的图片。该边距小于食品运输车类别边距，目的是表现页面布局层次结构。
D.每个食品运输车类别的组标题也对齐到网格。

使用直接操作进行导航

在网站上，顶部导航栏和页脚的导航元素是重复的。导航元素是始终显示的并且始终位于视图中。我们在 Windows 应用商店应用中设计了与内容直接集成且用户不需要时将其隐藏的导航元素。

示例：导航到网站和 Windows 应用商店应用上的特殊运输车。

网站：

A.用户导航到网站上的不同类别页面，以查看全部运输车类别。
B.然后，用户选取一个类别（例如“烤肉食品运输车”）并进入该类别。
C.用户最后可以从所选类别中选择一个运输车。

Windows 应用商店应用：

A.主屏幕包含一个由各个内容组组成的中心页面：特色运输车、我附近的运输车以及类别视图。
B.用户可以使用触摸在任一方向平移，以查看位于主屏幕上的不同食品运输车类别。
C.由于每个中心都重点介绍类别中的几个运输车，因此用户可以点击某个运输车直接转到该运输车的页面，或者他们可以点击类别组标题文本（如“亚洲运输车”）来进入类别页面。

命令和操作

在应用栏中保留应用命令和操作

网站常用的临时命令，可以以用户操作的形式显示在内容中。例如，在我们的网站上，每个食品运输车页面都包含一个链接，通过该链接用户可以上载给定运输车的照片。这些上下文中的操作在每个运输车页面上都是重复的。

按照 Windows 应用商店应用设计的“内容先于版式”方法，我们将所有上下文操作放置在 应用栏中，将常用的控件放置在系统中。此外，常用命令位于边缘附近以方便访问使用。通过这些设计原则，应用设计图面便不会因控件而显得杂乱，而且无论用户所处位置如何，都可以从屏幕底部或顶部轻扫应用栏查看相关操作。所有 Windows 应用商店应用都可以使用应用栏作为其命令。由于用户将熟悉应用栏交互，因此这样也会增加应用的可用性并且使整个系统看起来更有凝聚力。

示例：将食品运输车照片上载到网站和 Windows 应用商店应用中。

网站：

• 临时命令。用户操作位于内容之中。

Windows 应用商店应用：

• 默认情况下，应用栏处于隐藏状态，目的是为用户提供沉浸式体验。
• 用户可以从屏幕底部或顶部轻扫来访问上下文操作。操作因用户处于应用中的位置或所选择的内容而有所不同。

合约

食品运输车网站的全局操作（如搜索和登录）遵循常见网站惯例。这些操作永久地固定在网站的右上角。设计 Windows 应用商店应用时，对于这些全局操作，我们不包含自己的 UI。而是使用系统的内置功能，包括搜索、共享和设置合约。由于这些 UI 组件并不始终位于屏幕上，因此应用画布更加干净，从而为内容提供了更多空间。

使用“搜索”合约集中搜索体验。

与大多数网站一样，食品运输车网站在每个页面上都有一个搜索框，并且搜索范围仅限该网站。这意味着用户必须首先进入食品运输车网站才能进行搜索。

设计 Windows 应用商店应用中的搜索体验时，我们使用了搜索合约。因此，屏幕上没有永久的用于搜索的版式。“搜索”超级按钮提供对搜索功能的访问，并且用户可以在应用的任意位置调用或从系统中的任意位置调用该按钮。

示例：使用网站和 Windows 应用商店应用搜索食品运输车。

网站：

• 在网站上始终显示搜索框。
• 显示搜索结果时，仍然提供所有网站版式。
• 用户始终需要首先进入网站，然后才能搜索食品运输车。

Windows 应用商店应用：

• 用户可以通过轻扫边缘来显示超级按钮并选择搜索，从而在应用的任意位置执行搜索。
• 默认情况下，选择食品运输车应用，因为用户当前位于此应用中。当用户开始键入时，应用在搜索窗格中提供搜索建议。这样用户便可以快速查看哪些术语产生了搜索结果。用户提交其查询（例如“烤肉运输车”）之后，应用显示搜索结果视图。
• 搜索结果视图非常干净并且仅用于搜索结果，没有不需要的版式。

示例：在应用之外搜索食品运输车（仅在 Windows 应用商店应用中可用）。

除了应用内搜索之外，用户还可以从应用之外进行搜索，方法是选择食品运输应用作为搜索目标。在此处的示例中，用户正在从开始屏幕搜索“烤肉运输车”。用户在搜索窗格中点击应用列表中的食品运输车应用，这会启动该应用并且完成搜索查询。由于该食品运输车应用针对查找附近食品运输车进行了优化，因此用户只需点击一次即可完成搜索并且找到其所在区域的烤肉运输车。

使用“共享”合约可访问更多目标以及你关注的联系人

在食品运输车网站，用户可以通过电子邮件、Facebook 或 Twitter 共享有关特殊食品运输车的信息。共享选项经常在网站的很多地方都可以找到，它们靠近可以共享的内容。

有了 共享合约，共享方案确实点亮了我们的 Windows 应用商店应用。使用系统内置的“共享”超级按钮，不再需要在整个应用中显示共享按钮。用户可以始终在统一的位置找到共享选项，而不管他们使用什么样的应用。这种改变简化了设计和开发，原因是不需要连接用户可能希望使用的每个服务。将应用与“共享”集成之后，便与实现共享合约的每个 Windows 应用建立了连接。而不需要处理外部 Web 服务的 API 更改。

示例：共享食品运输车照片。

网站：

• 每个共享服务都有自己的按钮。
• 共享按钮遍布整个网站。

Windows 应用商店应用：

• 所有 Windows 应用商店应用中所有共享选项的位置都是一致的。用户可以在应用中的任意位置调用共享。
• 用户选择共享服务时，目标应用可以自定义 UI 窗格和品牌。

示例：仔细查看“共享”窗格。

Windows 应用商店应用：

• 已作为共享目标实现的任何应用都会出现在“共享”窗格的应用列表中。例如，Socialite、Tweet@Rama 或邮件。
• 用户可以共享应用支持的各种内容类型。例如，如果用户愿意，可以共享链接、照片或将信息保存到笔记应用。
• 常用的共享目标显示在顶部，以帮助用户快速完成共享工作流。

使用“设置”窗格

食品运输车网站具有一组实用功能，如“关于我们”、“登录”、“联系信息”以及“新闻稿”。这些功能根据常用的 Web 设计模式占据特定的屏幕区域，因此用户可以轻松找到它们。但是，它们分布在网站的不同区域上。配置和管理任务不是该 Windows 应用商店应用的焦点。使用 设置合约及其统一入口点，用户无需记住这些应用管理功能的位置便可以在需要时可靠地调用它们。

示例：在网站和 Windows 应用商店应用上设置选项。

网站：

• 诸如登录、关于我们、联系信息以及新闻稿等实用功能位于网站的不同区域。

Windows 应用商店应用：

A.设置选项全部位于“设置”窗格中的一个位置中。 B.用户可以在不离开其当前上下文的情况下在应用中的任意位置登录。 C.使用通知设置，用户可以指定他们希望收到的通知类型。这将替代网站新闻稿并且为用户提供了应用的实时信息。

使用文件选取器来访问各种位置的文件。

食品运输车网站鼓励用户上载其区域中运输车的照片。在 Windows 应用商店应用中使用 文件选取器可轻松复制该功能。文件选取器是一个全屏对话框，使用该对话框，用户可访问本地电脑、连接的存储设备或者通过 HomeGroup 连接的其他计算机上的文件和文件夹。用户也可以访问参与“文件选取器”合约的应用中的项。

示例：从本地文件系统上载食品运输车照片。

Windows 应用商店应用：

• 用户点击应用栏中的“上载”按钮即可打开文件选取器 UI。这是在用户希望访问文件时都会看到的统一的 UI 图面。
• 点击“文件”标题，用户会看到其中包含所有可用的文件位置的弹出窗口并且会导航到某个文件文件夹。
• 用户从文件夹和位于左下角的缩略图列表（显示所选择的照片）中选择显示多个照片。

触摸

对水平布局使用水平平移

请记住，食品运输车网站和 Windows 应用商店应用都是使用用户交互方法和人体工程学设计的。该网站主要是针对鼠标交互设计的，因此每个页面上的内容都是垂直布局的，用户可以使用他们的鼠标快速轻松地滚动到他们所需的内容。Windows 应用商店应用主要是针对触摸设计的，因此使用横向布局，例如大多数台式机和便携式电脑。水平布局优化了屏幕空间的使用。而且，对于用户来说，通过触摸在横向设备上进行水平平移比垂直滚动更舒适、更自然。

示例：在网站上和 Windows 应用商店应用主屏幕上导航内容。

使用横向滑动来选择对象

网站上的常用惯例是在多个对象旁边使用复选框，以指示多个选择。对于 Windows 8，用户可以通过垂直于平移方向在对象快速轻扫来选择列表或网格中的对象。选择对象时，会自动显示应用栏，以显示与该项相关的命令。

示例：在主屏幕上选择多个要固定到“开始”屏幕的食品运输车。

在应用登录页面上，用户轻扫以选取运输车时，会显示包含“添加到收藏夹”命令的应用栏，可以使用该命令将所选运输车标记为书签。该手势是可逆的，这样便使得在 Windows 应用商店应用中进行选择更加高效，从而用户可以放心浏览该应用。

使用收缩和拉伸来进行语义缩放

使用收缩和拉伸手势，用户可以快速浏览较长的内容列表。Windows 应用商店应用的登录页面显示了很多分组，包括特色运输车、我附近的运输车、亚洲运输车、烤肉运输车以及早餐运输车。用户可以在其上进行平移来查看更多内容，或者使用快速跳至特定部分的 语义式缩放。使用语义缩放控件，收缩即可缩小内容，以便全部显示当前视图中的所有部分。然后，用户便可以快速跳至列表的开头、结尾或者特定部分。缩小视图可以进一步设计为显示每个部分中感兴趣的内容或者有关某个部分的元信息（如每个类别中运输车的数量）。可以将它用于导航，而不是将导航元素持久保存在应用画布上。

示例：使用语义式缩放跳转至特定运输车类别。

网站：

• 用户必须导航到不同的页面才能看到所有类别。

Windows 应用商店应用：

• 用户可以在主屏幕上使用语义缩放来轻松查看所有类别，而无需离开该屏幕。
• 在语义缩放视图中，每个类别都由一个图片来表示。通过主屏幕即可提供所有类别，而无需进行平移来查看完整列表。

缩放和视图

为方向和屏幕大小设计自适应布局

我们设计的食品运输车网站布局非常灵活，足以适应不同的设备、屏幕大小、分辨率以及方向。与流畅的网站设计类似，Windows 8 计算机的范围从小型仅触摸的平板电脑到大型的便携式电脑和台式机。对应用进行设计，以便它在支持 Windows 应用商店应用的很多设备上看起来更出色，如果我们希望应用涉及更多客户，则这一点至关重要。

你可以对 Windows 应用商店应用开发应用很多网站设计原则。使用内置模板和控件，可以使在横向视图和纵向视图之间来回切换更加轻松便捷。当方向更改为纵向时，会在每个类别中显示更多运输车。同样，应用也会为了利用高分辨率监视器的其他屏幕空间在每个类别中显示更多运输车。

示例：不同设备上的食品运输车网站和 Windows 应用商店应用。

网站：

• 食品运输车网站针对不同的屏幕大小和构成因素来调整布局并进行重排。

Windows 应用商店应用：

• 采用纵向模式、横向模式以及在高分辨率屏幕上的 Windows 应用商店应用。我们使用额外的空间来显示更多内容。

使用辅屏视图来吸引用户

Windows 8 允许用户通过对齐应用旁边的另一个应用来执行多个任务。辅屏视图是提高应用在屏幕上的时间，从而使用户使用时间较长的最好方法。用户通过操作两个应用之间的分隔线可轻松切换主屏和辅屏，因此在调整大小时保留上下文非常重要。用户不应因调整应用大小而丢失应用状态。

示例：填充视图和辅屏视图中的 Windows 应用商店应用主屏幕。

• 左：位于填充视图中的食品运输车应用。用户可以并排使用天气应用和食品运输车应用。
• 右：在辅屏视图中，用户垂直平移即可获得更多内容，因为沿着较长的边缘进行平移会更舒适。这与完整视图中的水平平移（也针对沿着较长的边缘平移进行了优化）不同。

 

通知

使用磁贴进行持续和动态更新

食品运输车网站的用户可以访问网站来查看有关他们所在区域的新食品运输车或更改位置的食品运输车的新闻和博客。该网站还允许用户获取 Facebook 和 Twitter 上的食品运输车公告。但是若要实现这一目的，用户必须进入该网站才能查看新闻或注册获取更新。只有在用户断开关联内容后才能看到某些更新。

将此功能转换为 Windows 应用商店应用时，我们使用了磁贴和 Toast 通知为用户提供根据他们的需求定制的最新信息。开始屏幕上显示的磁贴即为 Windows 应用商店应用的大门。通过活动并提供为用户定制的全新个性化内容使用户感觉应用充满活力，因此用户更愿意使用此应用并且从中获得价值。即使应用未运行，也会继续显示此内容。

网站：

• 网站上最新新闻部分显示运输车的最新位置。
• 网站上的博客列出了新的运输车并且提供了有关食品运输车何时将处于指定邻域的提示。

Windows 应用商店应用：

• 食品运输车应用的主要磁贴显示用户附近有哪些食品运输车以及多久运输车会停在该位置。即使食品运输车应用未运行也可以更新磁贴，因此用户可以通过“开始”屏幕接收更新。
• 用户可以将其收藏的运输车（如芝士汉堡包运输车）作为磁贴固定在“开始”屏幕上，以接收关于该运输车的最新新闻。这为用户提供了高度自定义的功能，可根据其需求进行定制。系统提供了很多磁贴模板，应用设计人员可以从中选择以使实施更加便利。

对于临时的重要通知，使用 Toast

除了磁贴通知之外，也可以使用 Toast 通知来通知用户实时事件。与被动磁贴更新不同，Windows 应用商店应用中的 Toast 通知是将中断用户的重要更新。它们显示在屏幕的右上角，并且可以显示在系统中的任何位置。通常，在第一次运行应用期间，最好允许用户选择加入通知。如果适用，则在磁贴上显示最新的 Toast 通知，但这些通知仍然相关。

示例：用户收藏的食品运输车已更改位置。

用户已选择通过“设置”窗格接收 Toast 通知，以了解收藏的食品运输车何时更改其位置。

总结

基于现有网站构建 Windows 应用商店应用时，应始终提醒自己应用最擅长的功能。当你有了答案时，针对这个方案对你的 Windows 应用商店应用进行优化。 始终要记住内容重于版式：通过熟悉且直观的机制，使用系统中的内置命令（如共享、搜索、设置）来提供对常用功能的访问。不需要使用应用栏和语义缩放控件时，将命令隐藏在屏幕之外。使用动态磁贴和通知，以便用户继续通过你的应用获得价值，即使在应用未运行时也是如此。如果你执行了这些操作，则将获得一个引人注目且用户都非常喜欢的 Windows 应用商店应用，并且该应用可以帮助扩大你的业务。