1、第3章 图像元件A x u r e R P 8 交 互 原 型设 计 案 例 教 程可以在【元件库】面板中的默认元件库和流程图元件库中分别找到图像元件，然后将图像元件从【元件库】拖到页面中。与矩形元件相比，图像元件也有一个黄色的小三角，但没有灰色的小圆点，这表示图像元件无法转换成其他形状，如图3-1 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.1 3.1 置入图像置入图像3.1.1 认识图像元件图 3-1 图像元件的外观在Axure RP 中置入图像的方法有3 种。1.使用图像元件置入图像从【元件库】中将图像元件拖曳到页面中，然后执行下列任意一种操作。双击
2、该图像元件。右击该元件，从弹出的快捷键菜单中执行【导入图片】命令。选择图像元件后，在【检视】【样式】子面板中单击【导入】按钮。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.1 3.1 置入图像置入图像3.1.2 置入图像的方法2.将图像直接拖曳至页面中还可以在资源管理器窗口中选择图片，使用鼠标将其拖曳到Axure RP 页面中，使用此方法可以在Axure RP 中同时导入多幅图片。3.使用【粘贴】命令从其他程序中复制图像或者使用抓图软件抓图后，在Axure RP 中执行【编辑】【粘贴】（【Ctrl+V】）命令也可以获取图像。Axure RP 8 交互原型设计案例教
3、程第第3 3章章图像元件图像元件3.1 3.1 置入图像置入图像3.1.2 置入图像的方法从外部程序复制图形，或者从Axure RP 页面复制图形后，都可以在Axure RP 页面上右击鼠标，从弹出的快捷菜单中执行【特殊粘贴】【粘贴为图片】命令，将矢量图变成位图。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.1 3.1 置入图像置入图像3.1.3 将图形粘贴为图像如果要将Axure RP 页面中的图形转换为图像，可以右击该图形，从弹出的快捷菜单中执行【转成图片】命令。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.1 3.1 置入图像置
4、入图像3.1.4 将图形转为图像该功能可以控制导入的图像是按其原始大小显示还是按照用户设置的大小来显示。在【检视】【样式】子面板中可以找到【适合图像】按钮。下面练习【适合图像】工具的用法。首先从【元件库】面板中拖动一个图像元件到页面中，然后调整到合适的大小。双击该图像元件导入一幅尺寸大于图像元件的图像，此时图像元件会自动变大。改变图像尺寸后，在【样式】子面板中单击【适合图像】按钮，则图像又会变成刚导入时的大小。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.1 适合图像该功能可以在拉伸图像大小时，限定拉伸的范围。执行该命令的方法有
5、两种。在【检视】【样式】子面板中单击【固定边角】按钮。右击图像，从弹出的快捷菜单中执行【固定边角】命令。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.2 固定边角执行【固定边角】命令后，图像左侧和顶部位置分别出现两个红色的小三角控制点，拖动这些控制点可以设置固定边角的范围，如图3-2 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.2 固定边角图 3-2 调整固定边角范围调整好图像边角固定的范围后，再对图像进行缩放，可以使固定边角范围的图像基本不变，固定边角范
6、围之外的区域会被拉伸，如图3-3 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.2 固定边角图 3-3 改变图像大小该功能可以对图像进行裁剪。执行该命令的方法有3 种。在【检视】【样式】子面板中单击【裁剪图片】按钮。右击图像，从弹出的快捷菜单中执行【裁剪图片】（【Ctrl+7】）命令。在主工具栏中也可以找到【裁剪】（【Ctrl+7】）按钮。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.3 裁剪图像默认状态下，执行【裁剪图片】后，图像上会出现一个矩形框，同时右
7、上方出现一行灰底的文本菜单命令。矩形框就是裁剪图像的范围，也叫裁剪框，可使用鼠标调整裁剪范围；右上方的文本菜单命令可以控制裁剪的方式，裁剪完毕双击裁剪范围，如图3-4 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.3 裁剪图像图 3-4 执行裁剪图片命令后的初始状态该功能可以将图片横向或者纵向切割，也可以同时对图片进行横向和纵向切割。执行该命令的方法有3 种。在【检视】【样式】子面板中单击切割图片按钮。右击图像，从弹出的快捷菜单中执行【切割图片】（【Ctrl+6】）命令。在主工具栏中也可以找到【切割】（【Ctrl+6】）按
8、钮。执行切割图片命令后，鼠标指针会变成标志，同时根据选择的切割方式显示切割的辅助线，如图3-5 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.4 切割图像Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.4 切割图像图 3-5 切割时的状态对图片进行圆角化的方法有两种。使用鼠标拖动图片左上角的黄色小三角标志，如图3-6 所示。在【检视】【样式】子面板中输入圆角半径的大小，如图3-7 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3
9、.2 3.2 编辑图像编辑图像3.2.5 圆角化图像Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.5 圆角化图像图 3-6 鼠标控制图片圆角化图3-7 使用数值控制圆角化大小使用【样式】子面板中的“圆角半径”参数右侧的按钮，还可控制圆角化作用在哪个角上，如图3-8 所示。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.5 圆角化图像图 3-8 控制圆角化的半径在Axure RP 中，可以为图像添加普通图形元件那样的边框效果。对图像添加边框有两种方法。在【检视】【样式
10、】子面板中设置“描边”参数，包括线宽、边框颜色和边框类型3 个按钮。在主工具栏中也可以找到与【样式】子面板中相同的边框设置按钮。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.6 给图像添加边框该功能可以在保证图片基本质量不变的情况下减小图片大小，目的主要是提高图片预览时下载的速度。不过，将图片优化后，或多或少都会导致图片有些模糊，尤其是文本部分，模糊得更加严重一些。当Axure RP 导入的图片大于500KB 时，会自动弹出一个优化图像的警告对话框，单击【是】按钮可优化图片，单击【否】按钮不优化图片。对于已经导入Axure RP
11、 中但未经优化的图像，也可以右击图片，在弹出的快捷菜单中执行【优化图片】命令进行优化。Axure RP 8 交互原型设计案例教程第第3 3章章图像元件图像元件3.2 3.2 编辑图像编辑图像3.2.7 优化图片本章总结本章总结通过本章的学习，读者应熟悉掌握导入图片方法以及如何对图像进行一些简单的编辑，如固定边角、裁剪和切割图片以及对图片添加圆角等操作。读者不但要掌握这些命令的使用方法，更重要的是掌握在什么情况下使用这些命令。另外，对于Axure RP 支持导入的图片格式也应有所了解，知道每种格式的图片有什么特点等。需要注意的是：Axure RP 毕竟不是一款专业的图像处理和图形绘制软件，特殊的图像和图形，建议最好在专业的图像处理软件（如Photoshop）和图形绘制软件（如Illustrator）中创建和编辑，然后将其导入Axure RP 中使用。THANKSA x u r e R P 8 交 互 原 型 设 计 案 例 教 程
