作者：吕皓月
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
APP蓝图：Axure RP7.0移动互联网产品原型设计试读：
前言
建模，又常被称为画线框图、mockup、原型图、demo，其主要用途是在正式进行设计和开发之前，通过一个逼真的效果图来模拟最终的视觉效果和交互效果。
在现代企业当中，尤其是互联网企业，无论企业规模大小，时间都意味着金钱。开发出的产品不符合最初的要求，不满足用户期待，会白白浪费大量的人力物力。所以决策者在将产品推向市场之前，都希望最大程度地去了解最终的产品到底是什么样子的，但是又不能投入时间真正地做出一个真实的产品。所以，模型就成了最好的帮手。建筑行业中的设计图，汽车行业中的概念车，零售行业中小规模局部上市的一些实验商品，手机行业中的工程原型机，都是建模的好例子。
本书就是要向大家介绍如何使用Axure RP 7.0软件制作移动互联网的网站原型。比如，如何制作一个微信那样的联系人对话框，如何制作一个像iOS里面拖动的橡皮筋效果。通过这些具体应用的案例，让读者熟悉整个建模的过程，从而利用Axure RP 7.0这个神奇的工具，将自己的想法转化成可以向别人介绍的逼真的原型。然后通过这个原型，获得企业内部的资源支持或项目主导者的认可，确认讨论的需求，甚至获得潜在投资人的支持，把握一个机会。
如果大家对传统的互联网建模有兴趣，可以参考笔者的另外一本书《网站蓝图——Axure RP高保真网页原型制作》，也由清华大学出版社出版。在那本书中，从简单的原型到复杂的交互，读者可以全面了解Axure RP的功能。在本书中，对于完全没有使用过Axure RP的读者来说，可能会需要一点儿时间适应。
在《网站蓝图——Axure RP高保真网页原型制作》出版后，很多读者提出了一个疑问，那就是原型到底要做得多“逼真”才算是令人满意的？是否需要100％的模拟真实的情况？那样可能意味着原型的制作也要花费相当多的时间和精力。笔者的答复是：看应用场景。
如果你的原型就是用来跟你熟识的一些产品经理和工程师进行沟通交流，那么也许一个非常简单的用于示意的原型图就足够了。因为你们彼此了解，很多的沟通可以通过语言和默契来完成，甚至不需要原型。
如果你的原型是用来跟上司提案用的，那么就要做相对详细一些，尤其是涉及用户交互和流程的部分。要让他们清楚了解，你这个页面是做什么的？怎么用？如何展现每个细节？尤其是在产品立项或者阶段性审核的时候，做得越详细，证明准备得越充分，也就越容易面对质疑，最终获得认可。注意，“细节决定成败”这句话，其实应该是“关键的细节决定成败”，并非所有细节都要在模型阶段进行展现。
如果你的原型是给客户提案用的，那么这个时候要尽可能的详细。因为你希望客户能够说一句：“这就是我想要的，就照着这个去做就可以了。”有了客户的确认，你才能放心地去制作和开发，才不会在最后面对客户的一句：“这不是我们开始说的啊？”既然客户是消费者，那么就一定要尽量让他们在开始阶段就了解到自己买了什么东西。笔者强烈建议在进行互联网开发工作的时候，能够在合同之外附上客户确认的高保真原型图，以给项目的最终审批设定一个双方共同认可的标杆，避免损失和误解。
最后，最重要的一点，也是建议：如果你自己做原型的时候都觉得做得太过复杂，想不清楚，那么也就到了适可而止的时候了。毕竟，原型只是表达方式之一，你可以用文字、视频、面对面的交流、比喻、类比，甚至是采用与另外一个网站来直接做对比的方式来把你的想法说清楚。很多伟大的创意和想法不是用PPT表达的，那么很多精彩的设计自然也可以不靠原型来展现。
在《网站蓝图——Axure RP高保真网页原型制作》这本书中，笔者确实提供了一些比较复杂的案例，大量的交互和变量的使用。其实这不是非常必要的。笔者的目的是让用户了解Axure RP的一些复杂的功能和对于复杂项目的把握，而并非让大家学会了Axure RP这个工具而陷于另外一个制作原型的黑洞。
下面让我们快一点儿开始使用强大的最新版本的Axure RP 7.0吧。作者：吕皓月（阿睡）开始之前
在开始之前，我们先做如下的说明：
1．本书使用的是Axure RP 7.0，英文版。版本号为：7.0.0.3142，下载地址为：http://www.axure.com/download。目前标准版的价格为289美元，包括5个许可。请大家支持正版软件，学生用户如果GPA达到3.0以上，可以免费获得专业版。
2．所有案例都以iPhone 5s为尺寸进行制作，但是同样的方法可以用于任何手机和平板电脑。只需要获取相应手机或者平板电脑的尺寸即可。iPhone 5s的屏幕尺寸为640像素x1136像素。在所有的案例中，我们为了制作的方便，在宽度和高度上都进行了折半的处理，所以整个区域为320像素x568像素。这个尺寸制作的原型可以在真正的iPhone 5s上正常进行显示，不影响任何的效果。如果我们要制作一个iPhone 4s上的原型，那么只要使用一个320像素x480像素的区域就好了。
3．本书着重于移动建模，如果大家对于Axure RP完全不熟悉，请大家先阅读笔者的另外一本书《网站蓝图——Axure RP高保真网页原型制作》，由清华大学出版社出版。该书从入门开始，到复杂的应用，全面地介绍了Axure RP软件的功能。
4．本书所有素材可以在如下的百度云分享链接进行下载，链接如下：
http://pan.baidu.com/s/1bnH9YhT
5：请加微信，查看最新勘误、素材更新信息以及与作者交流。01 隆重介绍Axure RP 7.0Axure RP是一款制作网页原型图（或者叫作网页线框图）的软件（prototyping software）。大家可以使用Axure RP制作出来逼真的基于HTML代码的网站原型，用于评估、需求说明、提案、融资、策划等各种不同的目的。更精彩的是，该原型可以响应用户的点击、鼠标悬停、拖拽，提交表单、超链接等各种事件。除了真实的数据库支持外，它几乎就是一个真正的网站：不仅仅是图片，而是集合了HTML，CSS，JavaScript效果的、活生生的网站。使用Axure RP，能够让你在做出想象中的网站之前，就先体验和使用你的网站！
Axure RP 7.0终于发布了。一个简单、彩色的新的Axure Logo也恰到好处地总结了新版本的最大特点：简单、直观。
如同苹果（Apple）的iOS 7操作系统一样，Axure RP 7.0也作出了革命性的变化。不仅界面变得更加友好，执行的效率也有了很大的改观。在制作复杂、多页面的网站时，运行效率和生成原型的速度都有了很明显的变化。最可喜的是，Axure RP 7.0顺应了移动开发的趋势，在原型的制作方面加入了对移动设备（智能手机和平板电脑）的支持。但是一旦你掌握了PC端的原型制作方法，制作移动端就是水到渠成的事情。Axure RP 7.0让你几乎不需要付出额外的心思，就可以在移动原型制作上达到同样的熟练程度。简单来说，只要你曾经使用过之前版本的Axure RP软件，那么使用Axure RP 7.0就毫不困难。
在本章中，笔者先介绍一下Axure RP 7.0的一些精彩的新功能。如果你觉得理解起来比较困难，不用着急，在接下来的章节中我们会使用实例进行详细的介绍。1.1 更多的事件支持
对于控件，Axure RP 7.0之前的版本仅支持以下3种事件：● OnClick（单击触发）。● OnMouseEnter（鼠标进入触发）。● OnMouseOut（鼠标移出触发）。
而Axure RP 7.0极大地丰富了事件库，同时也对于一些经常在移动端使用的事件做了很好的支持。对于单一控件，Axure RP 7.0新增了以下事件的支持：● OnDoubleClick（双击时触发）。● OnContextMenu（右键单击触发）。● OnMouseDown（鼠标按钮按下还未抬起时触发）。● OnMouseUp（鼠标按钮按下抬起的时候触发）。● OnMouseMove（鼠标在控件上移动时触发）。● OnMouseHover（鼠标在控件上悬停2秒以上时触发）。● OnLongClick（点击并且持续按住2秒以上触发——想象一下
iPhone的Home键长按的效果）。● OnKeyDown（键盘按键按下还未抬起时触发）。● OnKeyUp（键盘按键按下抬起的时候触发）。● OnMove（控件移动时触发）。
OnShow（控件展现时触发）。
OnHide（控件隐藏时触发）。
OnFocus（控件获得焦点时触发）。
OnLostFocus（控件失去焦点时触发）。
对于页面，除了OnPageLoad（页面加载时触发），Axure RP 7.0新增了以下事件的支持：● OnWindowResize（页面尺寸发生变化时触发）。● OnWindowScroll（页面发生滚动时触发——现在可以捕捉到滚
动条触发的动作了）。● OnPageClick（页面被单击时触发）。● OnPageDoubleClick（页面被双击时触发）。● OnPageContextMenu（页面被右键单击时触发）。● OnPageMouseMove（鼠标在页面上移动时触发）。● OnPageKeyDown（键盘按键按下还未抬起时触发）。● OnPageKeyUp（键盘按键按下抬起的时候触发）。● OnAdaptiveViewChange（当自适应视野发生变化时触发——自
适应视野变化是指在移动端，手机从竖屏浏览变为横屏浏览）。● OnAdaptiveViewChange事件能够让我们根据显示设备的尺寸，
自适应地加载不同的控件布局以提供最优的用户体验。比如，如
果我们发现用户是在PC上访问网站，那么我们就展示桌面版本
的网站；如果我们发现用户在平板电脑上浏览网站，我们就展示
一个平板电脑版本的网站；而如果我们发现用户在使用手机访问
网站，我们就展现一个移动版本的网站。之后我们会用实例来具
体说明这个事件。
对于Dynamic Panel（动态面板），除了普通控件新增的事件外，Axure RP 7.0还额外添加了以下事件：● OnClick（单击触发——以前没有这个事件）。● OnLoad（动态面板加载时触发）。● OnSwipeUp（向上滑动时触发——想象在iPhone的界面上向上
滑动手指）。● OnSwipeDown（向下滑动时触发）。● OnScroll（滚动时触发——该滚动是指内嵌在动态面板中的内容
发生滚动，而不是页面发生滚动）。● OnResize（动态面板尺寸发生变化时触发）。
这些新增的事件，能够让我们完成几乎所有在桌面和移动端的原型效果制作。很快大家就会看到通过组合这些看似简单的事件和控件，我们能够实现强大的、逼真的效果。1.2 快速预览
Axure RP 7.0可以快速让用户在浏览器中预览当前制作的页面，然后再根据需要动态地生成其他的页面，而不是像之前版本中，每次都会生成所有页面。这大大减少了加载等待的时间。比如，制作一个有上百个页面的原型，Axure RP 7.0可以让用户飞快地预览当前的工作页面，而之前的版本，在生成原型的时候，要等待所有其他页面加载完成。1.3 文本输入控件的输入提示
我们经常可以在网站的文本输入控件中看到灰色的提示文字。当输入框获得焦点时，该灰色输入文字消失；失去焦点时，如果用户什么都没有输入，则提示文字还会重新出现。之前实现这个功能需要一定的交互设计和高级的Axure RP功能。但是现在，Axure RP 7.0把这个功能做成了一个控件属性。Text Field（文本输入）和Text Area（多行文本输入）控件都有这个功能。我们只要选中控件后，在右侧的控件属性区域进行设置就可以了；还可以设置提示文字的颜色和字体。1.4 丰富的输入控件内容
除了输入文本、密码等常规内容，Axure RP 7.0对于输入以下的内容做了支持。● Email：输入Email地址。● Number：输入数字，这个时候输入控件会变为如右图所示。● Phone Number：输入电话号码。● URL：输入超链接地址。● Search：搜索，这个时候输入控件会变为如右图所示。● File：上传文件，这个时候输入控件会变为如右图所示。● 用户在选择好文件后，“未选择文件”部分会变成选择好的文件
名。● Date、Month、Time：年月日，年月和时间。选择后输入控件会
分别变成如下的样式。1.5 新的控件形状
对于类似矩形这样的控件，在Axure RP 7.0中可以选择的形状和样式增多了，如心形、水滴、五角星、加号等等常用的页面形状元素。1.6 动态面板的新属性
众所周知，在AxureRP中动态面板是一个多么重要的控件。所以，在Axure RP 7.0中，对于动态面板也新增了一些功能。
动态面板现在可以选择适应内容。也就是说，动态面板的大小会随着其中内容的变化而变化。针对动态面板的每个状态，可以设置背景颜色和背景图片，如下图所示。
动态面板的宽度可以被设置为100％。也就是说，可以设置为整个浏览器的宽度。这样当浏览器的宽度发生变化的时候，动态面板也会跟着变化。
动态面板可以触发其中的控件的状态。例如，在动态面板上进行鼠标悬停，那么可以使所有动态面板中的控件显示其鼠标悬停时触发的事件。只需要一个简单的设置就可以实现。1.7 切割图片
除了将图片切片外，Axure RP 7.0还可以直接切割图片的某一个部分，如下图所示。
用户可以拖拽选择框，选定后，双击鼠标，选定的区域被保留下来，图片其他的部分就被删除了。1.8 所有控件都可以被隐藏
在Axure RP 7.0之前，只有动态面板可以被隐藏。但是现在，即使是一个单选控件，也可以被设置为“隐藏”状态。1.9 控件可以被设置为圆角、透明、阴影1.10 部件管理区域（Uidget Manager）取代了动态面板管理区域（Dynamic Panel Manager）
在同一个部件管理区域中，可以管理包括动态面板在内的所有当前页面中的部件。1.11 跨页面的撤销功能
在之前版本的Axure RP中，你进行了一个操作，然后切换到另外一个页面进行工作。那么这个时候如果你切换回之前的页面并且企图使用撤销功能（Ctrl+Z），将会发现你无法撤销上一个操作，因为在跳转到另外一个页面的过程中，Axure RP丢失了你之前操作的记录。但是在Axure RP 7.0中，每个页面的撤销操作都是单独记录的。你可以在页面A撤销页面A的最近的一次操作，也可以在页面B撤销页面B的最近的一次操作。完全不用担心因为切换了页面而丢失了操作记录。1.12 全新的部件类型——Repeater（循环列表部件）
这个全新的部件可以用来非常方便地生成由重复Item（条目）组成的列表页面，如商品列表（见下图）、授索结果（如百度的授索结果那样的布局）、联系人列表等。而且，它可以非常方便通过预先设定的事件，对列表进行新增条目、删除条目、编辑条目、排序、分页的操作。
只要是重复元素组成的列表，Repeater部件就可以大显神威。1.13 Adaptive View（自适应视野）的支持
对于一个网站，我们可以设定其在浏览器宽度宽于1024像素时，显示桌面版本的视野；在宽度宽于768像素时，显示平板电脑版本的视野；在宽度宽于640像素时，显示手机版本的视野。自适应视野一旦设置成功，系统便会自动根据浏览器的宽度进行选择。
桌面视野
平板视野
手机视野1.14 Axure Share发布平台
之前的项目，只能Publish（发布）在本地。如果要将网站原型分享给别人，只能通过发送生成的HTML文件，或者上传到自己搭建的一个Web服务器上去。对于有很多页面的原型来说，这种方法十分的麻烦，而且搭建自己的Web服务器也不是一件容易的事情。现在有了Axure Share之后，我们可以发布到Axure网站提供的服务器上去。Axure RP 7.0会自动生成一个项目的URL地址。将这个地址发送给其他人，他们就可以访问你的原型了。
简单地理解，Axure Share就是一个Axure RP 7.0提供给所有用户的免费Web服务器。免费版本支持最多1000个项目和100M的存储空间。
点击Publish to Axure Share按钮，你就会看到如下图所示的弹出窗口。
需要注册一个Axure Share的账户，大概耗费2分钟的时间。然后登录该账户，选择项目名称、项目的访问密码、项目的目录路径就可以将项目发布到Axure Share了。发布成功后，Axure RP 7.0会提示一个连接地址，如下图所示。
复制这个地址给那些你希望看到该原型的用户，就可以迅速地分享了。笔者建议大家每次都给项目加上一个访问密码，防止你的项目或者想法被别人窃取。1.15 高亮显示所有有互动事件的部件
在生成原型后的浏览器界面中，我们可以看到如下图所示的一个按钮——Highlight interactive elements（高亮显示所有互动元素）。
选择这个按钮后，原本页面中所有添加了事件的部件都会被带有光晕的颜色高亮显示。
这样，我们就可以很清楚地看到当前页面中哪些部件已经添加了事件，哪些还没有。1.16 Sitemap中的变量跟踪器
在生成原型后的浏览器界面中，我们可以看到有一个“X=”的图标，在任何时候点击它，就可以看到当前所有变量当前的值。
比如，我们看到如右图所示的“OnLoadVariable”这个变量的值就是“Test”。这对于在复杂页面中调试变量非常有帮助。1.17 界面上的调整
整体来说，Axure RP 7.0与Axure RP 6.5的界面上并没有太大的变化，基本保持原状。这样之前熟悉Axure RP6.5的用户就可以很快上手。
Axure RP 7.0只在以下几个地方发生了一些变化：
1．Axure RP 7.0去掉了Page Notes这个部分。
2．将部件的属性和样式编辑器跟部件互动事件部分分离了出来。
3．将动态面板管理区域变成了部件管理区域。从此我们可以在这里编辑所有的部件，而不仅仅是动态面板。1.18 预置参数的添加
与之前的版本相比，Axure RP 7.0增加了许多新的预置的参数。当我们打开公式编辑器的时候，可以看到如下图所示界面。
点击“Intert Variable Function...”就可以看到如下图所示窗口。
这里，Axure RP 7.0预置了很多参数及公式。比如，上图中的Windows.width就可以直接获得当前窗口的宽度，Window.scrollX可以获得当前在水平方向滚动的距离，而Cursor.x则可以获得当前鼠标的横坐标位置。在之后的案例中我们会使用这些预置的参数完成原型的制作。02 Axure RP 7.0的基本操作有些用户可能是第一次使用Axure RP，笔者建议新用户可以先看笔者的另外一本书《网站蓝图——Axure RP高保真网页原型制作》，由清华大学出版社出版。不过在此，我们也再简单地介绍一下Axure RP的一些基本操作。2.1 界面介绍
首先，来介绍一下Axure RP 7.0的界面，我们把整个界面区域分为如下图所示的9个区域。
1．工具栏
Axure RP 7.0的工具栏与大家熟悉的Office的布局和图标类似，大部分都是自说明的，我们在此就不再赘述了。唯一要介绍一下的是如右图所示的三个按钮，因为它们比较常用。
最左边的是“Preview（预览）”功能，就是将当前的原型在浏览器中进行预览。默认情况下会在系统默认的浏览器中打开。
中间的是“Publish to Axure Share（发布到Axure Share）”。之前的Axure RP版本，只能Publish（发布）在本地。如果要将网站原型分享给别人，只能通过发送生成的HTML文件，或者上传到自己搭建的一个Web服务器上去。对于有很多页面的原型或者搭建自己的Web服务器来说，都不是一件容易的事情。现在有了Axure Share之后，可以发布到Axure网站提供的服务器上去。Axure RP 7.0会自动生成一个项目的URL地址。将这个地址发送给其他人，他们就可以访问你的原型了。之前说过，简单的理解，Axure Share就是一个Axure提供给所有用户的一个免费的Web服务器。免费版本支持最多1000个项目和100M的存储空间。
只需按下Publish to Axure Share按钮，就会将当前的页面发布到Axure Share。
点击最右边的按钮后，会出现如下图所示的菜单，我们一个一个来介绍一下。● Preview：与刚才的预览按钮功能相同。● Preview Options：让我们设置一些控制生成原型的参数。比如，
在哪个浏览器中打开，是否要生成网站地图等。● Publish to Axure Share：与刚才中间的发布到Axure Share按钮的
功能相同。● Generate HTML Files：将项目生成为HTML代码。● Regenerate Current Page to HTML：这个功能只把当前页面重新
生成HTML，而Generate HTML Files的功能是将整个网站生成原
型。所以，当你只修改了当前页面的一些细节，而不是整个网站
的话，使用这个按钮会更加高效。因为有的时候，当页面数量特
别多的话，如果仅仅修改一点儿细节就重新生成整个项目会很浪
费时间。● More Generators and Configurations：通过这个功能，我们可以
创建多个Generator（生成器）。比如，一个生成器用来在Safari
浏览器中生成HTML代码，存储在“项目1”这样的目录中，带
有网站地图，绿色的Logo；另外一个生成器用来生成在移动设
备上查看的原型，存储在“移动项目1”这样的目录中，没有网
站地图，红色的Logo。
2．网站地图（Sitemap）
这个区域会列出当前站点的站点地图。站点地图是树状的，以Home（首页）为根节点。
以后我们要编辑某个页面的时候，只要在站点地图区域找到这个页面，然后双击，这个页面就会出现在页面区域中等候编辑，如下图所示。
当我们要修改一个页面名称的时候，只要再重复单击某个页面，然后输入新的名称就可以了，如下图所示。
鼠标悬停在某个页面上，会显示一个小的预览图，如下图所示。这里要注意，在删除站点地图当中的一个page（页面）的时候，是不可恢复的，所以一定要小心。
要新建一个页面，只要点击加号按钮就可以了。这个时候，一个新创建的页面就会出现在当前选中的页面的同级页面，如下图所示。在点击加号之前我们选中的页面是Home页面，所以新添加的页面自动成为了Home页面的同级页面。
我们还可以创建一个页面目录，把一些页面装进目录中，方便管理，如下图所示。
如果要改变一个页面的上下顺序，那么选中一个页面后，选择蓝色的箭头进行调整就可以了。蓝色的上下箭头仅仅会改变一个页面在“兄弟”中的排行，而不会改变它的级别。需要改变一个页面的级别，我们需要使用绿色的横向箭头。
在进行复杂页面的编辑的时候，建议大家先创建一个站点地图，也就是说把网站的整体结构先都规划好，然后再进行单独页面的编辑，这样比较高效。因为如果在后期添加页面，必然会影响到之前的页面结构，修改起来的成本也会高很多。
3．控件（Widget ）
控件有时候也可以称为部件。控件是Axure RP已经预先定义好的一些页面的基本元素，如Image（图片）、Label（文本）、Rectangle（矩形）、Button Shape（形状按钮）等。首先，把控件添加到页面中的方式就是拖拽某个控件到页面中，类似如下图所示的方式。
Axure RP 7.0已经将一些常用的控件进行了分库（Library）。我们可以通过下拉列表进行选择，如下图所示。
Axure RP 7.0默认存在的两个控件库为Default线框图控件库和Flow流程图控件库。大家可以看到笔者手动添加的Axure iOS7 UI Kit和iOS7-Like-Icon-Set，显然这两个控件库是用于iOS建模的。
点击“Select Library”旁边的菜单可以看到如下图所示的弹出窗口。
我们可以下载控件库、加载控件库和创建控件库。在之后的章节中，笔者会告诉大家如何加载其他的控件库，如很酷的iOS控件库。
下面我们先介绍一下控件库中常用的控件。我们之后90％的时间都是在与这些控件打交道。【Image】图片控件。你可以导入任何尺寸的JPG、GIF、PNG图片。Axure RP对于图片的支持是非常强大的。我们还可以导入一张大的图片到Axure RP中，然后使用Axure RP的切图片功能将它切成若干个更符合页面布局的小图片。【H1】和【H2】控件。用于输入标题文本。【Label】和【Paragraph】控件。用于输入普通的文字和文字段落。【Rectangle】矩形控件。矩形控件是一个矩形，它可以用来做很多工作，比如页面上一块蓝色的背景，就可以是一个填充为蓝色的矩形控件；页面上一个有边框的区域，就可以是一个填充为透明的矩形控件；矩形控件甚至可以用来制作文字链。它将是我们最常用的控件之一。矩形控件还可以被变化为三角形控件或者椭圆形控件而使它看起来“不那么矩形”。总之，矩形控件是一个很好用的控件。【Placeholder】占位符控件。当我们需要在页面上预留一块区域，但是还没有想清楚这块区域中到底要放什么内容的时候，我们可以先放一个占位符控件。【Button Shape】形状按钮。形状按钮与按钮类似，但是有一些特殊的功能。比如，像Tab一样的按钮、特殊形状的按钮、支持鼠标悬停改变样式的按钮。可以说形状按钮结合了Button和Rectangle控件的优点。我们可以把多个形状按钮分配为一组，并且为它们的“选中”和“非选中”选择不同的状态，这样我们就可以做到让一个按钮按下去的时候，其他的按钮都“弹”起来的效果。想想我们经常使用的网站的主导航，是不是当一个导航标签被选中的时候，它会变成一个比较深的颜色？而当另外一个标签被选中的时候，刚才那个就自动恢复到正常的颜色？【Horizontal Line】和【Vertical Line】水平分割线和垂直分割线。当我们要在视觉上分隔一些区域的时候，就要使用这两个控件了。【Hot Spot】热区控件。用于生成一个隐形的，但是可点击的区域。这个类似于之前版本Axure RP中的Image Map控件。【Dynamic Panel】动态面板控件。动态面板控件是Axure RP中功能最强大的控件，是一个化腐朽为神奇的控件。通过这个控件，我们可以实现很多其他原型软件不能够实现的动态效果。动态面板可以被简单地看作是拥有很多种不同状态的一个超级控件。我们可以通过事件来选择显示动态面板的相应状态。简单来说，我们可以创建一个拥有12个状态的动态面板控件，每个状态对应一个月份（就像一本挂历一样）。然后我们通过当前时间来决定到底显示哪个月份。在Axure RP中，动态面板控件显示为淡蓝色背景。动态面板控件在默认状态下会显示第一个状态中的内容。对于熟悉Photoshop的用户来说，动态面板像是一个动态的“图层组”，每个图层组可以有多个图层，而每个图层可以放置不同的内容。
另外，在动态面板控件中可以包含其他的控件。【Inline Frame】行内框架控件。行内框架控件就是我们常说的iFrame控件。iFrame是HTML的一个控件，用于在一个页面中显示另外一个页面。在Axure RP 7.0中，使用Inline Frame控件可以引用任何一个以“Http://”开头的URL所标示的内容，如一张图片、一个网站、一个Flash，只要能用URL标示就可以。【Repeater】循环列表控件。这个全新的控件可以用来非常方便地生成由重复Item（条目）组成的列表页面，如商品列表、联系人列表等。并且可以非常方便地通过预先设定的事件，对列表进行新增条目，删除条目、编辑条目、排序、分页的操作。【Text Field】输入框控件。这是一个在所有常见的页面中用来接受用户输入的控件，但是仅能接收单行的文本输入。【Text Area】文本区域控件。用于在页面上接受用户的多行的文本输入。【Droplist】下拉列表控件。用于在页面中让用户从一些值中进行选择，而不是随意输入。【List Box】列表控件。列表控件一般在页面中显示多个供用户输入的选择，用户可以多选。【Checkbox】复选框控件。用于让用户从多个选择中选择多个内容。【Radio Button】单选框控件。用于让用户从多个选择中单选内容。我们要先为这多个选择创建一个Radio Group，这样Axure RP才知道哪些Radio Button是同一组的，从而避免让用户多选。【HTML Button】基于HTML的提交页面的按钮。这个控件很普通，没有额外的样式可供选择。【Tree】树控件。用于创建一个树形目录，如下图所示。【Table】表格控件。在页面上显示表格化的数据的时候，最好使用表格控件。【Classic Menu-Horizontal】和【Classic Menu-Vertical】，经典的横向和纵向菜单。
除了以上所有的控件的介绍，我们再介绍一下控件的一些常见属性，如下表所示。
所以，当我们在书中提到，按如下的属性添加一个控件到页面中的时候：
我们指的就是把一个矩形控件拖拽到页面区域中，将其命名为“rectMenu1”，位置在X162、Y700的位置，它的尺寸是80x46，文本内容是“菜单1”，填充颜色设置为一个浅灰色，边框的颜色设置为没有边框。
之后我们就会使用如上所示的表格来描述一个控件的添加过程，节省笔墨。
4．主控件（Masters）
主控件是一些重复使用的模块。比如，一个网站的一级导航会在多个页面当中反复使用，那么把它们制作成为主控件，不但可以方便使用，而且可以方便修改。比如想在导航上面多加一个栏目，如果不使用主控件，那么就要修改每个页面的导航。而使用了主控件之后，我们只要修改主控件，那么所有引用这个导航主控件的页面都会自动地更新。我们之后的项目中会大量使用主控件以节约更新的工作量。一般来说，一个页面项目的如下部分可以制作为主控件。● 导航。● 网站header（头部），包括网站的logo。● 网站footer（尾部）。● 经常重复出现的模块，如分享按钮。● Tab面板切换的控件，在不同的页面，同一个Tab面板有不同的
呈现。● 手机导航的部分。
Axure RP中有一个仅针对主控件的特殊的事件叫作Raise Event。这个事件允许同一个主控件在不同的页面响应相同的事件的时候，能够有不同的表现。比如，一个主控件的按钮在A页面中点击后会弹出“这是A页面”的说明；而在B页面中点击后会弹出“这是B页面”的说明。因为我们很少在移动建模中使用这个功能，所以在本书中不包括对于Raise Event事件的介绍。有兴趣的读者可以参考Axure网站上的使用说明。
5．页面（Pages）
页面区域就是显示各个页面的内容的区域，也就是将要被生成为HTML的区域。放置在这个区域的各种控件将会生成为HTML出现在原型中。
页面区域默认是会显示标尺的。标尺的刻度是像素。所以如果你要针对1024x768的显示器开发网站的话，要注意网站的总的宽度不能超过1024。
页面区域的圆点就是左上角，这里的坐标是X0：Y0，如下图所示。
关于页面区域，我们要着重介绍一下参考线的创建。
我们在页面区域的空白部分单击鼠标右键，在弹出的菜单中选择“Grid and Guides（网格与参考线）”命令，然后再选择“Create Guides（创建参考线）”命令。
然后会弹出如下图所示的窗口。
初次看到这个弹出窗口有些莫名其妙，我们依次解释一下。首先说明，参考线的创建是按照分栏的模式来考虑的。比如，熟悉网站设计的人会知道，一般网站有2栏模式、3栏模式、甚至4栏、5栏模式。所以参考线也是这么考虑的。
先看Presets（预设）部分，可以看到我们有四个选项：
960 grid：12 column（宽度为960的，12列的布局）。
960 grid：16 column（宽度为960的，16列的布局）。
1200 grid：12 column（宽度为1200的，12列的布局）。
1200 grid：16 column（宽度为1200的，16列的布局）。
当选择这些预设的选项的时候，Axure RP 7.0会按照用户选择的参数自动创建参考线。如果用户勾选了“Create as Global Guides（创建为全局参考线）”，那么该参考线将出现在所有的页面上。如果没有勾选这个按钮，那么参考线就仅会出现在当前页面。
然后看一下设置都有哪些：● # of Columns:一共有几列。● Column Width：列的宽度。● Gutter Width：列与列之间的距离。● Margin：整个布局两侧的留白。● # Of Rows:一共有几行。● Rows Height：行的宽度。● Gutter Height：行与行之间的距离。● Margin：整个布局上下的留白。
比如，我们创建一个一共有3列的，每列宽100，列与列之间距离20，两侧留白为10的全局参考线布局，那么参数设置如下图所示。
注意一定要选中“Create as Global Guides”，否则创建出来的参考线就是页面参考线，而不是全局参考线了。全局参考线非常有用，它们可以保证用户在每个页面上创建的元素的位置都是正确的。
出来的效果如下图所示。
大家可以看到一下子创建了7根参考线。有的读者会问，如果只想创建1根全局参考线怎么办呢？很简单，可以把# of Columns设置为1，然后把创建出来的4根参考线删除3根，就可以了。删除参考线的操作很简单，右键单击参考线，然后选择delete命令。还可以锁定一根参考线，以防止在工作的时候意外地选中参考线。
如果仅是创建一个当前页面的参考线，只要将鼠标放在标尺中，进行拖拽就可以了；可以拖出一根青蓝色的参考线，它仅用于当前页面，而全局参考线是紫红色的。
参考线对于页面的对齐和边界的划定非常有用。尤其在针对多个不同屏幕尺寸开发移动应用的时候，知道每个设备的边界是非常重要的。
6．页面设置区域（Page Interactions Page Style ）
页面设置区域用来设置页面级别的互动及当前页面的风格属性。
页面的互动（Page Interactions）包括以下几个，我们介绍一下：● OnPageLoad：页面加载完成之后触发的事件。可以用来设置空
间的初始状态、参数的初始状态等。● OnWindowResize：当页面尺寸发生变化的时候触发。比如，用
户缩小页面的时候，对页面布局进行一些调整。想象一下类似
pinterest.com一样的页面，当你修改页面的宽度的时候，页面的
布局就会变化。● OnWindowScroll：当页面滚动的时候触发的事件。我们能想到的
最直接的页面滚动的时候触发的事件，就是滚动的时候动态加载
页面了。● OnPageClick：当页面被点击时触发。● OnPageDoubleClick：当页面被双击时触发。● OnPageContextMenu：当页面被右键单击时触发。● OnPageMouseMove：当鼠标在页面上方移动时触发。● OnPageKeyDown：当用户在页面上按下按键时触发。● OnPageKeyUp：当用户在页面上按下按键弹起时触发。● OnAdaptiveViewChange：当自适应视野发生变化时触发。自适
应视野变化是指在移动端，手机从竖屏浏览变为横屏浏览。
在之后的例子中，我们会用到上述事件中的一个或者几个。
页面风格（Page Style）包括页面的背景色、背景图片、对齐方式等内容。一个很有趣的效果是Sketch Effects（速写效果）。比如我们在页面中添加一个矩形控件，在不设置速写效果的时候，它看起来是这样的：
如果我们把速写效果调整到50，你会看到如下图所示的效果：
试读结束[说明：试读内容隐藏了图片]