第6章 概要与检视功能
第1节 概要功能
第2节 检视功能-页面样式
第3节 检视功能-页面说明
第4节 检视功能-页面属性
第5节 检视功能-元件命名
第6节 检视功能-元件样式
第7节 检视功能-元件说明
第8节 检视功能-元件属性
第9节 检视功能-元件交互
第10节 检视功能-组合属性
第1节 概要功能
千语：楼叔，我在做原型的时候，画布里面有很多元件，有的还被别的元件盖住，选起来很不方便，有没有什么好的方法呀？
小楼：别急，大妹子！Axure的概要面板中能够很方便的管理元件，就是页面右下角这里。通过概要功能我们能方便的对元件进行各种操作。
千语：楼叔，能不能不叫我大妹子？
小楼：妹子一定要大！
千语：楼叔，那小楼，就是很小喽？
在Axure RP 8.0中界面的右下角是概要面板，这个面板是很常用的，页面中所有的元素都能在这个列表中找到。点击概要面板中的元件，画布中也会同步选中。（图6-1）
（图6-1）
所以，在页面上元件过多互相遮挡的时候，通过概要能方便的选中元件。
另外，概要中还可以为元件命名，点中元件列表中的某项，再次单击该列表项元件名称则变为可编辑状态。（图6-2）
（图6-2）
而直接双击某个列表项，如果是形状类元件则可以直接编辑元件上的文字，如果是图片元件则可以进行默认图片的导入。
概要中，还提供搜索和筛选的功能，可以通过输入元件名称搜索到元件（图6-3），也可以只显示满足筛选条件的元件。（图6-4）
（图6-3）
（图6-4）
千语：楼叔，概要中这么多元件，有的在上面有的在下面，是按什么规则排序的呢？
小楼：是按层级排序的。就像堆放木板一样，元件也是一层一层叠起来的，在概要中，默认层级越高的元件越靠上显示，顶层的元件排在第一位，底层的元件排在末尾。不过这个顺序也可以在排序与筛选菜单中进行设置。（图6-5）
（图6-5）
千语：那怎么调整元件的层级呢？
小楼：在快捷功能区中有调整层级的按钮啊！（图6-6）不过，在概要中也可以调整。我们可以通过鼠标上下拖动概要列表中的某项来调整它的层级。
（图6-6）
最后，我再额外说一点，有一些特殊元素，比如动态面板和母版也会显示在这个列表中，这两个特殊元素还能够仅在画布中隐藏，而不影响预览或者生成后页面中的正常显示。点击元件列表项后面的复选框，可以切换该项在编辑区的显示与隐藏。（图6-7）
（图6-7）
第2节 检视功能-页面样式
千语：楼叔，我做好了一个页面，但是预览的时候，页面整体都在浏览器的左侧，怎么才能居中显示？
小楼：来，小妹妹，蜀黍给你看个好东西！
关于页面的设置，在检视面板中。点击画布的空白处，或者点击概要列表中的页面名称，都能够将检视面板切换到页面的设置。
点击检视面板中的【样式】，打开样式设置界面。（图6-8）
（图6-8）
第一项：选择页面样式方案。
我们可以点击页面样式编辑的按钮，设置多种页面样式的方案，保存在页面样式列表中，然后在页面样式列表中选择使用。
第二项：页面排列。
一共有两个选项，默认为居左显示，可以更改为另一种居中显示。一般在设计Web原型时，我们都会选择居中显示。不过，这两个选项的效果，只有在页面预览或者生成后进行查看时才能看到相应的效果。
第三项：背景颜色。
我们可以像给元件设置填充颜色一样，给整个页面添加背景色。
第四项：背景图片及对齐、重复的设置。
通过点击“导入”按钮导入本地的图像文件后，我们可以进行水平和垂直的对齐设置。如果图像需要重复，还可以进行重复的设置。重复效果里面有两个需要注意的选项就是填充和适应。
填充是指根据图片的原始比例（宽：高）对应浏览器窗口的当前比例，当宽高比变大时，图片宽度与窗口宽度保持一致，而高度按原始比例进行缩放。当宽高比缩小时，图片高度与窗口高度保持一致，而宽度按原始比例进行缩放。比如：图片原始比例16:9，当浏览器尺寸为1200*900时，宽高比变小，这时背景图片尺寸为1600*900。当浏览器尺寸为1200*600时.宽高比变大，这时背景图片尺寸为1200*675。
适应与填充相反，是指根据图片的原始比例（宽：高）对应浏览器窗口的当前比例，当宽高比变大时，图片高度与窗口高度保持一致，而宽度按原始比例进行缩放。当宽高比缩小时，图片宽度与窗口宽度保持一致，而高度按原始比例进行缩放。比如：图片原始比例16:9，当浏览器尺寸为1200*900时，宽高比变小，这时背景图片尺寸为1200*675。当浏览器尺寸为1200*600时.宽高比变大，这时背景图片尺寸为1067*600。
案例01：QQ注册页面的蓝色渐变背景
在QQ注册页面，页面顶部横向铺满屏幕的蓝色渐变背景，使用的就是背景图片水平重复实现的效果。（图6-9）
（图6-9）
具体步骤如下：（图6-10）
在概要面板中点击页面名称，将检视面板切换到页面设置；
在检视面板的样式设置界面中，点击【导入】按钮导入本地背景图片；
在下方的列表框中，选择【水平】重复选项。
（图6-10）
第五项：草图效果。
拖动标尺能够让页面上的一些元件变成手绘草图效果，标尺越向右侧拖动草图效果则越明显。
第六项：页面颜色。
能够设置页面的颜色效果。共有两个选项，第一个是彩色效果，第二个是黑白效果。
第七项：字体系列。
能够统一设置页面中的字体系列，比如：宋体或微软雅黑。
第八项：线段宽度。
能够统一增加页面中元件边框以及线段的宽度。
第3节 检视功能-页面说明
页面设置面板中间一项说明。页面说明可以为当前页面添加注释说明，来便于他人了解页面内容。页面说明直接在下方的文编框中键入内容。
如果需要有多个说明，操作步骤如下：
点击【自定义字段】。
在弹出的窗口中点击【+】按钮，添加新的说明字段名称，点击【确定】按钮后，检视面板中即出现了新增的说明字段，可添加不同的说明内容。（图6-11）
（图6-11）
第4节 检视功能-页面属性
页面的属性只有给页面添加交互的设置和页面自适应视图启用或关闭的设置。（图6-12）
（图6-12）
特别说明：如何给页面添加交互，实现与页面相关的交互效果，在后文中我们将通过相应的案例进行讲解。
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36619/
