Axure 9.0基础教程:学好这篇交互知识,你也可以做出高保真

程序人生 39 2018-09-29 12:56

一、交互概述

交互是Axure的显著特征

有了Axure这一神器,产品、设计、运营等非开发岗位的同学,不用写一行代码,只需要通过几步简单的配置,就能够实现前端工程师们平日里通过大量代码实现的交互和功能。Axure生成的Html文件之所以能够被称作为原型,而不仅仅是一个线框图或者是草图,就是因为其强大的交互基因,决定了它不是一款普通意义的界面设计工具。
交互是Axure中重要的构建模块,用来将静态的线框图转换为可交互的动态HTML文件。在Axure中,通过一个简洁的、带有指导提示的界面指令和逻辑指引就可以创建完整的交互,生成HTML原型时,Axure都会将这些交互转换为浏览器可识别的编码(JavaScript、HTML、CSS)。但是我们需要清楚的是,这些编码并不是产品级别的,不能作为真正的产品使用。它只是实现了前端的视觉交互,但背后需要的后台数据及相关服务,是无法提供给Axure使用的,这也是Axure最大的局限。

交互的定义

什么是交互?简单通俗的讲,就是谁在什么时候做了什么样的事情。这个主体谁其实就是对应原型的元件和页面;什么时候,狭义的理解是时间,在这里我们可以延伸理解为时机,对应原型中的事件;做了什么样的事情,这是一个动态变化的过程,在原型中对应着动作。根据交互的定义,我们可以看出交互是由元件、事件、动作这3个最基本的元素构成。

二、事件

Axure的事件可以分为自动触发的事件和手动触发的事件。

  • 页面事件:是可以自动触发的,比如当浏览器加载页面时,滚动页面时。
  • 元件事件:页面中元件的交互效果,都是人为手动触发,比如单击某个按钮。

01 页面交互

举例讲解

以页面载入时事件为例,向大家简单讲解页面事件的交互。

  • 浏览器获取到一个加载页面的请求,可以是首次打开页面,也可以是从其他页面跳转过来。
  • 页面首先检查是否有页面加载时交互,页面加载时事件是附加在页面上的。
  • 如果存在“页面加载时”事件,浏览器首先会执行页面加载时的交互。
  • 如果页面加载时包含交互条件,浏览器会根据逻辑条件,执行对应的动作;如果页面加载时不包含条件,那么浏览器将直接执行动作。
  • 被请求加载的页面渲染完毕,页面载入时的交互执行完成。


    Axure 9.0基础教程:学好这篇交互知识,你也可以做出高保真-JEESNS

Axure 9.0页面交互事件

  • 页面载入时:当页面启动加载时。
  • 窗口尺寸改变时:当浏览器窗口大小改变时。
  • 窗口向上滚动时:当浏览器窗口向上滚动时。
  • 窗口向下滚动时:当浏览器窗口向下滚动时。
  • 页面单击时:页面任意位置被鼠标点击时。
  • 页面双击时:页面中任意位置被鼠标双击时。
  • 页面鼠标右击时:页面中任意位置被鼠标双击时。
  • 页面鼠标移动时:当鼠标在页面任意位置移动时。
  • 页面按键按下时:当键盘上的按键被按下时。
  • 页面按键松开时:当键盘的按键释放时。
  • 自适应视图改变时:当自适应视图更改时。

02 元件交互

举例讲解

鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以JEESNS的主导航(发现/关注/消息)跳转为例,说明元件的交互过程。

  • 点击关注,页面程序判断“关注”是否有鼠标单击事件。
  • 假设有鼠标单击事件,首先检查事件中是否有逻辑条件,如果有逻辑条件,则按照条件执行对应动作;如果没有条件,则直接执行动作。
  • 点击“关注"后,自动跳转到关注页面,交互执行完毕。


    Axure 9.0基础教程:学好这篇交互知识,你也可以做出高保真-JEESNS

Axure 9.0元件交互事件

  • 单击时:当元件被点击时。
  • 双击时:元件被鼠标双击时。
  • 右击时:当元件被鼠标右键单击时。
  • 按下时:当鼠标按下左键没有被释放时。
  • 松开时:当元件被鼠标点击,这个事件由鼠标按键释放触发。
  • 鼠标移动时:当光标在一个元件上移动时。
  • 鼠标移入时:当光标移入元件范围时。
  • 鼠标移出时:当光标移出元件范围时。
  • 鼠标停放时:当光标在元件上方悬停时。
  • 鼠标长按时:当鼠标按下超过2秒没有被释放时。
  • 按键按下时:键盘上的按键被按下时。
  • 按键松开时:当键盘上的按键弹起时。
  • 移动时:当元件移动时,在页面中的坐标位发生了变化。
  • 旋转时:当元件旋转时。
  • 尺寸改变时:当元件宽度或高度发生改变时。
  • 显示时:当元件通过交互动作显示时。
  • 隐藏时:当元件通过交互动作隐藏时。
  • 获取焦点时:当一个输入项获取焦点时。
  • 失去焦点时:当一个输入项失去焦点时。
  • 选中改变时:适用于下拉框,当下拉框被选中的项发生了改变时,通常作为事件的一个逻辑条件。
  • 选中时:当复选框或单选按钮被选中时。
  • 取消选中时:当复选框或单选按钮取消选中时。
  • 载入时:当元件从一个页面的加载中载入时。
  • 文字改变时:当单行文本框或多行文本框中的文字发生改变时。
  • 状态改变时:当动态面板被设置了“设置面板状态”动作时。
  • 拖动开始时:当一个拖动动作开始时。
  • 拖动时:当一个动态面板正在被拖动时。
  • 拖动结束时:当一个拖动动作结束时。
  • 向左拖动结束时:当一个面板向左拖动结束时。
  • 向右拖动结束时:当一个面板向右拖动结束时。
  • 向上拖动结束时:当一个面板向上拖动结束时。
  • 向下拖动结束时:当一个面板向下拖动结束时。
  • 滚动时:当一个有滚动的面板上下滚动时。
  • 向上滚动时:当一个有滚动的面板,向上滚动时。
  • 向下滚动时:当一个有滚动的面板,向下滚动时。

Axure 9.0元件交互样式

  • 鼠标悬停:当鼠标悬停在元件上时,元件的显示样式。
  • 鼠标按下:当鼠标按下元件时,元件的显示样式。
  • 选中:元件被选中时的显示样式。
  • 禁用:元件被停止使用时的显示样式。
  • 获取焦点:当光标聚焦在元件(如文本框)上的显示样式。

三、用例

01 举例讲解

用例是用户与应用网站或应用程序之间操作流程的抽象表达,每个用例可以封装成一个独立的路径。每个事件下可以有多个用例,当有多个用例存在时,需要为用例设置一些逻辑条件,执行不同的动作。下面我们以登录为例,讲解说明什么是用例。

  • 在登陆界面,用户输入账号、密码,点击“登陆”按钮。
  • 假设用户账号输入错误,点击登录按钮时,页面提示“账号不存在,请重新输入”。
  • 假设用户密码错误,点击登录按钮时,页面提示“密码错误,请重新输入”。
    通过这个交互案例,我们可以看出不同的条件下(账号错误或密码错误),点击“登录”按钮时,提示信息是不一样的。为了满足这两个不同的条件,我们就需要为“登录”按钮添加两个不同的用例。


    Axure 9.0基础教程:学好这篇交互知识,你也可以做出高保真-JEESNS

02 添加用例

在设计区域选中元件,在右侧交互面板中点击新建交互,我们会看到该元件可用的事件列表,点击其中的一个事件,点击右侧的用例图标或者直接选择想要添加的动作。

03 编辑用例

  1. 用例说明:点击事件名称右侧的用例图标,在事件名称下方可以编辑用例的名称,并添加用例的逻辑条件。事件的第一个用例,默认没有名称,需要我们手动添加名称。
  2. 插入动作:鼠标点击动作名称,开始添加动作,支持添加多个动作。当我们准备插入第二个动作时,点击用例下方的圆形十字架,开始插入更多动作。
  3. 配置动作:动作选择完毕后,我们还需要为动作进行一些规则或属性的配置。比如,我们添加的动作是打开链接,在动作配置中,需要添加链接页面并选择页面打开的方式(当前窗口、新窗口/新标签、弹出窗口和父级窗口),最后点击完成,动作配置完毕,整个用例添加完毕。


    Axure 9.0基础教程:学好这篇交互知识,你也可以做出高保真-JEESNS

四、动作

动作是交互事件中最重要的部分,交互效果的外在表象是通过动作反应出来的。因此,了解每个动作的用法与含义,对学习交互来说是十分必要的。下面我们来看一下,Axure 9.0为我们提供了哪些动作,以及这些动作的含义是什么。

01 链接动作

  • 打开链接:跳转到一个全新的页面,链接打开的方式又可以细分为:当前窗口、新窗口/新标签、弹出窗口、父级窗口。
  • 关闭窗口:关闭当前页面或弹窗。
  • 框架中打开链接:在内部框架中打开新页面。
  • 滚动到元件:当页面的高度或宽度超出浏览器的显示范围时,可以用到这个功能。此动作,显示页面为当前页,并非跳转到新页面。在添加这个动作时,我们首先需要设定一个参照元件,设定了参照元件后,执行动作时,页面会自动滚动到选定的参考元件位置。

02 元件动作

  • 显示/隐藏:显示或隐藏某一个元件。
  • 设置面板状态:设置动态面板的显示状态,可以是明确的一个状态或者按变量指向的某一个状态;可以是按照某种规则显示的状态,比如自动切换上一个或下一个状态,支持循环切换;也可以直接停止状态的切换。
  • 设置文本:可以设置文本的显示内容,显示格式可以为富文本。
  • 设置图片:设置显示的图片,可以只本地导入的图片,也可以是根据变量确定显示的图片。
  • 设置选中:设置元件的选中状态:选中/不选中/切换。
  • 设置列表选中项:设置下拉列表与列表框的选中项。
  • 启用/禁用:设置元件为可用的/不可用的。
  • 移动:移动元件到指定坐标位置。
  • 旋转:元件围绕特定的中心点,进行顺时针或逆时针旋转一定的角度。
  • 设置尺寸:改变元件的宽度、高度。
  • 置于顶层/底层:将元件置于页面元件的顶层/底层。
  • 设置不透明:设置元件的不透明度,通常为一个百分比数据。
  • 获取焦点:设置光标聚焦在表单元件上(如文本框)。
  • 展开/收起树节点:展开树元件的节点/收起树元件的节点。

03 中继器动作

  • 新增排序:根据查询结果对数据集中的项进行排序。
  • 移除排序:移除所有排序。
  • 添加筛选:根据查询条件筛选数据集中的项。
  • 移除筛选:移除所有筛选。
  • 设置当前显示页面:使用分页时,显示指定的页面。
  • 设置每页项目数量:使用分页时,设置每页显示中继器项的数目。
  • 添加行:添加一行数据到数据集。
  • 标记行:选择数据集中的数据行。
  • 取消标记:取消选择的数据行。
  • 更新行:编辑数据集中选择的行。
  • 删除行:删除选中的行。

04 其他动作

  • 设置自适应视图:根据浏览器窗口的大小,自动调整元件的尺寸。
  • 设置变量值:设置一个或多个变量作为元件的值,例如文本的内容可以设置为一个全局变量。
  • 等待:延迟一段时间后,执行后面的动作,1秒=1000毫秒。
  • 其他:在弹出窗口中显示文字描述。
文章评论