![App草图+流程图+交互原型设计教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/596/34171596/b_34171596.jpg)
2.3 页面设置
在开始学习原型设计前,大家应先了解Axure RP9的页面基本管理和设置。并对软件所提供的各种辅助工具有所了解,帮助大家在今后的设计中创建出符合规范的站点。同时深刻理解自适应视图设置在网页输出时的必要性,为之后的设计打下基础。
2.3.1 页面基本属性
新建一个Axure文件时,系统会自动为用户创建一个页面,用户可以在“页面”面版中查看页面效果。
实战练习01 使用“页面”面板
视频:资源包\视频\第2章\2-3-1.mp4
源文件:资源包\源文件\第2章\2-3-1.rp
● 案例分析
本案例需要使用“页面”面板,来对页面进行添加、重命名、复制和移动等操作,使得刚刚接触Axure RP9的用户,对Axure RP9的页面操作有一个简单的认识和了解,如图2-25所示为“页面”面板和RP文件。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_45_3.jpg?sign=1738882746-ueJq8L4pZNfhFmxi4klITsdmdMYhBADu-0-05317dab08c99bf8ad658863eabe3fe6)
图2-25 “页面”面板和RP文件
● 制作步骤
01 在打开的欢迎界面中单击“新建文件”按钮,得到“页面”面板,如图2-26所示。单击“添加页面”按钮,页面显示如图2-27所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_1.jpg?sign=1738882746-QyJBv4xOxM86Cql9llmChP7nTK7hyVm6-0-8ebccfb42b3b5ef735451da48f2c5744)
图2-26 “页面”面板
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_2.jpg?sign=1738882746-4kJ654sSbLair8UM0VJEHbbXx7Iz47p3-0-408e29f2841bdc7ed6858d61dbc0654e)
图2-27 添加页面
提示
单击“添加页面”按钮后,即可添加名称为“页面1”的新页面。而新创建的页面可更改页面名称。
02 选中新建页面,将其移动为二级页面,如图2-28所示。使用相同方法创建其他两个二级页面,如图2-29所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_3.jpg?sign=1738882746-2A8VRSAGv7zsgscjfXgazsY4xwDzy7ud-0-d0dd551492126fd5bc777dfa67874e14)
图2-28 移动页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_4.jpg?sign=1738882746-iVcO7hPV2azrlm1GoGOmJmVBirWs56vz-0-731c10aa8525b805aff6bdede70d91ad)
图2-29 创建页面
03 当页面被选中时,在页面名称上方单击鼠标右键,在弹出的下拉列表中选择“重命名”选项,如图2-30所示。单击该选项后,页面名称变为可修改状态。修改页面名称,在“页面”面板空白处单击即可完成修改,如图2-31所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_5.jpg?sign=1738882746-azMqHJjuw4pGNnyRIyblc4ygIqegiV2E-0-c582e2b0e4b9bb05fef0b7b00722b444)
图2-30 重命名命令
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_6.jpg?sign=1738882746-k6JmJKrv31tkNAaY9m5Ja3R3xPmwF3Eu-0-29ad876d15fc2d818badd982e20174dc)
图2-31 修改名称
04 使用相同方法完成面板中其余页面的重命名操作,如图2-32所示。选中一个二级页面,在其上方单击鼠标右键,弹出下拉列表,执行对应操作,如图2-33所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_1.jpg?sign=1738882746-EB4QFHssvE7pTOG9kh3qAeGgInHw4IdJ-0-8cf0d9acecd1187741c456b01286c91f)
图2-32 重命名操作
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_2.jpg?sign=1738882746-iHL4jcTB3XsNETdpAxfRevqnRgHrKejg-0-afd595272b665d496b4cbe87f59ec56c)
图2-33 执行对应操作
05 将新创建的二级页面进行重命名操作,如图2-34所示。选中一个名为“文件”的二级页面后,单击鼠标右键,在弹出的列表中选择“添加>子页面”选项。连续两次创建子页面,并修改子页面的名称,如图2-35所示。
06 选择一个二级页面单击鼠标右键,选择“重复>分支”选项,得到一个新的二级页面。修改页面的名称,如图2-36所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_3.jpg?sign=1738882746-aLe4SbFRRWPAc2jqorApe2jl6F92I7Yh-0-45ed0a37b4a025469fdb83f8c5066c38)
图2-34 重命名操作
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_4.jpg?sign=1738882746-g9Mr02jrs2UP8KFvj7tOCt5UtwP7zmyw-0-75f72524ba83bb7c957b3d5ddec6ca2e)
图2-35 添加子页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_5.jpg?sign=1738882746-pwZh26tMdIpMDsyoPve2C6mqjPIDqaPh-0-451eaa3eb81152b02d5ea367fd5d92b1)
图2-36 复制子页面
07 选择名为“文件”的二级页面,单击鼠标右键,选择对应的选项,如图2-37所示。操作完成后,二级页面的前后顺序如图2-38所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_6.jpg?sign=1738882746-KBVifmHiJY03vBWPXQmTCdrCZQ4jWXyF-0-04a712827306f7711bacb2aef468daf4)
图2-37 移动页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_7.jpg?sign=1738882746-1vtdMVQoFc6Fa72egRGPW7dpXAVVdCvk-0-bdc34b4bf026caa66dfa6cfc93259db0)
图2-38 页面顺序
08 单击页面面板右侧的“查找”按钮,“页面”面板将会出现搜索框,如图2-39所示。在搜索框中输入需要查找的页面,“页面”面板的显示效果如图2-40所示。
09 也可以在“查找”按钮左侧,利用“新建文件”和“新建文件夹”按钮做出相应操作,如图2-41所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_1.jpg?sign=1738882746-fvix22xzFehgSb54vOqL8HQZeeAKARMe-0-b91fb9c7d488285cd71b22115d40a26c)
图2-39 查找按钮
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_2.jpg?sign=1738882746-BICWy5zK6nbCQI9zOCCeB4brbzN1dZ6P-0-3ef5ab204ca076833e691a55183903de)
图2-40 显示效果
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_3.jpg?sign=1738882746-fsM6Hu70GYiVINQyCTWkeK4QEJht6jCX-0-5e593bb0a6c2e90743b1372f38298607)
图2-41 查找页面的操作
10 页面整理完成后,选择“文件>保存”选项,在弹出的对话框中选择合适的文件夹,修改文件名称为“2-3-1.rp”后,单击“保存”按钮将页面保存。
2.3.2 页面自适应
为了让原型在不同终端都能正常显示,Axure RP9在“样式”面板中提供了“自适应视图”功能。
提示
自适应视图中的元件从父视图中集成样式(如位置、大小)。如果修改了父视图中的按钮颜色,则所有的子视图中的按钮颜色也随之改变。但如果改变了子视图中的按钮颜色,父视图中的按钮颜色不会改变。
选择“样式”面板中的“添加自适应视图”选项,如图2-42所示,或者选择“项目>自适应视图”选项,如图2-43所示,都将弹出“自适应视图”对话框,如图2-44所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_4.jpg?sign=1738882746-PN4CH3IlhgQXyhC8q9EqBH3do4Kz0kFo-0-6fe550d2ac8018fd450551e86ecf1cc1)
图2-42 添加自适应视图
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_5.jpg?sign=1738882746-7amKzqcIzD4kDuBhHjEqRQ39dDw7DLkj-0-b065ca1680bbf301980ff1df3cc81b93)
图2-43 执行命令
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_6.jpg?sign=1738882746-5H3514OGiHPgK1kdhbQhcXjD1nW4rI65-0-af7f3ba10a96addaa5a993e9568d4cb6)
图2-44 “自适应视图”对话框
在“自适应视图”对话框中,单击左上角的“+”按钮,即可添加一种新视图,新视图的各项参数可以在右侧添加,如图2-45所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_7.jpg?sign=1738882746-716pzdvMpRQAaXWr85HEMNZOyltuzkdy-0-0761834299bc7959abc0ba1455a780af)
图2-45 添加自适应预设