Axure RP 9 超级教程：自适应视图（Adaptive View Set）

废话不表，直接如题。

1. 新建页面，名称自定，如“自适应”。

2. 选择Project下的Adaptive View Sets...项。

3. d出自适应设置框，点击“+Add”

4. d出新增自适应页面：

5. 点击Presets(预制)，d出不同平台以及不同型号大小的显示规格，根据需要选择自己需要的规格

6. 选择设置好后，点OK返回主界面，再style处，可以看到“Add Adaptive View”。

7. 点击“Add Adaptive View”，显示如下图：

        在设计面板的上，我们可以看到所选视图的标签。默认我们身处在基础视图。当前视图的标签为蓝绿色，子视图的标签为黄色，父视图标签为灰色。视图标签按照“辈分”由高到低的关系，从左至右，依次排列。

8. 任意给页面添加一个控件，比如：添加个矩形框，在右侧，选择InterAction，添加链接，选择Link Action 下的Open Link，选择“自适应”页面，如下图

9. 页面预览，选择不同规格，自适应不同效果

本文主要内容目录

设置原型大小

发布项目

查看项目

1、设置原型大小

我们把原型的尺寸定为：375*647（减去了状态栏20PX的高度）

2、发布项目

其它的设置我就不多说了，主要说一下移动设备的设置。

宽度：375

高度：647

以上是IPHONE6标准的尺寸，建议使用IPHONE6尺寸，缩小放大都比较好 *** 作。

最小缩放倍数：0.5

最大缩放倍数：2.0

允许用户缩放：no

最重要的 最小缩放倍数 千万不要填写，填写以后默认就以iphone6的尺寸访问，需要你缩放一下才能够正常全屏显示，如果没有设置，则自动以你手机屏幕大小进行全屏显示。

3、查看项目

发布完以后，放至网上，这个时候我们就可以用手机进行访问了，我们可以看到无论是iphone5的4.3尺寸还是iphone6 plus的5.5尺寸都是显示正常并且正常全屏显示的。

使用苹果自己带的Safari浏览器文件打开原型网址。

请不要使用带工具栏的页面访问，这两个页面都是带工具栏的index.html,start.html

可以使用这个网址进行测试： https://test.hanhc.win/default.html

点击桌面生成的图标就可以访问了，现在看上去是不是不像是在访问网页呢。

写在最后

原型访问的方法有很多，大家都可以根据自己的实际情况进行选择，本文只是提供可以自适应手机屏幕大小的方法，把原型放在手机上更多的时候是为了方便外出演示的时候，给客户查看一种实际的效果，所以建议使用高保真原型比较妥。

原型只是展示和沟通的一种方式，并非产品经理的全部，请不要本末倒置，产品经理应该更注重在沟通、思维、逻辑、业务上，当然有时间把原型做好做漂亮也是一种技能。

在axure 8发布以后，可以利用几项技术（axure自动生成自适应html、前后端分离、响应式网站设计、restful接口、json或xml等）进一步简化网站的开发，该设计模式的主要流程如下：

1. 产品经理利用axure设计原型。

2. 原型讨论定型后由UI人员设计图标，更新到axure原型中。

3. 由axure生成 自适应的响应式网站 设计的html文件。

参考：http://www.woshipm.com/rp/696039.html

注意：axure发布项目生成html时，在左侧的“ 移动设备 ”这个设置页，需要 勾选“包含视口标签”，不勾选“禁止页面垂直滚动”，宽度设置为“device-width”， 高度留空不设置，初始缩放倍数绝对不能设置 ，最小缩放倍数设置为“0.1”，最大缩放倍数设置为10，允许用户缩放留空不设置 ，ios部分可以不理默认即可。另外需要 axure 8以上版本才能普遍适配手机 屏幕。

4a. 前端开发人员全盘使用上面生成的html文件、资源文件、axure的js文件，在各个页面上以前后端分离方式添加业务逻辑的实现（比如在html中加入jquery的ajax，和后端交互数据）。

4b. 后端开发人员设计和实现业务逻辑和前后端接口（4b可以和3、4a步骤同步进行），比如前后端使用restful的json封装作为前后端接口的数据交互。

5. 单元测试、集成测试、灰度测试，bug修复，发布上线。

该模式问题 ： 一旦axure原型有修改，前端怎么能更快适配该修改（现在是文件比较方式，类似git的merge）。

http://www.car-ocean.com/app-download/news.html

---