![Axure RP8产品原型设计快速上手指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/363/22651363/b_22651363.jpg)
1.5 检查器面板:页面
前面说过RP8版本将之前版本中的页面属性和样式面板移到了右侧,和部件属性和样式面板进行了合并。当单击页面空白区域的时候,检查器面板就会切换到页面属性和样式面板,就可以对整个页面进行交互和样式的相关设置。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1739289164-qSgi8LGIZENRuMuNkDjXHKHEeJzoZhD6-0-cc208e188db19e60080d80c53164bcca)
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0024_0002.jpg?sign=1739289164-K2ZU7FeZot95fmhLhDlBdQUEtczpZoJp-0-3c454a4c598e73e78fe17c1c16ca0bbf)
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0024_0003.jpg?sign=1739289164-mNX3lD2Im8UpwRrHgUwAzPjRRMse2Fop-0-3157f9bc6304a5928f69534491d9929a)
页面属性
新版的页面属性包含页面交互和自适应视图的设置。自适应视图将在后面章节中详细介绍。
页面交互
顾名思义,页面交互就是对整个页面进行的交互设置,在页面发生变化时,执行某些交互动作。在Axure中页面交互主要有三类事件。
❑ 页面载入时:页面加载时触发的交互动作。这是最常用的交互方式之一。
❑ 窗口改变大小时:浏览器窗口放大或缩小时触发交互动作。
❑ 窗口滚动时:页面发生滚动时触发交互动作。
RP8中对于页面交互增加了窗口向上滚动时、窗口向下滚动时等更多事件类型。点击交互下方的“更多事件”可查看全部页面事件类型。
页面备注
通常,将产品中关于整个页面的需求描述填写在页面和母版的备注面板,方便查看和生成需求文档。
新增页面备注
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0025_0001.jpg?sign=1739289164-oxrVWhtEifxgv9rVcNoiuYqLAmahcamX-0-4917903bcbe3de72fadde4716d00cc2b)
编辑中的效果
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0025_0002.jpg?sign=1739289164-9cqgsp1QbfoEZpc3F2FiPqwquLh9ZayF-0-ddde12eb6e1e14d8ee9375b0ebb52f3e)
浏览器中的效果
❑ 在编辑框内直接输入备注内容。
❑ 可以对输入的内容修改字体、颜色、字体加粗、添加下划线,但不能修改字体的大小和对齐方式。
新增备注字段
默认页面备注只有一个备注字段,可以点击“自定义字段”创建新的备注字段。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0025_0003.jpg?sign=1739289164-UJiiEkb7mPD8Qsim7Gd7V9AjtPz2ge97-0-5385e788c36dcd1ec41a9b2f7aedfd98)
页面样式
页面对齐
现在设备的分辨率越来越多,如何保证设计的原型在不同设备的浏览器中查看始终是居中的效果呢?这里我们可以选择设置页面对齐为“居中”。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1739289164-GDY9QRDndXb3ymhWxGPRI7ML6pHPKfiD-0-d4ce75bb58627815dc49e7dded382ae6)
背景色
默认页面的背景色是白色,也可以根据需要将背景色改为其他颜色。
背景图像
页面背景也可以用图片进行填充,直接点击“导入”可以将图片直接导入页面编辑区域,还可以设置图片的对齐和重复方式。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1739289164-ZYLdoIlSocLPiDzSusL18nABnNotNywc-0-ebf98a78216872b2773546d6ee089d1c)
草图效果
在产品早期规划阶段,为了避免过多纠结于设计细节,更关注产品本身,在进行原型设计时,往往会将绘制的原型视觉样式调整为草图样式。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1739289164-HgoOFzBFieL8vbZKXEnzntiqbQLG3FaQ-0-6bcf4250c99ffb54f7f1ff346727ccf4)
在草图程度的值越高,草图效果越明显。草图效果的颜色设置项中,如果选择第二项“灰度图片”,还可以将整个原型的色彩全部去除,变成常说的灰度原型效果。