生成复杂的通用 Windows 平台 (UWP) 应用

在 Microsoft 设计团队中，我们创建应用的流程由五个不同的阶段组成：概念、结构、动态、视觉和原型。 我们鼓励你采用相似的流程，并且在创造供公众享受的新体验时获得乐趣。

概念

关注你的应用

在规划你的通用 Windows 平台 (UWP) 应用时，不仅应该确定应用功能和使用群体，还要确定应用的优势。 每个出色应用的核心是提供坚实基础的强大概念。

假设你希望创建一个照片应用。 通过考虑用户处理、保存和共享其照片的原因，你将发现他们希望重温记忆、通过照片与其他人联系以及保护照片安全。 这些都是你希望该应用擅长的方面，你使用这些体验目标来指导你完成设计过程的剩余阶段。

你的应用是做什么用的？ 从广泛的概念开始并列出你希望用你的应用帮助用户完成的所有事情。

例如，假设你希望生成一个帮助人们规划其旅程的应用。 下面列出了一些突发灵感后拟定的创意：

• 获得行程中所有旅行目的地的地图，在旅行中随身携带这些地图。
• 查找你所到的城市中举办的特别活动。
• 要求旅行伙伴创建独立但可分享的必做活动列表与必看景点列表。
• 让旅伴编译其所有的照片，将其与亲朋好友共享。
• 视机票价格选择他人推荐的目的地。
• 查找目的地周围的餐馆、商店和活动的交易的综合列表。

你的应用的优势是什么？ 回过头来查看你的创意列表，看看有没有哪个特定方案引起你的格外关注。 挑战自己：删减列表，直到只剩下一个你希望重点关注的方案。 在此过程中，你可能舍弃大量不错的创意，但是这种否定对于最终选定一个最佳方案至关重要。

选定某一个方案后，确定如何通过一句话来向普通受众说明你的应用所具备的功能。 例如：

• 我的旅行应用擅长帮助多个好友共同创建团体旅行的行程。
• 我的锻炼应用擅长让朋友跟踪锻炼进展以及彼此分享成果。
• 我的杂货应用擅长帮助家人协调他们每周购买的杂货，以便他们不会少买或买重。

以上就是你的应用的“擅长”语句，你可以在生成应用时使用它来指导所作的设计决策和措施。 侧重于你希望用户在你的应用中体验的方案，注意不要将这些语句写成功能列表。 其重点应为用户将能够执行哪些操作，而不是应用将能够执行哪些操作。

设计漏斗

它对继续操作和进行开发（通过想出你满意的想法）很有帮助，甚至可能以一种独特方式将其投入生产中。 但是，假设你执行此操作，然后又产生了另一个有趣的想法。 不管两个想法的相对优势如何，你会很自然地坚持使用你已感兴趣的想法。 如果你能在该过程的较早阶段想到其他想法就好了！ 设计漏斗是一项可帮助你尽早发现最佳想法的技术。

“漏斗”一词源于其形状。 在漏斗较宽的一端，会涌入许多想法，每个想法都会被识别为低保真度的设计项目（草图或者可能是一段文本）。 如果此想法集穿过漏斗较窄的一端，则当表示想法的项目保真度增加时，会减少想法的数量。 每个项目都应仅捕获以下操作所需的信息：判断各个想法或回答特定问题（例如“这是有用的，还是凭直觉获知的？”）。 在该项目上投入更多的时间和精力。 某些想法会在测试时半途而废，你不会在意此问题，因为与必须判断该想法相比，你无需再在这些方面进行投资。 努力进一步移动到漏斗中的想法将相继受到高保真度处理。 最后，你将具有一个表示共赢想法的设计项目。 应用该想法的原因在于其优势，而不仅仅因为它是第一个想法。 你已竭尽所能设计了最佳应用。

结构

组织可使所有事情更容易

如果对概念满意，便可以准备下一个阶段，即创建应用蓝图。 信息体系结构 (IA) 为你的内容提供所需的结构完整性。 它帮助定义应用的导航模型，并且最终定义应用的标识。 通过规划内容的组织方式（以及用户发现此内容的方式），你可以在用户对应用的体验方面获得更好的主意。

好的 IA 不仅可以实现用户方案，还能帮助你构想起始关键屏幕。 例如，Audible 应用可直接启动到中心，该中心提供对用户的库、应用商店、新闻和统计数据的访问。该体验专注于使用户能快速地获取并享受音频书籍。 应用的更深级别侧重于更具体的任务。

有关相关指南，请参阅导航设计基础知识。

动态

执行概念

如果概念阶段有关于定义应用的用途，则动态阶段的一切均关乎于实现该用途。 这可以通过多种方法完成，例如使用线框绘制页面流（如何在应用中从一个位置移动到下一个位置以实现其目标），以及考虑在整个应用 UI 中使用的语音和单词。 线框是一种快速、低保真度的工具，可帮助你做出有关应用用户流的关键决定。

应用流应该紧密绑定到你的“擅长”语句，而且应该帮助用户实现你希望实现的单个方案。 出色应用的流程通常易于了解，且所需的工作量最少。 开始逐屏进行思考，就像第一次使用你的应用时来看待它。 当你针对你创建的页面定位用户方案时，你将准确给予用户他们所需要的内容，无需大量不必要的屏幕触摸。 动态也与动作相关。 正确的动作功能将决定从一个页面到另一个页面的流畅性和易用性。

有助于执行此步骤的常见方法：

• 概括流程：第一步做什么，接下来做什么？
• 细化流程：用户应如何使用 UI 来完成流程？
• 原型：通过快速原型对流程进行试验。

用户应当能够执行什么操作？ 例如，旅行应用“擅长帮助朋友以协作方式为团队旅行创建旅行计划”。让我们列出希望实现的流：

• 创建包含常规信息的旅行行程。
• 邀请朋友一同旅行。
• 参与朋友的旅行。
• 查看其他游客推荐的行程。
• 向旅行添加目的地和活动。
• 编辑朋友添加的目的地和活动并对它们添加注释。
• 共享可让朋友与家人关注的行程。

可视

无声胜有声

在建立了动态的应用之后，你可以使用适当的视觉修饰让你的应用绽放光彩。 出色的视觉不仅定义应用的外观，还通过动画和动作使用户获得生动的感觉。 你对调色板、图标和艺术图片的选择只是此视觉语言的几个示例。

所有应用都有其自己的独特标识，因此需要了解适用于你的应用的视觉方向。 让内容引导外观；不要让外观主宰内容。

原型

细化杰作

原型是设计漏斗（我们之前讨论的一种技术）的一个阶段，在该阶段中，表示你的想法的项目中开发的内容比草图多，但复杂程度不如完成应用。 原型可能是向用户显示的手绘屏幕的流。 运行测试的人员可能通过放置不同的屏幕或者在页面上粘滞或扯开部分 UI 来响应用户的线索，从而模拟正在运行的应用。 或者，原型可能是一个可模拟某些工作流的非常简单的应用，前提是操作员粘滞到脚本并按下右侧的按钮。 在此阶段中，你的想法将成为现实，你的辛苦工作将真正得到验证。 在对应用的各方面建立原型时，先花些时间修饰和细化最常用的组件。

对于新的开发人员，我们只能强调：创作卓越应用是一个迭代过程。 我们建议你尽早并经常建立原型。 就像任何创新性努力一样，最好的应用是经过大量试用和错误修正的产品。

决定要包含的功能

当了解用户需求并且知道如何帮助他们满足其需求时，你可以了解工具箱中的特定工具。 了解通用 Windows 平台 (UWP) 并将功能与你的应用需求相关联。 确保按照每项功能的用户体验 (UX) 指南进行操作。

常用技巧：

• 平台研究：了解平台提供的功能及其使用方法。
• 关联图：将流程与功能相连接。
• 原型：练习这些功能，确保它们符合你的需求。

应用合约 你的应用可以参与可实现广泛的、跨应用、跨功能的用户流程的应用合约。

• 共享 让你的用户将你的应用的内容通过其他应用与其他人共享，也接收来自其他人和应用的可共享内容。
• 播放到 让用户尽情享受从你的应用流式传输到用户的家庭网络中其他设备上的音频、视频或图像。
• 文件选取器和文件选取器扩展 让你的用户可以从本地文件系统、连接的存储设备、HomeGroup、甚至是其他应用加载并保存文件。 你还可以提供文件选取器扩展，以便其他应用可以加载你的应用的内容。

有关详细信息，请参阅应用合约和扩展。

不同的视图、外形规格和硬件配置 Windows 让用户获得主导权并将应用置于最前端。 你希望你的应用 UI 在任何设备上、在使用任何输入模式时、在任何方向中、在任何硬件配置下以及在用户决定使用它的任何情况下都光彩夺目。

触摸优先 Windows 提供唯一且独特的触摸体验，不仅仅是模仿鼠标功能。

例如，语义式缩放是一种可导航大量内容的触控优化方式。 用户可以平移或滚动内容类别，然后放大这些类别以查看更多更详细的信息。 使用此功能，你可以以比传统导航和布局模式（如选项卡）更可触、可视且信息化的方式来展示你的内容。

当然，可以利用一些触摸交互，如旋转、平移、轻扫等。 了解有关触摸和其他用户交互的详细信息。

有吸引力且新鲜 使用这些标准体验，确保你的应用感觉新鲜且吸引用户：

• 动画 使用我们的动画库使你的应用快速且流畅地提供给用户。 帮助用户了解上下文更改，并将体验与视觉转换联系在一起。 了解有关创建 UI 动画的详细信息。
• Toast 通知 通过 Toast 通知，使你的用户了解有关时间敏感或个人相关的内容，甚至可以在应用关闭时邀请用户返回你的应用。 了解有关磁贴、锁屏提醒和 Toast 通知的详细信息。
• 应用磁贴 提供新鲜和相关的更新来吸引用户返回你的应用。 有关此内容的详细信息，请参阅下一节。 了解有关应用磁贴的详细信息。

个性化

• 设置 支持用户通过保存应用设置来创建所希望的体验。 将所有设置合并到一个屏幕上，然后用户可以通过已熟悉的常用机制来配置你的应用。 了解有关添加应用设置的详细信息。
• 用户磁贴 支持用户加载自己的磁贴图像，或支持用户在整个 Windows 中将来自你的应用的内容设置为其个人磁贴，从而使你的应用更个性化。

设备功能 确保你的应用完全利用当今设备的功能。

• 邻近感应笔势 让你的用户通过实际接触设备来连接设备，带来多个用户实际距离非常近的体验（如多玩家游戏）。 了解有关邻近感应和点击的详细信息。
• 相机和外部存储设备 将你的用户与他们内置的或外接的相机相连，用于聊天、电话会议、记录视频博客、拍摄头像、记录周围的世界或进行任何你的应用擅长的活动。 了解有关访问可移动存储上的内容的详细信息。
• 加速计和其他传感器 如今的设备都带有若干个传感器。 你的应用可以根据环境光调暗或调亮屏幕、在用户旋转屏幕时重新排列 UI，或者对任何物理活动做出反应。 了解有关传感器的详细信息。
• 地理位置 使用标准 Web 数据或地理位置传感器的地理位置信息，有助于你的用户了解周围环境、在地图上定位或了解周围的人员、活动和目的地。 了解有关地理位置的详细信息。

我们再来看看旅行应用示例。 为了帮助好友共同创建团体旅行的行程，你可以使用以下一些功能（仅举几例）：

• 共享：用户可将即将进行的旅行及其行程共享到多个社交网络，与家人和朋友分享旅行前的兴奋之情。
• 搜索：用户可以从他人共享的或公开的行程中搜索并查找能包含在自己旅行中的活动或目的地。
• 通知：如果旅行伙伴更新了行程，用户会收到相应通知。
• 设置：用户可以根据自己的爱好来配置应用，例如哪些旅行应发送通知或允许哪些社会团体搜索用户的行程。
• 语义式缩放用户可以浏览行程的日程表，并放大具体行程来查看他们已规划的大量活动的更详细信息。
• 用户磁贴：用户可以选择与朋友共享旅行事宜时所要显示的图片。

确定如何用你的应用赚钱

你可以通过多种方式让你的应用赚钱。 如果决定使用应用内广告或促销来挣钱，则需要对 UI 进行设计以支持这一想法。 有关详细信息，请参阅赚钱规划。

为应用设计 UX

本步骤介绍了一些基础知识。 既然你已了解你的应用的优势，并且也形成了想要支持的流程，你可以开始考虑用户体验 (UX) 设计的基础。

应如何组织 UI 内容？   大部分应用内容可以按分组和分层形式来组织。 在对内容进行顶层分组时所选择的内容应与“擅长”语句所着重描述的内容相一致。

以旅行应用为例，可采用多种方式对行程进行分组。 如果该应用旨在探索有趣的目的地，则你可以根据兴趣（如冒险、沐浴阳光或浪漫休闲）来对其进行分组。 但是，因为此应用的重点是规划与朋友出行，所以最好按社会圈（如家庭、朋友或工作）来组织旅行日程。

选择内容的分组方式有助于你确定允许哪些页面或视图显示在应用中。 有关详细信息，请参阅 UI 基础知识。

应如何呈现 UI 内容？ 确定了如何组织你的 UI 后，你可以定义一些 UX 目标，这些目标指定你的 UI 如何生成以及如何呈现给你的用户。 在任何方案中，你都希望确保用户持续使用应用，并尽快从中发现乐趣。 为此，请确定需要首先呈现 UI 的哪些部分，并且在你花时间构建非关键部分之前，请确保这些要首先呈现的 UI 部分是完整的。

在旅行应用中，用户希望在应用中执行的首个操作可能是查找特定旅行行程。 若要尽快呈现此信息，你应该先使用 ListView 控件显示旅行列表。

在显示旅行列表后，你可以开始加载其他功能，如好友旅行的新闻源。

你需要哪些 UI 图面和命令？   查看之前标识的流程。 针对每个流程，创建用户要执行的步骤的大概提纲。

我们来看看“共享朋友与家人应遵循的行程”流程。 我们假设用户已经创建了一个旅行。 共享旅行行程可能需要执行以下步骤：

1. 用户打开应用并查看已创建的旅行列表。
2. 用户点击要共享的旅行。
3. 屏幕上显示旅行详情。
4. 用户访问某些 UI 以启动共享。
5. 用户选择或输入要与自己共享旅行的朋友的电子邮件地址或姓名。
6. 用户访问某些 UI 以完成共享。
7. 你的应用向已与用户共享旅行的人员列表更新旅行详情。

在此过程中，应开始了解需要创建哪些 UI 以及需要明确的其他详细信息（例如，为尚未使用你的应用的朋友起草标准电子邮件样本）。 也可以尝试略去不必要的步骤。 例如，或许在共享旅行之前用户实际上不需要查看旅行详细信息。 流程越清晰，使用越简便。

有关如何使用不同图面的更多详细信息，请查看。

流程应该是怎样的？ 定义了用户将执行的步骤后，你可以将该流程转变为性能目标。 有关详细信息，请参阅性能规划。

应如何组织命令？  使用流程步骤大纲来确定可能需要设计的命令。 然后考虑这些命令在应用中的使用位置。

• 始终尝试使用内容。  尽可能让用户在应用的画布上直接操纵内容，而不是添加作用于内容的命令。 例如，在旅行应用中，让用户通过在画布的列表中拖放活动来重新安排行程，而不是通过选择活动并使用“上移”或“下移”命令按钮。

• 如果无法使用内容。 如果你无法使用内容，请将命令置于以下某个 UI 图面中：

  • 在命令栏中：应将大部分命令放在命令栏上，命令栏通常是隐藏的，直到用户点击才可见。
  • 在应用画布上：如果用户位于仅具有单一用途的页面或视图上，则可以直接在画布上为此用途提供相应的命令。 这些命令应非常少。
  • 在上下文菜单中：可以使用上下文菜单执行剪贴板操作（如剪切、复制和粘贴）或适用于无法选择的内容的命令（如将图钉添加到地图上的某个位置）。

确定应用在每个视图中的布局方式。  Windows 支持横向和纵向，并支持将应用大小调整为任意宽度，从全屏到最小宽度。 你希望你的应用在任何大小、任何屏幕以及任何方向上都正常显示和运行。 这意味着你需要为不同大小和视图规划 UI 元素的布局。 执行此操作时，应用 UI 会不断更改以满足用户的需求和偏好。

有关针对不同屏幕大小进行设计的详细信息，请参阅响应式设计的屏幕大小和断点。

留下良好的第一印象

考虑一下用户首次启动你的应用后，你想要用户有什么想法、感觉或想要执行什么操作。 需要回顾一下“擅长功能”语句。 即使可能没有机会亲自告诉用户你的应用具有哪些功能特色，你也可以在留下第一印象时将向他们传达一些信息。 使用以下功能：

磁贴和通知 磁贴是你的应用的外观。 在用户“开始”屏幕上的众多其他应用中，什么将能够促使用户想要启动你的应用？ 确保你的磁贴突出显示你的应用的品牌，并展示应用所擅长的方面。 使用磁贴通知，以便应用始终保持实时更新以及与用户的相关性，从而吸引用户多次使用你的应用。

初始屏幕 初始屏幕的加载速度应尽可能快，并且在屏幕上的持续时间只是启动应用状态所需的时间。 初始屏幕上显示的内容应展示应用的个性。

首次启动 在用户登录服务器前、登录帐户前或添加内容前，他们将看到什么？ 在要求用户输入相关信息之前，尝试展现应用的价值。 考虑显示示例内容，以便人们可以环顾一下四周并在提交之前了解应用的用途。

主页 主页是用户每次启动你的应用时访问的位置。 主页中的内容应该有明确的重点，能够迅速展现应用的特色和优势。 在此页面上重点突出某一方面的优势，相信人们会去探索应用的其他优势。 解决登录页面上杂乱无章的特色呈现，尽量一目了然。

验证你的设计

在进行更深层次的应用开发之前，应该根据指南、用户印象以及要求验证你的设计或原型，以避免以后返工。 每个功能都有一组可帮助你优化应用的 UX 指南以及一组 Store 要求，在 Microsoft Store 中发布应用时必须满足这些要求。 你可以使用 Windows 应用认证工具包测试对应用商店要求的技术合规性。 还可以使用 Microsoft Visual Studio 中的性能工具以确保你在所有情况下都为用户提供极佳体验。

使用 UWP 应用的详细 UX 指南确保你专注于重要功能。 使用 Visual Studio 性能工具分析每个应用方案的性能。