![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=1739264790-i7NJ9LT8dGJs6KfroqUwgn1HIlO1ogiu-0-957640ba3c1635ae8cc30a5cb0243320)
图2-25 “页面”面板和RP文件
● 制作步骤
01 在打开的欢迎界面中单击“新建文件”按钮,得到“页面”面板,如图2-26所示。单击“添加页面”按钮,页面显示如图2-27所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_1.jpg?sign=1739264790-n2HdOZOwQiirmFCLijWBqN4b8EAoWAs5-0-86fa617a3373cff8eebe4054a6b0d999)
图2-26 “页面”面板
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_2.jpg?sign=1739264790-Re99osRkjoJiGai9CcpjGXa83yiwxgZz-0-7f4dc88dff03e7c19a22553f5eb5231a)
图2-27 添加页面
提示
单击“添加页面”按钮后,即可添加名称为“页面1”的新页面。而新创建的页面可更改页面名称。
02 选中新建页面,将其移动为二级页面,如图2-28所示。使用相同方法创建其他两个二级页面,如图2-29所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_3.jpg?sign=1739264790-fbU21NuiGBV9WXriIam6pzVj3NTrnUvb-0-b2144383616b92c97f14973802473bd4)
图2-28 移动页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_4.jpg?sign=1739264790-4Aj96LLTD3EmjRHTZSGs4CkjLdWMY1Fl-0-e6ddf23748c40acad87efc4ac44c23dc)
图2-29 创建页面
03 当页面被选中时,在页面名称上方单击鼠标右键,在弹出的下拉列表中选择“重命名”选项,如图2-30所示。单击该选项后,页面名称变为可修改状态。修改页面名称,在“页面”面板空白处单击即可完成修改,如图2-31所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_5.jpg?sign=1739264790-O1AAD6pKAW7xRsNwEz0pMZLiYhLbCUf3-0-41c19bb59dc32b9aca721485fcc3db1e)
图2-30 重命名命令
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_6.jpg?sign=1739264790-nfxkMqSWjMvKRmFWLJFYBZS6PgQAhsT3-0-e28091b83c8eb20347e8e0af50cf475c)
图2-31 修改名称
04 使用相同方法完成面板中其余页面的重命名操作,如图2-32所示。选中一个二级页面,在其上方单击鼠标右键,弹出下拉列表,执行对应操作,如图2-33所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_1.jpg?sign=1739264790-ndyRcuemv4LpWuaBVmWKZmLn8PscQkyx-0-348c1b1ab7c98c193f30424d690bb6d5)
图2-32 重命名操作
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_2.jpg?sign=1739264790-7zTOhdj7Ow90ad7knX9SfSmBm0ALm7GB-0-0544baf86db9759fd640facbd73fa4f7)
图2-33 执行对应操作
05 将新创建的二级页面进行重命名操作,如图2-34所示。选中一个名为“文件”的二级页面后,单击鼠标右键,在弹出的列表中选择“添加>子页面”选项。连续两次创建子页面,并修改子页面的名称,如图2-35所示。
06 选择一个二级页面单击鼠标右键,选择“重复>分支”选项,得到一个新的二级页面。修改页面的名称,如图2-36所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_3.jpg?sign=1739264790-x6XhfUqffnt07A2Ff3IGtjxHqzyMS5bq-0-0394134b54ca555f430014a4ea8d494b)
图2-34 重命名操作
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_4.jpg?sign=1739264790-RmonjOBKzK7D0PXj08TWquEH860mRdmC-0-33fec53d269ca318e5777d75e2619933)
图2-35 添加子页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_5.jpg?sign=1739264790-eAMaP1OufxRFf1MFr2D1h8ARiPvnnWcg-0-9fedf807ca2809beb2fd833af394a2b4)
图2-36 复制子页面
07 选择名为“文件”的二级页面,单击鼠标右键,选择对应的选项,如图2-37所示。操作完成后,二级页面的前后顺序如图2-38所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_6.jpg?sign=1739264790-brqdljD8ffmFkyhbMScxieA6TdTrzYcH-0-4446f2d14be2acfc0a7ff5f77316e67a)
图2-37 移动页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_7.jpg?sign=1739264790-9pi1WVNicZ5Nz1MW7ALNBCHgtTZOI6Cp-0-ad9fb80bd7a171b0aa97666033d37393)
图2-38 页面顺序
08 单击页面面板右侧的“查找”按钮,“页面”面板将会出现搜索框,如图2-39所示。在搜索框中输入需要查找的页面,“页面”面板的显示效果如图2-40所示。
09 也可以在“查找”按钮左侧,利用“新建文件”和“新建文件夹”按钮做出相应操作,如图2-41所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_1.jpg?sign=1739264790-x4uGEp8POiOrtkqIoYBXPlgSnRtABzCO-0-80d39337fced588d869ddf4c68498d36)
图2-39 查找按钮
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_2.jpg?sign=1739264790-biIJWRURkt24eEQGP6Dha0wDYUnU0OVu-0-53a75879e9fa188cc0a1b825b1f9669d)
图2-40 显示效果
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_3.jpg?sign=1739264790-MaTW1AIXsTbIMsbBLGu0ayXpHrrvx2TP-0-ba536f6ca6a3259c7dfda5723fb50ab5)
图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=1739264790-vPXARVhfDINrNLAurvKCapVgz5wU345K-0-6d6109492ab176d97d95c32f79b260f3)
图2-42 添加自适应视图
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_5.jpg?sign=1739264790-9WiagedYtFzwTMzbhdQLKs1qtn45RNeS-0-cc3f75bae444acad6926e4a66ad334e3)
图2-43 执行命令
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_6.jpg?sign=1739264790-aERta9tNSUFIrXwHVry337fjwDhE3v3B-0-47f444e400cdc2ad5f4cd550e357f111)
图2-44 “自适应视图”对话框
在“自适应视图”对话框中,单击左上角的“+”按钮,即可添加一种新视图,新视图的各项参数可以在右侧添加,如图2-45所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_7.jpg?sign=1739264790-MgtlmIB3ubZc99AWjccXLnUl2GZJbhRx-0-9a8d3212fce469156661fe8fa538f20f)
图2-45 添加自适应预设