Axure RP7网站和APP原型制作从入门到精通

978-7-115-38403-4
作者: 金乌
译者:
编辑: 赵轩

图书目录:

详情

随着我国互联网行业迅猛发展,互联网公司中不同职位的界定越发清晰,对员工的专业能力需求也越发突出,熟练使用Axure也成为UX设计师甚至产品经理的先决条件。产品原型制作是在正式开始视觉设计或编码之前最具成本效益的可用性跟踪手段,使用产品原型可以有效帮助我们高效、准确的展示产品需求、测试不同的假设和想法、将客户的需求可视化。

图书摘要

Axure RP7网站和APP原型制作从入门到精通
金乌/著
人民邮电出版社

北京

前言

原型制作是在正式开始视觉设计或编码之前最具成本效益的可用性跟踪手段。Axure RP7是行业中最知名的原型设计工具之一。随着专业工具的出现,设计用户体验从未如此令人兴奋,设计原型也从未如此具有挑战性。

随着我国互联网行业迅猛发展,互联网公司中不同职位的界定愈发清晰,对员工的专业能力需求也愈发突出,熟练使用Axure也成为UX设计师甚至产品经理的先决条件。本书通过真实的案例和场景,循序渐进地帮助你将Axure集成到用户体验的工作流程中。

什么人适合阅读本书

·用户体验设计师、业务分析师、产品经理和其他参与用户体验项目的相关人员。

·互联网创业者或创业团队中的成员。

本书遵循以用户为中心的设计原则,从基础知识讲起,逐渐深入并配合大量案例与视频教程,适用于对Axure有一些了解,同样也适用于并不知晓Axure这款软件的读者。

读者反馈

欢迎广大读者对本书做出反馈,让作者知道本书中哪些部分是你喜欢的或者哪些部分内容需要改善。

如果您对本书有任何建议,请发送邮件至yuanxingku@gmail.com。

课件下载

本套教程中所讲解的案例课件都可以到论坛中下载。此外,您在学习本套教程中遇到任何疑问都可以到论坛中相应的板块中进行讨论:http://bbs.yuanxingku.com。

勘误表

虽然我十分用心以确保内容的准确性,但错误难以避免。如果您发现书中出现了错误,非常希望您能反馈给我,请将错误详情发送至yuanxingku@gmail.com,这样不仅能够帮助其他读者解除困惑,也可以帮助我们在下一版本中进行改善。

关于汉化

Axure RP 官方并没有发布中文版,不熟悉或不习惯使用英文原版Axure的读者可以到如下网址下载汉化包,本套教程也是使用中文(汉化)版Axure进行讲解的。

http://www.yuanxingku.com/axure-document/axurerp7-download.html

在此特别感谢汉化原作者 best919,他的辛勤劳动与无私奉献为Axure在中国的普及扫清了语言障碍。

课前准备知识

专业术语

在进入正题之前,非常有必要详细介绍一些专业词语,这样可以帮助你更加透彻地理解本书想要传达给你的知识与经验。

UE/UX

·UE 全称 User Experience,中文名“用户体验”。

·UX 全称 User eXperience,中文名“用户体验”。

由此可见,UE和UX是一回事,大概与Usability这个名词一起于2003年前后传入国内。在此将User Experience 与 Usability 一起讲不仅是因为它们之间容易误会,还有一段很深的渊源。

首先,国内对于Usability的翻译存在很大问题,普遍观点都认为是“可用性”或者“易用性”,这两个词含糊不清可以随意使用。但是,从世界标准组织对Usability的定义来看,无论是直译还是意译,“可用性”都是最佳答案。准确地说,可用性包括了“易用性”的含义,而“易用性”有自己的专用英文——Easy to use 。

2004年,随着UPA在中国第一次国际会议,首次把Usability概念带到媒体面前,但出于各种因素并没有过多涉及互联网技术领域。在此后的2005-2009年共举办了6届“用户体验行业”主题相关的年会,“用户体验”在中国各个行业、领域逐渐受到重视。

但是,过度地宣传和概念的推广也造成了负面效果,时至今日还有很多同行小白,甚至比较资深的“专业”人士仍然误以为“UE就是 Usability”。上面所提到的 UPA 全称为 Usability Professional`s Association,中文名为“可用性专业协会”(注意:不是易用性专业协会)。也就是说Usability才是UPA的核心主题。

那么 Usability 和 User Experience 又是什么关系呢?在 Usability 概念盛行时,UE这个概念还名不见经传,Usability在欧美很早就受到重视,尤其是在工业设计领域已经有了丰富的研究成果。当然,这也与它们之间的本质差异有关,近些年借助互联网传播迅猛的东风,UE迅速风靡整个互联网技术领域,并且迅速超越了Usability的地位。从整体上来讲, Usability只是UE的一个指标,“较高可用性”与“较好用户体验”之间应该是不充分不必要的关系,如:

·较高可用性的产品并不一定带来好的用户体验(不充分)。

·较好用户体验的产品也可能具有不良的可用性设计(不必要)。

相信大家对游戏都不陌生,我们就以此为例来解释一下“可玩性”与“可用性”之间的矛盾。玩家对游戏的要求是具备相当的“可玩性”,希望游戏的设计要有一定的复杂性,由此充分调动用户做脑力和体力运动;而“可用性”恰恰相反,玩家希望使用“比较简单的方法”来操作好玩儿的游戏。试想一下,如果需要使用十几个甚至更多按钮才能玩游戏时,这款游戏是否还能继续吸引你。由此可见,“可玩”的游戏加上“可用”的操作才是绝佳的用户体验。

针对互联网产品而言,Usability并不是用户体验的核心关键,这是与“工业设计”类产品截然不同的区别,这也是为什么很多宣传Usability概念的网站,本身也做得“很差”的原因,也许用户还来不及体验“可用性”,在“可访问”阶段就放弃了。

2005年起,以用户体验为主题的设计类网站、博客如雨后春笋般出现,各种西方专业名词和术语或者英文组合也让大多数人晕头转向。正如前面所提,UE与UX其实是一回事儿,通常海外和国内的外企习惯用UX,这是因为老外习惯用全称 User Experience,和简称UX。据分析,是因为 Experience 的发音 ex=x,所以听起来和 eXperience 一样。不过对于国人来说,使用 UE 的更多,因为好看也好念(u' e 和u' aiks 或者 u' cha),你更偏向于喜欢哪个呢?也许这就是概念本地化的一种体现,就像当初大家都喜欢将 Windows XP(aiks' pi) 读成 Windows XP(cha' pi) 一样。

关于User Experience的详细介绍请参考维基百科:http://en.wikipedia.org/wiki/User_experience_design。

要说可用性、用户体验深入人心,得到广泛重视,笔者认为是在2006年8月《点石成金》(Don't Make Me Think)中文版风靡中国互联网之后。

该书以现在写稿时的观点来看属于入门级,但在当时这本书在整个互联网圈内口碑相当好。其实这本书在2000年就已经出版,未进入中国前全球销量已经超过10万册,可见在当时其影响力非同一般。

2007年10月出版的《用户体验要素》中文版,比较权威、全面地阐述了Web用户体验知识框架,得到中外同行的广泛认可。

相信通过上面的简短描述,已经让你更深一步了解并区分UE/UX和Usability这三个单词的概念了,我们在后面的内容中还会多次提到User Experience 这个单词。

产品原型

Axure RP就是一款快速原型设计工具,在这里首先为读者朋友们阐述一下线框图、原型、视觉稿之间的区别。这三个词也经常被朋友们搞混淆,笔者认为,在进入正式的教程内容之前,将这些与你的工作(也许是你未来的工作)密切相关的词汇讲解清楚,让大家理解明白,对我们透彻理解教程内容是十分有帮助的。

·线框图(Wirefreams)是低保真的设计图,通常都以黑白线条来表达,并配以文字注释,其内容包括:1.内容大纲(什么东西),2.信息结构(在哪儿),3.用户的交互行为描述(怎么操作)。

使用Axure RP 也可以绘制线框图,如果你愿意的话,笔和纸也是很好的选择。绘制线框图最大的优点是“快”,绘制时不必在意细枝末节,但必须表达出设计思想,不要漏掉重要部分。视觉上的审美效果应该尽量简化,黑白灰是经典用色,也可以使用蓝色代表超链接。

好的线框图应该像水晶一样,清晰明确地表达你的设计创意,在团队成员中准确传达设计思想。在复杂项目的初始阶段,线框图是必不可少的,发挥着极其重要的作用。

·原型(Prototype)是中(高)保真的产品设计图,代表最终的产品。

本书就是围绕如何使用Axure RP这款工具制作产品原型的各种细节进行讲解的。

原型(在此,特指互联网产品原型)的作用非常关键,也非常丰富,使用产品原型我们可以:

1.高效、准确的展示产品需求,2.快速更新和迭代,3.有效地测试不同的假设和想法,4.将客户的需求可视化,5.在整个团队中无缝沟通。

原型的设计应该尽可能与最终产品一致,在进入正式产品开发阶段之前,将产品原型发送给股东、用户、客户、项目干系人等进行测试,并充分利用他们的反馈意见进行调整,在原型中做这些要远远强过开发出应用程序之后再做。

·视觉设计稿(visual design)是高保真原型的静态设计图。将视觉设计稿制作成可交互的原型就是高保真原型了。

通常来说,视觉稿就是视觉设计的草稿或终稿,帮助团队成员以视觉审美角度审视产品。用优秀的视觉稿制作高保真原型可以起到意想不到的作用,无论是拿去见投资人还是收集用户反馈都是最佳选择。

原型设计流程的不同模型

下面这张图中是两种常见的用户体验原型设计模型。

选项A:完全依赖于前端开发者来表达交互的观点,并且要承受被拒绝采用或多次修改的风险。在此场景中,用户体验设计师创建静态线框图,前端开发者将其转换为HTML。我们需要关心的不仅是浪费时间和金钱,还有动态交互中出现的问题。

选项B:你拥有编码能力,或者去学习HTML、CSS、JavaScript,线框图和可交互原型都靠自己一手搞定。

我们经常会看到这样的招聘信息:懂用户研究,有组织并领导设计产品的经验,可以独立制作线框图和HTML-CSS-JavaScript级别的产品原型(高保真原型),能独立撰写详细的产品需求文档(PRD),等等。而招聘的职位也许是用户体验设计师也可能是产品经理。换句话说,这类公司想招聘一位个身怀多项绝技并拥有多种特定专业知识的人才(这本是一个团队的工作),而只付给他一个人的薪水。这反映出很多互联网公司对用户体验依然存在深深的误解。

随着我国互联网行业的迅猛发展,受西方互联网文化的传入与影响,加上我国中小微型互联网企业对业内人才的强烈需求,不同的职位也催生出了很多流派。但综合观察,无论是公司企业的需求还是从业人员的自身素质,都还有较长的路要走。这也是本书读者需要认真考虑的问题。

我相信,用户体验设计师的主要目标必须集中在构思、尝试、体验和针对用户体验与他人(如团队成员、用户等)进行交流沟通。紧密配合开发人员,并且对主流的软件开发技术(如HTML、CSS、JavaScript)有坚实的理解,这样你可以评估出自己的设计对于开发人员来说实现成本有多少。但是用户体验设计师不应该被视为“万金油”,因为这样做,他们将无法成为任何方面的专家。用户体验设计师应该时刻保持专注,并且需要专业且强大的工具来设计用户体验。

选项C:Axure给我们提供了第三个选项,用户体验设计师不必依赖前端工程师,也不用让自己成为程序员。

虽然 Axure RP7 的学习曲线比较苛刻,但是一旦掌握 Axure,你就可以轻松实现脑海中想象的非常现代的用户体验效果。使用Axure,你可以将一个概念落实为线框图,再进一步制作成高保真原型,甚至可以根据需求制作响应式布局来适配不同尺寸的屏幕。如果你熟悉编码,Axure对JavaScript和CSS的支持是非常强大的;如果你不熟悉编码,你仍然可以创建令人惊叹的产品原型而不需要你编写一行代码。

下面我们来谈一谈工作中所面临的困扰,相信你一定也会和我一样迅速拥抱Axure的。

如果你使用传统方法(Visio、Word、Excel或者InDesign)创建过规范文档,那么你一定对这个繁琐、耗时、高成本的流程深有体会,你需要在Visio制作的线框图中添加脚注,给这些线框图截图,保存这些截图并导入规范文档中,最后还要编辑相关的注释。

然而,迭代设计是用户体验过程的核心,这就意味着频繁更新,而且有时更新的内容量非常大。所以,你必须重新截图、命名、保存图像、将图像保存到更新版本的文档中,并更新注释。有时候,修改线框图需要级联更新,这就包含了更多工作和潜在的错误。每次更新都需要重复这个过程,时间、精力和金钱的浪费变得清晰可见并令人生畏,这对于项目中的所有人都是不利的。

Axure集成了自动化的规范文档创建功能,最大限度地降低了上面所述的手动过程。Axure给线框图的每一个注释加上数字标记,自动截图,并且可以在自定义的布局中管理所有内容,虽然配置规范文档的模板需要一点时间,但这足以让完全手动的过程显得苍白无力。此外,在处理大中型项目时,团队协作是一个关键的先决条件,Axure对团队协作功能的支持也是非常强大的。

Axure在不同项目中的应用

我的一些学生、同事还有很多网友说,在自己的工作中几乎经常使用Axure,而另一些则表示在自己制作线框图的阶段会把Axure扔得远远的。产生这两种截然不同的情况其根本原因在于:很多人不清楚应该什么时候使用Axure,在处理什么样的项目或任务时使用Axure最合适。

下面我们就来谈论一下Axure的使用场景。也许你会觉得下面的内容有些枯燥,但这些内容是我多年工作经验的积累与沉淀,是大大小小几百个项目实战后的总结。这其中有成功的也有失败的,但我想要告诉你的是:无论你想成为用户体验设计师还是产品经理,认真阅读下面这些内容一定会让你受益匪浅!

小项目

通常,在与客户交谈时都是以这样的对话开始的“我们需要一个简单的网站(或APP),只需要一些非常基础的功能……”稍后你会发现,他想要的绝不是他所描述的那样简单。而理想情况是,在签订合同之前,他最好能把所有的详细需求都一一列出来。

我们并不知道客户想要的“简单的”网站(或APP)到底是什么样子。简单这个词是用来表达目的,因为通常情况下人们对“简单”这个词的理解都会本能地将注意力集中在最突出(基本)的功能和所涉及的页面数量上。然而,这可能会导致非常严重的误导(误会),下面来看为什么会这样。

·现代的Web应用程序页面模板都相对较少,如概述页、列表页、详情页等。然而,每个页面的复杂性可能都不相同,而这通常是隐藏在早期讨论中的问题所在。

·内容的展示需要适应不同的设备,这也是必须要考虑的重要条件。也就是说在初期讨论中,无论客户要求哪种屏幕尺寸,我们都必须至少考虑3种不同尺寸的布局设计(桌面电脑、平板电脑、手机)。对于某些类型的应用程序,为了确保工作流程在多个屏幕中顺利进行,工作的复杂性可能以指数增加。

·另一个需要考虑的要素是应用程序的用户数量。它是否需要动态改变的内容和会员注册/登录功能?是否带有交易功能?是否有动画效果?是否要模拟数据?如果客户对这些问题的答案都是否,这样的项目应该是一个简单的项目。

然而,如果Axure只适合用来处理简单的项目,有朋友可能会想,使用PowerPoint 或者 Keynote也可以用来制作简单的项目原型,为什么还要花时间和精力去学习另一款原型设计工具呢?如今,伴随着许多成功的平台出现(如Wordpress、各种CMS),一些不懂任何技术的人也可以通过多次试用体验创建出比较复杂的网站,而使用Axure在处理此类简单项目时可以帮助我们提前确定客户需要的样式与功能,避免不必要的调试与返工。

网站应用程序和门户网站

首先,网站(Web)与网站应用程序(Web Applications)这两个词的意思是不同的。各位读者可以查阅百度百科了解详情,在此编者以自己的理解简要介绍一下这两者的不同。

网站:是用来展示内容的,如新闻、博客等。

网站应用程序:是用来执行任务的,如百度网就是一个网站应用程序,用户使用它执行搜索任务。此外,火车票、机票的查询预订、酒店查询预订等,供用户执行任务的,都属于网站应用程序。

这类原型正是Axure的菜。虽然有很多门户平台可用,但企业往往需要定制开发来增强某些功能以便满足业务需求。对于很多企业来说,这样的项目往往是战略级的,对金融投资非常重要,所以市场需求强烈但要求也比较高。下面是这类项目的共同属性。

·由企业领导安排批准,最初的用户体验需要做高保真视觉稿(大多数领导都喜欢看视觉稿)。

·应用程序包含多个模块,代表组织中不同的业务单元。通常情况下,这些业务单元遍布全国甚至世界各地,每个业务单元可能有其自己的规则、要求和技术支持。这些需求在集成到应用程序之前必须考虑到将其简化、统一。

·如果你的任务是创建一个高保真原型,一定要意识到企业组织的复杂性。尽可能记录你的工作假设,不同的涉众的指导和反馈,以及他们的优先级,还有潜在的有可能产生摩擦的领域。

·有些时候,用户体验设计师会提出一个全新的、高效的、甚至伟大的设计,然后会遭到项目负责人的拒绝,并且会这样说:“做用户体验的那群人想法太前卫了,而且风险太大,最重要的是他们对业务规则并不熟悉!”

现实与梦想之间的平衡是非常重要的,特别是当用户体验团队对业务的认知还非常少的情况下。因此,我建议:

·不要擅自做任何假设,询问尽可能多的关于术语、流程和你不明白的地方。

·在项目早期,指出潜在的差距和实现风险。在Axure中,对你关注的布局或相关部件添加风险注释,并在评审会议中进行讨论。

存在风险的不仅仅是布局或部件,与业务规则文档相关的风险才是至关重要的,因为这可能会影响到应用程序的接口。

要处理每个复杂模块的具体需求,开发这样的应用程序需要一个庞大的业务和技术团队,用户体验团队也是必需的。

一开始就应该使用团队项目,并和团队沟通设计模式和其他常见元素。平衡发挥团队成员能力和工作的灵活性,与应用程序的整体一致性和完整性,这是一项非常重要的挑战,虽然这并不是本书重点讲解的内容,但依然建议各位读者参考一些敏捷项目管理的书籍,如《当用户体验设计遇上敏捷》。

·用户验证

你可以利用企业提供的条件进行用户验证活动,如焦点小组和可用性测试。然而最重要的是把控好用户验证在项目中的预算和时间表,还有要用到的交互原型质量,这对于复杂的应用程序尤其重要。进行可用性测试前,要确保可用性测试的场景是建立在原型中的,因为计划以外的场景可能会导致大量的问题,造成不必要的返工和修改。

·可交付原型和规范文档

通常情况下,客户都会要求交付线框图、高保真原型和规范文档。下面所列出的几点是你需要重点考虑的内容,如果你对Axure的术语和功能还不熟悉也不必担心,很快我们就进入本书的正题,为你讲解Axure的专业知识,但在这之前希望你耐心读下去。对于用户体验设计师来讲,Axure是一款非常棒的工具,但本书要传授给你的不仅是如何使用Axure,更重要的是在你处理不同规模的项目,面对不同的问题时,如何将Axure这款工具的价值最大化地发挥出来。

如果你的客户需要规范文档,那么他们想要什么格式的文档呢?是一份详尽的Word文档还是基于HTML注释版本的原型呢?你是否有机会与项目相关人员讨论规范文档的风格吗(通常是开发团队)?或者客户对文档并没有提出过任何的规范要求?如果是这种情况,你应该尽早沟通并明确澄清你交付的规范文档是什么样的格式。

向开发团队索要一份曾经使用过的规范文档,体验一下什么样的格式是可接受的。

如果客户需要你提供交互原型,那么他对原型所预期的交互程度是怎样的呢?客户的期望往往基于过去的经验,你可以和客户商谈并浏览一下他曾经看过的交互原型,然后把你做过的成功案例展示给客户,提高双方对交互原型效果的共识。

如果应用程序需要制作基于不同角色的用户登录效果,你要为每个角色都制作完整的用户体验?还是只为主要角色制作?光是这一点就有可能毁掉整个项目,因为项目负责人(投资人)可能想看到每个角色的不同需求,而你的预算和工作计划中可能只模拟了一个角色的用户体验,这一点在项目前期一定要注意,并与项目相关人员沟通清晰。

提前了解原型中哪些部分是全局性的,使用动态面板、母版(母版的自定义事件)可以有效提高工作效率,减少冗余重复的修改工作。

为不同类型的用户制作不同的用户界面时,工作流程和路径会有所不同,这可能会涉及变量和函数的使用。如前面所述,恰当使用动态面板、母版以及母版的自定义事件能够起到事半功倍的效果。现在你对这些专业名词也许还不熟悉,但不必担心,先把它们记在心里,在后面章节中学到它们时印象会更加深刻。

计算一下制作原型的高保真视觉界面的费用是多少,只制作静态线框图费用又是多少。项目计划中是否需要快速制作出高保真原型,一旦经过评审后就根据高保真原型的设计细节和规范文档进行开发?如果是这种情况,一定要注意,Axure项目文件中的每一部分都要细心重建,原因有以下两点。

1.首先,高保真原型通常都是非常高级的展示,表达了你对项目的设计理念和尽可能多的功能细节与特性。但是,通常情况下可能没有足够的时间来验证业务流程和技术约束。当细节设计工作推进时,原型中许多假设的美好愿景为了满足实际的业务需求和技术约束都要被缩减。

2.另一个需要注意的问题是管理员后台的设计。大多数应用程序都有某种形式的管理功能,比如给其他用户分配权限和其他参数。在项目初期的谈论过程中很少会谈到这方面的内容,当项目推进到一定程度才提及,这会造成很尴尬的局面。将所有的模块和关键屏幕都制作好,让项目相关负责人组织评审,一旦同意,这个原型将作为变更管理和调整范围的依据。

大型项目

当使用Axure处理大型项目时,下面这些提示会对你有所帮助和启发。

Axure可以促进设计的一致性,但要想真正做到设计的一致性,还需要专业的项目管理流程。

·构建正确的线框图并贯穿整个团队。

·给线框图中使用的部件创建一个命名规则,注释和评论也要标准化。

·要花点时间训练新用户使用 Axure的细节。

在项目开始时,充分考虑应用程序的每个模块和布局,并使用母版和动态面板,经过多次试验后确定一个切实可行的方案;在项目实施的过程中节省不必要的重复工作,提高效率。

一定要控制好项目的时间计划,根据项目过程中的预期与变动实时进行调整,比如用户测试或者比较重大的设计修改,这类事件都要考虑在内。通过以往的经验你会发现,几乎没有任何项目会完全按照你的计划顺利进行,所有(大型)项目推进的过程中都会遇到变化,而我们就是要妥善处理这些计划外的变化。

计划中要包含草图、线框图、低保真原型、视觉稿、高保真原型和规范文档。用户体验设计的定义源自于多项技术技巧,这些技术技巧能帮助你把创意转变成体验。无论你选择低保真还是高保真,草图、线框图和原型制作的根本目标都是交付出优秀的产品设计理念,而不是简单的产品。

项目中的不同角色

领导(投资者)

不管企业的类型或规模大小如何,任何高标准的用户体验设计都必须由上至下贯穿于整个项目。企业的最高项目负责人越是理解用户体验的重要性,用户体验设计师在整个团队中的重要性就更加突出。

显然,用户体验的重要性会受到项目负责人(领导)的理解认知、企业规模、项目大小、你的资历(如话语权、成功案例等)影响。但是,下面这两种情形仍然是很常见的。

对小公司来说,这个项目可能非常重要,项目的直接领导也会密切关注,有时甚至过于密切以至于直接参与,影响到你的设计并控制设计结果。这种情况下你一定要注意,这个项目的直接负责人并不一定是公司的领导,他对产品设计的影响可能与公司真正的需求并不相同。

在大型企业中,你并没有机会去接触高层领导,你能接触到的最高领导往往就是该项目的直接负责人,因为大型企业的组织层次都比较复杂。不过,这类项目负责人通常也有较为丰富的经验,你的工作也将在相关负责人的审查下进行。

项目经理

项目经理负责跟踪项目的进度,协调资源分配,促进解决方案,帮助解决障碍。在一些项目中,并没有设定项目经理这个职位,这对于中型和大型项目来说和可能会导致一些问题。

如果项目中没有项目经理,这是一个锻炼自己的好机会,一定要付出更多的细心和努力,因为用户体验设计师也是贯穿于整个项目中的重要角色,对项目流程十分熟悉,也应该拥有把控整个项目进度的能力。

如果有项目经理,一定要和他沟通整个计划,提出你所有不清晰的疑问,不要擅自做任何假设。例如,有时候计划中并不包含将高保真视觉稿制作成详细的高保真原型,有时没有为可用性测试中安排招聘测试人员的时间,这需要你与项目经理密切沟通调整。项目经理的计划越精细,在项目推进的过程中跟踪管理也就越方便。

开发工程师

大家都知道用户体验和软件开发是互补的过程。然而,我们却经常发现用户体验和工程开发之间似乎有一道障碍,经常产生摩擦,虽然原因有很多,但最根本的解决方法就是沟通。

有些情况下,即便打磨好高保真原型之后,开发人员和交互设计师沟通细节依然会产生摩擦。开发团队负责人经常担忧用户体验设计师总是不考虑现有技术的限制和新的用户体验对性能的影响,对开发中所涉及的可访问性和实现的复杂程度缺乏认识。而这些担忧常常是真实存在的。

不过,在Axure中可以通过可视化的交互效果和丰富的综合注释功能改善与开发团队沟通环境。对原型的分析、评估、注释、调整等都可以在开发周期的早期开始进行,有效降低开发团队的压力。

视觉设计师

在需要快速设计高保真原型的项目中,视觉设计是一项艰巨的挑战,因为在线框图与视觉设计之间存在非常大的差距。通常我们先使用Axure制作比较粗糙的表达设计概念的线框图,然后快速迭代。这些线框图的信息架构、操作任务和布局通常都是暂定的。使用Axure可以不断优化巩固这些粗糙的想法,直到制定出最终的交互模式。这些线框图,也许比较引人注目,但都是使用灰色的线条、色块设计的。作为用户体验设计人员,我们必须隔离那些并不适合于当前设计阶段的反馈,如果在设计早期就使用丰富的颜色和图像,用户和投资人往往都会受到影响,而难以提出真正有价值的反馈。

当视觉设计师介入用户体验设计流程后,原来的丑小鸭(线框图)变成了美丽的天鹅(视觉稿)。此时,这两组设计会分别继续进行各自的工作,视觉设计按规格切图;交互设计继续制作规范和注释。

有时,交互设计师并不完全欣赏视觉设计师的作品。因为在大多数情况下,视觉设计师并不会真正深入理解应用程序的设计理念,而且他们用来进行视觉设计工作的时间也比较短,在这种情况下要设计出优秀的视觉稿确实是非常大的压力与挑战。

你必须了解清楚视觉设计的时间计划,并将其添加到你的时间表中,因为当视觉设计通过批准后,你需要将视觉稿体现在高保真原型和规范文档中,所以一定要与视觉设计师保持顺畅的沟通。

用户体验设计师

一旦你从事这份工作,你就会发现自己在团队(项目)中的位置非常独特,经常“斡旋”于开发工程师、系统功能、视觉设计、用户、业务逻辑、项目经理、投资人之间,你也许会问“这不是产品经理该做的事情么?”如本书开头所述,在大多数公司中,企业对产品经理和用户体验设计师并没有明确的界限,甚至很多公司将其混为一谈,但这对于现在的你来说并不重要,因为这种情况在较长时期内不会有明显改变。

无论你是产品经理还是用户体验设计师,都必须深刻理解利益相关者的视角(他们到底想要什么)并与其密切沟通。这不仅仅是为了实现良好的设计,营造无障碍的协作环境,还能够让你有效控制项目进程中的变化,让项目按照你的时间表顺利推进。

然而,你是否已经准备好拥抱Axure了?先不要急,以下几点可以帮你作为参考。

·你是公司中唯一使用Axure的用户吗?或者说你是一名独立的顾问?

·回顾一下到现在为止你创建项目时所使用的工具,是否有亟待解决的空缺需要填补?而这些空缺正是Axure所能填补的?

·Axure这款工具已经越来越流行了,学习这款工具能给你带来新的就业机会或者提升自己的竞争力吗?

·你是设计类公司的全职员工还是小型设计团队的成员?

·使用Axure的功能特色,如团队协作功能,重复使用自定义部件库、母版等,提高效率的同时降低成本,这些优点能否为你带来新的机会,承接更加有挑战的项目(赚更多的钱)?

总结

要做一名成功的用户体验设计师,我们必须要综合表达许多不同的信息,很多情况下这些信息设置是相互矛盾或冲突的。我们要熟悉业务流程,了解技术约束和用户体验对性能的影响,做用户研究和数据分析等。最后,我们要在各种纷乱的条件和信息中找到至关重要的平衡,并创建最佳的、可行的用户体验,无论在何种设备何种系统上,都不能阻止我们探索和前进的脚步。由此可见,一款能够帮助我们构思、可视化设计、沟通、协作、注释和创建规范文档的专业用户体验设计工具是非常宝贵的。Axure被许多人誉为全世界用户体验行业中最好的设计工具之一,因为该公司从未间断对用户体验的不断升级与追求,他们与广大用户体验设计师密切沟通,听取建议与意见,增加各种丰富的复杂的功能需求,并且不断证明这是能够帮助我们解决工作需求的正确工具。

在下面的章节中,我将为你介绍Axure所提供的丰富特性,你会更深刻地体验到Axure如何在工作环节中满足你的需求。不过,请牢记:Axure只是一款工具,在工作中最重要的元素正是你和你的思想。只有你驾驭Axure之后才能将想法和这款工具发挥出最大的价值。

第1章 Axure基础交互

Axure RP7相较之前的版本做出了很大的改变,无论是你刚刚接触 Axure RP7的新人,还是曾经使用过Axure的其他版本,在深入学习之前都有必要花一些时间来发现它的新特性并熟悉它的功能。Axure是一款功能强大的工具,但能否用好它取决于你的学习态度和自学的毅力。

本章将帮助你熟悉Axure的软件界面,并对掌握其丰富功能打下坚实的基础。Axure可适用于Windows系统和OS X系统,为了方便教学,我在书中的截图统一采用Axure RP7的Windows版本进行讲解。本章内容包含以下知识点:

1.1 欢迎界面

1.2 站点地图

1.3 部件概述

1.4 交互基础

1.5 总结

1.1 欢迎界面

当你初次安装Axure RP7并启动之后,你首先会看到一个欢迎窗口,见图1。在弹出的欢迎窗口中,你可以选择以下操作。

A:显示最近打开的项目,或者打开一个新的项目。

B:新建一个项目(.rp后缀的文件,稍后给大家讲解Axure中不同后缀的文件)。

C:查看当前 Axure 的版本号。Axure RP7 版本发布后更新频率较高,每次都会修复一些已经的Bug,所以希望大家保持更新到最新版本。要检查是否发布了最新版本,点击菜单栏中的“帮助>检查更新”,见图2。

图1
图2

1.1.1 Axure的文件格式

Axure包含以下3种不同的文件格式。

.rp文件:这是设计时使用Axure进行原型设计师所创建的单独的文件,也是我们创建新项目时的默认格式。

.rplib文件:这是自定义部件库文件。我们可以到网上下载Axure部件库使用,也可以自己制作自定义部件库并将其分享给其他成员使用。

.rpprj文件:这是团队协作的项目文件,通常用于团队中多人协作处理同一个较为复杂的项目。不过,在你自己制作复杂的项目时也可以选择使用团队项目,因为团队项目允许你随时查看并恢复到任意的历史版本。

1.1.2 团队项目

团队项目可以全新创建,也可以从一个已经存在的 RP 文件创建。

在创建团队项目之前,你最好有一个SVN服务器或者网络驱动器,见图3。

图3

1.1.3 工作环境

图4

A:菜单栏 B:工具栏

C:站点地图面板 D:部件面板 E:母版面板

F:部件交互和注释面板 G:部件属性和样式面板 H:部件管理面板

I:页面属性面板,包含页面注释、页面交互、页面样式选项卡

1.1.4 自定义工作区

你可以根据自己的使用习惯对工作区域进行自定义设置。

显示/隐藏某个面板:点击菜单栏中的“视图>面板”选项,在这里可以勾选或取消勾选,设置对应面板的显示和隐藏,见图5。

分离面板:某些情况下,我们想让设计区域变得更大些以便我们顺畅工作,这时可以设置左侧、右侧、底部的面板分离(弹出)。要弹出某个面板,只需点击该面板右上角的弹出按钮即可,见图6。

但是,你无法改变这些面板的默认位置,如站点地图面板默认在左上角,你无法让它默认停靠在其他位置。

图5
图6

1.2 站点地图

站点地图用来增加、删除和组织管理原型中的页面。添加页面的数量是没有限制的,但是如果你的页面非常多,强烈建议使用文件夹进行管理,见图7。

1.3 部件概述

通过部件面板,你可以使用Axure内建的部件库,也可以下载并导入第三方部件库,或者管理你自己的自定义部件库。在默认显示的线框图部件库中包含Common、Forms和Menus and Table3个类别,关于流程图部件库稍后给大家介绍,见图8。

图7

A:创建新页面 B:创建新文件夹

C:使用上下箭头管理页面顺序

D:使用左右箭头管理页面的层级关系

E:删除页面

F:搜索页面

图8

A:点击选择部件库,在下拉列表中选择想要使用的部件库。

B:选项按钮,可以载入已经下载的部件库,创建或编辑自定义部件库。

C:搜索部件

1.3.1 部件详解

线框图是由一系列部件构成的,要添加部件,只需将需要的部件拖放至设计区域即可。不过,这Axure中内建的部件分别有着不同的属性、特性和局限性,要想学好Axure这款软件,首先要熟悉这些基础部件。

1.图片(image)

图片部件可以用来添加图片和插图,显示你的设计理念、产品、照片和更多。

·导入图片和自动大小:拖放一个图片部件到设计区域并双击导入图片。Axure支持常见的图片格式,如GIF、JPG、PNG和BMP。当询问你是否自动调整图片大小时,点击“是”将图片设置为原始大小,点击“否”图片将设置为当前部件的大小,见图9。

图9

·粘贴图片:图片还可以从常用的图形设计工具(如Photoshop)和演示工具中复制粘贴到Axure中。此外当我们从CSV 或 Excel 复制内容时,可点击右键,选择“粘贴为图片/表格/纯文本”;或直接按Ctrl+V,在弹出的对话框中选择,见图10。

图10

·添加&编辑图片文字:你可以给导入的图片添加编辑文字,双击导入图片后,右键点击图片然后选择“编辑文字”;还可以给添加的文字编辑样式,如颜色、大小、字体等,见图11。

图11

·保持比例缩放图片:按住Shift键,同时用鼠标拖动图片部件边角的小手柄,可以按纵横比例缩放图片,见图12。

·图片交互样式:图片可以添加交互样式,如鼠标悬停时、鼠标按下时、选中时和禁用时。右键点击图片,并选择“交互样式”或者在部件属性面板中进行设置。当添加完交互样式后,在图片的右上角会出现一个黑白的小方块,鼠标悬停在小方块上(或点击小方块)可以预览交互效果,见图13。

·图片选择组:和单选按钮组相似,图片也可以被分配到图片选择组,当选择组中的图片设置了选中样式后,点选其中一张图片,其他图片都会被设置为默认样式。要将图片设置到选择组,先选择图片,然后点击右键选择“指定选择组”,或者在部件属性面板底部设置选项组名称,见图14。

图12
图13
图14

Tips

要给每张图片都添加“鼠标点击时”事件,设置该图片选中状态值为真,才能生效。在后面的综合案例中会有详细介绍。

·分割/裁切图片:图片部件可以被水平或垂直裁切,这样可以非常方便地处理导入的截图。右键点击图片,选择“分割图片”或“裁切图片”或在部件属性面板中选择,见图15。

分割图片(Slice):将图片分割成多个水平或垂直的部分。

裁剪图片(Crop):选择你想保留的图片区域。

·图片边界和圆角:通过选择工具栏中的线宽和线条颜色就可以给图片添加边框。也可以通过拖动部件左上角的圆角半径控制手柄,或是进入部件的样式面板设置图片圆角,见图16(A:自左至右分别是图片线条颜色、线条宽度、线条样式;B:圆角半径控制手柄)。

·图片的不透明度:图片可以调整透明度,在部件样式面板中输入不透明度百分比即可,见图17。

图15
图16
图17

·优化图片:大图片会使你的RP文件增大,还会影响浏览质量,使用优化图片可以在不改变图片大小的前提下减小图片大小,但是这有可能影响图片质量。要优化图片,右键点击图片并选择“优化图片”,见图18。

图18

Tips

导入GIF动态图片时不要使用优化,这样会导致图片失去动态效果。

H1、H2、标签、文本、矩形、占位符、形状按钮:这几个部件都属于形状部件,默认的标签和文本的样式可以在部件样式编辑器中进行编辑。

·添加文本:选中形状部件后点击右键,选择“编辑文字”,即可添加文本,也可以双击形状部件后进行编辑添加。

选择形状:形状部件可以改变各种形状,包括矩形、三角形、椭圆形、标签、水滴和箭头等。要改变部件形状,先选择该部件,然后单击部件右上角灰色圆圈选择形状,或者在部件属性面板中选择形状,见图19。

·形状部件的格式:形状部件允许使用富文本格式,包括编辑字体、字体大小、字体颜色、粗体、斜体、下划线,并改变对齐方式。你也可以改变填充颜色、线条颜色、线宽和线模式。要更改形状的格式,点击控件,在顶部的工具栏格式中进行设置,见图20。

图19
图20

·自定义样式:使用部件样式编辑器可以集中管理部件,包括形状的格式。例如,创建一个蓝色按钮的样式并将其指定给一些形状按钮,然后在部件样式管理器中修改填充颜色,这样所有使用蓝色按钮样式的形状按钮都会更新到最新样式,见图21。

·设置交互样式:形状按钮可以像图片部件那样添加鼠标悬停时、鼠标按下时、选中时、禁用时的交互样式。右键点击形状部件并选择“交互样式”,打开交互样式对话框,你可以添加任何可用的格式和样式,见图22。一旦提交样式,在设计区域中部件的右上角会增加一个由黑白色块,将鼠标悬停在小方块上(或者点击小方块)可以预览交互样式,见图22。

图21
图22

Tips

鼠标点击设置部件为选中的动作要添加在每个选项组部件上才能正常工作!

·指定形状按钮到选择组:与单选按钮组效果类似,当选项组中的一个形状部件点击设置为选中状态后,选项组中的其他形状部件都会切换到默认样式。要将形状部件添加到选择组,首先选中要添加到选项组中的形状部件,点击右键,设置选项组名称,或者到部件属性面板底部设置选项组名称。

·圆角:使用形状部件可以添加圆角效果。要添加圆角效果,选中形状按钮部件,拖动部件左上角的黄色小三角调整圆角半径,或者到部件样式面板中设置圆角半径,见图23。

·转换形状/文本部件为图片:若想使形状部件转换为图片且保留形状按钮部件上已经添加的注释和交互,可以使用“转换为图片”功能。右键点击想要转换的形状按钮,选择“转换为图片”,见图24。

·自适应宽高:形状部件拥有自适应宽高属性,这是为了自适应其文字内容的宽高,取代手动指定尺寸和文字换行。设置自适应宽高的快捷操作是,双击大小调整手柄。双击左右手柄会自动调整宽度,双击上下手柄自动调整高度适应其内容高度,双击左上、右上、左下、右下4个角会自动调整宽度和高度适应其文字内容,见图25。

图23
图24
图25

·阴影:通过添加外部阴影、内部阴影和文字阴影可以增加原型的保真度。要添加阴影,可以在顶部的工具栏和部件样式面板中设置,见图26。

·不透明度:要设置形状部件的不透明度,在部件样式面板中设置不透明度的值,如50%(数值越小透明度越高),见图27。

图26
图27

形状部件的局限性

·单独的边框样式:没有办法给形状按钮的不同边框分别设置样式。一种解决方法是使用水平线和垂直线画出边框。比如,创建一个形状按钮,顶部线条设置为白色,左右和底部的线条设置为黑色。

·矢量图:通常可以将线条和形状组合起来接近想要的形状,但是没有钢笔工具绘制自定义形状。一个解决方法是使用矢量图绘制工具,如Photoshop,制作好图片后复制粘贴到Axure中或者导入图片。

·复制形状样式:当复制形状按钮部件的时候,形状的样式也会被复制过来。不过可以使用格式刷工具复制样式,并粘贴给其他指定部件。

Tips

矩形和形状按钮是完全相同的部件,只是默认的外观有所不同而已。形状按钮添加了圆角效果,而矩形没有。

2.水平线和垂直线( Horizonal & Vertical Lines)

最常见的用法是将原型中的内容分解成几个部分,比如,将页面分为header 和 body。

·给线条添加箭头:线条可以通过工具栏中的箭头样式转换为箭头。选中线条,在工具栏中点击箭头样式,在下拉列表中选择你想要的箭头样式,见图28。

·线宽、颜色和样式:线条可以添加颜色、设置宽度和添加样式,在工具栏中设置即可,见图29。

·旋转箭头:要旋转线条或箭头,PC机按住Ctrl,Mac机按住Cmd ,同时将鼠标悬停在线条末尾拖拽,或者在部件样式面板中设置旋转角度,见图30。

图28
图29

3.图片热区 (Hot Spot)

图片热区是一个不可见的(透明的)层,这个层允许你放在任何区域上并在图片热区部件上添加交互。图片热区部件通常用于自定义按钮或者给某张图片添加热区。

·图片热区可以用来创建自定义按钮上的点击区域。比如使用多个部件(图片部件、文字部件、形状按钮部件)来创建一个保真度较高的按钮,只需在这些部件上面添加一个图片热区并添加一次事件即可,无需在每个部件上都添加事件。

·如果你想给一张图片上添加多个交互,或者给一张图片的某部分区域添加交互,就可以通过给图片添加图片热区部件来实现,见图31。

·编辑图片热区:图片热区在生成的原型中是透明的(不可见的),如果想在设计区域中也将其设置为透明,点击菜单>视图>遮罩,取消勾选“图片热区”即可。

图30
图31
图32

4.动态面板(Dynamic panel)

动态面板是一个可以在层(或状态)中装有其他部件的容器。可以将动态面板比喻成相册,相册的每个夹层中又可以装进其他照片,每个夹层和里面的部件可以隐藏、显示和移动,并且可以动态设置当前夹层的可见状态。这些特性允许你在原型中演示自定义提示、灯箱效果、标签控制和拖拽等效果。在实际工作中你会发现,动态面板是在原型设计中使用最多的部件。

5.动态面板状态(Dynamic panel states)

动态面板可以包含一个或多个状态,并且每个状态中可以包含多个其他部件。不过,一个动态面板状态只能在同一时间显示一次。使用交互可以隐藏/显示动态面板及设置当前动态面板状态的可见性。添加和调整动态面板大小最好的方法,就是将已有的部件转换为动态面板。选择想要放入动态面板状态的部件,右键单击,选择“转换为动态面板”,这个动作将自动创建一个新的动态面板,并将你选择的部件放入动态面板的第一个状态中。也可以拖拽动态面板部件到设计区域中,并使用部件上下左右的提示来调整大小。设计区域中动态面板的大小决定了其状态中包含部件的边界大小,也就是说,如果动态面板状态中其他部件的尺寸大于动态面板尺寸,那么超出的部分将不会显示。

·编辑动态面板状态:编辑动态面板时,可以看到到一个蓝色虚线轮廓,这表示在动态面板中只能看到蓝色虚线轮廓范围内的内容(如果你的Axure并没有显示这条蓝色虚线框,请在部件属性面板中取消勾选“调整大小以适合内容”)。编辑动态面板状态中部件的操作,与你平时拖放部件是一样的,见图32。

·如果添加的部件大小超过了动态面板轮廓范围,那么可能需要使用添加滚动栏或勾选“调整大小以适合内容”了,当勾选此项后,动态面板的尺寸将与动态面板状态里面的部件尺寸自适应,见图33。

·添加动态面板状态:默认状态下,动态面板状态里面是空的,所以需要添加内容(部件)到动态面板状态中,要做这一步,在设计区域区中双击动态面板,或者在部件管理器(Widget Manager)中双击“动态面板状态”。在弹出的对话框中,可以添加、删除、重命名、复制或打开编辑动态面板状态。第一个状态是这个动态面板的默认状态。双击一个状态可以打开此状态进入编辑,见图34。

图33
图34

A:添加一个新的动态面板状态

B:复制并新增一个已有的动态面板状态(其内容也会一起复制)

C:使用上下蓝色箭头给动态面板状态排序

D:编辑选中的动态面板状态

E:编辑全部动态面板状态

F:删除选中的动态面板状态

G:动态面板状态列表

6.动态面板交互

在设计区域中拖入一个动态面板部件后,就可以像平时那样在事件列表中选择事件,并添加用例来给动态面板添加交互效果。动态面板可用的动作包括:设置面板状态(Set Panel State)和设置面板尺寸(Set Panel Size),在稍后的章节后会给大家详细讲解动态面板事件。

·设置动态面板状态:创建一个多状态的动态面板,并使用设置面板状态动作设置动态面板到指定状态,在用例编辑器(Case Editor)中选择动作并在页面列表中选择状态。在这个动作中,你可以同时设置多个动态面板的状态选择。这个动作可以用于切换标签状态、更改按钮上的内容或者下拉列表中的选择,见图35。

·设置动态面板属性

进入/退出动画(Animate In/Out):替换动态面板状态时的过渡效果 (例如淡入淡出、向上滑动等)。

显示面板(Show if hidden):如果指定的动态面板是隐藏的,勾选这个选项会在执行动态面板状态设置的同时显示动态面板。

展开/收起部件(Push/Pull):勾选此项,会使动态面板下面或右侧的部件自动移动,用于展开和折叠内容。

显示或隐藏一组部件:使用“隐藏/显示”动作来显示或隐藏动态面板当前状态的内容。在用例编辑器对话框中,在左侧的动作列表中选择动作。在设计区域中,给所有的部件命名是一种良好的习惯,这便于你找到想操作的部件。你可以在一个动作中选择多个面板设置隐藏/显示。

使用“切换(Toggle)”动作可以让面板在显示/隐藏之间切换,见图36。

上一个/下一个状态:动态面板可以使用设置面板状态将其设置为上一个/下一个状态。意思是,如果你的动态面板当前状态是1,这个动作(next)将会设置动态面板为状态2,这样按顺序切换状态;而“上一个”(previous)与之顺序相反。

图35
图36

·循环( Wrap from last to first):勾选此项将允许动态面板状态进入无限循环,类似无限轮播的幻灯广告,当到达最后一个状态时,面板将会设置到第一个状态,从而进入无限循环。

循环间隔(Repeat every):这个选项将给上下两个状态切换时添加时间间隔,1秒=1000毫秒。这通常用于自动轮播图,见图37。

停止循环(Stop Repeating):当一个动态面板被设置为自动循环时,使用选择状态下拉列表中的停止循环选项,可以停止动态面板的自动循环。要继续被停止的循环,使用“Next/Previous”并勾选“循环”选项,可以重新启动被停止的循环,见图38。

图37
图38

值(Value):你可以使用值来设置动态面板状态,但是值必须与你想要显示的动态面板状态名称一致才可以正确显示。比如,你要基于上一个页面存储的变量值在新页面中使用“页面加载时”事件来设置动态面板到指定状态。这种情况下,你只需添加一条简单的用例即可,见图39。

·动态面板属性

调整大小以适合内容(Fit to content):动态面板可以基于其内部面板的内容大小改变尺寸,使用调整大小以适合内容。除了上述方法,还是可以双击动态面板四周的小手柄状态,来调整大小以适合内容。注意,当动态面板里的部件被添加或删除时,动态面板会自动改变大小,见图40。

图39
图40

添加滚动栏(Scroll bars):使用滚动栏给动态面板添加可滚动内容。在动态面板属性面板中选择滚动栏下拉菜单并选择滚动栏的显示方式。

注意,为了让滚动栏正常显示,动态面板状态中的内容必须比动态面板的边界轮廓大,并且不能勾选“调整大小以适合内容”,见图41。

固定到浏览器(Pin to Browser):固定到浏览器,允许你创建固定的元素,如页头、页脚或侧边栏。当滚动窗口时,这些元素会停留在固定位置。选择动态面板,在动态面板属性面板中点击“固定到浏览器”,在弹出的对话框中勾选“固定到浏览器窗口”,然后按需选择水平固定/垂直固定,如有必要可输入指定边距,见图42。

图41
图42

触发鼠标交互样式(Trigger Mouse Interaction Styles):如果对动态面板状态里的部件设置了鼠标悬停时、鼠标按下时的交互样式,如果勾选此项,当对动态面板进行交互时就会触发动态面板状态内部部件的交互样式,见图43。

100%宽度(仅在浏览器中生效):结合动态面板的背景颜色或图片,100%宽度将会使动态面板背景色或背景图片自适应整个浏览器宽度。在动态面板属性面板中勾选“100%宽度”,双击该动态面板,在弹出的动态面板状态管理器中双击任意状态,然后在底部的面板状态样式(Panel State Style)中,可以动态编辑动态面板背景,如果勾选了“100%宽度”,背景在浏览器中会扩展至整个浏览器的宽度,见图44。

图43
图44

7.内部框架(Inline Frame)

使用内部框架,可以嵌入视频、地图和HTML文件到原型设计中。

·嵌入外部内容:外部的HTML文件、视频、地图等内容都可以嵌入到内部框架中。对于视频和地图,选择链接到外部URL;链接到本地已经存在的HTML文件,内部框架要链接到本地文件路径,见图45。

·编辑内部框架

指定目标网址或视频地址:拖拽内部框架部件到设计区域,双击内部框架,在弹出的对话框中指定哪些内容要在内部框架中显示。可选择内部页面或者任何站外URL,见图45。

隐藏边框:右键点击内部框架,在弹出菜单中勾选“显示/隐藏边框”可切换显示内部框架周围的黑色边框,见图46。

图45
图46

显示滚动条:要隐藏或按需显示内部框架的滚动条,可以右键点击内部框架,选择滚动条,或者在部件属性面板中设置滚动条。滚动条可以按需要显示(当内部框架内容大小超过内部框架时才显示),也可以总是显示,见图47。

内部框架预览图片:你可以给内部框架添加Axure内置的预览图片,如视频、地图,也可以自定义预览图片。注意,预览图片会在设计区域中显示,但不会在生成的原型中显示,见图48。

图47
图48

内部框架的局限性

·样式:内部框架的样式被限定为切换显示边框和滚动栏,如果想添加其他样式,请在内部框架下面添加矩形部件,然后调整矩形部件的样式即可。

·导航和传递变量:内部框架不能用来制作导航,也不能通过父页面传递变量和设置动态面板状态。你可以使用含有内容的动态面板来替代内部框架,实现内容滚动效果。

8.中继器(Repeater)

中继器部件是Axure RP7中新增的一款高级部件,用来显示重复的文本、图片和链接。通常使用中继器来显示商品列表、联系人信息列表、数据表或其他信息。中继器部件由两部分构成,分别是中继器数据集和中继器的项。

·中继器数据集:中继器部件是由中继器数据集中的数据项填充,这些填充的数据项可以是文本、图片或页面链接。双击中继器,进入中继器数据集,在页面底部面板的最左侧标签可以看到,见图49。

图49

·中继器的项:被中继器部件所重复的布局叫做项(项目),双击中继器部件进入中继器项进行编辑,在下图(图50)显示的数据区域中所展示的部件会被重复多次(数据集中有几行就重复几次)。

图50

·填充数据到设计区域:使用每项加载时事件填充数据到设计区域。

插入文本(Inserting Text):双击“每项加载时 ,OnItemLoad事件”并使用设置文本动作插入文本到中继器。在用例编辑器中选择设置文本(Set text)动作,然后在用例编辑器右侧选择想要插入的文本部件,在右下角点击设置文本值(Set text to value),打开编辑文本(Edit text),然后点击Insert Variable or Function,选择变量[[Item.ColumnName]],并点击“确定”按钮。当你的中继器项加载时,就会将数据集中列(column)的内容插入到你刚刚设置的文本部件中,见图51A。

导入图片(Import Image):导入图片到数据集中并使用“设置图像”(Set Image)动作将图片插入到中继器的项中。不过要提前在中继器的项中添加一个图像部件,用来显示中继器数据集里面所导入的图片。在中继器数据集中右键点击要插入图片的项,点击“导入图片”并添加图片。然后双击“每项加载时Onitemload事件”,添加“设置图像”(Set Image)动作。选择要将图片插入到哪个部件,然后在默认下拉选项中选择“值”(Value),并在右侧点击 fx,选择[[item.ColumnName]],点击“确定”按钮,见图51B。

图51A
图51B

·在中继器包含的部件中使用交互:中继器的数据可以添加交互,比如添加基于条件判断的页面链接。

插入页面链接(参照页):中继器数据集的项中可以添加参照页(页面链接),当用户点击时就跳转到相关页面。右键点击一个空白项并选择“参照页”(Reference Page),然后选择“页面”。在中继器中选择一个想要触发页面跳转动作的部件,对其添加动作“在当前页打开”(Open Link in Current Window),然后选择“链接到外部URL或文件”(Link to an external url or file),点击fx,在弹出的编辑值(Edit Value)窗口中点击Insert Variable or function下拉列表,选择在数据集中添加了参照页的列名,见图52。

使用条件(Using Conditions):数据集中的项值可以使用带有特定条件的动作进行评估,例如,可以设置数据集中名称为age的列,如果值大于2就设置为选择状态,这样可以突出显示特定的数据项,见图53。

图52
图53

·中继器格式(Repeater Style),见图54。

图54

布局(Layout):该设置允许改变数据的显示方式。

垂直(Vertical):设置中继器数据集中的项垂直/垂直显示。

水平(Horizontal):设置中继器数据集中的项水平/水平显示。

换行(Wrap Grid):超过指定数量就换行/换列。

每列包含数量(Items Per Column):设置每列中包含的数据项的数量。

项的背景色(Item Background):给中继器添加背景色。

背景色(Back Color):给每个中继器的项添加背景色。

交替背景色(Alternating Color):给中继器的项添加交替背景色。

分页(Pagination):设置在同一时间显示指定数量的数据集的项。

多页(Multiple Pages):将中继器中的项放在多个页面中切换显示。

每页项的个数(Items Per Page):设置中继器的项在每个单页中显示的数量。

开始页(Starting Page):设置默认显示页面。

间距(Spacing):设置行/列数据之间的间隔。

Row:设置每行数据之间,相隔的像素大小。

·编辑文本框

文本框类型:文本输入框可以给定特殊的输入格式,主要用来调用移动设备上不同的键盘。

可选格式:文本、密码、Email、number、phonenumber、url、搜索、文件、日期、month、time。

要设置文本输入框格式,在部件属性面板中进行设置,见图55。

图55

·提示文字:在部件属性面板中还可以给文本输入框添加提示文字,同样也可以编辑提示文字的样式。提示文字会在鼠标点击文本框时消失,见图56。

·禁用文本框:要防止有文字输入到文本输入框,可以在部件属性面板中勾选“禁用”。文本输入框还可以在用例编辑器中使用禁用动作,将其设置为“禁用”,部件被设为禁用后就变成了灰色,见图57。

图56
图57

·设置文本框为只读:当文本输入框设置为“只读”后,它只可以被选择,但无法对其内容进行删改。要将文本输入框设置为只读,在部件属性面板中勾选“只读”即可,见图58。

图58

·隐藏边框:可以通过切换显示文本输入框的边框来创建自定义文本框。要隐藏文本输入框周围的边框,右键点击该部件并勾选“隐藏边框”,或者到部件属性面板中勾选。你还可以给文本框添加背景色或设置为透明,见图59。

图59

9.文本段落(Text Area )

文本段落大多情况下用在留言/评论效果上。文本段落可以输入多行文本,而且可以调整至任意你想要的高度。

·文本段落的属性除了不能设置类型,其他和文本输入框相同,可参考文本输入框部件。

文本段落部件的局限性在于,不能添加渐变背景色,但可以将其背景设置为透明,再添加一个填充颜色的矩形部件,置于文本段落底部即可。

10.下拉列表(Drop List)

下拉列表经常用于性别选择、信用卡过期日期、地址列表等形式。所选择的项存储在变量中,然后通过变量进行传递。

·编辑下拉列表

添加、删除、排序选项:双击下拉列表,打开编辑选项,在这里你可以对下拉列表中的项目进行添加、删除和排序,见图60。

图60

A:新增列表项

B:使用蓝色箭头管理列表项顺序

C:删除选中列表项

D:删除全部列表项

E:批量添加列表项

F:列表项

图61

禁用下拉列表:默认情况下,拖拽下拉列表到设计区域中,该部件是启用的。但某些情况下需要禁用下拉列表。你可以右键点击该部件并选择勾选“禁用”,或者到部件属性面板中勾选。下拉列表的启用/禁用,可以在用例编辑器的动作中进行设置,见图61。

创建空白选项:在生成的原型中,下拉列表默认显示最上面/第一个选项。虽然不能创建空白选项,但是可以创建一个选项并添加一个空格,这样可以替代空白选项,见图62。

11.列表选择框(List Box)

通常用来替代下拉列表 ,如果你想让用户查看所有选项而不需要点击选择的话,就使用列表选择框替代下拉列表。

·编辑列表选择框:项目的添加、删除、排序和批量添加操作,和下拉列表框都是一样的。唯一不同的是,列表选择框可以设置为允许多项选择,见图63。

图62
图63

·列表选择框的局限性

动态添加、删除项目列表框内的选项不能动态改变,但可以使用多个动态面板状态中包含不同的选项来实现。

在一个交互事件中不能同时读取或设置多个选项,即便你勾选了多选功能,列表选择框部件只允许你读取或设置一个选项。

12.复选框(Check Box)

复选框经常用来允许用户添加一个或多个附加选项。

·编辑复选框:要将复选框默认设置为勾选,可以在设计区域单击复选框或者右键选择选中。复选框可以通过用例编辑器中的动作设置为“选择/选中”进行动态设置。

·对齐方式:默认情况下,复选框在左侧,文字在右侧。你可以通过部件属性面板调整左右位置。

·禁用复选框:默认情况下复选框是启用的,但有些情况需要禁用复选框。禁用复选框可右键点击,选择“禁用”,或者在部件属性面板中选择禁用,见图64。

·复选框的局限性

自定义复选框样式:复选框只可以给文字更改样式。如果想给复选框更改样式,可以使用动态面板制作自定义复选框。

与单选按钮不同:复选框不能像单选按钮那样指定单选按钮组。

13.单选按钮(Radio Button)

单选按钮经常用于表单中,从一个小组的选择切换到另一组。该选择可以触发该页面上的交互或被存储的变量值跨页交互,见图65。

图64
图65

·指定单选按钮组:当单选按钮添加到组中后,一次只能将一个单选按钮设置为选中状态。选择你想要加入到组中的单选按钮,然后右键点击,指定单选按钮组,或者在部件属性面板中设置单选按钮组名称。如果你想添加多余的单选按钮到组中,右键点击该单选按钮,选择“指定单选按钮组”,在弹出的对话框中选择对应的单选按钮组名称。要将单选按钮从组中移出,右键点击单选按钮,选择“指定单选按钮组”,将群组名称清空,点击“确定”按钮,见图66。

·对齐方式:默认情况下,单选按钮在左侧,文字在右侧。你可以通过部件属性面板,调整左右位置。

·禁用单选按钮:默认情况下单选按钮是启用的,但有些情况需要禁用单选按钮。右键点击单选按钮,选择“禁用”或者在部件属性面板中选择禁用。

·设置默认选中或动态选中:单选按钮可以在设计区域点击设置为默认选中,或者右键单击勾选选中。这样生成原型单选按钮默认是选中的。单选按钮也可以通过设置“选择/选中”动作动态设置其选中状态。

·单选按钮的局限性:单选按钮是固定的高度和宽度,你可以改变文字,但无法改变按钮形状。

14.提交按钮(HTML Button)

为操作系统的浏览器体验而设计,HTML按钮的格式取决于你浏览原型的操作系统中的浏览器。它通常针对你的浏览器内置了鼠标悬停时和鼠标按下时的样式,和你操作系统中应用程序的样式类似。

·编辑提交按钮:提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了,取而代之的是,生成原型后在浏览器中它会使用内建的样式。不过,提交按钮可以改变大小和禁用。如果你想自定义按钮样式,请使用形状按钮(Button Shape)。

·提交按钮的局限性

提交按钮无法设置交互样式,如选中时/鼠标悬停时/鼠标按下时。

提交按钮也无法动态读取或写入按钮上的内容。

15.树部件(Tree)

树部件可以用来模拟一个文件浏览器,点击不同的节点将隐藏和显示一个动态面板的不同状态。当一个页面内有太多交互的时候,也可以点击树节点来跳转到新页面,见图67。

图66
图67

·添加/删除树节点:右键点击一个节点,在弹出菜单中可以添加/删除/移动节点。子节点将会添加到该节点的下一层。在该节点前/后添加,是同级节点,见图68。

·添加树节点图标:给你的树部件添加自定义图标,右键点击一个节点并选择“编辑图标”,导入一个图标,并选择应用到“该节点/同级节点”或“该节点、同级节点和所有子节点”。关闭对话框,然后右键点击树,选择“编辑树属性”,在弹出窗口中勾选“显示图标”,见图69。

图68
图69

·自定义展开/收缩图标:右键点击,选择“编辑树属性”,在弹出对话框或部件属性面板中,可自定义展开/收缩图标,见图70。

·树节点的交互样式:树节点可以添加鼠标悬停时/鼠标按下时/选中时的样式。右键点击树节点并选择“交互样式”,或者在部件属性面板中设置,见图71。

图70
图71

·树部件的局限性

包含树部件的边框不能自定义格式。如果想制作自定义的树部件,使用动态面板组合可以制作出你想要的效果。

树节点可以上传图标,但是不能动态隐藏/显示嵌入到树节点中的部件。

16.表格(Table)

通常通过交互(如点击鼠标)在单元格中动态显示数据。

·添加/删除行和列:要添加行/列,点击右键单元格,在弹出菜单中选择插入/删除行或列,见图72。

·交互样式:表格中的单元格可以设置鼠标悬停时/鼠标按下时/选中的交互样式,右键点击单元格(可以同时按下Ctrl进行多选),然后在部件属性面板中设置交互样式。

·表格的局限性

鼠标单击单元格无法输入文字,单元格默认要双击才可以输入文字。要实现单击输入文字状态,可以使用Text Field部件覆盖在单元格上面。不能同时添加多行或多列,表格只允许每次添加一行或一列。

不能动态添加行或列。如果希望使用动态添加行/列功能,请使用中继器部件。

不能对表格中的数据进行排序和过滤。

17.经典菜单(Menu)

菜单部件通常用于母版之中,其目的是在原型中跳转到不同页面。

·编辑菜单:要编辑菜单,点击右键,在弹出菜单中选择在之前/之后新增菜单项、删除菜单、新增子菜单,见图73。

图72
图73

·菜单样式:使用工具栏或部件样式面板可以编辑菜单样式,如填充颜色、字体颜色和字体大小等。需要注意的是,子菜单是通过父菜单获取格式的,见图74。

·菜单的交互样式:菜单可以添加交互样式,鼠标悬停时/鼠标按下时/选中时,选择要添加样式的菜单(可以按住Ctrl多选),右键选择交互样式,或者在部件属性中设置,如仅该菜单项、仅该菜单、该菜单及所有子菜单,见图75。

图74
图75

Tips

需要注意设置的交互样式被应用到了哪里。

·菜单部件的局限性

无法嵌入图标和部件。但是,可以通过创建自定义菜单来实现。

无法点击展开子菜单。菜单部件默认是鼠标悬停展示子菜单的。

1.3.2 部件操作

1.添加、移动和改变部件大小

·添加部件:只需在左侧部件面板中拖拽部件到设计区域,也可以从一个页面中复制部件并粘贴到另一个页面中。

·移动部件:拖拽它们到想要的地方或使用方向键。使用方向键每次移动部件1像素;使用Shift+方向键每次移动部件10像素;Ctrl+鼠标拖放快速复制并移动新部件到指定位置;Shift+鼠标拖动按X、Y轴移动部件;Ctrl+Shift+鼠标拖放按X、Y轴复制并移动新部件到指定位置。

·改变部件大小:先选中部件,然后拖拽部件周围的手柄工具;也可以使用坐标和大小(在编辑工具栏和部件属性面板,这两个位置都可以);还可以选取多个部件,同时移动并改变它们的大小。

·旋转部件:选择想要旋转的形状按钮部件。PC请按Ctrl,Mac请按Cmd,然后将鼠标悬停在部件的边角上并上下拖拽鼠标;还可以输入要旋转的角度值。在部件属性和样式面板中,选择样式标签并输入要旋转的值。

·文本链接:链接可以添加到文本部件上,首先双击并选中要添加链接的文字内容,然后在工具栏或属性面板中点击超链接按钮,在弹出的对话框中选择“链接到其他页面或外部链接”,添加链接后,文字将被突出显示。

·组合多个部件:首先选择多个部件,点击右键,选择组合(按Ctrl+G),还可以使用工具栏对部件进行组织、对齐、分布或锁定。你可以选择并编辑组合中的指定部件而不会影响到其他部件,见图76。

·改变选择模式:在Axure中有“选择随选模式”和“选择包含模式”两种选择模式可以在工具栏中找到(PC在缩放右侧,Mac在左上角)。

“选择随选模式”是默认的,当你点击或拖动鼠标选择区域时,任何接触到的部件都会被选中。

“选择包含模式”和Visio相似,只有在选取完全包含部件时才能选中。

2.编辑部件样式

·编辑器工具栏:使用设计区域上面的工具栏按钮可以编辑部件样式,如字体、字号、字体颜色、填充颜色、线条颜色、坐标和大小等。还可以选择多个部件并使用布局工具,如次序、对齐、分布等,见图77。

图76
图77

·双击编辑:双击部件来编辑该部件是最常用的属性编辑。如双击一个图片部件打开导入图片对话框,双击下拉列表打开添加下拉列表项对话框。

·右键编辑:右键点击部件显示额外特定的属性,这些属性根据部件的不同而不同。

·部件属性和样式面板(Widget Properties & Style Tabs):在样式面板中可以找到部件坐标、大小、字体、对齐、填充、排序线和边界等。在属性面板中可以找到部件的特殊属性。

3.部件属性面板详解

·交互样式:交互样式是在特定条件下的视觉属性。

鼠标悬停(MouseOver):当鼠标指针悬停于部件上。

鼠标按键按下(MouseDown):当鼠标左键按下保持没有释放时。

选中(Selected):当部件是选中状态。

禁用(Disabled):当部件是禁用状态。

·自动调整宽度(Auto Fit Width):调整部件宽度适合文本。

·自动调整高度(Auto Fit Height):调整部件高度适合文本。

·禁用(Disabled):设置部件为禁用状态。

·选中(Selected):设置部件为选中状态, 生成原型后可见。

·设置选项组(Selection Group):将多个部件添加到选项组。

·提示信息(Tooltip):当鼠标悬停在部件上时,显示文字提示信息。

4.部件特定属性

·图片

保留角部(Preserve Corners):允许拉伸图片时角部不会改变。

·单行文本框

类型(Type):主要用于手机原型,文本输入类型可更改为文本、密码、电子邮件、电话号码、号码、网址和搜索等。

最大文字数(Max Length):设置最多可输入的文字数。

提示文字(Text Hint):占位文本,当鼠标点击时就会消失。

提示样式(Hint Style):编辑提示文字的样式。

只读(Read Only):生成原型后是不可编辑的文本。

隐藏边框(Hide Border):隐藏输入框的边框。

禁用(Disable):将部件设置为禁用状态。

提交按钮(Submit Button):分配一个按钮或形状按钮,当按下回车时执行点击按钮事件。

·内部框架

框架目标页面(Frame Target):将页面或URL加载到内部框架中。

框架滚动条(Frame Scrollbars):按需显示内部框架的滚动条。

隐藏边框(Hide Border):切换显示内部框架周围的边框。

预览图片(Preview Image):显示Axure内部的预置图片。

·复选框

选中(Slected):默认设置为选中状态。

对齐按钮(Align button left/right):相对于复选框旁边文字的位置。

·单选按钮

指定单选按钮组(Assign Radio Group):创建或分配单选按钮组,当选择或切换时只有一个按钮被选中。

·多行文本框

隐藏边框(Hide Border):隐藏文本区域周围的边框。

·下拉列表/列表选择

列表项(List Items):添加/删除列表的选项。

·菜单

菜单项(Menu Item):新增/删除菜单项。

·树

展开/折叠图标(Expand/Collapse Icon):改变展开/折叠树节点的小图标。加减号(Plus/minus):改变图标为+/-。

三角形(Triangle):改变图标为三角形。

自定义(Custom):设置自定义图标。

显示树节点图标(Show Tree Node Icons):切换显示额外的树节点的图标,可以通过右键单击一个树节点并选择“编辑图标”添加。

5.部件样式面板详解

·位置+尺寸

选中项(Selected Item):编辑选中部件的位置、尺寸和旋转。

每个选中项(Each Selected Item):当多个部件被选中时出现,同时编辑每个部件的位置、尺寸和旋转。

整体选中(Entire Selection):当多个部件被选中时出现, 编辑选中区域的位置、尺寸和角度。

·基本样式

基本样式下拉列表(Custom Style Droplist):允许你选择在部件样式编辑器中创建的自定义样式。

部件样式编辑器(Widget Style Editor):允许你编辑任何控件的默认样式或创建自定义可应用于多个部件的样式。

格式刷(Format Painter):允许你复制部件的格式属性并选择性地将它们应用到其他部件(格式刷的位置在顶部工具栏,字体左面的小刷子)。

·字体(Font):选择字体、字体大小、字体颜色、粗体、斜体、下划线、添加项目符号和超文本链接。

·边框,线+填充:选择线的颜色、线宽、线条样式、箭头样式、圆角半径、填充颜色、透明度和阴影。

·对齐+边距:设置部件的水平和垂直对齐、填充和行间距。

6.部件样式编辑器(Widget Style Editor)

部件样式编辑器允许你编辑默认部件的格式、创建自定义样式,并集中管理所有部件的样式。要打开部件样式管理器,点击菜单栏的“项目>部件样式管理器”或者点击工具栏中的部件样式管理器图标。

·部件默认:编辑默认部件样式会影响所有部件的样式,当添加新的部件到设计区域时,部件会使用你所设置的默认样式。

·自定义:创建自定义样式可以快速将指定部件风格设为一致,你可以选择哪些属性将覆盖默认的样式。

要将自定义风格应用到部件,在工具栏最左侧的下拉列表中选择你设置的自定义样式。

编辑部件自定义样式会影响到所有使用此风格的部件,见图78。

7.格式刷 (Format Painter)

格式刷允许你从一个部件复制样式,并可选择性地粘贴给其他部件。它的行为就像一个样式剪贴板。

要复制部件的样式,首先在工具栏中单击格式刷小图标(在字体左侧),弹出格式刷对话框,然后点击要复制样式的部件,在格式刷对话框中你还可以选择想要的属性,取消勾选复选框去掉不想要的,然后点击想要粘贴样式的部件,在格式刷底部点击“应用”。在复制粘贴部件样式的时候,你可以保持格式刷对话框打开,这样方便你快速工作,见图79。

图78
图79

1.3.3 页面样式

1.页面样式 (Page Style)

页面样式允许你使用自定义页面样式或默认页面样式,对不同页面进行设置和编辑,见图80。

图80

·页面样式(Page Style):你可以自定义页面样式。要编辑页面的默认样式或创建新的自定义样式,点击默认样式下拉列表旁边的小图标或者点击菜单栏“项目>页面样式编辑器”。

·页面对齐(Page Align):可设置原型在页面中居左或居中对齐。这项设置只有在生成HTML之后才有效,在Axure设计区域中是无效的。需要注意的是,居中是根据部件在页面中的位置来确定的。

·背景色(Back Color):给页面添加背景颜色。

·背景图片(Back Image):导入图片来当作页面背景。

·水平和垂直对齐(Horiz Align and Vert Align):设置背景图片水平对齐和垂直对齐。水平居中和垂直居中将会让背景图片固定在一个位置上。

·重复(Repeat):设置背景图片水平重复、垂直重复、水平垂直重复、覆盖或包含。

·重复图片(Image Repeat):水平和垂直重复背景图片。

·水平重复(Repeat Horizontal):仅水平重复背景图片。

·垂直重复(Repeat Vertical):仅垂直重复背景图片。

·拉伸以覆盖(Stretch to Cover):拉伸图片让其完整覆盖背景的宽度和高度。

·拉伸以包含(Stretch to Contain):缩放图像的最大尺寸,让它可以适应背景的水平尺寸或垂直尺寸。

·素描效果:素描可以快速将一个原型项目设置为手绘线框图效果。这可以让大家将精力集中在结构、交互和功能上。素描效果是页面样式的一部分,所以你可以在页面样式编辑器中对其进行设置。此外,素描效果还有如下选项。

素描程度(Sketchiness):值越高,部件线条越弯曲,推荐50。

颜色(Color):将整个页面填充为灰色,包含所有图片、填充色、背景色和字体颜色。

字体(Font):在所有页面上应用统一的字体。

线宽(Line Widt):给部件的边框增加宽度,这样看上去更像手绘效果,见图81。

2.页面样式编辑器(Page Style Editor)

页面样式编辑器允许你对原型的每个页面样式进行设置。此外,你还可以为特定页面创建自定义页面样式。在页面样式管理器中可以集中管理所有自定义样式。要打开页面样式编辑器,点击页面样式下拉列表右侧的小图标。编辑“默认”样式可以改变原型设计中的每一个页面。点击绿色加号,添加自定义样式。添加完毕后在页面样式的下拉列表中选择即可,见图82。

图81
图82

3.网格、辅助线和对象对齐

辅助线对保持布局与部件对齐有非常大的帮助。你可以为单独页面创建辅助线(局部辅助线),也可以给所有页面创建全局辅助线。

·添加局部辅助线:添加辅助线到当前页面,把从水平或垂直辅助线拖拽到设计区域。绿色的线条表明是当前选中的。

·添加全局辅助线:给所有页面添加辅助线,PC摁住Ctrl,Mac按住Cmd,然后拖拽辅助线到设计区域,这样所有页面都被添加了辅助线,见图83。

图83

4.使用预置设置创建辅助线(Create Guides from Preset)

你可以通过Axure预设添加辅助线,点击菜单栏“布局>网格和辅助线>创建辅助线”,或者右键点击设计区域,选择“网格和辅助线>创建辅助线”。这里有多种预置可供选择;或者自定义你的布局;还可以选择添加全局辅助线或当前页面辅助线,见图84。

5.网格设置(Grid Settings)

·显示网格(Show Grid):切换网格的显示状态。

·对齐网格(Snap to Grid):切换部件与网格对齐。

·间距(Spacing):定义网格的交叉点之间的距离。

·样式(Style):改变网格交叉线的风格样式。

·线(Line):将网格样式设置为线。

·交叉点(Intersection):将网格样式设置为点。

·颜色(Color):改变网格的颜色,见图85。

图84
图85

6.辅助线设置(Guide Settings)

·显示全局辅助线(Show Global Guides):切换项目中全局辅助线的可见性。

·显示页面辅助线(Show Page Guides):切换项目中页面辅助线的可见性。

·吸附到辅助线(Snap to Guides):切换部件吸附到辅助线状态。

·锁定辅助线(Lock Guides):切换设计区域中辅助线的锁定状态。

·全局辅助线颜色(Global Guide Color):改变全局辅助线颜色。

·页面辅助线颜色(Page Guide Color):改变页面辅助线颜色。

7.对象对其设置(Object Snap Settings)

·对齐对象(Snap to Objects):切换部件是否与其他部件边缘对齐。

·对齐边缘(Snap to Margin):切换部件之间对齐的像素大小。

·垂直(Vertical):设置部件垂直对齐的像素。

·水平(Horizontal):设置部件水平对齐的像素。

·对齐辅助线颜色(Snap Guide Color):设置当部件对齐时辅助线的颜色,见图86。

图86

1.4 交互基础

本节将给大家讲解一些Axure中比较基础但非常实用的交互,可以让不懂代码的人制作出可交互的高保真用户体验原型。在Axure中创建交互包含以下4个构建模块:交互(Interactions)、事件(Events)、用例(Cases)和动作(Actions)。交互是由事件触发的,事件是用来执行动作的,这就是本章要重点讲解的4个主题。

客户对更好的用户体验的期望持续上升,很明显,我们正处在设计软件所带来的巨大变化中,加上响应式网页设计的广泛传播与移动APP的巨大需求,用户体验更是被推向浪尖。在国内且不论公司规模大小、甚至并不真正了解用户体验的意义,当需要制作网站或APP的时候都会提出“用户体验”这个词。

在项目中(尤其是响应式网站设计和APP设计),利益相关者越早参与进来充分沟通,工作效率与项目成功率越高。但是在项目早期仅仅靠带有很多文字注释的静态线框图是难以与利益相关者顺畅沟通的,因为他们难以想象出静态线框图实现出来的“响应式”是什么样子,或者他们会想象成其他任何样子,这就造成了巨大的理解差异。

使用Axure,设计师们可以快速制作高参与度的用户体验,并可以在目标设备上测试带有交互效果的线框图。本节将给大家介绍如何将静态线框图转换为动态,使用Axure制作简单但高效的交互。

交互(Interactions)是Axure中的构建模块,用来将静态线框图转换为可交互的HTML原型。在Axure中,通过一个简洁的、带有指导的界面选择指令和逻辑就可以创建交互,每次生成HTML原型,Axure都会将这些交互转换为浏览器可以识别的真正的编码(JavaScript、HTML、CSS)。但是请牢记:这些编码并不是产品级别的,并不能作为最终的产品使用。

每个交互都是由3个最基本的单元构成,这里为了便于大家理解,我们借用3个非常简单的词来讲解:什么时候(When)、在哪里(Where)和做什么(What)。

什么时候发生交互行为(When)?在Axure中对应When的术语是事件(Events),举几个例子。

·当页面加载时(其中页面加载时,就是事件)。

·当用户点击某按钮时(其中鼠标点击时,就是事件)。

·当文本输入框中的文字改变时(其中文字改变时,就是事件)。

在Axure界面右侧的部件交互面板中,你可以看到很多事件的列表,这些事件根据部件的不同而有所不同(并不是所有部件的事件都是相同的),在设计区域底部的页面交互面板中可以看到页面相关的事件。

在哪里找到这些交互(Where)?交互可以附加在任意部件上,如矩形部件、下拉列表和复选框等,也可以附加在页面上。要给部件创建交互,就到部件交互面板的选项中进行设置;要给页面创建交互,就到页面交互面板的选项中进行设置。在Axure中对应Where的术语是用例(Cases),一个事件中可以包含一个或者多个用例。

做什么(What)?在Axure中对应What的术语是动作(Actions),动作定义交互的结果,举几个例子。

·当页面加载时,第一次渲染页面时显示哪些内容(其中显示哪些内容,就是动作)。

·当用户点击某按钮时,就链接到其他某个页面(其中链接到某个页面,就是动作)。

·当文本输入框失去焦点时(光标从文本输入框中移出时),文本输入框可根据你设置的条件进行判断,并显示错误提示(其中显示错误提示就是动作)。

多用例(Multiple Cases):有些情况下,一个事件中可能包含多个替代路径,要执行某个路径中的动作是由条件逻辑(Condition Logic)决定的,关于条件逻辑我会在后面的章节中给大家讲解。

1.4.1 事件(Events)

总体来说,Axure的交互是由以下两个类型的事件触发的。

·页面事件:是可以自动触发的,比如当浏览器中加载页面时,还有滚动时。

·部件事件:对页面中的部件进行直接交互,这些交互是由用户直接触发的,比如点击某个按钮。

页面事件,以页面载入时事件(OnPageLoad)为例,给大家详细描述一下,见图87。

·浏览器获取到一个加载页面的请求(A),可以是首次打开页面,也可以是从其他页面链接过来的。

图87

·页面首先检测是否有页面加载时交互,页面加载时事件(C)是附加在页面上的(B)。

·如果存在“页面加载时”事件,浏览器会首先执行页面加载时的交互。在后面的章节中,会给大家讲解不同页面间基于“页面载入时”事件的变量值的传递。

·如果页面载入时的交互包含条件(D),浏览器会根据逻辑来执行合适的动作(E / F);如果页面载入时不包含条件,浏览器会直接执行动作(G)。

·被请求的页面渲染完毕(H),页面载入时的交互执行完毕(I)。

下面是Axure RP7中所有可用的页面事件。

·页面载入时(OnPageLoad):当页面启动加载时。

·窗口改变大小时(OnWindowResize):当浏览器窗口大小改变时。

·窗口滚动时(OnWindowScroll):当浏览器窗口滚动时。

·鼠标单击时(OnClick):页面中的任何部件被点击时(不含空白处)。

·鼠标双击时(OnDoubleClick):当页面中的任何部件被双击时(不含空白处)。

·鼠标右键单击时(OnContextMenu):当页面中的任何部件被鼠标右键点击时(不含空白处)。

·鼠标移动时(OnMouseMove):当鼠标在页面任何位置移动时。

·按键按下时(OnKeyDown):当键盘上的按键按下时。

·按键弹起时(OnKeyUp):当键盘上的按键释放时。

·自适应视图更改时(OnAdaptiveViewChange):当自适应视图更改时。部件事件,如“鼠标点击时”(OnClick)就是最基本的触发事件,可以用于鼠标点击时,也可用于在移动设备上手指点击时,下面给大家描述一下部件事件的执行流程,见图88。

图88

·用户(A)对部件执行了交互动作,如鼠标点击,这个“鼠标点击时”事件是附加在部件(B)上的。

·不同的部件类型(如按钮、复选框和下拉列表等)拥有不同的交互响应(C)。比如,当用户点击一个按钮之前,鼠标移入该按钮的可见范围内,我们可以使用“鼠标移入时”(OnMouseEnter)事件改变这个按钮的样式。

·浏览器会检测这个部件的事件上是否添加了条件逻辑(D)。比如,你可能添加了当用户名输入框为空时就执行显示错误提示动作(G);如果用户名输入框不为空,就执行动作(E / F)。

·如果没有条件,浏览器会直接执行附加在该部件上的动作(G)。

·根据事件中动作的不同,浏览器可能会在当前屏幕刷新或者加载其他页面(I)。

下面是AxureRP7中所有可用的部件事件

·鼠标单击时(OnClick):当部件被点击。

·鼠标移入时(OnMouseEnter):当光标移入部件范围。

·鼠标移出时(OnMouseOut):当光标移出部件范围。

·鼠标双击时(OnDoubleClick):当时鼠标双击时。

·鼠标右键单击时(OnContextMenu):当鼠标右键点击时。

·鼠标按键按下时(OnMouseDown):当鼠标按下且没有释放时。

·鼠标按键释放时(OnMouseUp):当一个部件被鼠标点击,这个事件由鼠标按键释放触发。

·鼠标移动时(OnMouseMove):当光标在一个部件上移动时。

·鼠标悬停超过2秒时(OnMouseHover):当光标在一个部件上悬停超过2秒时。

·鼠标点击并保持超过2秒时(OnLongClick):当一个部件被点击并且鼠标按键保持超过2秒时。

·按键按下时(OnKeyDown):当键盘上的键按下时。

·按键弹起时(OnKeyUp):当键盘上的键弹起时。

·移动(OnMove):当面板移动时。

·显示(OnShow):当面板通过交互动作显示时。

·隐藏(OnHide):当面板通过交互动作隐藏时。

·获取焦点(OnFocus):当一个表单获取焦点时。

·失去焦点时(OnLostFocus):当一个部件失去焦点时。

·选项改变时(OnSelectionChange):当一个下拉列表被选中时,这是条件的典型应用。

·选中状态改变时(OnCheckedChange):当复选框或单选按钮被选中时。

·文字改变时(OnTextChange):当单行文本框或多行文本框中的文字被添加或删除时。

·动态面板状态改变时(OnPanelStateChange):当动态面板被设置了“设置面板状态”动作时。

·开始拖动时(OnDragStart):当一个拖动动作开始时。

·正在拖动时(OnDrag):当一个动态面板正在被拖动时。

·结束拖动时(OnDragDrop):当一个拖动动作结束时。

·向左拖动结束时(OnSwipeLeft):当一个面板向左拖动结束时。

·向右拖动结束时(OnSwipeRight):当一个面板向右拖动结束时。

·载入时(OnLoad):当动态面板从一个页面的加载中载入时。

·滚动时(OnScroll):当一个有滚动栏的面板上下滚动时。

·改变大小时(OnResize):当一个面板通过交互改变大小时。注意,如果动态面板属性中勾选了“调整大小以适合内容”,那么面板状态会自动调整大小。

1.4.2 用例(Cases)

通过图87和图88的模型,你应该已经对用例有所了解了。用例是用户与应用程序或网站之间交互流程的抽象表达,每个用例中可以封装一个独立的路径。通常情况下,我们让原型按主路径执行动作,但是为了响应用户的不同操作或其他一些条件,我们还需要制作可选路径来执行其他动作。举例来说,当用户点击超链接时,可能有一个打开新页面的用例。或者点击登录按钮时,可能有两个用例:如果登录成功就打开一个新页面,如果登录失败就显示提示错误信息。由此可见,使用Axure中的用例,可以用来给同一个任务创建不同的路径。

如果通过上面的描述依然对用例没有清晰的认识,下面这张图一定能帮你加深印象,见图89。

图89

用例通常用于以下两种方式。

·每个交互事件中只包含一个用例,用例中可以有一个或多个动作,不包含条件逻辑。

·每个交互事件中包含多个用例,每个用例中又包含一个或多个动作。包含条件逻辑或者手动选择需要执行的交互。

概括来讲,Axure中的用例基本上就是动作(Actions)的容器,可以帮助我们构建模拟原型中的替代途径。我们制作的原型保真度越高,用到的多用例交互也就越多。

添加用例(Adding Cases):在设计区域中选中部件,在部件交互和注释面板中可以看到该部件可用的事件。要添加用例,可以双击选中的事件或者点击“新增用例”。在弹出的用例编辑器对话框中,你可以选择并设置你想要执行的动作。

用例编辑器(Case Editor):

见图90,打开用例编辑器后,

·第一步:用例说明。你可以编辑用例说明,这里的说明会显示在用例名称中。

·第二步:新增动作。点击鼠标新增动作,这里可以新增多个动作。

·第三步:组织动作。这里会显示你所添加的动作,每个动作都可以添加多次。动作是按自上至下顺序执行的。比如,你添加的设置变量值在“打开新页面”之后,那么浏览器会先执行打开页面,然后再执行设置变量值的动作。这里的动作顺序是可以调整的,使用鼠标拖拽或者在点击每个动作右侧的小三角(右键点击也可以)选择蓝色小箭头,可以调整动作上移或下移。

·第四步:配置动作。选择动作后,可以对动作进行详细的设置。完成之后,点击“确定”按钮,用例和动作就会出现在部件交互和注释面板中了。

图90

1.4.3 动作(Actions)

动作是由用例定义的对事件的响应。做个最简单的说明:点击按钮在当前页面打开窗口。这个用例中的动作是“在当前窗口打开页面”。

Axure RP7当前支持以下6组动作。

·链接

·部件

·动态面板

·变量

·中继器

·杂项

Tips

变量、自定义事件和中继器动作我们将在高级交互一章中给大家讲解。

下面是Axure RP7中所有可用的动作。

打开链接(Open Link)

·当前窗口(Current Window):在当前窗口打开页面或外部链接。

·新窗口/新标签(New Window/Tab):在新窗口或新标签中打开页面或外部链接。

·弹出窗口(Popup Window):在弹出窗口中打开页面或外部链接,你可以定义弹出窗口的属性和位置。

·父窗口(Parent Window):在父窗口中打开页面或外部链接。

·关闭窗口(Close Window):关闭当前窗口。

·在内部框架中打开链接(Open Link in Inline Frame):在内部框架中加载页面或外部链接。

·在父框架中打开链接(Open Link in Parent Frame):在父框架中打开页面或外部链接,用于在内部框架中加载页面。

·滚动到部件(锚点链接)(Scroll to Widget ,Anchor Link):滚动页面到部件位置。

部件(Widgets)

·显示(Show):将隐藏的部件设置为显示(可见)。

·隐藏(Hide):隐藏部件(不可见)。

·切换可见性(Toggle Visibility):基于动态面板当前的可见性切换显示或隐藏。

·设置文本(Set Text):改变部件上的文字。

·设置图片(Set Image):改变图片。

·选中(Set Selected/Checked):设置部件到其选中的状态。

·未选中(Not Selected):设置部件到其未选中状态(默认状态)。

·切换选中(Toggle):根据部件当前的选中状态切换选中/未选中。

·设置选定的列表项(Set Selected List Option):设置下拉列表/列表选择框中的项为选中。

·启用(Enable):设置部件为活动的/可选择的/默认的。

·禁用(Disable):设置部件为禁用的/不可选择的。

·移动Move :移动部件到特定坐标。

·置于顶层(Bring to Front):将部件置于页面布局的顶层。

·置于底层(Send to Back):将部件置于页面布局的底层。

·获取焦点(Set Focus on Widget):设置光标聚焦在表单部件上(如文本输入框)。

·展开树节点(Expand Tree Node):展开树部件的节点。

·收起树节点(Collapse Tree Node):收起树部件的节点。

动态面板(Dynamic Panel)

·设置面板状态(Set Panel State):显示动态面板指定的状态。

·设置面板尺寸(Set Panel Size):改变动态面板的尺寸。

变量(Variables)

·设置变量值(Set Variable Value):设置一个或多个变量或/和部件的值(例如,一个部件的文本值)。

中继器(Repeaters)

·新增排序(Add Sort):使用查询对数据集中的项排序。

·移除排序(Remove Sort):移除所有排序。

·新增过滤器(Add Filter):使用查询过滤数据集中的项。

·移除过滤器(Remove Filter):删除所有过滤器。

·设置当前页(SetCurrent Page):使用分页时显示指定的页面。

·设置每页项目数(Set Items per Page):使用分页时设置每页显示中继器项的数目。

数据集(Data Sets)

·新增行(Add Rows):添加一行数据到数据集。

·标记行(Mark Rows):选择数据集中的数据行。

·取消标记行(Unmark Rows):取消选择数据行。

·更新行(Update Rows):编辑数据集中选中的行。

·删除行(Delete Rows):删除选中的行。

杂项(Miscellaneous)

·等待(Wait Time (ms)):按指定时间延迟动作,1秒=1000毫秒。

·其他(Other):在弹出窗口中显示文字描述。

使用多个用例(Defining Multiple Cases)

有些情况下,一个事件会执行多个用例。要在事件上添加多个用例,重复添加即可。你可以使用用例说明来描述用例的使用场景。比如,当点击一个按钮时,你添加两个用例,一个用例描述是“如果登录成功”,另一个用例描述是“如果登录失败”。在生成的原型中,点击按钮会显示用例描述,可以选择执行哪一个。

良好的用例说明可以将条件流程清晰地表达出来,这样也利于维护和更新。如果想让原型将用例正确地表达出来,在用例中定义条件逻辑来表达基于存储在变量中的值,或用户在原型中输入的值。

1.4.4 交互基础案例

1.导航菜单样式

在我们只做网站原型的项目中,最常见的用户体验效果就是通过全局导航菜单清晰地反应出当前用户是在哪个页面。在这个简单的小案例中,我们的目标是:当页面加载时,全局导航菜单的样式会发生改变,反映出当前是哪个页面。现在,我们就来趁热打铁,利用前面刚刚讲过的内容,实现我们想要的效果,可以这样描述。

·什么时候(When):页面加载时。

·在哪里(Where):全局导航菜单。

·做什么(What):改变相应菜单的样式,反应当前所处的页面。

·条件逻辑(Condition Logic):无。

在这个案例中,要实现“做什么”这一步,也就是改变相应的样式的实现方法不只一种。事实上,使用Axure制作大多数交互的方法都不只一种。随着你对Axure这款软件不断熟悉,你的思维会更加灵敏、缜密,也会逐渐掌握这些不同的实现方法。

因为我们目前还没有详细讲解母版的使用,所以这个案例就使用动态面板来扮演内容部分。根据上面的案例描述,在页面第一次加载时,显示的是首页,所以全局导航菜单中首页这个标签是被选中的(我们只需要给全局导航菜单的每一个标签添加选中时的交互样式即可)。当用户点击其他标签时,动态面板的状态转换至与标签相应的内容,并且设置当前点击的标签为选中状态,其他为未选中。详细流程如下,见图91。

图91

01 选择导航中的首页(B);在部件属性面板中点击选中,在弹出的设置交互样式对话框中设置选中时的字体颜色,点击“确定”,见图92;给导航中的其他几个菜单重复这个操作。

图92

Tips

可以复制首页,然后改变文字内容即可,因为选中时的交互样式也会被复制到新的部件上。

02 当用户点击首页时:设置动态面板状态为Cakeshop-01 Homepage,见图93;设置首页选中为真(true),商店、博客、联系我们为假(false),养成良好的习惯,给该用例命名,见图94。

图93
图94

03 对其他标签进行相应的操作。在制作原型的过程中,经常要把之前做好的用例使用到其他部件上,这种情况下只需右键点击该用例,选择“复制”,然后选中目标部件,并右键点击相应的事件选择“粘贴”即可,你也可以使用常规的复制和粘贴快捷键(Ctrl+c, Ctrl+v)。需要注意的是,粘贴用例后要检查用例中的动作是否需要修改,避免造成错误。

04 现在,我们就来复制首页中刚刚写好的用例,见图95。然后,选择导航中的菜单部件,右键点击部件交互面板中的“鼠标点击时”事件,选择粘贴,见图96。

图95
图96

05 继续修改刚才粘贴的用例中的动作,我们要设置动态面板状态为Cakeshop-001 Shop ,并且设置“菜单部件”为选中,其他都为未选中,见图97。

重复上述操作,并修改用例中的动作,当你对全局导航中的菜单都添加并修改完用例,按下 F5 键快速预览并测试效果。此时你会发现,页面第一次载入的时候,首页并没有设置为选中状态,这是因为我们还没有在“页面载入时”事件中添加用例,现在就来操作,见图98。

图97
图98

按下F5键,再次预览测试,已经没有问题了。

2.显示/隐藏部件

在这个案例中,我们来制作会员登录框的显示和隐藏。接下来简单描述一下我们要实现的效果。

·首先设计登录区域,并将其转换为动态面板,默认为隐藏,并将其放在右上角合适的位置。

·给登录按钮添加选中时的交互样式。

·给登录按钮添加交互,当点击该按钮时就显示登录框并设置登录按钮为选中,再次点击该按钮就隐藏登录框并设置登录按钮为未选中。

01 设计登录区域

·将设计区域中包含的所有部件选中,然后点击右键,选择“转换为动态面板”,见图99。

·给动态面板命名。

·设置动态面板为隐藏,见图100。

图99
图100

02 给登录按钮添加选中时的交互样式。首先选中登录按钮,在部件属性面板中点击选中,然后在弹出的设置交互样式对话框中勾选“粗体”,并设置选中时的文字颜色,见图101。

图101

03 给登录按钮添加交互,在这个案例中,登录按钮扮演了一个切换操作的触发器角色。

·如果会员登录面板隐藏,点击登录按钮时就变为显示,并且登录按钮为选中。

·如果会员登录面板显示,点击登录按钮时就变为隐藏,并且登录按钮为未选中。

这是一个非常简单的案例,并不需要添加条件逻辑来实现。我们只需使用切换(Toggle)就可以轻松实现。

·选中登录按钮。

·在部件交互面板中双击“鼠标单击时”事件,弹出用例编辑器对话框。

·在用例编辑器的第二步中,新增切换选中(Toggle Selected)动作,并在第四步配置动作中选中登录按钮部件,见图102。

·不要关闭用例编辑器,在第二步中,继续新增动作“切换可见性”(Toggle Visibility),并在第四步中勾选会员登录的动态面板,见图103。

·最后养成好习惯,给用例命名,然后点击确定,摁下F5键预览并测试,见图104。

图102
图103
图104

1.5 总结

在本章中,我们介绍了Axure交互的基础内容。作为经验总结,需要从一开始就提醒各位读者的是:在制作原型交互的过程中一定要考虑到可交付资料,比如UI规范文档、线框图等。原型的保真度和复杂度越高,就越难以呈现一份清晰和容易理解的UI规范文档。

第2章 母版详解

母版可用来创建可重复使用的资源和管理全局变化,是整个项目中重复使用的部件容器。对母版的任何修改提交后,任何页面中所使用的相同的母版都会同时改变。

2.1 母版基础

2.2 自定义事件

2.3 母版案例

2.1 母版基础

母版可用来创建可重复使用的资源和管理全局变化,是整个项目中重复使用的部件容器。用来创建母版的常用元素有:页头、页脚、导航、模板和广告等。母版的强大之处在于,你可以在任何页面轻松地使用母版,而不需要再次制作或复制粘贴,并且你可以在母版面板对母版进行统一管理。对母版的任何修改提交后,任何页面中所使用的相同的母版都会同时改变。你还可以使用多个母版并将其添加到任何页面上。比如,你创建了一个全局导航菜单并将其放在了多个页面中,但是你想在全局导航菜单中添加一个“最新团购”栏目,为此你可以直接编辑母版,在全局导航菜单母版中添加这个栏目,所有页面中的全局导航菜单母版也将同步发生改变。当每个页面中有大量相同重复的部件时,使用母版能够节省时间,提高效率。

2.1.1 创建母版的两种方法

·方法一:在母版面板中点击“新增母版”,给新创建的母版命名,双击该母版进入编辑,见图1。

·方法二:在设计区域中选中要转换为母版的部件,然后点击右键,选择“转换为母版”,见图2。在弹出对话框中设置母版的名称,你还可以选择母版的拖放行为,稍后会讲解到。

图1
图2

2.1.2 使用母版

使用母版面板对母版进行管理,见图3。

·在母版面板中,你可以对母版进行添加、删除、排序等管理。

·要对母版重新命名,请慢速双击母版,或者点击右键选择“重命名”。

·删除母版,点击选中母版,并点击删除母版图标。

·拖拽母版或点击上下箭头图标可以对母版进行排序。

·母版面板还可以添加文件夹,与站点地图相似,母版还可以新增子母版。添加母版到设计区域中,见图4。

·拖放(Drag and Drop):拖放母版到设计区域中,就像平时操作部件一样。

·批量添加/删除(Bulk Add/Remove):右键点击母版,选择“新增到页面”,在弹出的“新增母版到页面”对话框中选择想要添加母版的页面。

右键点击母版,选择“从页面删除”,可以在页面中批量删除母版。

母版遮罩:可以看到,在添加的母版上会覆盖一层粉红色的遮罩,这是为了让我们快速区分设计区域中哪些元素是母版。不过,你可以点击菜单中的“视图 >遮罩”,取消显示这层粉红色的遮罩。同样,在这里你还可以给动态面板、中继器、图片热区取消/添加遮罩层,见图5。

图3
图4
图5

2.1.3 母版的行为特性(Master Behaviors)

母版可以设置3种不同的行为:拖放到任何位置、锁定母版位置、从母版脱离。要改变母版行为,右键点击母版,“选择拖放行为”,在弹出的子菜单中进行选择。你可以随时修改母版行为,但这只会影响到当前要拖放到设计区域的母版,见图6。

任何位置(Place Anywhere):当拖动母版到设计区域时,你可以任意指定母版的位置,见图7。

图6
图7

·锁定母版位置(Lock to Master Location):当拖动母版到设计区域时,母版会被自动锁定到创建母版时的位置,见图8。

·从母版脱离(Break Away from Master):当拖动母版到设计区域时,这些部件会与母版脱离关系,变成可以编辑的部件。这对于创建有预置属性的部件库非常有帮助(比如一个深灰色带有文字的按钮),见图9。

图8
图9

2.2 自定义事件

2.2.1 自定义事件概述

自定义事件是创建在母版中的,允许为母版的每个不同实例添加不同交互。当你想让母版内的部件影响到页面中母版外部的部件时,也可以使用自定义事件。自定义事件的交互是由母版内部的部件触发的。

例如,在母版中创建了“上一页/下一页”按钮,可以在按钮上添加一个鼠标点击时的自定义事件,当点击按钮时跳转到不同页面,而这个事件取决于当前母版所在的页面。这样做的好处就是,这里的按钮是一个母版,可以在一个地方轻松对其进行维护/更新。

或者,你的页面中有一个母版和一个动态面板,使用母版中的按钮来控制动态面板隐藏。你可以在母版中的按钮上添加自定义交互事件,然后就可以在母版上定义这个事件来设置动态面板为隐藏。要熟悉自定义事件可能会花一点儿时间,但是当你在工作用到它的时候,你会发现它的强大。

下面是关于自定义事件的重点。

·自定义事件只能在母版中的部件上创建。

·一个母版可以有多个自定义事件。

·创建自定义事件需要两个步骤。1.在母版中的部件上创建自定义事件。

2.将母版拖入到页面的设计区域中,选中该母版,在部件交互面板中使用自定义事件创建交互来影响当前页面中的元素。

2.2.2 创建和使用自定义事件

双击母版进入编辑,选中母版中要触发自定义事件的部件,然后在部件交互面板中双击想要触发自定义事件的事件,在弹出的用例编辑器中第二步,添加“自定义事件”动作,继续在第四步配置动作中设置自定义事件的名称,最后勾选自定义事件前面的复选框,点击“确定”,见图10。

·此外,你还可以双击母版,进入编辑状态。然后点击菜单栏中的“布局>管理自定义事件(仅限母版)”,对自定义事件进行管理,见图11。

图10
图11

当添加完毕自定义事件之后,将母版拖放到任意页面的设计区域中,选中该母版,在部件交互面板中就可以看到刚刚添加的自定义事件了。自定义事件的操作方法,和平时操作其他事件是一样的。

2.3 母版使用案例

这个案例是为了帮你进一步理解什么是自定义事件及其重要性。在这个案例中,我将演示如何使用一个带有自定义事件的母版在4个不同的页面中触发不同的动作。在Axure中,如果没有自定义事件,这是无法实现的。

01 在站点地图中创建4个页面,在任意页面的设计区域中添加“上一页”和“下一页”两个部件,还有两条水平线,并将其转换为母版,见图12。

图12

02 双击母版,进入编辑状态,选中上一页,在部件交互面板中双击“鼠标单击时”事件,在弹出的用例编辑器中新增自定义事件动作,并在第四步配置动作中新增自定义事件,给其命名为 previous(注意:不支持中文),勾选其前面的复选框(如果不勾选,在母版的交互面板中是看不到该事件的),点击“确定”按钮,见图13。

03 选中下一页部件,在部件交互面板中双击“鼠标单击时”事件,在弹出的用例编辑器中新增自定义事件动作,并在第四步配置动作中新增自定义事件,给其命名为next(注意:不支持中文),勾选其前面的复选框(如果不勾选,在母版的交互面板中是看不到该事件的),点击“确定”按钮,见图14。

图13
图14

04 将该母版拖放到每个页面的设计区域中。

05 为不同页面中的母版添加自定义交互事件。注意,首页中只能点击“下一页”,所以此页面的母版只添加点击next事件,在当前页面打开 page1 即可。在 page1/page2 的母版中分别添加 previous和next事件,让其跳转到相应的页面。在page3的母版只添加previous事件,让其跳转到page2,见图15。

06 按下F5键,快速预览测试效果。

图15

相关图书

Axure RP9原型设计实战案例教材
Axure RP9原型设计实战案例教材
Axure RP8网站与App原型设计经典实例教程(超值版)
Axure RP8网站与App原型设计经典实例教程(超值版)
Axure RP8网站与App原型设计经典实例教程
Axure RP8网站与App原型设计经典实例教程
Axure RP8 入门手册  网站和App原型设计从入门到精通
Axure RP8 入门手册 网站和App原型设计从入门到精通
Axure RP8产品原型设计快速上手指南
Axure RP8产品原型设计快速上手指南
Axure原型蓝图
Axure原型蓝图

相关文章

相关课程