构想和过程

Applies to Windows and Windows Phone

设计出你最好的应用

在 Microsoft 设计团队上,我们的过程由五个不同的阶段组成:概念、结构、交互、视觉和原型。这些阶段促成了考虑设计所有方面的出色应用的创建。我们鼓励你采用类似的过程,并享受为全世界用户创造全新体验的乐趣。

概念

关注你的应用

关注应用体验

规划你的 Windows 应用商店应用或 Windows Phone 应用时,你不仅应该确定应用功能和使用群体,还要确定应用的优势。每个出色应用的核心都是提供坚实基础的强大概念。

例如,Photosynth 关注于尽可能快速无缝地捕获全景的核心方案。或者,假设你希望创建一个照片应用。 通过考虑用户处理、保存和共享其照片的原因,你将发现他们希望重温记忆、通过照片与其他人联系以及保护照片安全。这些都是你希望该应用擅长的地方,你使用这些体验目标来指导你完成设计过程的剩余阶段。

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

例如,假设你希望构建可帮助人们规划其旅程的应用。下面列出了一些突发灵感后拟定的创意:

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

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

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

  • 我的旅行应用擅长帮助多个好友共同创建团体旅行的行程。
  • 我的锻炼应用擅长让朋友跟踪锻炼进展以及彼此分享成果。
  • 我的百货应用擅长帮助千家万户协调每周的百货购物,以免忘记或重复购买。

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

有助于执行此步骤的常见方法:灵感触发、关联图和思维导图。下载设计简要模板以开始操作。另请参阅应用概念化

设计漏斗

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

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

结构

组织可使所有事情更容易

组织可使所有事情更容易

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

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

下载 IA 示例以查看虚拟 Contoso 音乐应用的 IA 关系图。另请参阅导航模式

交互

讲述有关应用的故事

讲述有关应用的故事

如果概念阶段有关于定义应用的用途,则交互阶段全部有关于实现该用途。这将以多种方法完成,例如使用线框绘制页面流(如何在应用中从一个位置移动到下一个位置,或用户与你的应用进行的以实现其目标的一组相关交互),以及思考应用的语音和你需要的词语。线框是一种快速、低保真度的工具,可帮助你做出有关应用用户流的关键决定。

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

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

  • 概括流程:第一步做什么,接下来做什么?
  • 细化流程:用户应如何使用应用的用户界面来完成流程?
  • 原型:通过快速原型对流程进行试验。

用户应当能够执行什么操作? 例如,旅行应用“擅长帮助朋友以协作方式为团队旅行创建旅行计划”。下面列出了你希望实现的流:

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

下载草绘模板以开始使用线框。另请参阅导航模式语音满足 Windows 应用商店应用

视觉

无声胜有声

无声胜有声

在建立了良好的交互流以后,你可以使用适当的视觉修饰使应用引人注目。出色的视觉不仅定义应用的外观,还通过动画和动作使用户获得生动的感觉。你对调色板、图标和艺术图片的选择只是此视觉语言的几个示例。

所有应用都有其自己的独特标识,因此需要了解适用于你的应用的视觉方向。让内容引导外观;不要让外观主宰内容。例如,Cocktail Flow 应用打破了视觉和动画的局限,同时保留了完整性。

另请参阅视觉标识

原型

细化杰作

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

对于新的开发人员,我们不能给予太多压力:开发出色的应用是一个重复的过程。我们建议你尽早并经常建立原型。就像任何创新性努力一样,最好的应用是经过大量试用和错误修正的产品。

另请参阅设计出你最好的应用

决定要包含的功能

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

常用技巧:

  • 平台搜索:了解平台提供的功能及其使用方法。
  • 关联图:将流程与功能进行连接。
  • 原型:练习这些功能,确保它们符合你的需求。

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

  • 搜索  让用户从系统中的任何位置(包括其他应用)在你的整个应用内容中执行快速搜索,反之亦然。
  • 共享  让你的用户将你的应用的内容通过其他应用与其他人共享,并从其他人员和应用那里接收可共享的内容。
  • 播放到  让用户尽情享受从你的应用传输到用户的家庭网络中其他设备上的音频、视频或图像。
  • 文件选取器和文件选取器扩展  让你的用户可以从本地文件系统、连接的存储设备、HomeGroup、甚至其他应用加载并保存文件。你还可以提供文件选取器扩展,以便其他应用可以加载你的应用的内容。

有关详细信息,请参阅应用合同和扩展

不同的视图、外观规格和硬件配置  Windows 8.1 给予用户主导权限并使你的应用显示在最前端。你想要你的应用 UI 在任何设备上、使用任何输入模式、在任何方向上、在任何硬件配置中以及在用户决定使用它的任何环境中都很炫。请了解有关多种外形规格设计的更多信息。

触控优先  Windows 8.1 提供了一种独特而与众不同的触控体验,不仅仅是模拟鼠标功能。

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

当然,可以利用大量触控交互,如旋转、平移、轻扫、横向滑动等。了解触摸交互的更多信息。

引人注目且新鲜  使用这些标准的体验,确保你的应用感觉新鲜且吸引用户:

  • 动画  使用我们的动画库使你的应用感觉快速且流畅。帮助用户了解上下文更改,并将体验与视觉转换联系在一起。了解有关实现 UI 动画的更多信息。
  • Toast 通知  通过 Toast 通知,使你的用户了解有关时间敏感或个人相关的内容,并可以在应用关闭的情况下邀请用户返回你的应用。了解有关磁贴、锁屏提醒和 Toast 通知的详细信息。
  • 辅助磁贴    可以在“开始”屏幕上对应用中的有趣内容和深入链接进行宣传,使用户可在特定页面或视图上直接启动你的应用。了解有关辅助磁贴的详细信息。
  • 应用磁贴  提供新鲜和相关的更新来吸引用户返回你的应用。有关此内容的详细信息,请参阅下一节。了解有关应用磁贴的详细信息。

个性化

  • 设置  支持用户通过保存应用设置来创建所希望的体验。将所有设置合并到一个屏幕上,然后用户可以通过已熟悉的常用机制来配置你的应用。了解有关添加应用设置的详细信息。
  • 漫游  通过漫游数据来在各种设备之间创建一种连续的体验,允许用户在他们离开的位置挑选一项任务并保留他们最关心的 UX,无论他们使用何种设备。通过在漫游时保持设置和状态,便于用户在任何位置(从厨房中的家庭电脑到其工作电脑再到个人平板电脑)使用你的应用。了解有关管理应用程序数据的详细信息,并参阅漫游应用程序数据指南
  • 用户磁贴  支持用户加载自己的磁贴图像,或支持用户在整个 Windows 中将来自你的应用的内容设置为他的个人磁贴,从而使你的应用更个性化。

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

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

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

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

如你所见,Windows 8.1 帮助你创建新的引人入胜的体验,这些体验可以取悦你的用户。有关更多点子的信息,请查看开发 Windows 应用商店应用

确定如何用你的应用赚钱

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

为应用设计 UX

本步骤介绍了一些基础知识。现在,你已了解了你的应用所擅长的方面,并且也形成了想要支持的流程,你可以开始考虑用户体验 (UX) 设计的基础。

如何组织 UI 内容?  大部分应用内容可以按分组和分层形式来组织。你所选择的层级结构顶层的内容应与“擅长功能”语句所着重描述的内容相一致。

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

选择内容的分组方式有助于你确定允许哪些页面或视图显示在应用中。Microsoft Visual Studio 中的项目模板提供了可满足大多数内容需求的常见应用布局模式。 有关详细信息,请参阅导航设计加快应用开发模板

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

在旅行应用中,用户希望在应用中执行的首个操作可能是查找特定旅行行程。为了尽快呈现此信息,你应首先显示旅行列表(将最佳做法用于快速、响应式 ListView 控件)。在显示旅行列表后,你可以开始加载其他功能,如:用户好友旅行的新闻订阅源。 有关 UX 最佳做法和建议,请参阅 Windows 应用商店应用 UI 详细信息

你需要什么 UI 表面和命令?  查看之前确定的流程。针对每个流程,创建用户要执行的步骤的大概提纲。

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

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

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

有关如何使用不同图面的详细信息,请查看 Windows 应用商店应用的命令设计

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

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

  • 始终尝试使用内容。  尽可能让用户直接操控应用画布上的内容,而不是添加对内容作出反应的命令。例如,在旅行应用中,让用户通过在画布的列表中拖放活动来重新安排行程,而不是通过选择活动并使用“上移”或“下移”命令按钮。
  • 如果无法使用内容。如果你无法使用内容,请将命令置于以下某个 UI 图面中:

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

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

有关详细信息,请参阅选择布局窗口大小和屏幕缩放指南以及调整窗口大小以适应较高和较窄布局的指南

请参见设计和创建 Windows 应用商店应用大全,获取有关 UI 设计和实现的教程。

留下良好的第一印象

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

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

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

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

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

验证你的设计

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

使用 Windows 应用商店应用的详细 UX 指南确保你关注重要功能。使用针对使用 JavaScript 的 Windows 应用商店应用的 Visual Studio 性能工具或者针对使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用的 Visual Studio 性能工具来分析在每种情况下,你的应用的性能。

相关主题

使用 Blend for Visual Studio 设计 Windows 应用商店应用

 

 

显示:
© 2015 Microsoft