Axure RP 9萌新修炼手册-第三章-基础应用(3)

AxureRP9教程 小楼一夜听春语 482℃ 0评论

第二节 交互设置

一、交互事件

即便是线框草图,我们也可以添加一些简单的交互,让沟通对象更方便的查看内容。

交互是指程序对用户动作指令的反馈

简单来说就是用户做了什么操作的时候,我们为用户呈现什么内容。

每个交互都是将来可能发生的事件,它们包含固定的关键要素:

  • 主体:用户操作的对象。
  • 触发:用户的操作类型。
  • 情形(条件):当用户对主体进行某种操作时,出现的各种情况。
  • 动作:反馈所需执行的动作。
  • 目标:动作控制的对象。
  • 设置:具体化反馈的表现形式与内容。
  • 顺序:内容的反馈顺序。

例如:用户点击登录按钮时,如果验证成功,呈现文字提示“登录成功”,打开个人中心页;如果验证失败,呈现文字提示“账号或密码错误”。

在上面这句交互的描述中,包含的关键要素如下:

主体:登录按钮

触发:单击时

情形1:验证成功

动作1:设置文本

目标:提示元件

设置:提示文字-登录成功

动作2:打开链接

目标:项目页面

设置:个人中心页面

情形2:验证失败

动作:设置文本

目标:提示元件

设置:提示文字-账号或密码错误

我们可以通过思维导图来分析交互。(图3-55)

实际上,我们在进行产品原型设计时,能不能顺利的完成交互的添加,关键在于能不能正确描述交互,并找出交互的关键要素,而不是Axure RP功能的使用。

如果没有交互的描述能力,即便了解了Axure RP软件的功能,仍然无法正确完成交互的创建。

具备描述交互的能力,是作为产品设计人员的基本功,因为描述交互不仅仅体现在原型设计中。即便没有线框草图和交互原型,在产品需求文档中,对于交互的描述仍然是必不可少的。

所以,不要认为学会Axure RP这款软件就具备了产品设计或交互设计能力,工具只是基于我们自身所具备的能力,帮助我们提升效率、减少障碍。

就好像写一篇文章,可以用笔在纸上写;如果想提高效率,写的又快又工整,可以打开电脑用文字编辑软件写;但是如果是个文盲,很显然,拥有再好的工具也写不出来这篇文章。

如果掌握了对交互的描述,在Axure RP中添加一个交互变得非常简单。

以上面所描述的交互为例,我们通过一个案例来体验一下添加交互的过程。

案例02:登录按钮的交互

1、准备元件与页面

我们创建两个页面,一个登录页面(login)和一个个人中心页面(personal_center)。(图3-56)


个人中心页面中只有一个占位符元件表示内容。

登录页面中,我们使用三级标题、矩形、主要按钮、文本标签以及文本框元件创建一个登录面板。(图3-57)

添加的元件都会在概要功能面板中出现,与交互有关的元件建议添加名称。

元件添加名称可以在概要功能面板中慢点2次元件进行添加,也可以在交互、样式或说明的功能面板中添加。(图3-58)

当使用英文命名元件,建议使用帕斯卡命名法。无论命名由多少个单词组成,每个单词首字母均大写并且单词之间无任何分隔。例如:UserName。

2、添加交互

Axure RP 9添加交互可以通过两种方式。

  • 一种是在交互功能面板中进行渐进式交互设置。
  • 另一种是通过交互编辑器进行渐进式交互设置。

这两种交互设置的方式,大家可以根据自身习惯选择使用。

为了便于内容的讲解,本书之后的案例中仅采用交互功能面板中进行交互设置的方式。

(1)画布中点中主体元件-登录按钮“LoginButton”;交互功能面板中点击【新建交互】按钮,或点击交互编辑器按钮打开交互编辑器;(图3-59)

(2)选择触发事件-【单击时】;(图3-60)

(3)选择交互动作-【设置文本】;(图3-61)

(4)选择动作目标-【Message】;(图3-62)

(5)添加动作设置-【值】中输入“登录成功”。(图3-63)

注:任何一个交互都可以参考以上步骤进行设置,需要大家理解并牢记。在之后的案例中,只会给出关键要素,不再提供操作步骤截图。

点击确定按钮之后,我们就完成了一个动作的添加。

但是,我们给用户的反馈是两个动作,所以需要继续添加第二个动作。

(1)交互功能面板中点击【添加动作】的加号“+”按钮(图3-64),选择新的交互动作-【打开链接】,或者在交互编辑器中选择新的动作;(图3-65)


(2)选择动作目标-【personal_center】;(图3-66)

(3)添加动作设置-【更多选项】(保持默认的【当前窗口】)。(图3-67)

第二个动作添加结束后,此时我们完成了“验证成功”这种情形的交互设置。

(4)点击【启用情形】的按钮(IF)添加情形(图3-68),并为情形添加名称“验证成功”。(图3-69)

在情形编辑的界面中,可以为情形添加对应的条件,但这不是必须的。

简单的线框图在添加情形模拟交互时,只完成情形的创建即可。

高保真原型需要为情形添加条件,以便在查看原型时,能够自动根据条件呈现相应的交互。

(5)点击【添加情形】的按钮(图3-70),添加第二种情形的名称“验证失败”(图3-71)。

(6)为“验证失败”的情形添加【设置文本】的交互动作,设置元件“Message”的【文本】【值】为“用户名或密码错误”(图3-72)。这一步交互的设置,可以参考之前的操作。

到这里,我们的交互全部添加完成,按<F5>键在浏览器中查看原型。

当我们在浏览器中点击登录按钮,此时,会呈现出两个情形的按钮可以选择点击。(图3-73)

点击哪一个按钮,就会执行哪一个按钮的交互动作。

二、交互样式

我们之前为元件设置的样式都是默认样式,在交互功能面板中,我们还可以为元件设置交互样式。

交互样式是指通过交互触发所呈现的样式。

例如,鼠标进入一个按钮以及鼠标在按钮上按下按键时产生的颜色变化,就可以通过交互样式实现。

案例03:鼠标交互的样式

鼠标悬停交互的样式可以通过点击【新建交互】按钮,触发事件列表的底端选择相应的选项(图3-74)。

也可以通过在元件上点击鼠标右键,上下文菜单中选择【交互样式】选项,打开【交互样式】对话框进行设置。(图3-75)

本案例中按钮鼠标交互的样式包括【鼠标悬停】与【鼠标按下】两种。(图3-76)

除了鼠标悬停与鼠标按下的交互样式,还有选中、禁用、以及获取焦点的交互样式。

其中,选中和禁用的交互样式需要通过属性或者交互动作改变元件的状态才能够呈现,在之后的案例中,我们能够看到它们的使用。

而获取焦点的交互样式,和鼠标交互样式一样,可以直接呈现出来。

这个交互样式可以应用于能够获取焦点的元件,例如文本框、文本域、形状、图片等。

例如,一个光标进入时边框颜色变为蓝色的文本框。(图3-77)

案例04:获取焦点的样式

这样的视觉效果,我们就可以通过设置样式(图3-78)与交互样式(图3-79)来实现。

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第三章-基础应用(3)

喜欢 (6)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 头像
    求问一下,RP9的文本框类型中没有密码这一个选项,该怎样处理?
    夜喵喵2019-06-28 12:54 回复