使用Axure进行原型构建基础知识

这是来自第3章的编辑摘录Axure RP 6 Prototyping Essentials 作者:Ezra Schwartz。

用户体验设计是部分艺术,部分工艺;方法和模式的融合与创造性的问题解决。原型在UX项目的成功中起着重要作用,因为它同时是所设计应用程序的愿景和现状的具体交互式预览。对于UX设计师,Axure提供快速,迭代地提供丰富的交互式用户体验模拟的能力,而无需了解编程。

几年前,为许多公司提供及时交互式原型的成本令人望而却步。大多数用户体验设计师不是程序员,因此仅限于在Visio或类似工具中生成静态线框。熟练的开发人员必须参与,以便将静态线框转换为交互式JavaScript,动态HTML或Flash模拟。

这是一项小型开发工作,需要UX设计人员投入大量时间将交互流和各种小部件的行为传达给开发人员,以后再帮助调试模拟。一旦原型被编码,它通常反映了实际静态线框的过时版本,因为与此同时,线路经历了多个迭代周期。

借助Axure,UX设计人员可以创建非常复杂的交互式原型,而无需知道如何编写代码或必须聘请开发人员来创建模拟。我们想象体验的能力与原型中的表达能力之间的差距已经结束。有了这种能力,也需要原型设计方法,技术和最佳实践。由于项目毕竟有如此多的流程,为什么要重新发明轮子。

在这篇文章中,我们将介绍如何为Axure文件建立坚实的基础。

原型设计原则

我想提出三个简单的,与项目无关的原型设计指导原则,在您接近新的UX项目和整个工作过程中,您可以记住这些原则:

  • 估计,计划并不断重新评估原型设计和规格工作。这将有助于您在保持理智的同时,按时,按预算实现愿景。
  • 掌握您正在使用的工具,包括Axure。我们掌握的工具和工艺质量有助于塑造我们的可交付成果,从而增强客户和合作伙伴对我们的专业知识和我们帮助塑造的愿景的信心。
  • 仅仅因为你可以在Axure中做到并不意味着你必须这样做。对您所承诺的低级别高保真详细信息的数量保持战略性。

在我的书中,我使用演示项目或示例片段演示了这些原则在现实生活场景中的应用,您可以从中下载www.packtpub.com/support。您会发现,虽然许多想法和最佳实践都是在Axure的背景下呈现的,但它们实际上与工具无关,即使您使用其他原型工具也可以帮助您完成工作。

亚历山大,数字图书馆项目

大象和老鼠有着共同的祖先,同样,虽然奇怪地比较,全球企业的UX项目,分享了更小的用户体验项目的DNA。尽管项目的规模和复杂性存在巨大差异,但发现,用户和应用程序研究,需求收集,迭代设计和可用性测试等核心活动是以用户为中心的设计的基础。

我的书的示例项目模拟了数字图书馆网络和移动应用程序的设计过程,这个应用程序以亚历山大最大的古代图书馆所在的城市命名。在概念上,大多数读者都熟悉的应用程序环境中,很多机会展示了许多Axure特性和技术,从而推动了这一主题的选择。

当然,有很多方法可以实现UX项目,很明显,演示项目是现实中发生的事情的简化抽象版本,当我们从概念转向详细设计时,过程涉及迭代设计的快速循环。尽管如此,我们的目标仍然是展示开发交互式原型并从头开始使用Axure生成UI功能规范的过程。

任何原型都包含许多输入,为设计方法提供信息,包括:

  • 业务需求。
  • 用户和利益相关者的反馈。
  • 中间可用性测试以验证所提出的设计。

我们通过结合一些高级需求和用例来开始演示项目,这些需求和用例是线框图和原型设计阶段的高级概念框架的基础。这将是一个讨论Axure的图表功能如何为线框图过程提供支持的机会。我们将转向包括主控和动态面板的构造方法,并包括一些迭代和反馈的示例,这些示例将需要重新构建我们的初始构造。

当我们深入研究交互,窗口小部件库,样式和注释等主题时,演示项目可以在适用时帮助可视化各种概念和构造方法。从工作流的角度来看,当我们将项目转换为共享项目RPPRJ文件以演示团队合作功能和工作流时,我们从独立的RP文件Axure的默认文件格式开始,并在第9章中广泛讨论协作。在整个项目计划,开发方法,工作量和资源估算的背景下,我们会考虑各种原型设计和规范活动。

入门 - 30分钟内的生产力

请原谅这个花哨的标题,但我想强调Axure的价值主张作为主要的UX设计应用程序。任何工具都必须平衡其成本,功能集和易用性。如果你用自己的资金购买软件,显然你会问:“如果我在这个新工具上花费时间和金钱,我能多快提高工作效率并做实际工作?”对于Axure,答案是几天,通常是几小时和几分钟,这将是本章概述的大多数活动的情况。

在许多项目中,Axure的最初使用将是开发愿景原型,或者概念证明 (POC)- 高保真,抛光和可点击的原型。最重要的是,它是一个销售工具,在凝聚高层管理人员以支持对下一代软件产品的重大投资,或说服投资者押注新企业方面发挥着重要作用。 POC的关键属性是:

  • 详细的业务,功能或技术要求不会造成太多负担。
  • 高度交互式模拟,突出了所提出的创新用户体验方法的新功能。
  • 高度抛光的执行,包括品牌和视觉设计。

POC阐明了新软件的外观和行为。它在最好的世界中呈现其“外观和感觉”。实际产品越接近愿景,我们作为UX架构师就能做得更好。这是一个“开箱即用”思考的机会,同时牢记一个盒子确实以预算和技术限制的形式存在。

因此,我们假设您已经完成了一些初始项目任务,包括:

  • 与公司各利益相关方的战略会议。
  • 与最终用户的上下文访谈。
  • 通过对现有应用程序进行可用性研究来建立基线。
  • 审查竞争和相关的应用程序。
  • 分析网站的内容。
  • 开发分类法和全球导航。
  • 拥有关键功能和用户流的列表。
  • 开发人物角色和用户角色矩阵及其关键任务。
  • 具有高级业务要求。

凭借对产品及其预期用户的深刻理解,您可以深入了解Axure并释放您的创造力。在本文中,您将学习如何使用Axure:

  • 创建用例图。
  • 创建交互流程图。

初始要求和用例

根据目前为止进行的发现活动,您可以获得一系列高级要求,这些要求提供了一套核心指南并定义了产品。在某些项目中,业务需求列表将交给您,而在其他项目中,您可以在其开发中发挥关键作用。无论如何,要求不应该定义用户体验。相反,我们作为用户体验设计师的贡献是将需求转化为卓越的实际用户体验。

让我们消化第一组要求:

  1. 从主页,用户应该能够浏览要么搜索图书馆。
  2. 用户应该能够在不离开主页的情况下获得有关标题的更多信息。
  3. 每个标题都应该有一个完整的专用页面细节,以及预览功能。
  4. 用户应该能够使用任何一个页面从任何页面搜索库简单谷歌类型搜索框或高级搜索功能。
  5. 搜索结果将显示在匹配标题列表中。
  6. 用户应该获得有关标题的更多信息,而无需离开搜索结果屏幕。
  7. 在搜索结果屏幕中,用户应该能够访问任何标题详情页。
  8. 如果未找到匹配的标题,则向用户提供相关标题通知

通过包含用户,用户操作和交互结果的语法,可以轻松地将良好的要求分解为简短明确的句子。换句话说,这些句子中的每一个都成为一个用例。用例方法超出了本书的范围,但可以获得有关此主题的大量信息。

我们开始的高级要求驱动以下用例:

  • 浏览图书馆的项目。
  • 搜索具有简单搜索的特定项目的库。
  • 搜索具有高级搜索的特定项目的库。
  • 查看搜索结果。
  • 查看项目详情。

Axure是一种集成的线框图,原型设计和规格系统。这意味着我们可以开始与线框图和原型制作工作并行开发规范文档。图表是可以在Axure中创建并在Word规范文档中生成的重要文档的一个很好的示例。

用例图页面

当您启动Axure时,它会打开一个带有主页和三个嵌套兄弟的空白新文件(请参阅下面的屏幕截图,A)。我建议在线框页面上方的部分中保留结构和流程页面,例如用例和流程图。请注意页面的顺序网站地图窗格是这些页面将出现HTML原型和Word规范目录的顺序。

通过首先放置结构和流页面,您可以在进入实际线框和交互之前控制提供高级抽象(如用户流)的逻辑叙述。当您描述原型时,这将在早期审核会议中很好地工作。此外,在稍后阶段,UX规范的读者将能够通过遵循页面进展形成对应用程序的清晰概念。

在里面网站地图窗格,添加一个新兄弟姐妹页面上方页面(B)如下面的截图所示:

双击此新页面将其作为选项卡打开线框标签。接下来,重命名新页面使用案例。 (如下面的屏幕截图所示,A)。 Axure提供了一种区分线框页面和图表页面的方法:右键单击并选择选项(B)来自图表类型上下文菜单。请注意,页面图标(C)已更改,以便更容易区分线框和流页面:

除了名称左侧的图标外,线框和流程页面在所有方面都相同。

接下来,选择小部件库(见下面的截图,A)中的小工具窗格。拖出来演员小部件(B)到页面。这个简笔画是用户的标准表示UML和大多数图表方法。拖出一个椭圆小部件并标记它浏览路径(C)。 Ellipse是用例的UML表示法。继续根据需要添加和标记椭圆小部件:

为了完成用例图,我们希望将actor小部件连接到用例,并在页面上很好地组织小部件以获得精美的演示。从布局开始,按照垂直顺序组织案例,遵循可能性的逻辑进展。

这是熟悉Axure三种选择模式的好机会,这有助于在线框和流页面上移动和排列小部件。你可以找到选择Axure工具栏上的模式。 (请参阅以下屏幕截图,A代表Windows版本,B代表Max版本。)

  1. 选择交叉模式(C):这是Axure的默认模式。当您在线框上单击并拖动鼠标时,将选择属于选择区域的所有窗口小部件,即使它们仅部分包含在其中。
  2. 选择包含模式(D):在此模式下,仅选择完全包含在您选择中的小部件。
  3. 连接器模式(E):当您使用Flow小部件时,此模式最有效,因为它生成的连接线可用于连接图表中的各种流小部件。

就个人而言,我更喜欢选择包含模式超过默认值选择交叉模式,因为它通过仅包括我的选择完全包含的项目来提供精确度,而忽略了其他附近的项目:

要在页面上组织窗口小部件,请使用中的工具宾语工具栏。以下屏幕截图显示了Mac版本上的工具;相同的工具在Windows版本上:

  • 分组和取消分组对象(A)。
  • 向前或向后,向上或向下移动(B)。
  • 左对齐,右对齐和中间以及顶部,底部和中心对齐(C)。
  • 水平和垂直分布对象(D)。
  • 锁定和解锁对象(E)。

在用例页面中选择一组小部件,如以下屏幕截图所示,并使用对齐(A)和分发(B)工具栏上的选项用于平衡页面上的案例:

将所有用例垂直对齐并均匀分布,使用工具栏上的“组”选项将它们组合在一起。选择此组,并在按住Shift键的同时选择Actor小部件。使用“对齐中间”选项可使Actor面向用例。

接下来,切换到连接器模式和绘制线条演员每个用例的小部件。您应该得到一个类似于以下屏幕截图的页面:

保存项目文件

用来解释芝加哥选举的笑话:尽早并经常保存你的工作。根据我的经验,Axure非常稳定,但很久以前,我发明了经常保存工作的本能。除了标准保存之外,我还推荐一种支持迭代设计工作的策略:使用另存为在每天结束时命令创建RP文件的每日版本的存档。使用它也是个好主意另存为在对关键线框进行重大更改之前执行命令。

原因如下:随着您越来越精细的要求,您的Axure文件将迅速发展,以包含大量细节。看起来很有希望的想法不会像你想象的那样有效。来自利益相关者和用户的反馈将需要更多更改,有时需要您回溯到以前的版本。

因此,保持Axure文件的持续历史符合您的最佳利益。处理独立文件(.RP)时,这意味着您负责管理修订历史记录。我不是在这里谈论仅仅备份你的文件,这是一个给定的。

对于管理修订历史,技术或更确切地说,对我有用的行为非常简单且易于实现:在每个工作日结束时,保存文件。然后,使用另存为将文件保存在存档目录中,并将日期附加到文件名。第二天,从当前目录中打开文件。使用此方法,您将始终能够还原或查找以前的项目,并在需要时将它们添加回当前文件。

第一个线框页面

在初始使用案例到位的情况下,让我们继续创建相关的线框页面。立即想到的页面是:

  • 主页。
  • 搜索结果页面。
  • 项目详情页面。

您可能已经注意到,当您启动Axure时,它会打开一个类似于MS Office应用程序的新文档,例如Word或PowerPoint。你会看到的网站地图Axure放置的窗格页面和三个嵌套页面。这是每个新Axure文件的默认值。

重命名非描述第1页第2页嵌套页面的标签(见下面的截图,A)更有意义,删除第3页。您的网站地图窗格应该类似于以下屏幕截图,(B):

您可以使用向上移动和向下箭头(C)更改页面顺序,并使用缩进和突出箭头(C)更改其嵌套级别。

任务流程图页面

定制原型以可视化和演示用户体验。在我们开发演示之前,我们确实需要确定关键用户任务,这毕竟是应用程序存在的原因。由于本书的范围将我们对该主题的讨论限制在Axure的上下文中,因此我将重点介绍创建任务流程图的方面。
任务流程图是一个模型,是构成用户 - 系统交互的乒乓交换的抽象。这些图表在以下方面也发挥着重要作用:

  • 与业务和技术利益相关者验证每项任务的顺序和逻辑。
  • 制定一份关于哪些流程和部分流程应该成为原型的协议,以及保真度。

图表应由显式上下文整形,由输入组合决定,包括:

  • 系统对给定用户的了解。
  • 系统为用户提供的选项。
  • 用户的行为。

虽然没有针对用户体验流程图设定的标准,但请记住,在与利益相关方的联合会议期间,清晰度,精确度和组织将对您有所帮助。

Axure提供一站式服务,用于创建流程图和与之关联的线框图。使用单个应用程序进行建模,模拟和记录用户体验的能力为我们提供了强大的工作环境。

亚历山大港背景下立即浮现的两个主要流程涉及浏览和搜索。在第一个选项中,用户可以浏览主页上的标题并深入了解更多详细信息。另一条路径允许用户搜索一组标题或特定标题。匹配项显示在搜索结果列表中,用户可以深入查看所需标题的详细信息。因此,两个路径可以在相同的项目细节页面上结束。

让我们创建几个任务流程图页面,一个用于建模浏览路径,另一个用于搜索。在里面网站地图窗格,在Use Case Diagram页面下添加两个兄弟。标记页面并使用图表类型菜单更改其图标以将其标记为流程页面。

浏览路径流程图

为了组成图表,请执行以下步骤:

  1. 双击打开浏览路径页面中线框窗格。
  2. 来自小工具窗格,拖过演员小部件。
  3. 现在来了很酷的部分:来自网站地图窗格拖动主页 - 它是此流程的入口点。请注意,小部件从其父页面继承其标签网站地图窗格。另请注意窗口小部件左上角的文档图标(请参阅下面的屏幕截图,A)。这意味着当您生成HTML原型时,单击此小部件将链接到实际的主页。
  4. 来自网站地图窗格,拖过项目细节页。
  5. 选择形状和使用对齐中间水平分布清理演示文稿。
  6. 改成连接器模式从Actor小部件到主页以及从那里到Item Details页面绘制连接器。使用箭头样式将方向箭头添加到连接器的选项。
  7. 为了向箭头添加交互标签,使用Wireframe库小部件添加词汇表,您刚刚在Axure中完成了第一个流程图。它应该类似于以下屏幕截图中显示的那个:

搜索路径流程图

初始要求需要两个搜索功能:

  • 简单搜索。
  • 高级搜索。

这两种方法都会让用户通过类似的路径:如果找到任何匹配项,它们将显示在搜索结果页面(参见下面的截图,A),用户可以深入查看项目细节第(B)页。如果未找到匹配项,则用户可以运行新搜索。

当您完成搜索路径时,您会发现它暴露了一个重要的风险。如果用户运行简单搜索或高级搜索但未找到他们要查找的内容,则用户可能会放弃流程(C)并转到另一个站点。提供强大,简单和高级搜索功能的理由应该与应用程序中搜索的战略重要性相关联。这是战略洞察力的一个例子,强调了为原型开发支持图的商业价值:

除了能够在同一个应用程序中创建和存储图表和线框之外,您还可以链接Axure图表和线框图,以创建从一个到另一个的无缝过渡:

  1. 打开用例页面中线框窗格。
  2. 右键单击浏览路径用例并选择编辑参考页面选项(见下面的截图,A)编辑流形状子菜单。
  3. 参考页面弹出窗口(B)列出了所有页面网站地图窗格。
  4. 选择浏览路径页面将用例链接到页面并关闭弹出窗口。
  5. 注意现在出现在用例左上角的参考页面图标(D)。窗口小部件的行为已更改:在与参考页面关联之前,双击它可以编辑窗口小部件的标签。通过双击它,它引用站点地图中的另一个页面来打开参考页面弹出。这是因为窗口小部件的标题继承了引用页面的标题,不再可编辑:

生成HTML原型

现在是时候生成您的第一个HTML原型来审查您目前已完成的工作。随着原型的发展,您会发现自己经常生成预览,以验证HTML输出是否按照您的预期方式工作。

访问HTML原型生成功能可以从工具栏图标或从生成菜单。该生成原型对话框(请参阅以下屏幕截图(A)的Windows版本和(B)的Mac版本),允许您指定影响输出的各种设置。但是,在这个早期阶段,你想要开始一般(C)部分让Axure知道输出HTML原型的位置。

使用Axure的默认值作为目标文件夹,在Documents文件夹中标记为“Axure Prototypes”的目录,或者将所有项目保存在同一目录下,如第2章。这样可以更轻松地找到所有项目内容,尤其是当您想要传输或备份工作时。

Firefox是推荐的浏览器,但您可以在中指定您的选择打开用(D)节。每次生成HTML原型时,都会打开一个新的浏览器选项卡。在第一次生成原型后对页面添加书签是一个好主意,从那时起,使用别打开减少浏览器中打开选项卡激增的选项。只需生成并刷新页面:

原型用于生成HTML原型的图标。屏幕分为两部分:

  • 在左侧,有一个带有两个选项卡的窗格:网站地图页面注释。该网站地图默认情况下选中选项卡(参见下面的屏幕截图,A)。
  • 显示图表或线框的主体;中的首页网站地图是默认值。

在我们的例子中,用例在页面(B)中选择网站地图窗格并显示在屏幕的主要部分中。当你将鼠标滚过时浏览路径用例(C),注意光标发生变化,表明活动链接,点击后会加载引用的链接浏览路径图第(D)页。或者,单击用例(E)右下角的图标可在新选项卡中打开引用的页面。在我们的例子中,浏览路径图显示了项目细节页。图中的方框是通过拖动实际页面来制作的网站地图

现在,在HTML原型中,这些框也有一个链接图标(F),点击图标框就会链接到引用的线框页面:

总结到目前为止我们所涵盖的内容:

  • 创建用例图。
  • 创建任务流程图。
  • 从图中引用和链接流和线框页。
  • 生成HTML原型。

即使是Axure新手也可以在30分钟左右完成上述活动,并创造出有意义的工作。在继续构建原型时,基础用例和任务流将始终可用于确认和验证。



翻译字数超限