一、表单类元件
01 文本框
在设计填写项时我们我们需要经常用到文本框,比如注册、登录、个人信息等相关的页面设计,我们都需要使用文本框。文本框的类型包含:文本、密码、邮箱、数字、电话、URL地址、搜索、文件、日期、月份和时间。选定好类型后,只能在文本框中输入选定类型的信息。比如我们设定了数字,则无法输入中文和英文。文本框内容的输入长度,可以设定上限,这里的长度限制同时适用于中文、英文和数字。选中元件,右键单击选择“文本类型”,右键单击选择文本框选择“编辑最大长度”,输入数字,限定最大长度。文本框的类型和长度限制也可以通过交互样式面板进行设置。如下图所示:
输入类型/最大长度
样式设置
只读与禁用:当我们将文本设置为只读时,在浏览器中打开原型时,将无法修改输入框中的文字,即只能查看;设置为禁用时,文本框将被锁死,无法进行操作。只读与禁用的交互效果从表象看,没有什么区别,但其实是有区别的,只读是针对内容而言,无法改变;而禁用,则是针对此项功能,无法使用。选中元件,右键菜单选择只读或禁用。
文本框只读与禁用
文本提示:提示用户应该在文本框中输入什么样的内容,点击输入框获取焦点后,内置提示信息消失。选中元件,在右侧交互样式面板的提示文本中,填写提示内容。
文本提示
文本框样式:可以设置元件的宽度与高度、填充色、边框线的颜色、粗细和样式,阴影、圆角和边距。
常用交互:文编改变时/获取焦点时/失去焦点时是文本框元件常用的交互事件。
02 文本段落
文本段落常用于留言、评论、个人介绍。文本段落可输入多行文本内容,当文本内容超出文本框高度时,文本段落将出现垂直滚动条。文本段落除不能设置文本类型外,其它的属性均与文本框一致,可参考文本框的元件说明。
有些汉化包将文本段落翻译为文本域或多行文本
03 下拉列表
当我们需要在多个选项中选出一项作为筛选条件或者选择结果时,我们就需要使用下拉列表。比如地区的选择、日期范围的选择等。选择的结果,通过全局变量进行存储,然后通过全局变量传递给其它页面,影响页面的展示结果。
04 列表框
与下拉列表的使用场景基本相同,可以用来取代下拉列表,如果你的设计需求希望直接将众多选项展示出来,而不需要用户点击查看选项,列表框可以满足这一需求。
添加/编辑列表框:列表框的添加、批量添加、编辑、删除、位置的移动与下拉列表相同,唯一的区别在于列表框可以允许进行多项选择。
不足之处:在实际的原型演示时,我们无法做到添加、删除,移动某一选项至另一个列表框中,但我们还可以借助动态面板的多个状态实现这样的效果。每一个交互事件都不能同时设置多个选项,列表框元件只需要读取或设置一个选项。
05 复选框
复选框的选定比较灵活,可以不选择、也可以选择、可以选择一个或多个。
编辑复选框:拖动复选框元件至设计区域,双击复选框,编辑选项内容。复选框默认处于未选中,点击左侧方框或右键选择为“选中”状态。复选框还可以通过交互动作切换选中状态。对齐方式:默认情况下,复选框位于左侧,文字在右侧,可以通过右键菜单切换复选框的左右位置。禁用复选框:默认为启用,但是有时候我们需要禁用复选框。选中复选框,右键菜单点击选择“禁用”或通过右侧的交互样式面板选择“禁用”。自定义样式:复选框支持设置填充、边框线、阴影、圆角等样式,文字可以设置字体、字号、对齐方式等样式。不足之处:复选框与单选按钮不同,不可以指定单选按钮组,复选框的高度与宽度是固定的,不可以调整。
06 单选按钮
单选按钮常用于表单设计中,一些判断型的信息选择,如性别选择,婚姻状况等。选择的结果可能影响到当前页面的交互显示或跨页面的交互显示,跨页面常常需要用到全局变量存储选择结果。
指定单选按钮组:单选按钮加入到指定的组后,一次只能将一个单选按钮设置为选中状态。选中想要加入到组中的单选按钮(第一个单选按钮加入组),然后右键单击,指定单选按钮的组,或者在交样式互面板中设置单选按钮组名称。后续添加更多单选项到组中,右键点击该单选按钮,选择“指定单选按钮组”,在弹出的对话窗口中下拉选择组的名称或者通过交互样式面板选择单选按钮组名称。若要将单选按钮从组中移出,右键点击单选按钮。指定单选按钮到组
不足之处:单选按钮的大小是固定的,形状是固定的,但文字可以设置字体、字号、颜色,可以设置文字和按钮的对齐方式。
二、菜单和制表
01 树元件
常用来浏览文件或菜单的层级结构,点击父节点将收起或展开子节点内容。当一个页面内有太多交互时,也可以点击树节点跳转到新页面。
树节点
移动节点
添加节点/节点图标
展开收缩图标
不足之处:树节点的图标可以自定义导入,但不能动态隐藏/显示子节点内容。
02 表格
在设计后台类数据查询页面时,我们需要使用表格元件。
添加/删除行和列:右键单元格或者表格上方和左侧的表头,在弹出菜单中选择插入行和列,可以选择插入的位置。
插入行/列
不足之处:表格中的数据是静态的,无法动态进行添加、删除和移动,如若需要动态添加行或列的数据,可以使用中继器;表格不能同时添加多行或多列;不能对表格中的数据进行排序和筛选。
03 水平菜单和垂直菜单
菜单元件设置好之后,我们经常会将其转换为母版,其目的是需要在不同页面之间来回跳转。
编辑菜单:右键菜单,在弹出菜单中选择后方添加菜单/前方添加菜单/添加子菜单/删除菜单项。如下图所示:菜单项填充
设置菜单交互样式
不足之处:无法为菜单项添加图标,无法点击展开子菜单,菜单元件默认是鼠标悬停时展开子菜单。
三、标记
01 快照
当我们在梳理页面关系或跳转逻辑时,可以使用快照引用原型页面帮助我们分析流程。与内部框架不同,快照只能引用内部页面和母版,而内部框架不仅可以引用内部页面,也可以引用外部页面。
引用页面
快照样式
02 水平箭头和垂直箭头
箭头与直线的样式属性、交互样式相同,区分在于,箭头元件默认选择了一个箭头样式,且箭头线条比直线更粗。具体的样式属性请参照
03 便签与标记
当我们需要为页面中添加简短的说明提示时,使用便签备注则比较方便;截图时,我们需要标注某一区域时,使用标记元件则较为方便,如我们在讲解操作界面时,使用了标记元件。
便签:Axure 9.0默认为我们提供了黄、蓝、青、紫四种颜色的标签,便签默认设置了外部阴影,边距为10。
标记:Axure 9.0默认提供了圆形标记和水滴标记,标记元件填充色为蓝色,边框线为白色,边距为2。
便签与标记,本质上是一种添加特殊样式的形状类元件,具体的样式属性请参照
元件的说明介绍至此已经讲解完毕,下一篇文章将讲述元件的基本操作。
如果你对原型设计或Axure的学习有兴趣,希望系统性的学习Axure知识,掌握更多Axure的使用技巧;或者希望通过临摹交互案例作品,进一步提升自己的高保真原型设计能力,请点击关注,后续定期讲解Axure更多教程及高保案例分析。