交互设计留学 | Axure图文教程:基础(二)

17年以来,交互设计留学的火热程度丝毫不见减弱,更多其它专业的同学都选择转专业就读这个新兴的专业。对于很多小伙伴而言,Axure是学习交互最先接触和使用是频繁的软件之一,马克笔设计留学的May老师将会为大家带来也许是最全免的Axure图文教程,图文并茂,生动有趣,是你学习交互设计必不可少的利器哦!今天将会带来《Axure图文教程:基础(二)》。

第一期回顾:《交互留学 | Axure图文教程:基础(一)》

7.元件介绍——Flow元件介绍
Flow流程图元件,一般用于构建流程图。

矩形:在一个流程图中代表执行;
圆角矩形:表示开始或结束;
斜角矩形:不常用;
菱形:一般表示判断;
文件:代表文件;
括弧:用于注释说明;
半圆形:页面跳转的标记;
三角形:数据的传递;
梯形:代表手动操作;
椭圆形:流程结束;
六边形:表示准备或起始;
平行四边形:表示数据的处理或输入;
角色:模拟流程中操作的角色是谁;
数据库:保存数据的数据库;
页面快照:引用项目中某一页面的缩略图;
图片:代表图片。

在一个完整的流程图中,只有这些元件的堆积是不够的。既然是流程图就需要我们用线按照一定的逻辑将各个流程图元件连接起来。此时,我们需要用到“连接/连线工具”,快捷键为“Ctrl+3”。使用连线工具时,我们可以对连线的颜色、线宽、线型、箭头样式等进行修改。

 

8.元件介绍——Default元件介绍
Default元件包含四类:基本元件、表单元件、菜单和表格以及标记元件。

 

基本元件
基本元件是搭建页面内容的形状、图片、线段、热区和容器。

形状
从矩形1到文本段落,除了图片,我们可将其统称为形状。他们常用于页面的背景形状、文字标题、按钮。通过点击,可以填充文字;双击,则允许我们重新编辑文字。

图片
这个元件可用来导入外部图片、图标等。通过双击,可以导入图片;点击,则可以输入文字;鼠标右键则允许我们通过编辑文本来编辑文字。

线段
线段包括水平线和垂直线,是页面中的分割线。可以与形状互相转换。

热区
热区是一个透明元件,常利用它的透明性。这个元件允许你放在任何区域上并在元件上添加交互。常用于自动以按钮或者给某张图片添加热区。热区可用来创建自定义按钮上的点击区域。例如使用多个元件,如图片、文字、形状,来创建一个高保真度的按钮,则需要在这些部件上添加热区并添加一次交互动作,而不需要分别在每个元件上添加事件。此外,我们可以利用热区给一张图片添加多个交互或者给一张图片的某部分区域添加交互。

动态面板
动态面板是可以装有其他元件的容器。其中的元件可以显示、隐藏或移动。一个动态面板包含多个状态,每个状态中又可以包含多个元件。但是,值得注意的是,一个动态面板只能在同一时间显示一种状态。

中继器
中继器同样是可以承载其他元件的容器。其详细内容后续会通过实例向大家介绍。

内联框架
内联框架可以用来嵌入项目中的其他页面或URL、MP4、AVI等多媒体文件。

表单元件
表单元件是用于获取用户输入的元件,并可通过提交按钮将输入的内容提交至服务器。

文本框
主要用于获取用户输入的内容。

列表框
用于获取用户输入的选项,将其拖入画布后可以通过双击添加选项。

复选框
可以单独或者多个一起使用,用户可以自由选择。常见的为:注册页面的是否同意服务条款选项。

单选按钮
单选按钮分为选中和未选中两种状态,一般为多个单选按钮同时使用,只允许用户选择一个。譬如一份问卷等中的性别的选择。

提交按钮
这个元件很少用到,通常情况下我们会用形状或者图片按钮来代替。

菜单与表格

标记元件
在最基础的阶段,我们一般很少使用到。后期,一般需要标记时我们都是自制标记元件,也很少使用。

9.页面分析
这里我们选取百度pc端设置页面进行元件分析,看看设置页中到底用到了什么元件。

上面展示的为鼠标移入“设置”后页面的一部分的截图。分析这一部分可以知道,红色框出部分为“文本标签”,粉色框出部分为“垂直菜单”。

点击垂直菜单里的“搜索设置”后,得到的页面为上图。这一部分红色框处部分为“矩形”,粉色框出部分为“文本标签”或“矩形”,蓝色框出部分为“单选按钮”,绿色框出部分为“下拉列表框”,紫红色框出部分为“水平线”。

上图为点击垂直菜单中的“高级搜索”得到的页面。与“搜索设置”页不同的是有需要用户输入的内容,这一部分则由“文本框”和“矩形”共同组成。