![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=1739653514-Q2dKEnXIXsL6FM3VmmKgNX12soHIFKwx-0-967dc83df29f426b91607e370b3ece56)
图2-25 “页面”面板和RP文件
● 制作步骤
01 在打开的欢迎界面中单击“新建文件”按钮,得到“页面”面板,如图2-26所示。单击“添加页面”按钮,页面显示如图2-27所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_1.jpg?sign=1739653514-TuAh1oWWXoEFauSFJoT1EifewiXTUP02-0-0fa2b04637954df79b6ca0cf6c36532c)
图2-26 “页面”面板
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_2.jpg?sign=1739653514-RghcJpXhD7cYtgeXJrL6ijBu8qa41LMD-0-37f17370beba34113af7e4fb277ee6e0)
图2-27 添加页面
提示
单击“添加页面”按钮后,即可添加名称为“页面1”的新页面。而新创建的页面可更改页面名称。
02 选中新建页面,将其移动为二级页面,如图2-28所示。使用相同方法创建其他两个二级页面,如图2-29所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_3.jpg?sign=1739653514-teguuFBqIHWVKKwT3M9m4L3pW9NYUsVJ-0-02d1f3e894a5c114003722af7a8e85e0)
图2-28 移动页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_4.jpg?sign=1739653514-Hf9wP4LfL2N4U1iaWKzYP3fx2QQUUdj8-0-84475e92636a930f5df69083d0e68dbb)
图2-29 创建页面
03 当页面被选中时,在页面名称上方单击鼠标右键,在弹出的下拉列表中选择“重命名”选项,如图2-30所示。单击该选项后,页面名称变为可修改状态。修改页面名称,在“页面”面板空白处单击即可完成修改,如图2-31所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_5.jpg?sign=1739653514-lHe56y31mUiMVJN7NdmtH2YckHCOIRud-0-fa4795db21ef6297492e6b59e885da4a)
图2-30 重命名命令
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_46_6.jpg?sign=1739653514-mMil06T3DXGm8AcI9vgxTz3SAekszdAJ-0-eeec988a329a0573734b3b62d41877e4)
图2-31 修改名称
04 使用相同方法完成面板中其余页面的重命名操作,如图2-32所示。选中一个二级页面,在其上方单击鼠标右键,弹出下拉列表,执行对应操作,如图2-33所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_1.jpg?sign=1739653514-4SChELMkmqRj5IArG2TflmPvdPuAUYcx-0-f7a99192ed79728e113341a307ac7376)
图2-32 重命名操作
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_2.jpg?sign=1739653514-rDNqeQCN7x9CRmqmPOiHbmaxSd46woPh-0-e406b68023d972ab038eacbfbc52f953)
图2-33 执行对应操作
05 将新创建的二级页面进行重命名操作,如图2-34所示。选中一个名为“文件”的二级页面后,单击鼠标右键,在弹出的列表中选择“添加>子页面”选项。连续两次创建子页面,并修改子页面的名称,如图2-35所示。
06 选择一个二级页面单击鼠标右键,选择“重复>分支”选项,得到一个新的二级页面。修改页面的名称,如图2-36所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_3.jpg?sign=1739653514-ccIXAe4PORaKGMNAAflzzhmWsfRS8Bub-0-d362de8924e988d8b5b099d2f5f7cc1a)
图2-34 重命名操作
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_4.jpg?sign=1739653514-BY4QaKq9g0FPJfG6iN1J6383AK6R3X5k-0-55b7e4822c7df19bf1c6c58345aeddd0)
图2-35 添加子页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_5.jpg?sign=1739653514-kcCofKQrNvv8WsU1rudoCPQFCGiTVGqp-0-9e086dc02410786be294d0839251f826)
图2-36 复制子页面
07 选择名为“文件”的二级页面,单击鼠标右键,选择对应的选项,如图2-37所示。操作完成后,二级页面的前后顺序如图2-38所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_6.jpg?sign=1739653514-XoukL580RnlRtbxlJnV6odUl3nQ9WWw7-0-b41776ac86e05331a56fe0698e2a8f3c)
图2-37 移动页面
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_47_7.jpg?sign=1739653514-99b7YapvJEIkcLMMX1JXpGnAoxQx0MVm-0-c532894fbda37e94c266c689a1c78d30)
图2-38 页面顺序
08 单击页面面板右侧的“查找”按钮,“页面”面板将会出现搜索框,如图2-39所示。在搜索框中输入需要查找的页面,“页面”面板的显示效果如图2-40所示。
09 也可以在“查找”按钮左侧,利用“新建文件”和“新建文件夹”按钮做出相应操作,如图2-41所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_1.jpg?sign=1739653514-u7Kh0jYWKbCtHXr2zCRMD3PMMfWLtcu9-0-d102718659b68d14d97cec9ce71cf4e2)
图2-39 查找按钮
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_2.jpg?sign=1739653514-3pTxIQcRo7sFikRbCxC1J4Ty6zGmLYMT-0-b4beae2497f67b2f8a61abf8f2caf945)
图2-40 显示效果
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_3.jpg?sign=1739653514-k770pglaqYVpFBu635e5lAMaJgQmi48a-0-b0b7d78a6a47b2e57862419f4299d822)
图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=1739653514-AD5Z2vqbbUS0Gd3krOnrOlxBlwOR30Ww-0-d2518959a97fea1e06de38072b57a269)
图2-42 添加自适应视图
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_5.jpg?sign=1739653514-29kqJZUFm5XzVQ0IezkRsi9VhwQArhZr-0-0c9d28fcb77d0cb1ae85f3ee44030b6e)
图2-43 执行命令
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_6.jpg?sign=1739653514-bf7FcuaZPZqiVaD4jb1GjXE9YHEzkU5R-0-3d2238d215d39af56240755e2deddeb4)
图2-44 “自适应视图”对话框
在“自适应视图”对话框中,单击左上角的“+”按钮,即可添加一种新视图,新视图的各项参数可以在右侧添加,如图2-45所示。
![](https://epubservercos.yuewen.com/34469C/18279401108274506/epubprivate/OEBPS/Images/39447_48_7.jpg?sign=1739653514-S52UVMpRmMuVNhaEIiD0k36sVB8DcNDw-0-cb9c4806b1c1c21a9116096b232c81e4)
图2-45 添加自适应预设