移动建模
本书的大部分内容和案例将是关于移动建模的。所以我们先来介绍一下如何进行移动建模。使用Axure RP 7.0 进行移动建模跟桌面建模是很不相同的。因为如果直接使用“Preview（预览）”，我们会发现项目在桌面浏览器（如IE、Chrome或者Safari）中自动打开了。而我们并没有一个移动版本的Axure RP 7.0 能够直接在手机或者平板电脑上运行，然后使用移动浏览器来预览。所以，我们需要在桌面上完成原型的建模工作然后让模型“看起来”或者“感觉起来”是在移动设备上运行。为了做到这一点，我们使用以下两种方式进行“模拟”的移动建模。
4.1 场景模拟
简单来说，我们制作一个跟移动设备屏幕尺寸相同的“页面”区域，然后把它放到一个移动设备的背景前面。这样，整体看来，就好像我们在一个移动设备上运行该原型一样。为了做到这一点，我们先去下载一个移动设备的“背景”。
在本书中，笔者将使用“iPhone 5s”来作为建模的背景图片。大家可以在本章的素材部分下载相应的图片。建议大家直接使用这张设计好的图片。
在开始创作前，我们先简单介绍一下iPhone 5s 的各个部分的屏幕尺寸。iPhone 5s 的屏幕显示部分的尺寸是640 像素x1136 像素。每英尺的像素数是326。有些读者可能对这些概念并不熟悉。没有关系，我们只需要设定一个大小合适的背景图片，然后在它上面进行原型创作就好了。背景大，我们制作的原型尺寸也可以大；背景小，我们制作的尺寸就小。只要二者合适就好了。
iPhone 5s 的状态栏，也就是显示信号、电池容量的这个部分的尺寸是640 像素x40 像素。一般来说，在进行原型创作的时候，我们不能使用这个部分的显示。所以，我们的有效创作面积为640像素x1096像素。
但是640 像素x1096 像素这个尺寸对于普通的电脑屏幕来说，仍然太大了，不方便我们进行创作和演示。而在iPhone 上之所以这么大的区域能够在手掌大的一块地方显示出来，是因为iPhone 的分辨率达到了视网膜级别。所以，我们要把背景图进行一下缩小处理，以使我们具有一个等比例缩小的，320像素x548 像素的背景。为做到这一点，我们需要使用专业的图片软件Photoshop 来处理这个图片。在本章的素材中，我们已经处理好了一张iPhone 5s 图片，其外围尺寸为443 像素x900 像素，有效的显示区域为320 像素x568 像素。也就是宽和高都缩小了一半，刚好适合我们的屏幕尺寸。
下面我们就来在Axure RP 7.0 中制作一个iPhone 5s 的工作区域。
首先，在Axure RP 7.0 中创建一个新项目，然后添加一个新的页面叫作“场景模拟”。
然后，我们把“iPhone-5s-Golden”这张JPG 图片添加到Axure RP 7.0 中。我们可以直接通过文件拖拽的方式，也可以在Axure RP 7.0 中拖拽一个图片控件到编辑区中，然后双击它。
选中“iPhone-5s-Golden ”这张图片，Axure RP 7.0会发现这是一张很大的图片，所以会询问是否要优化这张图片。因为我们希望保持图片的清晰度，所以我们选择“否”。然后Axure RP 7.0A 会提示是否要自动修改该图片的尺寸，这个时候要选择“是”。
我们把这张图片放在X 100：Y 0 的位置，这个时候，整个页面的样子如下图所示。
我们之后的主要工作区域，就是如下图所示的这个区域（青色的区域），尺寸为320 像素x548 像素。而对于整个iPhone 5s 背景，一般是不动的，它只是一个背景；上面的状态栏，一般也是不需要使用的。下面让我们向这个背景图上添加一些元素。我们先添加一个矩形控件来盖住原先的iPhone 桌面。该矩形控件的属性如下表所示。
名 称 类 型 坐 标 尺 寸 填充色/ 边框色
无 Rectangle X162：Y198 W320：H548 #FFFFFF/#FFFFFF
现在的页面的样子如下图所示。：
接下来，向页面中添加四个菜单选项，就像我们在很多应用中看到的一样。每个菜单选项其实就是一个矩形控件，它们的属性如下表所示。
名 称 类 型 坐 标 尺 寸 文 本 填充色/ 边框色
rectMenu1 Rectangle X162：Y700 W80：H46 菜单1 #CCCCCC/ 无
rectMenu2 Rectangle X242：Y700 W80：H46 菜单2 #CCCCCC/ 无
rectMenu3 Rectangle X322：Y700 W80：H46 菜单3 #CCCCCC/ 无
rectMenu4 Rectangle X402：Y700 W80：H46 菜单4 #CCCCCC/ 无
设置完成后，页面是这样的（见下图）。
页面似乎看起来有趣了。我们会持续添加元素，直到页面看起来是这样的（见下图）。
看起来很像一个应用程序了吧？
有了这样的一个背景，虽然我们还是在桌面电脑上进行模型的创作和演示，但是看起来就像是我们在用iPhone 5s 体验。这样也同样能够以非常简单的方式，让所有人对原型最终的效果有一个非常直观的了解。当然，观看原型也是在桌面浏览器上进行的。
使用320 像素x548 像素的创作区域的理由是，320像素的宽度，建立4 个菜单的话，如上图中的菜单1、菜单2、菜单3、菜单4，每个菜单的宽度就是80 像素，如果是5 个菜单，每个宽度就是64 像素，宽度都很合适。而如果对背景图片处理不当的话，如宽度变成了很随意的340 像素，那么在制作的时候，就会出现宽度不平均的现象。另外，还有一个理由，就是很多iPhone 应用的菜单都是4 个。
场景模拟是一种较为简单和高效的制作移动原型的方式，通过不同的手机背景，我们就可以很容易地制作基于iPhone 5s、三星Galaxy、小米等热门手机的应用场景的应用，而不用去真的购买和拥有这些手机。如下图所示，我们更换图片背景后，同样的内容可以在三星手机上展现。
但是如果我们真的想在手机上来体验我们的原型，就只能使用下一节的方法了。
4.2 真实模拟
真实模拟的做法就是，我们仅在Axure RP 7.0 中制作一个320 像素x568 像素的页面区域，然后生成HTML 的页面，并将其发布到Axure Share 上。接下来用iPhone 5s 使用移动版本的浏览器打开Axure Share 上的项目地址进行浏览。然后将这个页面保存为一个主屏幕快捷方式，接下来运行这个快捷方式。这样，我们就真的可以在移动设备上真实地体验原型了。
我们接下来按照如下步骤来创建一个真实模拟的项目。
1. 制作原型页面
我们在本章的项目中添加一个新的页面叫作“真实模拟”，向其中添加如下表所示的元素。
名 称 类 型 坐 标 尺 寸 文 本 填充色/ 边框色
rectStatus Rectangle X0：Y0 W320：H20 无 #000000/#000000
rect1 Rectangle X0：Y20 W320：H40 应用1 #999999/#999999
Label1 Label X16：Y75 W292：H288 内容内容 无/ 无
Bs1 Button Shape X16：Y392 W292：H40 按钮1 无/ 无
Bs2 Button Shape X16：Y442 W292：H40 按钮2 无/ 无
rectMenu1 Rectangle X0：Y522 W80：H46 菜单1 #CCCCCC/ 无
rectMenu2 Rectangle X80：Y522 W80：H46 菜单2 #CCCCCC/ 无
rectMenu3 Rectangle X160：Y522 W80：H46 菜单3 #CCCCCC/ 无
rectMenu4 Rectangle X240：Y522 W80：H46 菜单4 #CCCCCC/ 无
现在界面如下图所示，包含所有元素的外围尺寸是320 像素x568 像素。
然后，我们为按钮1 添加一个OnClick 事件，让大家体会一下在手机上点击按钮的效果。我们拖拽一个矩形控件到页面区域，设置属性如下表所示。
名 称 类 型 坐 标 尺 寸 文 本
rectPopup Rectangle X60：Y180 W200：H100 按钮1 被点击了
将这个矩形控件设置为“隐藏”。我们希望点击按钮1 的时候再显示该矩形，为此右键单击这个矩
形控件，然后在弹出菜单中选择“Set Hidden”命令。
然后，我们为按钮1 添加如下图所示的事件，当该按钮被点击时，可以显示矩形区域。
这个简单的页面就制作好了。其实跟“场景模拟”中的页面是类似的。
2. 设置发布参数
在发布前，因为最终的原型是要用在移动端的，所以我们要控制一下生成原型的一些参数。这些参数非常重要，直接决定了我们的原型在移动端的体验。这与“场景模拟”中发布并且在桌面浏览器中预览的过程是不一样的。在场景模拟中，只要使用默认的参数就可以了。
为此，我们点击“Publish”按钮，在下拉菜单中选择“Preview Options”。
然后，在弹出的窗口中选择“Con.gure”。
接下来，就会看到如下图所示的窗口，我们在窗口中选择“Mobile/Device（移动设备）”。
该页面是用来配置在移动端生成的页面的一些参数和规格的。下面我们分别解释每个参数的意义。
. Include Viewport Tag ：添加视图标签。打开这个开关后，我们才能设置如下的参数。
. Width （px or device-width）：宽度，要求输入像素值或者根据设备宽度自动设置。因为我们制作的页面一般都是320像素宽度的，所以一般设置为320像素。
. Height （px or device-height）：高度，要求输入像素值或者根据设备高度自动设置。这个值一
般不需要设置。
. Initial Scale（0-10.0）：初始的缩放尺度。默认是1.0，也就是说，默认就是自然1∶1的大小。iPhone上可以通过双指的缩放来缩小和放大页面，这里就是设置页面一打开的时候的缩放规模。如果我们在这里设置2.0，那么就意味着页面打开的时候，就默认被放大到2倍大小。
. Minimum Scale （0-10.0）：能够最小被缩放的尺度。有时候我们需要控制用户能够缩小的最小尺度。默认为空，无须设置。
. Maximum Scale （0-10.0）：能够最大被放大的尺度。有时候我们需要控制用户能够放大的最大尺度。默认为空，无须设置。
. User Scalable （no or blank）：用户是否能够放大或缩小页面。如果我们不希望用户可以进行缩放，就填写“no”。默认为空，用户是可以进行缩放的。
. Prevent vertical page scrolling （blocks elastic scrolling）：禁用垂直滚动（同时也阻止iOS的弹性滚动）。有的时候我们不希望用户进行垂直方向的滚动，如在使用原型模拟iPhone应用的时候。在这里，勾选这个复选框，因为我们要模拟一个iPhone应用的界面，无须垂直滚动。
. Auto detect and link phone numbers（iOS）：自动侦测并链接电话号码，仅对iOS设备。勾选了该功能后，当在原型中的文本中输入手机号码这样的文字的时候，Axure RP 7.0会自动为其添加链接。这样，用户可以点击它们，并且看到“拨打该电话”的选项。
接下来的一个区域是用来设置应用程序在iPhone 上的开始图标和过场页面的。开始图标就是如下图所示的这些图标按钮。
我们需要一个114 像素x114 像素的PNG 图片来做当前应用的开始图标。在本章的素材目录中，我们已经做好了一个叫作“App-logo”的图片，如下图所示。
我们点击如下图所示的Import 按钮把它添加进来。
过场页面，就是在点击图标后，在应用正式开始运行前出现的一个过渡页面。比如，我们运行微信时那个著名的图片，就是一个过渡页面。
对于这个测试的应用，我们暂时不需要设置过渡页面。过渡页面可以针对屏幕尺寸的不同，设置三个，分别用于iPhone 的竖屏显示、iPad的竖屏显示和iPad 的横屏显示。
. Hide browser nav （When launched from iOS home screen）：当从iOS，也就是iPhone的主屏幕启动原型的时候，隐藏浏览器的导航条。选中这个复选框，它非常有用，可以在全屏下浏览我们的原型。至于如何将一个应用从主屏幕启动，我们之后会介绍。
. iOS Status Bar：如何显示iOS的状态栏，也就是屏幕最上方的显示运营商信号和电池容量的状态栏。可以选择的选项有“default（默认）”，“black（黑色）”或者“black-translucent（黑色半透明）”。我们选择black-translucent. 这个时候，所有的电池容量、信号、时间等信息会以白色显示。背景是透明的，会透出下方的内容，也就是我们在这个项目中添加的那个320像素x20像素的黑色矩形。
3. 发布页面
参数设置完成后，我们点击Publish to Axure Share 按钮。在如下图所示的弹出窗口中，使用注册后Axure Share 账号登录（如果没有，就注册一个）。其他的参数设置都使用默认的就好了，然后点击“Publish（发布）”按钮。
……
