今天马克笔设计留学的May老师将会继续为大将带来有关Axure的图文基础教程,这一期主要讲的是元件的使用,如果小伙伴们对于Axure有其它任何疑问,可以随时和小编联系哦!如果你对于教程有任何建议,请给我们留言吧,会有精美礼品相送哦!
1. 矩形等各种形状的使用
这一部分内容主要介绍关于元件属性的修改,包括元件名称、尺寸、位置、显隐、填充色、阴影、边框、圆角、翻转(位置·尺寸那里)、不透明度、字体、行间距、项目符号、对齐、填充、元件/文本角度(ctrl+节点处)、文本链接(所有文本、部分文本,示例各注册页中的用户协议)、改变形状(属性>>形状>选择形状,自定义形状、右击、右上角圆点)、交互样式、转换为图像(特殊字体时可考虑)、禁用/选中等基本操作。
添加元件到画布
在左侧元件库中,选择想要使用的元件>>按住鼠标左键不放拖入画布中。
设置元件尺寸及位置:
元件的位置与尺寸的调整有三种方式:直接拖拽调整、工具面板输入数值调整、检视功能区下的样式中修改。
给元件命名
当我们使用到的元件非常多时,建议给每一个使用到元件进行命名,方便后期选择与修改。
设置元件的显隐
当一开始我们不要某个元件显示时,我们可以先将其隐藏,在需要时再让其显示。
设置元件填充色
设置元件阴影及边框样式
设置元件圆角
设置元件的水平/垂直翻转
设置元件的不透明度
元件的不透明度包括填充色不透明度和边框色不透明度两部分,在将填充以及边框样式的时候我们有提到,这里说另外一种方式。
设置字体、字号
设置行间距、项目符号以及段落对齐形式
设置元件文字填充
填充在这里指元件内文字与形状边缘之间填充的空隙。
设置元件/文本角度
设置文本链接
对于一段文字或者几个文字我们可以为其设置链接。例如,注册页中的用户协议、隐私条款。
改变形状元件的形状
给元件设置交互样式
在网页端,当鼠标移动到一个可以交互的文字或者button上时,我们需要给用户一个及时的反馈,这时候就需要对元件的在鼠标悬停下的交互样式进行设置。另外,需要时我们还可以设置元件选中、禁用和鼠标按下时的交互样式。
将元件转换为图像
一般情况下我们很少这样做,当元件中包含特殊字体时,为了避免在不含该字体的设备上浏览出错我们可以考虑将其转换为图片。
设置元件默认状态为禁用/选中
2.文本框
改变文本框为密码/文件等
给文本框设置提示文字并修改提示样式
一般在注册或登录一个网站/app时都会有关于注册的用户名及密码的说明文字,这部分说明文字就可以称之为提示文字。
设置文本框提示触发
提示触发是针对文本框中的提示文字的,关于何时提示文字被隐藏。
限制文本框的输入字符数