原型设计工具Axure RP参考(十):图像小部件

?使用图像小部件可将静态图像资产和动画GIF添加到您的设计中。支持以下文件类型:JPG,PNG,GIF,BMP和SVG。


使用图像小部件可将静态图像资产和动画GIF添加到您的设计中。支持以下文件类型:JPG,PNG,GIF,BMP和SVG。

原型设计工具Axure RP参考(十):图像小部件

在设计中添加图像

库窗格中的空白图像小部件

将一个空白图像小部件从“库”窗格拖到画布上。然后,双击小部件或右键单击并选择“导入图像”,以在操作系统的文件浏览器中搜索图像文件。

加载图像时,图像小部件将自动调整为要导入图像的原始尺寸。为防止图像小部件调整大小,请在导入图像文件之前选择它并双击其大小调整手柄之一。调整大小手柄将从黄色变为白色,这表示“适合图像”功能已关闭。

原型设计工具Axure RP参考(十):图像小部件 您可以随时通过双击调整大小手柄或单击“样式”窗格中的“适合图像”来再次启用自动调整功能。

插入菜单

单击界面左上方的“插入”菜单,然后选择“图像”以在计算机的文件浏览器中浏览图像文件。所选图像将被插入到画布中心的设计中。

原型设计工具Axure RP参考(十):图像小部件

加载本地图像文件夹

您可以通过单击窗格右上方的“添加图像文件夹”图标,将计算机的本地图像文件夹添加到“库”窗格。然后,您可以将图像从文件夹拖到画布上。每当计算机上文件夹的内容更改时,它们的内容也会在Axure RP中自动更新。图像文件夹由库列表中的图像图标指示。

原型设计工具Axure RP参考(十):图像小部件

复制并粘贴到画布上

将文件拖放到画布上

您可以将图像文件从计算机的文件浏览器中拖放到Axure RP画布上,以创建一个新的图像小部件,其中已加载了所选图像。

形状小部件上的图像填充

色彩调整

调整图像小部件的颜色

您可以通过“样式”窗格顶部的“颜色调整”菜单调整图像的颜色。选中调整颜色框,然后使用滑块或下面的数字字段更改图像的色相,饱和度,亮度和对比度。单击重置将字段设置为默认值,或取消选中调整颜色以将图像切换回其默认级别,而不影响您对每个属性的选择。

裁剪和切片

您可以通过右键单击所选图像并在上下文菜单中选择任一选项来切片或裁剪图像,也可以使用S和C键盘快捷键。

小提示:您还可以自定义顶部的工具栏,以向其添加“切片”和“裁剪”按钮。

切片工具将图像分为几个部分,每个部分都成为一个新的图像小部件。您可以使用水平,垂直或交叉切割进行切片。

裁剪工具包含几个选项:

  • 裁剪:删除选择框外部的图像的所有部分
  • 剪切:删除选择框中的图像部分并将其复制到剪贴板
  • 复制:复制选择框中的图像部分,并使原始图像保持不变

翻转

要水平或垂直翻转图像,请右键单击它,然后转到“变换图像”→“水平翻转”或“垂直翻转”。

保存角落

调整图像大小时,可以防止图像的角落变形。当使用图形的圆角大小不太合适的图形时,此功能非常有用。右键单击图像小部件,然后在上下文菜单中选择“变换图像”→“保留角”。三角形标记将出现在图像的顶部和左侧,以指示图像的其余部分将不会调整大小的区域。您可以拖动三角形标记以调整保留区域的大小。

注意:您无法在空白图片小部件上保留角落。尝试执行此操作之前,请确保将图像文件加载到小部件中。

原型设计工具Axure RP参考(十):图像小部件

旋转影像

原型设计工具Axure RP参考(十):图像小部件

使用“样式”窗格顶部的“旋转”字段来旋转画布上的选定图像。该字段接受正和负的度值,最多两位小数。正值将图像向右旋转,而负值将图像向左旋转。

清除影像

您可以从图像窗口小部件清除图像文件,而无需删除窗口小部件本身。在“样式”窗格中,单击“填充”部分中的“图像” ,然后单击预览图像右上角的红色X。

原型设计工具Axure RP参考(十):图像小部件

  • 选择图像并开始输入。(仅当您禁用了单键快捷方式时,此选项才可用)

优化大图像

大图像可能会增加RP文件的大小,并影响Axure RP和Web浏览器中的性能。优化图像将减小其文件大小,从而减小RP文件的大小。但是,结果可能会降低图像质量。

原型设计工具Axure RP参考(十):图像小部件

将大图像导入Axure RP时,系统会询问您是否要对其进行优化。您还可以通过右键单击并在上下文菜单中选择“转换图像”→“优化图像”来优化RP文件中已有的图像。

注意:优化PNG将删除其可能具有的任何透明度,而优化动画GIF将删除其动画。

选择组

您可以在一组形状,线条,图像和/或动态面板窗口小部件之间创建关系,通过“设置选定/选中”操作,一次只能将一个窗口小部件设置为其选定状态。(这类似于单选按钮组中单选按钮之间的关系。)

推荐阅读:

原型设计工具Axure RP入门教程

原型设计工具Axure RP新手教程


想要获得Axure RP更多资源、正版授权的伙伴,请咨询【客服】了解

标签: 页设计视图模型界面设计 站设计原型设计

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年9月23日
下一篇 2020年9月23日

相关推荐

发表回复

登录后才能评论