导出 (0) 打印
全部展开

实现 Windows Phone 应用设计

2013/12/5

适用于: Windows Phone 8 | Windows Phone OS 7.1

 

本主题帮助您设计一个外观集成到 Windows Phone 平台的应用。在此主题和其他设计过程主题中的设计原则和策略,对于使您的应用在日益增长的 Windows Phone 商店 中脱颖而出非常重要。遵循它们还可以更容易地解决您在迭代过程中可能发现的可用性问题。高质量的设计可提供良好的客户体验和审阅,这对于使您的应用在竞争中脱颖而出非常重要。

有关集体讨论和规划的信息,请参见Windows Phone 的应用概念化

本主题包含以下各节。

 

设计原型涉及汇集迄今为止已进行的所有集体讨论。在本节中,您将了解如何绘制应用外观的模型以及如何使用它们测试设计的关键方面。

说明注意:

原型制作不仅有利于质量,还可以节省时间,以及避免失败。按照本节中的建议,您会在更短的时间内生成更好的应用设计。

在快速制作逼真的原型上,Blend for Visual Studio 非常有用。借助 Blend,您可以绘制模型并创建交互原型。对于需要自定义 UI、动画或转换以使用户理解体验的应用类型,交互原型非常有用。此交互对于应用的成功至关重要,它使用户可以在可用性测试期间感受它。Blend 还使您能够直接从原型创建真实的工作设计。阅读有关 Blend 的更多信息,请访问 Microsoft Expression 主页。

PowerPoint Storyboarding 是可用于绘制的另一工具,它可以在 Microsoft Visual Studio 2012 中使用。借助此工具,您可以从预定义的情节提要形状的集合生成情节提要,并捕获现有的用户界面。有关更多信息,请参见使用 PowerPoint 将用户情景或要求列入情景提要

拟定概念

在本节中,您将了解如何创建应用的模型。

制作设计原型的第一个阶段应该首先使用铅笔和纸,然后迅速转移到在计算机上绘制。撰写移动设备的应用不同于撰写桌面软件。在移动设备上,演示图板的用处不大,因为这些应用具有较少的导航层次结构,以及较小的范围。移动 UI 的难题是如何使用直观和动态的方式显示操作和数据。

如果您的应用涉及到多个专门任务,请单独设置这些任务的演示图板,以确保它们以尽量少(且简单)的步骤进行。下面是一系列常规流收音机应用的原型草图。

  1. 绘制用户将会查看或使用最多的静态屏幕。例如,下图显示下列流收音机应用的初步图形。您将看到主屏幕、类别、艺术家信息视图和收藏电台列表的模型。

    UX_AppDesign_MainScreens

    主屏幕

  2. 如果您的应用向用户显示某些瞬态,请描述它们的外观。在示例中,如果您要构建音乐播放器应用,请绘制设置和初始屏幕的视图。

    UX_AppDesign_States

    数个状态

  3. 绘制任何您可能自定义的重要控件草图。请考虑自定义控件如何用于简化屏幕的分类。此模型显示具体的播放控件,以及带控件的专门横向视图。

    UX_AppDesign_ImportantControls

    重要控件

  4. 现在,您可以将某些屏幕组合为步骤序列以完成任务。规划用户将在完成重要任务或操作时需要的步骤。按顺序绘制每个任务步骤所涉及的静态屏幕。下图显示将搜索操作的流一直映射到艺术家信息视图的模型。

    UX_AppDesign_Search

    常见搜索任务

    要完成此步骤,您需要首先列出用户将使用您的应用完成的所有任务:例如,搜索音乐流派或向收藏夹列表中添加新的电台。然后,为每个标识的任务绘制一个图。这些图显示为完成给定任务而通过屏幕的路径。

  5. 尝试绘制出应用所有部分中静态屏幕间的全部关系。努力使相关屏幕以某种方式显示和运行,从而给用户一种随着在任务中的移动有所进展的感觉。下图显示简单流收音机应用体系结构图的完整信息。

    UX_AppDesign_Map

    主图

    主图不同于任务图。在静态主图上,不会向您显示完成给定任务的流,而是仅显示每个屏幕,以及它们间的分层关系。在上个示例中,您可以查看到在主屏幕中可以到达收藏夹、分类和搜索结果屏幕。

    在您将某些图片固定为壁纸后,通过在 Blend 中打开新的项目开始原型制作。

    说明注意:

    当您使用 Blend 制作原型时,将会在后台为您撰写辅助 XAML 代码。此操作允许您在迭代时创建工作控件和样式,并且可以确保以后兼容性一直不会成为问题。在 Blend 中制作原型还可以确保模型的最佳功能在最终设计中充分再现。

识别原型或模型的关键区域

通过选择特定的焦点区域,可以快速地制作移动应用的原型。通常没有必要将应用每个方面的原型都制作为高级别的详细信息。选择最重要的或最具有挑战性的方面,重点在那里制作原型。通常,设计人员应该设置新技术或功能或非开发团队一贯专长的任何内容的优先级。

对于大多数的应用而言,这意味着建立任务或操作的模型,以便向用户提供价值。考虑如何陈述为应用预想的目的。制作它们的原型时要一边想象它们正在逐步进行,并注意何处自定义控件可以减少步骤,否则就加快速度。

通常情况下,将 Web 或其他平台中的应用放入到 Windows Phone 要求应用屏幕显示较少的控件和图形,并减少混乱。还有必要以有意义的分类在数个屏幕中分配任务,然而在 Web 上,控件非常可能以大型组的形式聚集在一起。请确保您已意识到是否需要按比例缩放应用将作为重点的图形、内容或照片。请确保使用本机控件和尽可能少的 WebBrowser 控件来制作原型。

提前决定多少迭代是可行的。

决定原型详细信息的级别

为了快速制作原型并转到构建,决定在迭代时应用的哪些元素应该具有最高的优先级别。这涉及到您决定为下列应用部分制作原型的深度:

  • 可视详细信息的级别

    如果艺术图片和外观对于此应用的利益干系人而言具有最高优先级,则确保创建一系列特性、功能、屏幕或状态的非常详细的绘图。还应建立自定义控件及其状态的模型。

    说明注意:

    在 Blend 中建立自定义控件模型将确保它们在 XAML 中正常运行。

    可视详细信息模型应该包括:

    1. 样式和主题

    2. 初始屏幕

    3. 应用图块

  • 功能详细信息的级别

    功能或特性是否是应用的核心?如果是,您可能希望构建一个互动式、半功能的原型。从静态屏幕或静态屏幕组开始,并逐个在它们之间建立交互操作。考虑如何简化功能,并减少控件或输入的必要性。

  • 内容详细信息的级别

    如果应用的利益干系人主要关注显示的内容,则您在构建 UI 时可能需要决定如何尽可能地创建最精确的占位符。如果您的内容是文本,则您制作设计模型时特别注意版式并使用填充符文本,而不是块或其他抽象内容,以表示将放置内容的位置。

    如果您的应用要显示可视媒体,您可能需要在原型制作过程中添加纸张和铅笔。绘制播放期间应用内容外观的详细草图,并在图中会包括横向和纵向两个方向。当方向变化时,请记住考虑自定义您的控件或更改布局。

    如果您计划本地化应用,则您需要确保拥有语言所需的足够空间,并且还要准备全球化问题。您可以参阅其他参考以了解本地化和全球化问题。

  • 品牌详细信息的级别

    如果您要构建用于商业用途且管理品牌的应用,则应构建容易理解的品牌可视原型,同时需要非常注意详细信息。这可确保您的最终产品不会偏离公司的标准颜色、布局和徽标。

自定义一致性

自定义可视元素可以将质量、原创性或品牌植入到应用。提前决定可以自定义多少您的应用的可视设计,并且相应地规划这些元素。在后面的应用设计过程中很难介绍自定义艺术画和品牌。

您应该自定义的某些元素是主题、模板、控件和样式。

无论何时自定义 Windows Phone 中的可视元素时,请使用下列准则:

支持现实上的实际操作

一般来说,应用不具备设法模仿真实生活的自定义控件。例如,Windows Phone“音乐和视频”中心的 FM 收音机功能不使用拨号、旋钮或一系列按钮来控制对电台的选择。它会使用滑块控件来调整频率,播放/暂停按钮来打开/关闭收音机,以及收藏夹按钮来保存预设的电台。

UX_AppDesign_FMRadio

FM 收音机Windows Phone OS 7.1 

为了更好地在实际中使用,当您的应用在全屏模式中显示内容或游戏时,淡出或删除部分或所有控件、应用栏和状态栏也是明智之举。

计划组中自定义控件的交互

若要在具有自定义控件的应用中实现一致性和可靠性,请确保您的应用包含一个基础的设计样式,其中符号、形状、字词和颜色具有统一的意义。

如果您计划显示会彼此影响的相互关联自定义控件计划组,请确保所有可能的控件组合都有意义并以预期的方式运行。

如果可行,绘制出自定义控件间可能的交互,以确保所有可能的操作都是合理的。如果某些组合对用户造成了混乱,请使用替代设计。

既然您的原型已经细化,请停止设计,并检查其是否已超出 Windows Phone 设计参数的范围。通过询问下列问题,检查您的手机是否充分使用平台和操作系统。

检查原型的问题

  • 您的应用设计是否使得应用 Windows Phone 硬件的方式显而易见?

  • 运行应用的任务是否非常轻松?

  • 应用是否显示过多的信息或功能?也可能信息过少?

  • 您的应用是否允许用户执行他们认为有价值的任务或操作?

  • 您是否来自其他移动平台?Windows Phone 用户希望使用较少的点按操作、更清晰的视图、大型版式以及使用对比和颜色。

  • 您是否同时使用了滚动轴(X 轴和 Y 轴)和方向轴(横向轴和纵向轴)?根据应用的用途,用户可能二者都需要使用。

  • 指尖是否可以轻松操作控件?控件文本是否清晰可辨?

  • 您的 UI 是否提供有关触控和进度的反馈?

  • 您是否说明了硬件“返回”按钮的使用?

  • 您是否有节制地使用嵌入式 Web 内容(和 WebBrowser 控件)?

  • 在全屏内容播放时,应用是否会淡出状态栏、控件和应用栏?

  • 您是否正确有效地使用 Pivot 和 Panorama 控件?

测试自定义 UI 元素

在建立了自定义 UI 元素的模型后,请确保亲自对其进行测试。如果您使用 Blend,实际上您可以使用设计时应用在后台撰写的代码来验证您的控件能否在 XAML 中运行。

咨询用户

当您开始建立原型时,请在应用的目标受众中找到一小组信任的用户。当您感到满意时,开始向受信任的用户显示原型。请不要解释它们如何运行;而是等待并查看用户是如何轻松地理解应用的用途,以及它如何运作。

说明注意:

通常情况下,早期用户测试使用具有可视详细信息的模型,而不是线框图。线框图不会创建准确的用户体验模拟。

及早与客户交流

如果正在设计一个用于商业的应用,请确保测试目标用户以外的管理人员和非专家的需求和优先事项。例如,对于在项目上工作的人员,以及希望使用应用来检查项目进度的管理人员而言,项目管理软件应该非常有用。

说明注意:

请勿为用户越来越多的功能请求而困扰。虽然一些用户反馈可能会提醒您严重的 UI 问题,大多数用户反馈一般都是全盘接受。打造出应用的魅力并使其最小化。请记住,与给出有关 UI 或交互的具体建议相比,用户往往更擅长于在应用内阐明自己的目标。

截止到设计过程中的这一步骤,您的应用应该已经满足了前面列出的 Windows Phone 使用准则。到评估最终模型时,请按照下列步骤执行操作:

  1. 确定您的原型是否符合按照收集想法做出计划的需求和标准。

  2. 接下来,决定您的模型是否满足最终应用审查过程中所需的详细信息级别。在读取了设计的原型关键方面后,撤消您确定原型需要的详细信息级别。

  3. 最终模型应该包含适当的详细信息级别:

    • 可视元素 - 版式和内容的显示是否清楚、明了和简洁?您的视觉上是否具有吸引力?

    • 功能元素 - 在目的和操作上任务是否直观?是否清楚应用的用途是什么,以及如何操作应用?

    • 控件元素 - 所有自定义控件是否按照统一内部设计语言运行?它们的大小和排放是否适合轻松触控操作?

    • 品牌元素 - 您是否准确地重现颜色和徽标?所有的艺术图片是否符合版权规定?

  4. 确保您已保存制作原型过程中映射的交互操作。请检查最常用或最重要的任务和操作是否具有您希望的外观,并以您希望的方式流动。

  5. 在确定了最终设计且开始构建后,请咨询如何为 Windows Phone 创建第一个应用开始准备您的应用以满足适合提交的设计要求。

显示:
© 2014 Microsoft