详情
本书主要包括6个方面的内容：界面原型知识介绍、Axure RP8操作教程、产品设计思维和设计原则、经典案例、综合实战案例和工作中的心得体会。除了如何设计原型，还会讲到如何分享、输出设计成果以达到“沟通”的目的。
Axure RP8.0产品原型设计与制作实战
人民邮电出版社
北京
图书在版编目（CIP）数据
Axure RP8.0产品原型设计与制作实战 / 狄睿鑫编著.--北京：人民邮电出版社，2019.6
ISBN 978-7-115-50784-6
Ⅰ.①A… Ⅱ.①狄… Ⅲ.①网页制作工具 Ⅳ.①TP393.092.2
中国版本图书馆CIP数据核字（2019）第061593号
◆ 编著 狄睿鑫
责任编辑 李东
责任印制 马振武
◆ 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京瑞禾彩色印刷有限公司印刷
◆ 开本：700×1000 1/16
印张：11.25 2019年6月第1版
字数：300千字 2019年6月北京第1次印刷
定价：59.00元
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东工商广登字20170147号
本书主要讲解了Axure RP8.0软件的操作方法，并拓展了相关知识，最终引导读者逐步完成热门案例的制作。作者还穿插讲解了设计思维和设计原则方面的知识，阐述了从事原型设计工作的个人心得体会。
全书共包含11章，第1章讲解了低保真原型和高保真原型的区别；第2章介绍了如何制作低保真原型，每个功能的讲解都附带了小案例练习，同时讲解了设计原则和思路；第3章为原型的分享与合作；第4章介绍了如何制作高保真原型，并包含对优秀的设计思路和细节的讲解；第5章为自定义元件库；第6章为自适应视图；第7章为自定义UI元素；第8～10章为综合案例，分别制作了电商类App、音乐类App和后台管理系统；第11章讲解了如何绘制流程图、团队项目协作注意事项和如何撰写PRD文档，以上内容在实际工作中都非常实用。
本书的适用对象除了产品经理外，还包括交互设计师、UI设计师、用户体验师、可用性专家、市场人员和运营人员等。
在互联网行业中，“产品经理”“PM”是显得很“高端”的职位，越来越多的应届毕业生渴望成为产品经理，甚至是程序员、工程师都开始想转行成为产品经理。不管自己未来的职业目标有多远大，“原型设计”都是从业人员必须掌握的重要技能之一。在“入坑”之前，读者也许已经知道Axure RP是一款非常专业的原型设计工具，但笔者想强调的是，Axure只是一款工具，它并不是原型设计的全部。很多初学者刚开始都会热衷于学习软件的使用方法，迷恋制作各种复杂酷炫的交互效果，甚至使用Axure去制作一些诸如“连连看”“幸运大转盘”之类的小游戏，这完全是一种认知上的误区。原型设计绝对不等于操作Axure软件，就像UI设计不等于操作Photoshop一样。能够把软件使用得很流畅，并不代表能够设计出让用户满意的产品，用Axure或者其他工具制作的一些超出“原型”范畴的作品，完全是制作者用来炫技的东西，在真实项目中实用价值很有限。
当然，笔者的意思并不是说工具不重要，只是不想让初学者陷入迷恋工具学习的怪圈。虽然有时候拿一支笔和一张纸就可以把想法表达出来，但这仅限于某些特殊场景，比如原始需求的讨论，而且纸张也不方便保存、合作、分享和进行版本管理。“工欲善其事，必先利其器”，一款合适的原型设计工具，能够帮助我们高效地完成工作。读者要学习的Axure RP这款非常强大的产品原型设计工具，支持Windows和Mac OS平台，能够制作几乎所有的交互动作，同时还支持多人协作设计和版本控制管理，支持导出HTML文件和图片，还可以利用官方平台发布原型，让参与项目的老板、客户、开发团队等各方人员实时查看、参与讨论，善用这款软件确实可以为工作带来极大的便利。
◎教学内容与教学思路
本书主要包括6个方面的内容：界面原型知识介绍，Axure RP8.0操作教程，产品设计思维和设计原则，经典案例，综合实战案例，以及工作中的心得体会。除了讲解如何设计原型，还会讲到如何分享、输出设计成果以达到“沟通”的目的。
本书与其他讲解Axure书籍的不同之处在于，首先要为读者普及界面原型的相关知识，着重强调在项目的不同周期使用的原型保真度是不同的，所以读者会看到在制作低保真原型章节中，列举的案例几乎全是黑白稿，很少有视觉元素。其次，在软件操作部分，以界面原型的迭代周期为依据，逐步讲解使用Axure RP8.0制作低保真原型和高保真原型需要的知识和技能，不仅讲解Axure RP8.0软件的操作方法，同时会穿插一些设计思维和设计原则的讲解。例如，在讲完复选框元件的使用后，会提醒读者“要用肯定的文字作为复选框的标签”，不宜用“不要给我推送消息”之类的否定文字等，这些设计的细节之处通常都会影响用户对产品的满意度，进而影响用户黏性，甚至会决定产品的成败。
在案例设计方面，不仅有针对某一个或几个知识点的典型案例，还会和读者一起制作当前较为成功的互联网产品案例，使读者能够循序渐进，牢牢掌握软件和设计技能。
在最后，笔者会分享一些在实战项目中使用Axure RP的心得体会，让读者可以更加高效地利用这款软件完成工作。
◎学习前的准备
本书软件操作讲解的部分使用的是Axure RP8.0版本，为了能够更好地学习和练习，建议使用此版本。如果你已经购买了Axure RP7.0，也不会影响学习，因为两个版本的差距不大，只是有一些功能在两个版本中的位置有所不同。但是需要注意的是，Axure RP7.0不能打开使用Axure RP8.0创建的项目文件，更低的Axure RP版本就不建议使用了。
◎资源与支持
本书由数艺社出品，“数艺社”社区平台（www.shuyishe.com）为您提供后续服务。
◎配套资源
本书附有案例制作效果源文件，读者可以下载rp文件到本地进行分析学习。另外，相关案例的制作过程配有视频演示，扫码后可以获取资源。
资源获取请扫码
◎与我们联系
我们的联系邮箱是szys@ptpress.com.cn。如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名以及ISBN码，以便我们更高效地做出反馈。
如果您在网上发现有针对数艺社出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
◎资源与支持
人民邮电出版社有限公司旗下品牌“数艺社”，专注数字艺术图书出版，为艺术设计从业者提供专业的图书、U书课程、社区服务等教育产品。领域涉及平面、三维、影视、摄影与后期等数字艺术门类；字体设计、品牌设计、色彩设计等设计理论与应用门类；UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类；环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺社”社区平台www.shuyishe.com。我们将提供及时、准确、专业的学习服务。
原型设计是产品经理的重要工作之一，为了在真实项目中能够事半功倍，我们需要了解在不同的业务场景中针对不同的输出对象，界面原型需要制作成什么样的保真程度。
本章学习要点
»界面原型的概念和作用
»界面原型的保真程度及应用
直奔主题，关于界面原型并没有一个非常严格的定义，简单来说，界面原型是在项目前期用来直观表现产品框架的模型。界面原型中可以体现产品的设计理念、业务逻辑和交互逻辑，当然也可以体现视觉逻辑。
为什么要设计界面原型？因为对于一个项目、一款产品，可能有多种想法和创意，如何把这些想法和创意准确地记录下来并向其他人表达出来呢？
直接口头交流？口头交流很难保证对方理解的内容和你表述的内容不产生偏差。
写文档？文档可以表达一个宏观的理念，但很多细节是很难表达出来的。在原始需求阶段，想法还很模糊时，就需要整理思路，而这正是文档的弱项。
思维导图？思维导图确实能很好地梳理逻辑，非常适合前期的头脑风暴。但虚幻的想法总是要落地的，思维导图同样无法体现细节的东西，别人照样不知道如何实现你的想法。
上述几种方法有一个共同的弊病——不直观。所以我们就需要一种低成本的、能够直观表达想法、减少沟通成本的东西——界面原型。界面原型可以体现产品的业务逻辑、交互逻辑和视觉逻辑，但这些内容并不是任何时候都要设计出来的。现在问题来了，在与各方人员沟通时，界面原型都需要做到什么程度？除了项目前期需要用到界面原型外，项目的其他阶段还需要吗？这就是接下来要介绍的原型保真程度的问题。
通常把界面原型按照保真度划分为低保真原型和高保真原型。所谓“保真度”，就是原型在业务逻辑、交互逻辑和视觉逻辑上与真实产品的相似程度。业务逻辑指原型体现出来的实际业务流程，交互逻辑指原型中详细的操作步骤、用户反馈和异常流程处理等交互动作，视觉逻辑指原型的样式。项目所处的阶段不同，使用界面原型的用途不同，所需的界面原型保真程度也不同。
低保真原型有时也称为线框图，通常只把页面上的文本、按钮、图标、图片和文本框等基础元件大致排布一下，无须关心元件的样式、尺寸和元件之间的距离；如果有些细节部分还没有想好，甚至可以使用占位符临时代替，如图1-1所示。
线框图一般做成黑白稿，按照元素的级别梯度使用不同深度的灰色，级别越高、重要性越高的元素颜色越深。注意千万不要在设计原型时就开始配色、调整元件尺寸，因为这些都是UI设计师的工作，这些工作对UI设计师来说才是专业的。否则看似帮了UI设计师的忙，也看似缩短了项目周期，但实际上从专业的角度看可能并不合格，而且会限制UI设计师的思路，给后续的工作带来很多不便。当然，对于超链接、当前状态等页面中需要特殊强调的元素，是可以加上颜色的，所谓“万灰丛中一点红”，加了颜色以后，UI设计师便会更加注意这些内容，只是效果图上不一定使用这种颜色。
在交互方面，可以不做交互效果，而使用箭头来表示元件和其他页面的跳转关系，如单击某个按钮跳转到某个新页面，就把这个按钮和目标页用箭头连起来，如图1-2所示。当然也可以做成交互稿，但一般只加入页面跳转链接和少数典型的交互动作。
如果你是一个创业团队的负责人，或者项目刚刚启动，当产品还没有成型，甚至连雏形都没有，只是在最初的需求讨论阶段时，那么就只需要使用低保真原型。因为这个阶段的需求、想法、创意都还很不确定，原型制作得过于细致会增加很多不必要的成本（只是相对而言，因为原型本身就是低成本表达想法的工具），可能今天确定的东西第2天就有变化，并且此时你只要把想法向其他团队成员介绍清楚即可，人们更关注的是产品宏观上的逻辑——能否解决用户的问题，有没有业务上的漏洞等。并不是页面好不好看，是什么色彩风格的，用户头像是圆的还是方的，按一个按钮会有什么反应，如果用户操作错误会有什么反馈等，这些细节的东西一般都在业务逻辑基本确定后才进行详细设计，在需求前期并不需要过多纠结。
高保真原型，是在低保真原型的基础上，在视觉逻辑和交互逻辑方面加以完善后得到的与真实产品相似程度更高的原型，如图1-3所示。读者可能有疑问，既然低保真线框图已经能说明产品的功能业务了，UI设计师根据原型设计页面，开发工程师根据原型进行编码就可以了，为什么还要继续完善原型呢？
首先，低保真原型几乎没有或只有极少的交互动作，有些细节上的设计并没有表达出来，也没有被验证过，更不能让团队的其他成员靠自己的想象完成工作，这样做出来的产品有可能会偏离预期。其次，低保真原型都是黑白稿，是比较难看的，如果要给客户、投资人做汇报、演示，他们几乎都是非专业人士，用黑白稿会让人觉得很突兀，可能会被认为不专业，加入UI元素后会让人专注于产品本身，不会被不必要的想法所影响，对团队是非常有利的。
针对以上两大类情况，一确定产品细节，二满足非专业人士要求，笔者习惯把高保真原型分为两种，第一种是加入了更多交互动作但没有UI元素的原型，第二种是既有交互动作又有UI元素的原型。接下来把这两大类情况展开，在不同的应用场景下分别介绍。
很多软件公司的业务都是做定制开发项目的，比如车辆管理系统、图书馆借阅系统等。这类产品往往有明确的客户、特定的用户群体，并且需求功能点也基本确定，产品要达到什么目的都很明朗。此时产品原型更多的关注点要放到“业务逻辑”和“交互逻辑”。可能要更多地关注需要设计多少个页面，每个页面对应的是哪些功能点，是采取下拉框还是单选按钮等。
这类产品的业务流程往往比较复杂，所以原型中还要加上逻辑判断和异常流程等内容，防止产品在设计阶段就出现业务漏洞。在设计完这些之后，一般会给客户演示原型，以检验产品是否符合需要，我们的理解和客户的需求是否相同。这个过程中用户可能会提出修改意见，一般会有多次修改，那么就会有多次演示，直至客户签字确认进入产品开发阶段。这种情况下，也不需要考虑UI元素，因为只有在需求确定的情况下，才能做UI设计。交互效果的复杂程度也可以视情况而定，只要能清晰地表达出产品的各种功能逻辑即可。
上面这种情况依然是在项目前期的需求阶段使用界面原型。其实在整个项目周期中，界面原型都起着十分重要的作用。例如在项目中、后期，如果要给市场和运营人员培训，在没有稳定的产品版本的情况下，可以用高保真原型来模拟，此时项目处于开发阶段，UI设计师一定已经设计好了效果图并切图完毕，所以原型中就能够加入UI元素了。另外，市场和运营人员需要了解完整的产品逻辑和使用流程等内容，所以原型的交互动作也要尽可能和真实产品保持一致。
对于非专业人士，除了上面提到的客户、投资人外，如果要对用户做易用性测试，也可以采取高保真原型。易用性测试可以放在开发阶段之前，因为开发的成本相对于界面原型来说是比较高的，在开发前就找到一些可以优化的功能点，对项目整体的进度来说是有好处的。当然，易用性测试所使用的高保真原型也包括视觉逻辑和交互逻辑。
元件是组成界面原型的基本元素，制作低保真原型的要求很简单，只要把想法记录并清晰地表达出来即可。但要达到这个简单的目的，必须先熟练掌握Axure中各类元件的属性、用法，这样也可以为后续制作高保真原型打好基础。
本章学习要点
»Axure中基本元件、表单元件、表格和菜单元件的特性及应用
»元件的交互设计原则
»低保真原型经典案例
Axure RP是一款专业的快速原型设计工具，支持Windows和Mac OS，它可以让团队中负责需求定义、产品功能设计的产品经理、需求工程师和交互设计师快速创建Web网站或移动App的低保真线框图、高保真可交互原型、业务流程图和需求规格说明书，支持多人协作和版本管理。
Windows桌面程序中很常见的菜单部分，包括文件、编辑、视图、项目、布局、发布、团队、账户和帮助等菜单，如图2-1所示。这里先简要介绍每个菜单的内容，详细的使用方法和使用场景会在后续章节中介绍。
文件：对Axure项目文件进行打开、新建、保存、导入和导出等常规操作。
编辑：对元件进行剪切、复制、粘贴、查找、替换、删除和撤销等操作。
视图：设置工具栏、功能区、遮罩、脚注、位置尺寸信息、草图效果和背景的显示与隐藏状态。
项目：设置元件/页面默认样式、说明字段、全局变量、对齐方式和DPI等内容。
布局：设置元件的层级关系、对齐、分布方式、栅格、辅助线和元件状态等内容。
发布：进行预览原型、发布至Axshare、生成HTML、生成说明文档等操作。
团队：创建、获取团队项目，管理团队项目，对团队项目进行签入、签出、提交更新、获取更新等操作。
账户：进行登录/登出Axure账号操作。
帮助：提供相关的帮助信息。
工具栏中放置的是一些常用的操作按钮，包括项目文件操作按钮、元件编辑按钮、鼠标模式按钮、元件布局按钮、元件发布按钮和元件样式按钮，如图2-2所示，可以看到大部分的按钮在菜单中都能找到。
项目文件操作按钮包括保存和打开按钮，元件编辑按钮包括剪切、粘贴、撤销和重做按钮，元件样式按钮包括字体、字号、颜色、边框样式、尺寸和位置等常规设置按钮，这些按钮的功能都比较明确，无须再做详细的解释。下面对工具栏中其他一些常用的按钮的功能进行说明。
相交选中：默认的选中模式，当拖动鼠标时，光标只要进入元件范围，松开光标即可选中该元件。
包含选中：当拖动鼠标时，光标经过的范围必须完全包含元件，松开鼠标才能选中该元件。
连接：用线或箭头连接元件之间的连接点，常用于绘制流程图。
钢笔：可以绘制简易的自定义形状。
边界点：用于改变自定义形状的边界。
切割：把一张图片切割成4份。
剪裁：把图片的四周裁剪掉，剩下中间的部分，也可以把图片的中间部分剪掉变成镂空效果。
缩放：按照10%～400%的比例显示设计区域部分。
顶层：把选中元件置于若干图层的最上方。
底层：把选中元件置于若干图层的最下方。
组合：将若干元件组合使用，组合后可以同时拖动、隐藏和显示组合内的元件，也可以为整个组合添加交互动作，支持组合嵌套。
取消组合：把组合恢复成单独的元件。
对齐：设置两个及两个以上元件的对齐方式，包括左对齐、左右居中、右对齐、顶部对齐、上下居中和底部对齐。
分布：设置3个及3个以上元件的分布方式，可以让这些元件在水平方向或竖直方向等间距分布。
锁定：元件被锁定后，将无法改变其位置和大小，当页面元件很多时可以防止误操作。
取消锁定：元件取消锁定后，可以对其进行其他操作。
开关左侧功能栏：设置页面、元件库和模板功能区的显示和隐藏。
开关右侧功能栏：设置检视和概要功能区的显示和隐藏。
预览：将原型在浏览器中打开。
共享：将原型发布到Axshare平台。
发布：预览、发布至Axshare、生成HTML文件和生成Word说明书等相关功能的操作集合。
登录：登录/登出Axshare账号。
页面列表面板，有些版本中被翻译成站点地图，原型中所有的页面都会按照层级结构显示在这里，支持创建文件夹，可以将页面分类管理，如图2-3所示。原型预览时的主页默认为列表中的第一个页面。添加页面和文件夹、改变层级的方法如下。
添加同级页面：单击图2-3中①处的“添加页面”按钮，可以添加所选页面的同级页面，也可以在某个页面上执行右键菜单命令【添加>上方添加页面/下方添加页面】。
添加子页面：在某个页面上执行右键菜单命令【添加>子页面】。
修改页面级别：在某个页面上执行右键菜单命令【移动】，快捷键为Ctrl+方向键。
修改页面顺序：在某个页面上执行右键菜单命令【移动>上移/下移】，快捷键为Ctrl+↑/Ctrl+↓。
添加文件夹：单击图2-3中②处的“添加文件夹”按钮，可以添加与所选页面同级的文件夹。需要把页面设置为文件夹的子页面，才能把页面放到文件夹中。
页面列表面板中的页面名称就是原型发布以后生成的HTML文件名称，如果需要把这些HTML文件部署到自己的服务器上或其他云平台上时，最好采用英文的命名方式；如果只需要在本地浏览或直接把原型发布至Axure的官方管理平台Axshare上供各方人员浏览时，可以使用中文名称。
界面原型由不同的元件组成，Axure默认提供3种不同类型的元件库，分别是Default元件库、Flow元件库和Icons元件库，把元件拖入设计区域即可使用，双击设计区域中的元件可以修改其文本内容。
（1）Default元件库：包含基本元件、表单元件、菜单和表格以及标记元件，如图2-4所示。其中基本元件、表单元件、菜单和表格组成了页面中的各种元素，标记元件起辅助作用，在界面原型中记录一些注释和说明。
（2）Flow元件库：包含各种流程图元件。通过绘制流程图，可以梳理复杂的业务逻辑，让团队其他成员理解起来更加清晰、直观。
（3）Icons元件库：包含各种常用的图标，省去了在网上搜集素材的麻烦。需要说明的是，Icons元件库只是在原型中方便我们说明什么地方需要加入图标，在真实的产品中一般并不直接使用Axure中提供的图标样式，还是需要根据产品的整体视觉风格重新设计。
除了Axure默认提供的元件库，还可以根据实际需要设计自己的元件库，具体的操作方法在后续的章节中会详细介绍。
当原型中有些元件需要重复使用时，可以把重复元件制作成母版，方便随时调用，也给修改、维护工作带来很多便利。母版面板和页面列表（站点地图）很像，也是以列表的形式展示，支持创建文件夹以便进行分类管理，如图2-5所示。
设计区域是Axure最主要的工作区域，用于排布元件位置、设置元件样式等，如图2-6所示。设计区域中有横向标尺和纵向标尺，最大支持20000像素×20000像素的原型，可以加入网格和参考线，进行辅助设计。需要说明的是，设计区域中的原型样式和发布后的原型样式可能并不完全相同。
检视面板下方又分为元件名称区域、属性面板、说明面板和样式面板，对元件和页面均有效，如图2-7所示。
元件名称区域：每个有交互动作的元件都需要命名，方便在众多的元件中定位到特定的某一个。
属性面板：用来设置页面或元件的交互事件、页面或每个元件特有的属性。
说明面板：用来填写页面或元件的说明内容，说明的字段可以自定义。
样式面板：用来设置页面或元件的位置、尺寸、填充颜色和边框等样式。
概要面板显示页面中所有元件的列表，包括元件名称和元件类型。可以筛选列表中显示的元件类型和排列顺序，默认的显示顺序是列表顶部的元件在原型中也处于顶部，列表底部的元件在原型中处于底部，可以单击该面板右上角的排序与筛选按钮修改设置，如图2-8所示。
本节利用刚刚介绍的Axure RP8.0的各部分内容，设计一个如图2-9所示的简单的登录页面。熟悉一下新建项目、使用元件、编辑页面列表和保存项目等基础操作，并且感受一下使用Axure RP制作界面原型的独特魅力。
打开Axure RP8.0，在欢迎页面中单击“新建文件”按钮，创建第一个原型文件，如图2-10所示。
登录页的内容在index页面中制作。
（1）制作页面头部内容，如图2-11所示。
①拖入“矩形3”元件至设计区域，直接拖曳至位置（0,0），拖动元件四周的小方块修改尺寸为900像素×70像素，也可以在工具栏中直接修改参数。
②拖入“占位符”元件至设计区域，位置为（0,0），尺寸为160像素×70像素，双击修改其文本为“logo”。
（2）制作页面主体内容，如图2-12所示。
①拖入“图片”元件至设计区域，位置为（100,120），尺寸为340像素×230像素。
②拖入两个“文本框”元件至设计区域，位置分别为（510,135）和（510,200），尺寸均为320像素×40像素，在各自的属性面板提示文字中输入“手机号/邮箱/用户名”和“密码”。
③拖入“主要按钮”元件至设计区域，位置为（510,262），尺寸为320像素×40像素，双击修改其文本为“登录”。
④拖入“文本标签”元件至设计区域，位置为（700,310），双击修改其文本为“没有账号？点我注册”。
（3）制作页面底部内容，如图2-13所示。
①拖入“矩形2”元件至设计区域，位置为（0,380），尺寸为900像素×70像素。
②拖入3个“文本标签”元件至设计区域，位置分别为（351,406）、（421,406）、（490,406），双击修改各自的文本分别为“产品简介”“帮助中心”“联系我们”。
把制作的登录页中可能会有的跳转页面添加至页面列表面板，如图2-14所示。
（1）把项目默认的index页面重命名为login；page1、page2和page3页面分别重命名为product_Introduction、help、contact，分别对应“产品简介”“帮助中心”“联系我们”页面。
（2）在login页面上执行右键菜单命令【添加>下方添加页面】，命名为register，对应注册页面。
和其他的应用软件一样，单击菜单中的【文件>保存】（快捷键Ctrl+S），选择保存的位置，输入文件名，即可保存Axure RP项目。当前创建的是个人项目，项目文件扩展名为.rp（见图2-15），在后续的章节中会介绍团队项目，其文件扩展名为.rpprj。
本案例的目的在于让读者能利用Axure RP这款软件简单地布局一些页面，读者也可以模仿一些成功的互联网产品案例制作其他的页面，熟悉Axure RP的各项基础操作，为后续的学习打下良好的基础。
基本元件，顾名思义是组成界面原型的基础元素。在Default元件库中，基本元件包括矩形、按钮、标题、文本、占位符、水平线、垂直线、图片和热区。
把矩形、按钮、标题、文本标签和文本段落分别拖入设计区域，在概要面板中可以看到，每个元件后面括号里的类型都是“矩形”，如图2-16所示，这就说明这些元件本质上都是矩形，在属性和样式上有相同或相似的地方，笔者把它们都归为“矩形类”。
矩形类中的元件通常用来做页面的布局，通过修改形状、背景颜色和填充内容等样式，用来表现页面不同区域的用途、层次和重要性。
矩形
Axure RP8.0中有3个默认样式不同的矩形，分别为矩形1 、矩形2和矩形3，如图2-17所示。其中，矩形1是带边框矩形，矩形2和矩形3为无边框矩形且填充颜色为不同深度的灰色，双击可设置矩形的文本内容。这3个不同样式的矩形，正好符合1.2.1节中提到的“按照元素的级别梯度使用不同深度的灰色来制作低保真原型”的原则。
另外，Axure RP8.0中还有一个椭圆形元件，它在属性、样式选项上和矩形基本是相同的，此处不再赘述。
按钮
Axure RP8.0中有3个默认样式不同的按钮，分别为按钮、主要按钮和链接按钮，如图2-18所示，按钮中默认填充BUTTON文本，双击可修改文本。“按钮”带边框且填充颜色为白色，“主要按钮”无边框且填充颜色为蓝色。当原型中以“按钮组”的形式出现时，如确认、取消、保存、返回，主要按钮的颜色一般会稍亮一些。链接按钮无边框、无填充颜色，且文本颜色为蓝色，因为带颜色的文本一般认为是可以单击的。
标题、文本标签、文本段落
Axure RP8.0中提供了3个级别的标题，分别为一级标题、二级标题和三级标题，如图2-19所示，它们的文本字体大小不同，其他样式均相同，双击可修改。文本标签和文本段落（见图2-20）的区别在于，文本标签为单行文本，文本段落为多行文本（自动换行）默认字体大小也不同。
可以根据实际需要修改各元件的默认样式，例如，当UI效果图出来后，可以直接把主要按钮的颜色修改为效果图上的颜色，这样所有主要按钮的样式都会自动更新，省去了单独修改每一个按钮的麻烦；还可以创建新的元件样式以供快速调用，例如，商品管理页面的新增按钮、删除按钮、返回按钮的默认样式和交互样式应该有所区别，通过创建不同的按钮样式来快速设置。学过网页开发的读者不难发现，此功能和CSS中的类有些相似。
应用方法1
（1）执行菜单中的【项目>元件样式编辑】命令，如图2-21所示，打开元件样式管理器。
（2）在元件样式管理器中，修改已有样式，如图2-22所示。
①选择左侧的样式名称。
②修改右侧的项目。
（3）在元件样式管理器中，创建新样式，如图2-23所示。
①为了不打乱已有样式的顺序，选中最后一个样式名称，单击加号。
②命名新样式，然后设置右侧的项目。
（4）选中需要应用样式的元件，选择样式面板中的样式名称，即可成功应用样式，如图2-24所示。
应用方法2
（1）在设计区域设置好样式，然后在样式面板中单击“更新”，如图2-25所示，该样式被更新，但已经拖入设计区域的元件样式不会变更。
（2）在设计区域设置好样式，单击“创建”，如图2-26所示，打开元件样式管理器，命名后单击“保存”按钮，无须再次设置右侧的项目，即可创建新样式。
（3）选中需要应用样式的元件，选择样式面板中的样式名称，即可成功应用样式。
既然上述元件都被归为了“矩形类”，那么它们可以设置的样式项目应该是相同的，如图2-27所示。
位置·尺寸：可以设置x轴坐标和y轴坐标、宽度和高度、元件角度和文本角度、水平翻转和垂直翻转、自动适合文本宽度和自动适合文本高度。除了在样式面板中修改上述参数外，在设计区域拖动元件可以直接改变元件的位置；拖曳元件四周和四角的定位点可以直接改变元件的尺寸，按住Shift键同时拖动鼠标可以按照原比例改变尺寸；双击元件四周和四角的定位点，可以让元件的尺寸修改为“自动适合文本宽度/高度”或高度与宽度同时自适应文本内容。
改变元件的默认样式：快速修改该元件的样式，与Word中的“快速样式”类似。选项中默认为基本元件的若干个样式，可以更新已有样式或创建新样式。
填充颜色：可以设置为纯色填充或渐变填充。
阴影：可以设置外部阴影和内部阴影。
边框：可以设置边框的粗细、颜色、线段类型和可见性。
圆角半径：可以分别设置四角的圆角半径。
字体：设置常规的字体样式。
行间距：设置元件内文本内容的行间距。
项目符号：设置元件内文本换行时是否显示项目符号。
对齐：设置元件内文本在水平和垂直方向的对齐方式。
填充：设置元件内文本距离元件四周各边框的距离。
上述元件都是以矩形为基础而制作出来的。按钮就是改变了矩形的默认大小、边框和填充颜色，默认显示BUTTON文字的矩形；标题、文本标签、文本段落就是取消了矩形边框和填充颜色、默认显示文本且自适应文本高度和宽度的矩形。
交互：设置元件交互动作。不同的元件有不同的事件，如“鼠标单击时”“选中时”等，在制作交互案例时再具体讲解，如图2-28所示。
文本链接：双击元件选中文本时，该属性被激活，可以为元件中的文本添加超链接，而且自动设置了文本的鼠标悬浮和鼠标按下时的文本样式。
形状：修改元件的形状，有若干种形状备选，也可以转换为自定义形状。
交互样式设置：可以设置鼠标悬停时、鼠标按下时、选中和禁用状态下元件的样式。
引用页面：设置后，该元件的文本内容修改为引用页面的名称，且单击该元件可以跳转至引用页面。
禁用：勾选后该元件将无法与用户做任何交互。
选中：勾选后该元件处于选中状态，常用于配合其他交互事件动态改变元件的样式。
设置选项组名称：当若干元件设置为同一选项组时，该选项组内的元件在同一时刻只能有一个被选中。
元件提示：用于设置鼠标悬浮时提示的文字。
占位符可以用来替代一些暂时无须做详细设计的区域，这些区域一般没有交互动作或只有一些基础的、常规的交互动作，比较容易说明区域内要放置的内容，如图2-29所示。当然也可以使用普通的矩形，但可能从视觉上感觉“占位”的效果不是很明显。如果把占位符设置成长宽相等，很像“×”，可以充当“关闭”按钮。另外，既然占位符起到的是临时替代的作用，那么它就应该仅出现在低保真原型中；在高保真原型中，占位符的作用就很有限了。
场景1
诸如Logo、广告位和轮播图等只是图片的区域，可以使用占位符临时替代。
场景2
若页面中的部分区域已经明确了内容是什么，但暂时无须做具体的布局，可以先使用占位符替代。
如教育类产品Web端的课程详情页面，在这个页面中可能关注的第一个业务流程是用户查看课程介绍并完成购买的过程，除此之外，页面中还会有相关课程推荐、相关套餐推荐等内容来引导用户获取更多感兴趣的信息。那么在设计第一个业务流程的页面时，其他内容就可以暂时无须关注细节，先使用占位符替代。
场景3
在多人协作时，若在页面中必须放置一些内容，只是还没有进行设计，此时可以使用占位符，提醒团队中的其他成员不要在这个位置设计其他内容，若其他成员也有一些设计想法，那么可以进行线下交流讨论。
占位符不能设置圆角半径，不能设置边框可见性，其他的项目和矩形相同，不再赘述。
占位符的属性和矩形相同，不再赘述。
水平线和垂直线一般只作为基本的图形来使用，可以用来分隔页面的不同区域、制作不同类型的箭头等，也可以通过改变线段的粗细程度和颜色来制作一些比较有质感的效果，如图2-30所示。
下面制作一个有渐变颜色的线段，效果如图2-31所示。
（1）拖入一个水平线元件至设计区域，修改线宽为最粗，如图2-32所示。
（2）设置线段颜色，如图2-33所示。
①选择填充类型为“渐变”。
②单击第一个颜色滑块，设置颜色为#3399FF。
③在第一个颜色滑块的右侧单击鼠标，增加一个颜色滑块，设置颜色为#00FFFF，并拖动至中间位置。
④单击最右侧的颜色滑块，设置第3种颜色为#00FF99。
⑤设置渐变角度为0。
（3）设置完成后，按F5键在浏览器中预览效果，如图2-34所示。
通过图片元件可以把外部的图片导入原型中。此方法通常在制作高保真原型时使用得比较多，如图2-35所示。
拖入一个图片元件至设计区域，双击该元件可以导入外部图片，也可在右侧的属性面板中单击“导入”按钮，如图2-36所示。若导入的图片过大，会询问是否进行优化，如图2-37所示。若单击“是”按钮，Axure会适当压缩图片；若单击“否”按钮，则以原图大小导入。
拖曳图片四周和四角的定位点，可以改变图片大小，按住Shift键同时拖曳可按原比例缩放，双击任何一个定位点可以恢复至原来的大小，如图2-38所示。
选中图片，在样式面板中单击“切割”按钮，如图2-39所示，也可以在图片上单击右键并选择【切割图片】命令，在图片中想要切割的位置单击，原来的图片便被切割成4份，如图2-40所示。
选中图片，在样式面板中单击“裁剪”按钮，如图2-41所示，也可以在图片上单击右键并选择【裁剪图片】命令，然后拖动图像内部的定位点设置要裁剪的区域。
（1）单击设计区域右上角的“裁剪”按钮，图片会保留所选区域，如图2-42所示。
（2）单击设计区域右上角的“剪切”按钮，图片保留所选区域以外的部分，如图2-43所示。
在制作低保真原型时，一般会使用占位符、矩形或按钮代替图片，那么在逐渐完善为高保真原型时，如果把这些元件删掉替换成图片，还要调整其位置尺寸，是非常麻烦的。可以在非图片元件上单击右键，选择【转换为图片】命令，如图2-44所示，然后双击这些元件就可直接导入外部图片了，并且可以维持之前的元件大小。
可以把热区理解成一种特殊的透明矩形，它在设计区域中有一层浅绿色的遮罩，如图2-45所示，但在浏览器中是透明的。热区同样可以添加交互动作，实现一些常规元件难以实现的效果。
场景1
只想给一张大图的部分区域添加交互动作时，可以把热区覆盖到图片上，如图2-46所示，然后调整尺寸至添加交互的范围，给热区添加交互动作。
场景2
想扩大元件的可交互范围时，可以应用热区。例如，移动App界面中有些图标的视觉范围是比较小的，但为了提升用户体验，单击图标周围一定范围内的区域时应该都可以触发交互动作，此时就可以把热区覆盖到图标上，如图2-47所示，然后调整尺寸至合理的范围，给热区添加交互动作。
案例描述
自定义按钮样式，鼠标悬浮至按钮上时改变样式，如图2-48所示。
案例难度：★☆☆☆☆
案例技术
元件样式管理、交互样式设置。
制作步骤
首先准备元件——两个主要按钮，如图2-49所示。
（1）拖入两个“主要按钮”至设计区域，把文字分别修改为“确认”和“取消”。
（2）尺寸分别设置为55像素×35像素。目前这两个按钮应用的样式名称均为Primary Button。
然后设置两个按钮的默认样式。不直接在按钮的样式面板中修改，而是在元件样式管理器中添加可以复用的样式，目前还没有做其他操作，“确认”和“取消”按钮的样式名称均为Primary Button，目的是将这两个按钮应用为不同的样式。
（1）修改“确认”按钮的样式，如图2-50所示。
①把“确认”按钮的填充颜色改为#22C27C。
②单击样式面板中的“更新”按钮，修改“确认”按钮的样式。
（2）创建“取消”按钮的样式，如图2-51所示。
①把“取消”按钮的填充颜色改为#CCCCCC。
②单击样式面板中的“创建”按钮。
③在元件样式管理器中，将该按钮命名为Default Button。
接着设置两个按钮的鼠标悬浮样式，同样在元件样式管理器中添加可以复用的样式。
（1）设置“确认”按钮的鼠标悬浮样式，如图2-52所示。
①执行菜单栏中的【项目>元件样式编辑】命令，打开元件样式管理器。
②单击加号。
③命名为Primary Button Hover。
④设置填充颜色为#3A995D。
（2）用同样的方法添加一个新的样式作为“取消”按钮的鼠标悬浮样式，样式名称为Default Button Hover，填充颜色为#999999。
最后设置两个按钮的交互样式。
（1）设置“确认”按钮的交互样式，如图2-53所示。
①选中“确认”按钮，单击“交互样式设置”下的“鼠标悬停”，打开交互样式设置管理器。
②勾选“元件样式”，选择Primary Button Hover。
（2）用同样的方法设置“取消”按钮的交互样式，选择Default Button Hover。
（3）设置“完成”后，按F5键在浏览器中预览效果。
文本框，也被称为输入框，是一种最常用的表单元件，用来获取使用者输入的数据，如图2-54所示。
这些数据不仅仅局限于纯文本，在属性面板中，可以看到有如下11种文本框类型，如图2-55所示。
Text（文本）：最常见的文本类型，包括中文、英文、数字、特殊字符等，支持复制、粘贴操作。
密码：把明文显示改成了密文显示，不能直接输入中文，但可以把别处的中文复制进去。
邮箱：输入数据时和文本类型相同，但若输入非邮箱格式，鼠标悬浮时会提示“请在电子邮件地址中包括‘@’”。
Number（数字）：只能输入数字，支持单击鼠标增减数字。
Phone Number（电话号码）：在PC浏览器上输入数据时和文本类型相同，若在移动设备上预览原型，获取焦点时会自动调取移动设备的数字键盘。
Url：输入数据时和文本类型相同，若输入非网址格式（需要加入传输协议前缀，如http://），鼠标悬浮时会提示“请输入网址”。
查找：输入数据时和文本类型相同，但增加了一键清除功能。
文件：文件选择控件，在浏览器中才有效果。可以选择本地文件，不会真的和文件有数据交互，只是一个交互动作而已，如图2-56所示。
日期：日期选择控件，在浏览器中才有效果，可以选年份、月份和日期，如图2-57所示。
Month（月份）：日期选择控件，在浏览器中才有效果，只能选择年份和月份。
Time（时间）：时间选择控件，在浏览器中才有效果，可以选择时和分，支持手工录入（会自动判断合法性）、单击鼠标增减，也可以一键清除。
需要说明的是，不同的浏览器对以上11种类型的支持程度是不一样的，在浏览器中的效果也不同，推荐大家使用Chrome浏览器。
文本框的属性如图2-58所示，在制作交互效果时，常常需要设置这些属性。
提示文字：用于设置文本框内显示的提示文字，文字的样式可以修改。默认在文本框输入内容时隐藏提示文字，也可以设置成当文本框获取焦点时提示文字立刻隐藏。
最大长度：用于设置允许文本框输入的最大字符长度，当达到长度限制时无法继续输入。
隐藏边框：勾选后文本框将隐藏边框，经常在自定义文本框样式时使用。
只读：勾选后不能再编辑文本框，但可以复制文本框中的内容。
禁用：勾选后将无法与用户做任何交互，不可以编辑，也不可以复制文本框中的内容。
提交按钮：在焦点文本框上按回车键时，会调用所设置按钮的“鼠标单击时”事件，也就是说用回车键来替代单击提交按钮，常用于表单提交，后续的章节会讲解。
元件提示：用于设置鼠标悬浮时提示的文字。
在文本框的样式面板中，只有坐标、尺寸、填充颜色和文字样式的设置，诸如边框、圆角半径、阴影等均处于禁用状态，如图2-59所示。如果在制作高保真原型时需要自定义文本框样式，那么只能利用其隐藏边框的属性，配合其他元件来实现效果，在后续的案例章节会做具体介绍。
以上介绍的都是文本框的内容，多行文本框的属性、样式设置和它基本相同，只是没有了那么多的类型，只能输入纯文本内容。
Axure中文本框的使用方法很简单，在产品设计中，文本框通常会和表单填写相关联，这里边还有很多设计原则要遵守，否则可能会影响用户体验，严重的会影响产品的使用。本节就给大家介绍“表单设计那些事儿”，后续的章节中，笔者也会在讲完软件操作、案例分析之后，增加一些类似的内容。
文本框和后续要讲到的其他表单元件，一般都不会孤立使用，和其配合使用最多的就是文本标签。文本标签通常起引导和说明作用，为了让页面更加清爽，也为了让用户能够在第一时间确定文本框要填写的内容，文本标签要简短，尽量使用名词，如“邮箱”“手机号”，不要使用“请输入您的用户名”等加入了动词、修饰词的短语、句子，如图2-60所示。如果把文本标签放到文本框内部，并配合图标会更好，如图2-61所示，人对图形的敏感程度总是要高于文字，前提是图标制作得恰当（这是UI设计师的工作）。
当已经获取焦点的文本框要高亮显示时，可以改变边框颜色、增加阴影等，如图2-62所示，当然在低保真原型中可以不做高亮效果。在Web端的表单填写页面，如登录页、个人资料填写页，应该自动让第一个文本框获取焦点，这样用户在打开页面时直接就能输入；当单击提交按钮时，若用户输入的信息有误，则应该定位到第一个错误信息上。但是在移动端的表单页面，很少有自动获取焦点的设计，因为移动设备的屏幕比较小，一旦文本框获取焦点，就会弹出键盘，如果刚打开新页面屏幕上就有将近一半的内容是键盘，会影响用户获取整体的页面信息。
一定要限制文本框的输入长度和允许输入的类型，一是减少用户输错的可能性，例如，输入身份证号就把长度限制到18位，超出的部分无法输入；二是增强安全性，让用户自己去输入一些数据，对于软件来说本身是比较“危险”的，因为你不知道用户都会输入什么东西，会不会输入一些攻击脚本等，所以对特殊字符的限制就尤为重要。另外，对于特殊字符，在开发时是需要进行“转义”的，如果实际业务不需要特殊字符，允许用户输入就会增加开发成本，所以对特殊字符一定要“格外关照”。
刚才讲到应该让输入有误的文本框自动定位、获取焦点，但这是在用户单击“提交”按钮时才能做到的，此时用户已经填写了很多信息，如果用户满心欢喜地提交时，发现自己刚刚填写的信息不符合要求，这是一件很让人烦心的事。其实可以在用户填写信息的过程中就给用户相应的反馈，不论是填写正确还是错误，在文本框失去焦点时，甚至在文本框内容发生变化时就做出判断，让用户时时刻刻心里都有底。对于错误反馈，应该详细说明错误的原因，例如，当用户设置的密码长度不合要求时，应该提示“密码长度必须大于6位”，如图2-63所示，而不是泛泛地提示“密码不符合要求”。对于填写错误的文本框，最好也高亮显示。
这里的说明信息可以理解为业务上的说明和交互逻辑的说明。对于to C产品，最好不要加入过多的交互逻辑说明，如果用户需要借助那么多的说明才能使用产品的话，说明你的设计是比较失败的。当然如果帮助和说明信息真的很有必要（一般都是业务说明），那么建议也不要超过3行。如果说明内容确实很多，可以在旁边加上一个小图标，鼠标悬浮时显示，这样可以让用户自己决定是否阅读。对于to B产品，笔者认为适当的帮助和说明信息是有必要的。因为很多to B产品对应的业务流程非常复杂，帮助和说明信息有利于用户在上面更好地工作。
可以用下拉框的形式对输入的内容进行实时匹配或联想补充，例如，搜索联想、邮箱的后缀补齐，如图2-64所示。这种设计可以让用户准确高效地输入内容，尤其是用户输入外语或对目标信息不是很熟悉的情况，会显著提高信息输入的准确性。
可以在文本框中预设一些已经明确的字段。比如移动端都有定位功能，Web端也可以根据IP定位，可以利用这些技术提前填充区号、邮编，减少用户的操作。这些预设的内容应该是可修改的，因为定位也有不准确的时候。有些内容也可以根据已填写的文本框数据自动填充，例如，可以根据身份证号推断出用户的地区、出生日期和性别。
使用Tab键可以切换焦点，需要注意的是应该按照页面上元件的顺序进行切换。
在移动设备上，有不同的键盘类型。例如，在输入电话号码时，可以直接调用数字键盘，不要让用户自己切换键盘，防止用户输入错误，也能提升产品体验。需要说明的是，Axure的文本框只有数字键盘（在移动设备上预览时才有效果），无法分别限制中文和英文，但如果产品需要默认显示某一种类型的键盘，如输入密码时默认显示英文键盘，用户可以手动切换数字键盘，应该在交互说明书中标明。关于如何撰写交互说明书，会在后续的章节中详细介绍。
下拉列表框、列表框、复选框、单选按钮和提交按钮都是常用的选择类表单元件，它们有很多相似之处，也有很多独有的属性，下面分别进行介绍，大家可以对比学习。
下拉列表框可以有若干个列表项，但每次只能选择其中一个，如图2-65所示。
双击设计区域中的下拉列表框，打开“编辑列表选项”对话框，如图2-66所示。各按钮和复选框的功能如下。
①添加一个列表项。
②上移列表项、下移列表项。
③清除选中的列表项。
④清除所有列表项。
⑤一次添加若干列表项，每行一个。
⑥勾选后该项被默认选中，若没有任何一个列表项被勾选，则默认选中第一个。
添加列表项后，在属性面板中可以查看列表项的全部内容，也可以单击此处的“列表项”按钮进行编辑，如图2-67所示。
列表框可以有若干个列表项，支持单选、多选，如图2-68所示。
双击设计区域中的列表框，打开“编辑列表选项”对话框，使用方法与下拉列表框相同。在该对话框下方勾选“允许选中多个选项”复选框，如图2-69所示，在浏览器中可以选中多个列表项，方法有以下3种。
方法1：按住Ctrl键的同时单击每一个需要选择的列表项，单击过的列表项会被选中。
方法2：按住Shift键的同时单击需要选择列表项的首尾，首尾之间的列表项（含首尾项）同时被选中。
方法3：直接拖动鼠标经过每一个需要选择的列表项。
复选框是默认支持多选的选择类元件，如图2-70所示。
在设计区域中直接勾选复选框，则该复选框默认是选中状态，也可以勾选属性面板中的“选中”；在属性面板中可以设置“对齐按钮”为“左”或“右”，一般选择“左”，符合使用习惯，如图2-71所示。
单选按钮，从字面上也能看出它只支持单选，并且某个单选按钮一旦选中无法直接取消，只有选中其他单选按钮后才能取消选中，如图2-72所示。
拖入几个单选按钮至设计区域，在浏览器中预览效果时会发现并没有实现“单选”的效果，这是怎么回事？要实现所谓的“单选”效果，必须要有一个选择范围，因为Axure不知道是要在某3个单选按钮里实现单选，还是在某4个单选按钮里实现单选。这个“选择范围”就是单选按钮组。
选中若干单选按钮，在属性面板中设置单选按钮组名称（支持中文和英文），如图2-73所示，意味着这些单选按钮在同一时刻只有一个能被选中。如果界面中有若干个单选按钮组，则其名称不能重复，否则就会变成同一个组。此时若某个组里新增了一个单选按钮，只需给这个单选按钮输入（或选择）对应的单选按钮组名称即可。
提交按钮，如图2-74所示。与矩形按钮的不同之处在于，提交按钮使用的是浏览器内置的默认样式和交互样式，不能自定义修改，但它可以修改文本样式、改变大小和设置禁用。如果正在制作不需要UI元素的后台界面原型，使用提交按钮是很方便的。
要根据不同的用途、不同的需求来选择合适的表单元件，这样才能让产品具有良好的易用性，提升产品的用户体验，进而提升产品的转化率。
从属性上看，复选框和列表框可以支持多选，而单选按钮和下拉列表框只支持单选，所以可以根据产品需要的功能来选择。
从直观感受上来看，单选按钮和复选框每个选项都要占据一定的空间，而下拉列表框只需要一行的空间，列表框也可以通过滚动条的方式显示更多的选项。如果要设计单选的功能，一般选项较多时选择下拉列表框（如地域的选择），而选项较少时选择单选按钮（如性别的选择）；如果产品需要多选功能，当页面空间有限且选项较多时可以选择列表框，当页面空间不受限制时可以选择复选框。
上述两个方面都是最简单的选择依据，在使用这些表单选择元件时，还需要遵循一定的设计原则。
设置默认项
因为单选按钮是不能取消选中的，所以一般会设置一个默认选择项，这样可以引导用户做出选择。如果在业务上确实需要空选项的话，可以设置一个“无”选项，如图2-75所示。
扩大可单击区域
一般把单选按钮的文本标签部分也作为可单击区域，这样无须精确定位到按钮部分即可成功选中，能够显著提升用户体验。Axure RP自带的单选按钮元件是可以实现这个功能的，只是在交互说明里需要交代清楚，如图2-76所示。
排列优先级设置选项顺序
按照用户选择的可能性排列选项的顺序，可能性较大的选项放到前面。
选项的排列方向
如果把选项设计成竖直排列，可以方便用户进行选项之间的对比；如果要水平排列，那么要注意单选按钮部分和文本标签之间的距离，如图2-77所示。
用肯定的文字作为文本标签
文本框选中状态的样式一般都是一个勾，所以用肯定的文字作为其文本标签是比较符合正常思维的，如“我同意上述条款”。尽量减少使用诸如“不要给我推送消息”这样的否定文字，“勾+否定文字”可能延长用户的反应时间，哪怕是零点几秒，也会给用户带来使用不流畅的感觉，如图2-78所示。
此外，选项的排列方向、扩大可单击区域这些同样需要注意规则。
联动下拉列表框
当选项的数量非常多，达到一定程度时，可以尝试把选项分类，形成多个联动下拉列表框。虽然用户单击操作的次数多了，但避免了在很多选项中查找的麻烦，提高了效率，如图2-79所示。
设置默认项
如果仅仅是在填写表单时作为单纯的选择功能，那么下拉列表框中最好有默认选项，而不是默认空白。
设置“全部”选项
如果下拉列表框是作为筛选功能使用的，会配合数据列表使用，那么应考虑是否需要加入“全部内容”的选项。在页面的筛选区域，一般不会有单独的文本去说明这个下拉列表框的作用，此时可以在第一个选项中设置“请选择……”来说明此下拉列表框筛选的内容，如“请选择年级”，既说明了下拉列表框的作用，并且当此选项被选中时数据列表显示的是“全部年级”，如图2-80所示。
移动端的使用
在移动端尽量减少使用下拉列表框，因为在移动端需要先单击下拉列表框，在屏幕下方弹出选项列表，滚动列表并选择，最后关闭选项列表，如图2-81所示。这样的操作已经非常烦琐了，更重要的是移动设备的屏幕本来就很小，选项列表的范围又只是屏幕的一部分，在这么小的区域内滚动并查找目标选项是一件很痛苦的事。
下拉列表框里的选项一般都是同一类型的不同备选内容，如河南、河北或山东这些省份的选择，2017或2018年份的选择等；而单选按钮的选项一般表示状态或属性居多，如启用和禁用、打开和关闭、男和女等。
当用户不清楚待选项有哪些，需要直观显示全部的选项内容时，一般使用单选按钮或复选框，如用户喜好、用户标签的选择；当用户已经非常清楚自己的选择时，一般使用下拉列表框，如地域的选择。
当需要多条件组合筛选时，即使是涉及状态、属性的筛选（如启用和禁用、男和女），一般也习惯性地使用下拉列表框而不是单选按钮，因为这样用户选择后可以直观、清晰地看到筛选条件。
如果业务规定是单选并需要空选项，除了给单选按钮增加“无”选项外，也可以使用复选框，通过程序来限制只能选择其中的一个选项。由于复选框可以取消选中，所以无须设置“无”选项。
以上说的各种表单元件大多适用于电脑端的产品，而移动端因为屏幕尺寸偏小、交互方式与传统的鼠标键盘有所区别等原因，导致移动端关于选择类表单元件会有一些变化，比较典型的是把单选按钮、复选框转化为可选按钮和开关。
传统的单选按钮和复选框的可操作区域比较小，在电脑上可以用鼠标操作，如果放到移动设备上，很容易发生单击困难或误操作的情况。为了避免这些问题，移动设备上一般采用“可选按钮”的形式来替代传统的单选按钮和复选框，如选择用户标签、选择话费充值金额等，如图2-82所示。
本节通过App的选择用户标签功能来介绍制作可选按钮的方法。
制作步骤
（1）拖入3个“主要按钮”至设计区域，设置填充颜色为#CCCCCC，尺寸为90像素×50像素，修改文本分别为IT男、产品经理和设计师，如图2-83所示。
（2）设置按钮选中时的交互样式，如图2-84所示。
①同时选中3个按钮，单击属性面板中的“选中”按钮，打开“交互样式设置”对话框。
②勾选“填充颜色”复选框，设置颜色为#FF6633。
（3）选中按钮时高亮显示，如图2-85所示。
①选中第一个按钮，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>元件>设置选中>选中】。
③在配置动作区域勾选“当前元件to‘true’”复选框。
（4）为其他两个按钮的“鼠标单击时”事件添加相同的动作，如图2-86所示。
①在第一个按钮的“鼠标单击时”事件上按快捷键Ctrl+C复制。
②在其他两个按钮的“鼠标单击时”事件上按快捷键Ctrl+V粘贴。
（5）设置完成后，按F5键在浏览器中预览效果，如图2-87所示。
提示
无须为每个有交互动作的元件都命名，巧妙地运用“当前元件”，可以提高工作效率。
开关是移动设备上经常用到的一种元件，表示打开或关闭某个项目或功能，如图2-88所示。
需要注意的是，开关的样式要避免产生歧义，图2-89这种样式设计会让用户很难区分开关的状态，虽然绿色和红色的对比很明显，但两种颜色都属于高亮色。一般让开关的打开状态高亮显示，而关闭状态置灰。如果有必要，还可以配合文本来区别开关的两种状态。
Axure中并没有动态的开关元件，可以使用动态面板来制作，在后续的章节中会做介绍。
表格由多个单元格组成，多应用于管理页面和后台页面来显示统计数据，如图2-90所示。
双击单元格可以修改文字，单击不同的单元格内部可以设置不同的默认样式与交互样式，如图2-91所示。单击表格的边框可以设置表格的位置和尺寸，如图2-92所示。
其实用矩形也可以拼出表格，但有了专门的表格元件可以省去不少麻烦。虽然表格多用于显示数据，但它没有对数据进行动态操作的能力。如果原型中需要实现数据的增、删、改、排序和筛选等效果，需要用到中继器元件，在后续的章节中会作介绍。
当项目的数量和层级比较多时（如文件管理器），可以使用树状菜单元件，如图2-93所示。
双击树状菜单的某个节点可以修改文字，单击不同的节点可以设置不同的默认样式与交互样式，如图2-94所示，单击树状菜单的边框可以设置位置和尺寸，如图2-95所示。
勾选属性面板中的“显示展开/折叠的图标”复选框，选择展开/折叠图标为“+/-”或三角形，也可以导入外部图片，如图2-96所示。
选中某一个节点，勾选属性面板中的“显示树节点图标”复选框，单击“编辑”按钮，导入外部图像，设置尺寸为16像素×16像素，如图2-97所示，然后选择应用范围（当前节点，当前节点和同级节点，当前节点、同级节点和所有子节点）。
以“鼠标悬停时”样式为例，如图2-98所示。
①选中某一个节点项，单击属性面板中的“鼠标悬停”按钮，打开“交互样式设置”对话框。
②勾选“字体颜色”，并设置为#FF0000。
③选择交互样式的应用范围，默认为“选择当前树节点、同级节点和所有子节点”（所有的同级节点和子节点均应用此交互样式）。也可以根据需要选择“只选择当前树节点”（仅选中的这一个节点应用此交互样式）或“选择当前树节点和同级节点”（选中的树节点及同级节点均应用此交互样式）。
网页的导航菜单一般位于顶部或左侧，有时可能还会有二级导航菜单、三级导航菜单，A xure提供的水平菜单和垂直菜单元件刚好可以满足需求，如图2-99所示。
右键选择某一个菜单项内部>后方添加菜单项/前方添加菜单项，可以在该菜单项的旁边添加同级菜单。右键选择某一个菜单项内部>删除菜单项，可以删除该项，如图2-100所示。
右键选择某一个菜单项内部>添加子菜单，在该菜单项的下部或右侧会新增3项子菜单，如图2-101所示。若需要更多的子菜单，可以给子菜单添加同级菜单。
水平菜单和垂直菜单交互样式的设置方法与树状菜单基本相同，同样需要注意选择交互样式的应用范围。
在真实的软件或系统中并没有动态面板、内联框架和中继器这几种元件，它们仅仅是Axure中为了制作一些交互效果而特有的高级元件，掌握好这几种元件的特性，足以应对大多数交互效果的制作。
动态面板，从字面上看就是状态能够动起来的面板；从元件库中的图标上看，它是一个由3个矩形组成的有立体效果的图标，如图2-102所示，可以把这些矩形理解成面板的多个状态，每个状态都是由其他元件组成的。动态面板都用来制作什么效果？当页面的同一个部分需要显示不同内容时，一般都会用到动态面板，这些不同的内容对应的就是动态面板的不同状态，比如轮播图广告，需要在一张图片的区域循环展示多张图片；比如标签页，需要在一个固定的区域显示不同的分类。
方法1：像其他元件一样，可以直接把“动态面板”图标从元件库拖入设计区域，此时动态面板默认有一个状态，且里面没有任何元件。
方法2：选中设计区域中的某些元件，右键菜单执行【转换为动态面板】命令，如图2-103所示，此时选中的元件就组成了动态面板状态1中的内容。
双击动态面板，进入动态面板状态管理器，如图2-104所示，可以给动态面板命名，增加、删除和复制状态，给状态排序等。
在动态面板状态管理器或概要面板中，单击某个状态，可以修改状态名称；双击某个状态，可以编辑该状态。
在概要面板中，鼠标悬浮至动态面板上，显示添加状态图标；鼠标悬浮至某个状态上，显示复制状态图标，如图2-105所示。
很多交互效果都是利用动态面板的一些特殊属性来制作的，如图2-106所示。用户必须熟悉这些属性的功能和设置方法，这样才能在实战中快速制作需要的效果。
自动调整为内容尺寸：可以把动态面板理解为一个容器，如果容器内的元件尺寸过大，超出了初始设置的动态面板尺寸，那么超出的部分是不显示的，勾选“自动调整为内容尺寸”后，动态面板这个容器就会根据内部的元件尺寸自动调整大小。
滚动条：动态面板默认是不显示滚动条的，如果没有勾选“自动调整为内容尺寸”，那么如何显示超出动态面板尺寸的部分？此时可以根据需要选择“自动显示滚动条”“自动显示垂直滚动条”和“自动显示水平滚动条”。需要注意的是，滚动条在动态面板内部也是占宽度或高度的。
固定到浏览器：可以将动态面板在浏览器中悬浮显示，不随页面的滚动而移动。参数包括在浏览器中固定的水平位置和垂直位置，以及设置在浏览器中始终保持顶层。利用动态面板的这个属性可以制作头部悬浮菜单或者“返回顶部”按钮等。需要注意的是，在设置完该属性后，只有在浏览器中才能看到效果，也就是说浏览器中的效果只与设置的参数有关，和Axure设计区域中的位置无关。这也就意味着在Axure中做设计时，可以把需要悬浮的元件放到一个相对“舒服”的位置，没必要放到真实的位置，因为真实的位置很有可能和其他元件重合，容易干扰其他操作。
100%宽度：勾选后动态面板的宽度会随着浏览器的宽度变化而变化，也仅限在浏览器中有效。如果要明显地看到效果，需要给动态面板的某个状态设置背景（默认背景是透明的，所以看不出效果）。这个属性的典型应用是和“固定到浏览器”属性配合，制作头部悬浮菜单。
允许触发鼠标交互：如果给动态面板内的元件设置了“鼠标悬停”“鼠标按下”的交互样式，勾选此项，当鼠标进入动态面板的范围时，将会同时触发这些元件的交互样式。
禁用：勾选后，动态面板的交互动作会被禁用。
选中：勾选后，动态面板中的元件会被选中。
动态面板样式如图2-107所示，其使用频率不如其他基本元件频繁，可能很容易被忽略，但有时可以提升制作原型的效率。
位置·尺寸：可以设置x轴坐标和y轴坐标、宽度和高度、元件角度和文本角度。
背景颜色：背景颜色默认是透明的。
背景图片：导入图片，设置图片在水平和垂直方向的对齐方式，设置图片的重复方式。
不重复：图片保持原始大小。
重复图片：若图片小于动态面板尺寸，在水平和垂直方向重复图片。
水平重复：若图片小于动态面板尺寸，只在水平方向重复图片。
垂直重复：若图片小于动态面板尺寸，只在垂直方向重复图片。
填充：图片将按照动态面板的尺寸完全填充。
适应：图片将按照动态面板的尺寸等比例缩放。
当同时设置了背景颜色和背景图片时，则优先显示图片；若图片没有完全填充，剩余部分显示背景颜色。
案例描述
在2.4.7节中提到，开关是移动设备上很常见的一种元件，但Axure并没有直接提供可动态切换状态的开关，本节介绍其制作方法。
鼠标单击开关，可以循环切换“打开”和“关闭”状态，其中“打开”状态高亮显示。
案例难度：★☆☆☆☆
案例技术
动态面板切换不同状态、鼠标单击时事件。
制作步骤
（1）在Icons元件库中找到“开关-开启”元件并拖入设计区域，在该元件上右键菜单执行【转换为动态面板】命令，如图2-108所示。
（2）双击该动态面板，打开动态面板状态管理器，单击加号，新增State2，如图2-109所示。
（3）双击State2，拖入“开关-关闭”元件至设计区域，位置为（0,0）。
（4）设置开关状态切换动画，如图2-110所示。
①选中“动态面板”，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>元件>设置面板状态】。
③在右侧的配置动作区域勾选“当前元件”。
④选择状态为Next，并勾选“向后循环”。
（5）设置完成后，按F5键在浏览器中预览效果，如图2-111所示。
案例描述
在同一区域按顺序循环轮播4张不同的图片，每隔3秒自动向后轮播，可以单击上一张和下一张切换图片。
案例难度：★★★☆☆
案例技术
切换动态面板状态、页面载入时事件、鼠标单击时事件。
制作步骤
（1）在设计区域中拖入一个“图片”元件，调整至合适的位置和尺寸，然后双击导入图片。
（2）右键菜单执行【转换为动态面板】命令，并命名为images，此时动态面板有了一个状态State1，该状态含一张图片，如图2-112所示。
（3）4张图片就需要4个状态，为images动态面板增加剩余的3个状态，并添加图片，如图2-113所示。
①双击images动态面板，打开动态面板状态管理器，选中State1，单击“复制”按钮，复制3次，此时动态面板就有了4个状态，并且每个状态里都有一张图片。
②只需要进入剩余的各个状态里，双击图片，导入新图片即可，这种方法操作比较便捷。
（4）制作每隔3秒自动向后轮播效果，如图2-114所示。
①先在页面的空白区域单击（不要选中任何元件），然后双击属性面板中的“页面载入时”事件，打开用例编辑器。
②选择【添加动作>元件>设置面板状态】。
③在右侧的配置动作区域勾选images（动态面板）。
④选择状态为Next，并勾选“向后循环”，设置并勾选“循环间隔为3000毫秒”，勾选“首个状态延时3000毫秒后切换”。
⑤设置进入动画为“向左滑动”，同时Axure会自动设置退出动画为“向左滑动”，时间都默认为500毫秒，如图2-115所示。
（5）把元件库切换至Icons，分别拖入可以代表上一张、下一张的图标（单角符-左/右）至动态面板上，调整位置、尺寸和颜色。
（6）制作单击“上一张”按钮，切换上一张图片效果，如图2-116所示。
①选中“上一张（单角符-左）”按钮，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>元件>设置面板状态】。
③在右侧的配置动作区域勾选images（动态面板）。
④选择状态为Previous，并勾选“向前循环”。因为每单击一次只需要切换一张图片即可，所以不要设置循环间隔。
⑤设置进入动画为“向右滑动”，同时Axure会自动设置退出动画为“向右滑动”，时间都默认为500毫秒。
（7）制作单击“下一张”按钮，切换下一张图片效果，和步骤（6）同理。
①选中“下一张（单角符-右）”按钮，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>元件>设置面板状态】。
③在右侧的配置动作区域勾选images（动态面板）。
④选择状态为Next，并勾选“向后循环”。因为每单击一次只需要切换一张图片即可，所以不要设置循环间隔。
⑤设置进入动画为“向左滑动”，同时Axure会自动设置退出动画为“向左滑动”，时间都默认为500毫秒。
（8）此时在浏览器中预览一下就会发现，页面刚刚载入时自动轮播的效果很完美，单击“上一张”或“下一张”按钮切换图片也很正常，但单击切换图片之后就不会继续自动轮播了。这是因为我们只给“页面载入时”事件添加了自动轮播的交互动作，当我们单击按钮后，就已经不是“页面载入时”了，动作就不会继续执行。因此要在步骤（6）和步骤（7）的动作后面再加上自动轮播的动作，和“页面载入时”事件的动作相同，如图2-117所示。
（9）设置完成后，按F5键在浏览器中预览效果，如图2-118所示。
提示
轮播图采用图文+链接的形式用来传达最重要的信息，当然图文的“文”指的是把文字放到图上，本质上还是图片。轮播图一般都放到网站或App首页，会占据很大的空间，有很强的视觉冲击力，往往第一印象就会决定是否能留住用户，所以合理地利用轮播图就显得尤为重要。用户对图文的感知程度远高于纯文字，如果图片设计合理、美观大方，就能够准确地传递信息，可以显著提高转化率；如果图片模糊粗糙，或者广告意味很浓，可能会起到适得其反的效果。
案例描述
网站的头部导航悬浮显示不随浏览器的滚动而移动，且自适应浏览器宽度。当页面向下滚动时，头部的不透明度变为80%。在这个基础上，根据两种不同类型的产品制作两种不同的效果。
效果1：页面整体居中显示，固定宽度（如1000px），那么头部中的内容也要固定宽度，剩余的背景部分需要填充至浏览器宽度，如图2-119所示。
效果2：页面整体（包括头部）全屏显示，但要做成响应式效果，也就是说不同的分辨率下的显示效果都是全屏，在调试的时候可以直接改变浏览器宽度来预览效果，如图2-120所示。
案例难度：★★☆☆☆
案例技术
动态面板的“固定到浏览器”属性和“100%宽度”属性、窗口尺寸改变时事件、窗口滚动时事件。
案例说明
网站的头部一般都会有导航菜单、用户信息和退出按钮等内容，都是很重要或单击率比较高的内容，现在很多网站都把它设计成悬浮固定效果，还有App页面的标题栏和底部导航栏也都是固定的。这种设计的好处就是无论页面处于什么位置，都能在第一时间单击固定部分的内容。
本案例在页面滚动时，给头部增加了一些透明度，这个设计的目的在于增加网页纵向的延伸感，避免在衔接处显得过于生硬。对于移动设备而言，屏幕面积本来就很小，固定的标题栏和底部导航栏又占据了很大的空间，这种设计能明显地减少视觉上的压迫感和用户的紧张感。
制作步骤
效果1
（1）使用动态面板制作头部框架，如图2-121所示。
①拖入一个“动态面板”至设计区域，命名为header。
②设置位置为（0,0），尺寸为1000像素×60像素。
③设置背景颜色为#CCCCCC。
（2）填充头部内容。只在头部放置一个占位符（代表Logo）、一个文本标签（代表退出按钮），做一下简单的示意即可，如图2-122所示。
①双击动态面板进入状态管理器，双击State1。
②拖入一个占位符至设计区域，位置为（0,0），尺寸为140像素×60像素，修改占位符文字为Logo。
③拖入一个文本标签至设计区域，位置为（920,20），修改文字为“退出登录”。
（3）设置动态面板属性，如图2-123所示。
①回到header（动态面板），右键菜单执行【固定到浏览器】命令，勾选“固定到浏览器窗口”，“水平固定”选择“居中”，边距为0，“垂直固定”选择“上”，并勾选“始终保持顶层<仅限浏览器中>”，然后单击“确定”按钮。
②在属性中勾选“100%宽度<仅限浏览器中有效>”。
（4）执行菜单中的【项目>页面样式编辑】命令，选择“页面排列”为水平居中，如图2-124所示。
（5）制作页面滚动时头部增加透明度效果，如图2-125所示。
①关闭动态面板的State1，先在页面的空白区域单击（不要选中任何元件），然后双击属性面板中的“窗口滚动时”事件，打开用例编辑器。
②选择【添加动作>元件>设置不透明】。
③在右侧的配置动作区域勾选“header（动态面板）”。
④设置不透明度为80%。
（6）此时关于头部的操作就都做完了，但为了能在浏览器中看到固定效果，还要在页面中拖入一些其他元件让页面长度变长，这样页面才会滚动起来。比如拖入一个占位符至设计区域（注意不是在动态面板的State1中），位置为（0,1200），尺寸为1000像素×500像素。
（7）设置完成后，按F5键在浏览器中预览效果，如图2-126所示。
效果2
此效果会用到获取窗口宽度的函数Window.width，因为要兼容不同的屏幕分辨率（不同的浏览器尺寸），要让“退出登录”按钮时刻都是居右显示，不能设置固定位置。从示意图上看它的x坐标应该比浏览器的宽度值小一点。关于函数的内容在后续的章节中会详细讲解。
（1）使用动态面板制作头部框架，同效果1。
①拖入一个“动态面板”至设计区域，命名为header。
②设置位置为（0,0），尺寸为1000像素×60像素。
③设置背景颜色为#CCCCCC。
（2）填充头部内容，同效果1。
①双击动态面板进入状态管理器，双击State1。
②拖入一个占位符至设计区域，位置为（0,0），尺寸为140像素×60像素，修改占位符文字为Logo。
③拖入一个文本标签至设计区域，位置为（920,20）。其实文本标签的位置是动态变化的，此步骤是为了方便操作。然后命名为logout，修改文字为“退出登录”。
（3）设置动态面板属性，如图2-127所示。
①勾选“固定到浏览器窗口”，选择“水平固定”为“左”，“垂直固定”为“上”，并勾选“始终保持顶层<仅限浏览器中>”。
②在属性中勾选“100%宽度<仅限浏览器中有效>”。
（4）让“退出登录”按钮的位置随浏览器的尺寸变化而左右移动，如图2-128所示。
①关闭动态面板的State1，先在页面的空白区域单击（不要选中任何元件），然后双击属性面板中的“窗口尺寸改变时”事件，打开用例编辑器。
②选择【添加动作>元件>移动】。
③在右侧的配置动作区域勾选logout。
④选择“绝对位置”，y坐标输入20，然后单击x坐标右侧的fx按钮。
⑤删除输入框里的0，单击“插入变量或函数”，选择Window.width。
⑥“退出登录”按钮的位置不能紧贴浏览器右侧，所以获取浏览器宽度后，再减去80（在中括号内输入-80），单击“确定”按钮。
（5）制作页面滚动时头部增加透明度效果，同效果1。
①关闭动态面板的State1，先在页面的空白区域单击（不要选中任何元件），然后双击属性面板中的“窗口滚动时”事件，打开用例编辑器。
②选择【添加动作>元件>设置不透明】。
③在右侧的配置动作区域勾选“header（动态面板）”。
④设置不透明度为80%。
（6）此时关于头部的操作就都做完了，继续拖入一个占位符至设计区域（注意不是动态面板的State1中），位置为（0,1200），尺寸为1000像素×500像素，让页面可以滚动起来。
（7）设置完成后，按F5键在浏览器中预览效果。通过改变浏览器尺寸来模拟不同的屏幕分辨率，“退出登录”按钮的位置会随浏览器宽度的变化而左右移动，如图2-129所示。
本案例的两种效果中，当页面滚动时头部的不透明度变为80%，但当页面又回滚到顶部时，头部的不透明度应该恢复为100%，但案例中并没有实现。这种效果涉及条件用例的知识，在后续的章节中会具体讲解。
提示
案例中制作的两种不同效果，都在什么样的产品中应用？
效果1：页面宽度在1000px左右并居中显示，大部分的网站其实都是采用的这种设计，如新闻类网站、微博、QQ空间和社区等。因为在这种宽度下浏览信息是最舒服的，人的眼睛或头部左右转动的幅度不会很大。有一些网站的宽度比较大（如淘宝），但采取了左右分栏的设计，某一栏的宽度也是很有限的。
效果2：页面整体全屏显示，内容的宽度随浏览器尺寸的变化而变化。大多数纯信息展示类的页面（如广告页、产品介绍页）和一些ERP管理系统、后台管理系统等产品都采取这种设计。对于信息展示类页面，很少有大量的文字信息，基本是图片+动效，不会涉及浏览不方便的问题，全屏的设计也很酷炫；管理系统因为是工作页面，常常会有一些复杂的表单、表格等内容，固定宽度的话可能会造成表格宽度很窄，数据展示不全的问题，影响用户的操作。
案例描述
同一页面下有3个不同的标签，单击标签高亮显示，并切换对应的标签页内容。
案例难度：★★★☆☆
案例技术
动态面板切换不同状态、鼠标单击时事件。
制作步骤
（1）拖入3个“矩形1”元件至设计区域，横向排开，分别修改文本为“标签1”“标签2”和“标签3”，分别命名为tab1、tab2和tab3，设置尺寸均为144像素×45像素，位置可自行设置。
（2）把上述3个矩形的形状转换为“右梯形”，如图2-130所示。
（3）设置3个标签页选中时的交互样式，如图2-131所示。
①选中tab1、tab2和tab3，单击属性面板中的“选中”按钮，打开“交互样式设置”对话框。
②勾选“字体颜色”，设置为#FFFFFF。
③勾选“填充颜色”，设置为#999999。
（4）用同样的方法设置3个标签页鼠标悬浮时的交互样式。
（5）选中tab1，勾选属性面板中的“选中”，设置标签1默认为选中状态，如图2-132所示。
（6）选中tab1、tab2和tab3，在属性面板中设置选项组名称为tab，即在同一时刻这三个标签只能有一个被选中，如图2-133所示。
（7）拖入“矩形1”元件3个标签到下方，修改文本为“第一个标签页的内容”，设置填充颜色为#999999，文本颜色为#FFFFFF，尺寸为432像素×170像素，右键菜单执行【转换为动态面板】命令，并命名为content，此时动态面板已有了一个状态State1，该状态含一个矩形，如图2-134所示。
（8）3个标签页就需要3个状态，为content动态面板增加剩余的两个状态，并修改内容，如图2-135所示。
①双击content动态面板，打开动态面板状态管理器，选中State1，单击复制按钮，复制两次，此时动态面板就有了3个状态，并且每个状态里都有一个矩形。
②进入剩余的两个状态里，分别修改矩形文本为“第二个标签页的内容”和“第三个标签页的内容”。
（9）单击标签1，切换为第一个标签页的内容，如图2-136所示。
①选中tab1，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>元件>设置面板状态】。
③在右侧的配置动作区域勾选content。
④选择状态State1。
（10）当切换为第一个标签页内容时，标签1被选中，高亮显示，如图2-137所示。
①不要关闭用例编辑器，继续添加“选中”动作。
②在右侧的配置动作区域勾选“当前元件”。
（11）用同样的方法设置剩余两个标签页的交互效果。
（12）设置完成后，按F5键在浏览器中预览效果，如图2-138所示。
提示
当同一个页面区域需要显示不同分类的内容时，可以使用标签页的设计。例如，淘宝的订单列表分为“所有订单、待付款、待发货、待收货和待评价”5个标签页，这些标签页是按照订单的状态进行分类的，如果不能找到明显的分类标准，那么标签页这种设计就不是最适合的。
标签的文本不宜过长，一般不超过5个字，这样能让用户快速浏览标签的内容。
被选中的标签应该高亮显示，或与其他标签有明显的区别，能够明确地表示当前显示的是哪个标签分类下的内容。
内联框架，如图2-139所示，可以嵌入当前项目的某个页面或外部页面，也可以嵌入图片、视频和地图。
双击设计区域中的内联框架元件，打开链接属性编辑器，设置要嵌入的内容。
选中“链接到当前项目的某个页面”单选按钮，选择目标页面或输入目标页面名称，如图2-140所示。
选中“链接到url或文件”单选按钮，输入url链接，如图2-141所示。
（1）执行菜单命令【发布>生成HTML文件】，如图2-142所示，选择目标文件夹位置，单击“生成”按钮。
（2）把要嵌入的本地HTML文件放到生成的HTML文件目录下，如图2-143所示。
（3）选中“链接到url或文件”单选按钮，直接输入本地HTML页面的文件名（含扩展名），如图2-144所示。
（4）在生成的HTML文件目录下打开含有内联框架的页面。
内联框架可以嵌入flash格式的在线视频。在视频网站上找到一段视频，获取其flash地址，然后选中“链接到url或文件”单选按钮，粘贴刚刚复制的flash地址即可。但由于HTML5技术的发展和版权的限制，主流视频网站上的分享功能中，已经很难直接获取flash地址了，不过这个功能在真实项目中的应用比较少。
找到网页上的图片，复制其图片地址，然后选中“链接到url或文件”单选按钮，粘贴刚刚复制的图片地址即可。
浏览器不同，获取图片地址的方法可能有所区别。有些浏览器在右键菜单里可以直接复制图片地址，有些浏览器需要在新标签页中打开图片，再复制地址栏中的地址。
思路与嵌入本地页面相同。
（1）执行菜单命令【发布>生成HTML文件】，选择目标文件夹位置，单击“生成”按钮。
（2）把要嵌入的视频/图片放到生成的HTML文件目录下。
（3）选中“链接到url或文件”单选按钮，直接输入视频/图片的文件名（含扩展名）。
（4）在生成的HTML文件目录下打开含有内联框架的页面。
内联框架的属性，如图2-145所示。
框架滚动条：自动显示或隐藏（可根据框架内嵌入内容的尺寸自动显示或隐藏滚动条）、一直显示和从不显示。
隐藏边框：勾选后内联框架的边框将隐藏，多用于自定义内联框架样式。
预览图片：可以设置预览图片为视频、地图效果，也可以导入外部图片。预览图片只会在设计区域显示，在网页中是没有效果的，其作用是提醒制作者内联框架里是什么类型的内容。
案例描述
单击页面左侧的菜单区域，右侧区域显示不同的内容。
案例难度：★★☆☆☆
案例技术
鼠标单击时事件、在内联框架中打开链接。
制作步骤
（1）在index页面中使用占位符、矩形制作简易的页面头部区域。在page1、page2和page3中分别任意添加一些元件加以区别。
（2）拖入“垂直菜单”元件至设计区域，位置为（0,100），修改3个菜单项的文本分别为“页面1”、“页面2”和“页面3”；拖入“内联框架”元件至设计区域，位置为（115,100），尺寸为800像素×500像素，命名为content。
（3）设置content默认显示页面1的内容。双击content，打开“链接属性”对话框，选择page1，如图2-146所示。
（4）为左侧菜单项添加跳转链接，如图2-147所示。
①选中页面1菜单项，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>链接>在框架中打开链接】。
③在右侧的配置动作区域选中“内联框架”单选按钮，并勾选content。
④选中page1页面，然后单击“确定”按钮。
（5）用同样的方法为其他两个菜单项添加跳转链接。
（6）设置完成后，按F5键在浏览器中预览效果，如图2-148所示。
提示
左右结构是各种管理页面的经典结构，每个页面的左侧导航菜单都是相同的，所以可以把内容部分放到内联框架中，在框架内实现页面切换效果。这样可以避免每个页面中都要制作导航菜单，减少后期维护的成本。但这种方式有一定的局限性，由于内联框架不能自适应内容的高度，当内容很多时会出现局部滚动条。
中继器，如图2-149所示，一般用来制作各种形态的数据列表。数据列表的特点就是每条数据分别对应的字段都是相同的，例如，用户列表中每条数据都会有用户名、性别、电话和邮箱等字段。中继器的作用就是存储这些具有相同字段的数据，它由“项”和数据集组成。
用中继器来制作数据列表比使用表格的优势在于，中继器可以实现数据的增、删、改、排序和筛选等功能。随着项目进度的推进，如果需要逐渐完善原型的保真度，那么笔者建议在制作低保真原型时，在原始需求已经确定的情况下就直接使用中继器显示数据而不是表格，这样可以避免后期替换元件的麻烦，除非确定不需要制作高保真原型，或高保真原型中只需添加UI元素而不需要制作复杂的交互效果。
中继器的“项”可以理解为用来显示重复内容的元件或元件集合，如图2-150所示。例如，用户列表中用来显示用户名、注册信息和账号状态等数据的矩形就是中继器的项。项可以由图形、图片、文本和表单等元件组成，双击设计区域的中继器，可以设计“项”的内容。
数据集就是中继器每一项对应数据的集合，如图2-151所示，与数据库中的表有些类似。在中继器的属性面板中可以编辑数据的字段和内容。双击表中的“添加列”可以新增字段（仅支持英文），双击表中的“添加行”可以新增一行数据内容，双击表中的单元格可以编辑数据，也可以使用表上方的快捷按钮对数据集进行编辑。
“项”和数据集共同组成了中继器的内容，但这二者目前是相对独立的存在，需要把数据集的每一个字段绑定到“项”中的元件上才能把数据显示出来。
拖入中继器元件至设计区域，默认是三行一列的表格，并且表格中已经填充数据为1、2、3，如图2-152所示。先来分析一下默认中继器的内容。
在数据集中可以看到第一列的字段名称为Column0，数据为1、2、3，如图2-153所示。
双击中继器，在“项”中只有一个矩形元件，如图2-154所示。通过数据集可以发现需要重复显示的字段只有一个，只要把这个字段的数据绑定到“项”中的一个矩形即可。
在属性面板的“每项加载时”事件的Case1中，已经添加了“设置文本”的动作，如图2-155所示，此动作的目的就是绑定数据。
这就是让中继器显示数据的操作思路，它不仅可以显示文本数据，也可以显示图片、链接页面，在后面通过两个具体的案例详细讲解使用中继器的操作步骤。
通过修改中继器的样式可以快速设置数据列表的样式，在制作高保真原型时可以显著提升工作效率，如图2-156所示。
填充：设置中继器在上、下、左、右4个方向与内部元件之间的距离。
布局：设置中继器的“项”垂直分布或水平分布，需要配合“网格排布”复选框使用。
背景：样式面板上半部分的“背景色”指的是整个中继器元件的背景颜色，而下半部分的“背景”指的是“项”的背景颜色。“项”的背景色支持隔行变色效果，勾选“交替”复选框，分别设置两种颜色值即可。
分页：当中继器数据较多时，可以分页显示，参数包括每页项目数和起始页。当勾选“多页显示”复选框时，页面中只会显示第一页的数据，其他数据需要通过给其他元件（如按钮）添加交互动作的方式显示，在高级交互的章节中会介绍。
间距：设置中继器的“项”的行间距或列间距。如果“项”被设置为垂直分布，则“行”参数有效；如果“项”被设置为水平分布，则“列”参数有效。
案例描述
制作一个用户管理列表，包括序号、用户名、注册时间和账号状态4个字段。
案例难度：★★★☆☆
案例技术
中继器的项、中继器的数据集、中继器每项加载时事件。
案例说明
本案例使用中继器制作用户管理列表。通过本案例介绍使用中继器显示普通文本数据的方法和步骤。
制作步骤
（1）制作表头。中继器元件是存储和显示数据的，表头部分并不属于数据，所以需要单独制作。拖入4个“矩形1”元件至设计区域，修改文本分别为“序号”“用户名”“注册时间”和“账号状态”，位置和尺寸可自行设置。
（2）拖入中继器元件至设计区域，位置与表头的下边界对齐，如图2-157所示。
（3）编辑中继器数据集，如图2-158所示。
①设置4个字段名称：number、userName、registerTime和userState，分别代表序号、用户名、注册时间和账号状态。
②添加数据集中的数据。
（4）双击中继器，设计“项”的内容。删除默认的矩形，为了保证每一列和表头的宽度相同，可以直接把表头的4个矩形复制进来，位置为（0,0），分别命名为number、userName、registerTime和userState，用来显示数据集中4个字段的数据内容。从这里可以看出，元件的名称和数据集的字段名称可以相同，这样做方便下一步绑定数据。
（5）把数据集中的数据绑定到“项”上显示出来，如图2-159所示。
①双击属性面板中的“每项加载时”事件，打开用例编辑器。
②选择【添加动作>元件>设置文本】。
③在右侧的配置动作区域勾选number。
④选择设置文本类型为“值”，单击fx按钮，打开“编辑文本”对话框。
⑤单击“插入变量或函数”按钮，选择中继器/数据集分类下的Item.number，单击“确定”按钮，并用同样的方法依次为userName、registe rTime和userState设置文本。
（6）设置列表的各行变色效果，如图2-160所示。
①在样式面板中的“背景”栏目下勾选“交替”复选框。
②设置第一个背景颜色为#E8E8E8。
提示
由于中继器的“项”里面所有矩形的填充颜色都是白色，这样会覆盖中继器的背景颜色，所以需要把“项”中所有矩形的填充颜色设置为透明才能看到效果。
（7）设置完成后，按F5键在浏览器中预览效果，如图2-161所示。
提示
虽然制作表头和制作数据区域的顺序没有严格要求，但最好先把表头的位置和尺寸设置好。因为在真实的项目中，页面元件一定是比较多的，而列表一般只占据整个页面宽度的一部分，数据区域又是在单独的页面中设计的。如果先制作数据区域，不容易把握列表的宽度，可能需要反复调整，这样会降低工作效率。
案例描述
制作一个商品订单列表，内容包括订单号、商品名称、商品图片、购买时间、商品数量、付款金额和状态，单击商品名称跳转至商品详情页面，如图2-162所示。
案例难度：★★★★☆
案例技术
中继器的项、中继器的数据集、中继器每项加载时事件、导入图片、添加参照页。
案例说明
本案例使用中继器来制作商品订单列表。通过本案例介绍使用中继器显示普通文本数据和图片、添加参照页的方法与步骤。
制作步骤
效果图中的列表在布局上和传统的表格有些不同，但同样可以用中继器实现效果。显示每条商品信息的元件集合就是中继器的“项”。
（1）拖入中继器元件至设计区域，编辑中继器数据集，并添加其中的文本数据，如图2-163所示。
①设置8个字段名称：id、buyTime、goodsName、goodsNumber、pay、state、picture、link，分别代表订单号、购买时间、商品名称、商品数量、付款金额、状态、商品图片和链接页面。
②添加数据集中的文本数据。
（2）导入商品图片。在picture列下面的单元格上执行右键菜单命令【导入图片】，如图2-164所示，然后选择图片。
（3）添加商品跳转链接。在link列下面的单元格上执行右键菜单命令【引用页面】，如图2-165所示，然后选择页面。本案例中直接选择page1、page2和page3即可，大家可自行在对应的页面中加入一些元素加以区分。
（4）双击中继器，设计“项”的内容。删除默认的矩形，使用矩形、文本标签和图片元件做好页面布局，如图2-166所示，并将需要绑定数据的元件命名为id、buyTime、goodsName、goodsNumber、pay、state和picture，用来显示数据集中除link之外7个字段的数据内容。注意，并不是所有的元件都需要绑定数据，比如图2-166中矩形的作用只是布局。
（5）把数据集中的文本数据绑定到“项”上显示出来，如图2-167所示。
①双击属性面板中的“每项加载时”事件，打开用例编辑器。
②选择【添加动作>元件>设置文本】。
③在右侧的配置动作区域勾选id。
④设置文本类型为“值”，单击fx按钮，打开“编辑文本”对话框。
⑤单击“插入变量或函数”，选择中继器/数据集分类下的Item.id，单击“确定”按钮，并用同样的方法依次为buyTime、goodsName、goodsNumber、pay、state和picture设置文本。
（6）把数据集中的图片数据绑定到“项”上显示出来，如图2-168所示。
①双击属性面板中的“每项加载时”事件，打开用例编辑器。
②选择【添加动作>元件>设置图片】。
③在右侧的配置动作区域勾选Set picture。
④设置图片类型为“值”，单击fx按钮，打开“编辑值”对话框。
⑤单击“插入变量或函数”，选择中继器/数据集分类下的Item.picture，单击“确定”按钮。
（7）为商品名称和商品图片添加跳转链接，如图2-169所示。
①分别选中商品名称和商品图片的文本标签，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>链接>打开链接】。
③在右侧的配置动作区域选择打开位置为“当前窗口”。
④选择“链接到url或文件”。
⑤输入[[Item.link]]，或单击fx按钮，在“编辑值”对话框中选择“插入变量或函数”，并选择中继器/数据集分类下的Item.link。
（8）目前每条商品信息互相之间的距离为0，为了更加美观，可以设置行间距为20，并使用文本标签制作表头，如图2-170所示。
（9）设置完成后，按F5键在浏览器中预览效果，如图2-171所示。
提示
决定本案例中列表宽度的元件是订单号所在行的矩形，在真实的项目中，页面元件一定是比较多的，而商品列表只占页面宽度的一部分。为了控制好列表的宽度，可以在页面中先设计一条商品信息的布局，再把它们剪切到中继器里。另外，从本案例中可以更深入地体会到，中继器本质上是用来存储数据的，至于是否显示出来，取决于是否把数据和“项”中的元件绑定。
当原型中有元件或元件组合需要重复使用时，可以把它们制作成母版，需要使用这些内容时，只需要直接调用母版即可，无须每个页面都单独制作；当要修改这些内容时，只需要在母版中修改一次，所有应用母版的页面都会自动修改，方便后期维护。例如，页面的导航菜单、底部版权信息等是母版最常见的应用，如图2-172所示，多次使用的图片素材使用母版制作，可以降低项目文件的大小。
方法1
在母版功能区上单击“添加母版”按钮并命名，如图2-173所示，双击该母版可以编辑内容。此方法是在单独的设计区域编辑母版，很难把握母版元件和应用页面元件之间的尺寸、位置关系，所以在实战中使用得比较少。
方法2
比较常用的方法是在页面设计区域中先把需要重复显示的内容设计好，选中这些元件，然后执行右键菜单命令【转换为母版】，命名新母版名称，选择拖放行为（任何位置、固定位置或脱离母版），单击“继续”按钮即可创建母版，如图2-174所示。
选中设计区域中的母版，在属性面板中有两个母版实例，如图2-175所示。
隔离单选按钮组效果：默认勾选，把母版和页面中的单选按钮组隔离，即使两处的单选按钮组名称相同，也不被认为是同一单选按钮组，互不干扰。
隔离选项组效果：默认勾选，把母版和页面中的选项组隔离，即使两处的选项组名称相同，也不被认为是同一选项组，互不干扰。
在应用页面中，母版可以随意改变位置。
（1）拖入一个“矩形3”元件至index页面的设计区域，修改文本内容为“版权所有：狄睿鑫老师”，尺寸可自行设置。
（2）在“矩形3”元件上执行右键菜单命令【转换为母版】，命名为“bottom”，“拖放行为”选择“任何位置”，如图2-176所示。
（3）打开page1页面，把bottom从母版功能区拖入设计区域，可以随意拖动母版改变其位置。此时母版的边界是绿色的，如图2-177所示。
情况1：在母版最初创建时，内部元件的位置就是应用页面中母版的位置，不可改变。
（1）拖入一个“矩形1”元件至index页面的设计区域，位置为（0,0），然后拖入一个“占位符”元件，位置为（0,0），修改文本内容为“logo”，尺寸可自行设置。
（2）选中上述两个元件，执行右键菜单命令【转换为母版】，命名为“head”，“拖放行为”选择“固定位置”，如图2-178所示。
（3）打开page1页面，把head从母版功能区拖入设计区域，无论把head拖曳到什么位置，松开鼠标时，head的位置都是（0,0）。此时模板的边界是红色的，如图2-179所示。
情况2：在已经应用母版的页面中，执行右键菜单命令【固定位置】，如图2-180所示，仅修改此页面中该母版的拖放行为，其他页面的母版不受影响。
情况1：当选中此拖放行为后，再次把它拖入设计区域时，原母版里的元件就会变成孤立的元件，而不再是母版，不再自动更新母版的内容，但已经应用过母版的页面不受影响。
（1）在母版功能区中右键单击head并执行【拖放行为>脱离母版】命令，如图2-181所示。
（2）打开page2页面，把head从母版功能区拖入设计区域，可以看到矩形和占位符元件不再是一个整体，如图2-182所示。
（3）再次打开head母版，拖入一个文本标签至设计区域，修改位置为（830,22），修改文本内容为“退出”，如图2-183所示。
（4）依次打开index、page1和page2页面，可以发现index、page1页面的内容均已自动更新，而page2页面的内容没有变化。
情况2：在已经应用母版的页面中，执行右键菜单命令【母版>脱离母版】，仅修改此页面中该母版的拖放行为，其他页面的母版不受影响，如图2-184所示。
除了直接把母版拖入页面的设计区域这种方法，还可以批量应用母版。在母版功能区的母版上执行右键菜单命令【添加到页面中】，打开“添加母版到页面中”对话框，如图2-185所示。
①选择要应用的页面。
②选择快捷按钮，包括全部选中、全部取消、全部选中子页面和取消全部子页面。
③设置母版的应用位置，可以锁定为母版中的位置、指定新的位置、设置是否置于底层。
④一般默认勾选“页面中不包含此母版时才能添加”复选框。
提示
注意此操作无法撤销。
直接选中页面中的母版，按Delete键即可移除该母版。在母版功能区的母版上执行右键菜单命令【从页面中移除】，在打开的对话框中，可以批量移除多个页面中的母版，如图2-186所示。
提示
注意此操作无法撤销。
在制作低保真原型阶段，上面介绍的关于母版的知识就已经足够了。如果在后续制作高保真原型时，可能会有母版内元件和母版外元件交互的需要，这就会用到“母版自定义事件”的相关知识，在后续的高级交互章节会做详细的介绍。
本节内容分别介绍如何设置Web原型和App原型的尺寸。笔者在之前的章节中强调过，在制作低保真原型阶段不要过多纠结原型中各元件的尺寸、位置和样式等，这是为了在产品设计的初级阶段把工作重心放到业务逻辑上面来，不要把时间浪费在原型的UI元素上。不过在工作流程中，最好在设计之初就把整个原型页面的尺寸大体确定下来：对于Web页面，可以无须关注到像素级别；对于App页面，需要先确定在哪些移动设备上预览，要确定一个基本尺寸，这样在后续制作高保真原型时会省下不少力气。
Web产品一般是在PC端使用，PC的屏幕比较大，各种高分辨率的屏幕也越来越普及，很多初学者都会认为把页面设计成全屏效果会显得很大气，但这并不一定是合理的设计。想象一下，当你在上网时，信息充满了整个页面，你需要不停地转动眼睛和头部，这样的用户体验是非常差的。
对于内容型网站，一般把页面宽度设计成1000px左右，这样在浏览信息时是最舒服的。有些网站的内容越来越丰富（如淘宝），页面的宽度可能变成了1200px或更大，但采取了分栏设计，如图2-187所示。
单击菜单中的【布局>栅格和辅助线>创建辅助线】命令，打开“创新辅助线”对话框。以页面宽度1000px为例，设置列数为1、列宽为1000、间距宽度为0、边距为0，行数为0，后续参数无须设置，如图2-188所示，勾选“创建为全局辅助线”复选框，所有页面均被添加了辅助线，如图2-189所示。
如果想给某一个页面单独创建辅助线，可以取消勾选“创建为全局辅助线”复选框，然后从页面左侧或顶部的标尺向设计区域拖曳鼠标，创建辅助线，如图2-190所示。拖曳辅助线可以改变其位置。
对于展示型网站，页面一般设计成响应式的，即随着分辨率的变化而自适应宽度。在原型中，可以使用Axure提供的自适应视图功能，在后续的章节中会做详细的介绍。
如果原型需要在移动设备中预览，那么在设计之初就要规划好原型的尺寸。首先要明确一个概念，虽然设计的是App原型，但原型在本质上也是HTML页面，在移动设备上也是通过浏览器预览的。
HTML页面的样式是通过CSS控制的，在PC设备上，CSS中的1像素就相当于真实屏幕的1像素；而在移动设备上，由于屏幕分辨率越来越高，从480P、1080P到2K的分辨率，但屏幕的真实尺寸却并没有成比例地变化（甚至是没有变化），出现了不同的像素密度，所以CSS中的1像素并不一定等于移动设备屏幕的1像素。如iPhone 6s的屏幕物理分辨率为750像素×1334像素，Axure中的原型尺寸为375像素×667像素，是物理屏幕分辨率的1/2。需要注意的是，并不是所有移动设备的原型尺寸和物理分辨率都是1/2的关系，如iPhone 6s Plus的屏幕物理分辨率为1080像素×1920像素，Axure中的原型尺寸为414像素×736像素。
在真实项目中，页面的内容很多，高度往往是不确定的，所以无须限制Axure中原型的高度。但有一点需要注意，如果要在移动设备中查看一屏范围内能显示哪些内容（即不垂直滚动页面时），在计算高度的时候需要减去状态栏的高度，状态栏就是手机上显示运营商、信号强度、时间和电量的区域。还是以iPhone 6s为例，状态栏的真实高度为40像素，但在Axure中需要把高度减去20像素，也就是说Axure中一屏范围的尺寸是375像素×647像素。
如果需要在不同的移动设备中预览原型，同样要使用自适应视图功能，在后续的章节中会做详细的介绍。
