- App草图+流程图+交互原型设计教程
- 刘源
- 1423字
- 2024-10-29 17:02:57
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 添加自适应预设