
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文件。

图2-25 “页面”面板和RP文件
● 制作步骤
01 在打开的欢迎界面中单击“新建文件”按钮,得到“页面”面板,如图2-26所示。单击“添加页面”按钮,页面显示如图2-27所示。

图2-26 “页面”面板

图2-27 添加页面
提示
单击“添加页面”按钮后,即可添加名称为“页面1”的新页面。而新创建的页面可更改页面名称。
02 选中新建页面,将其移动为二级页面,如图2-28所示。使用相同方法创建其他两个二级页面,如图2-29所示。

图2-28 移动页面

图2-29 创建页面
03 当页面被选中时,在页面名称上方单击鼠标右键,在弹出的下拉列表中选择“重命名”选项,如图2-30所示。单击该选项后,页面名称变为可修改状态。修改页面名称,在“页面”面板空白处单击即可完成修改,如图2-31所示。

图2-30 重命名命令

图2-31 修改名称
04 使用相同方法完成面板中其余页面的重命名操作,如图2-32所示。选中一个二级页面,在其上方单击鼠标右键,弹出下拉列表,执行对应操作,如图2-33所示。

图2-32 重命名操作

图2-33 执行对应操作
05 将新创建的二级页面进行重命名操作,如图2-34所示。选中一个名为“文件”的二级页面后,单击鼠标右键,在弹出的列表中选择“添加>子页面”选项。连续两次创建子页面,并修改子页面的名称,如图2-35所示。
06 选择一个二级页面单击鼠标右键,选择“重复>分支”选项,得到一个新的二级页面。修改页面的名称,如图2-36所示。

图2-34 重命名操作

图2-35 添加子页面

图2-36 复制子页面
07 选择名为“文件”的二级页面,单击鼠标右键,选择对应的选项,如图2-37所示。操作完成后,二级页面的前后顺序如图2-38所示。

图2-37 移动页面

图2-38 页面顺序
08 单击页面面板右侧的“查找”按钮,“页面”面板将会出现搜索框,如图2-39所示。在搜索框中输入需要查找的页面,“页面”面板的显示效果如图2-40所示。
09 也可以在“查找”按钮左侧,利用“新建文件”和“新建文件夹”按钮做出相应操作,如图2-41所示。

图2-39 查找按钮

图2-40 显示效果

图2-41 查找页面的操作
10 页面整理完成后,选择“文件>保存”选项,在弹出的对话框中选择合适的文件夹,修改文件名称为“2-3-1.rp”后,单击“保存”按钮将页面保存。
2.3.2 页面自适应
为了让原型在不同终端都能正常显示,Axure RP9在“样式”面板中提供了“自适应视图”功能。
提示
自适应视图中的元件从父视图中集成样式(如位置、大小)。如果修改了父视图中的按钮颜色,则所有的子视图中的按钮颜色也随之改变。但如果改变了子视图中的按钮颜色,父视图中的按钮颜色不会改变。
选择“样式”面板中的“添加自适应视图”选项,如图2-42所示,或者选择“项目>自适应视图”选项,如图2-43所示,都将弹出“自适应视图”对话框,如图2-44所示。

图2-42 添加自适应视图

图2-43 执行命令

图2-44 “自适应视图”对话框
在“自适应视图”对话框中,单击左上角的“+”按钮,即可添加一种新视图,新视图的各项参数可以在右侧添加,如图2-45所示。

图2-45 添加自适应预设