Axure RP 8 入门手册 – 第6章(四)

第9节检视功能-元件交互冰炫:小楼老师,我能跟你请教个问题吗?小楼:哇!看头像是很高冷的美女呀。冰炫:老师!你嘴好甜哦!你这样我会不好意思的!小楼:嘿嘿!你有什么问题呀?冰炫:哦……差点被你给夸得忘记问了!今天我在网上买饮料时候,看到网站上的选择饮料分类,选择的时候只能选中一种,被选中的分类标签会改变颜色,其它的恢复默认颜色。感觉有些像你刚才给Alice.讲的单选按钮组的效果。(图6-58)(图6-58)小楼:嗯,这个也是组的效果,但不...

9          检视功能-元件交互

冰炫:小楼老师,我能跟你请教个问题吗?

小楼:哇!看头像是很高冷的美女呀。

冰炫:老师!你嘴好甜哦!你这样我会不好意思的!

小楼:嘿嘿!你有什么问题呀?

冰炫:哦……差点被你给夸得忘记问了!今天我在网上买饮料时候,看到网站上的选择饮料分类,选择的时候只能选中一种,被选中的分类标签会改变颜色,其它的恢复默认颜色。感觉有些像你刚才给Alice.讲的单选按钮组的效果。(图6-58

Axure RP 8 入门手册 – 第6章(四)

(图6-58

小楼:嗯,这个也是组的效果,但不是单选按钮组,而是选项组。

冰炫:选项组?我好像在矩形的属性里看见过。是不是像单选按钮一样给每个矩形设置相同的选项组组名,就可以了?

小楼:不是,你说的这个交互效果只加组名还不行。还要设置交互样式,并且添加交互动作,通过交互动作让每个矩形被鼠标点击时变为选中的状态。

冰炫:交互动作?不好意思,老师,我还没做过有交互的原型呢!不知道你说的交互在哪里添加。

Alice.:好像就是刚才属性面板中没有讲的那部分吧?

小楼:是的。正好你们两个都没接触过交互的设置,我就给你们一起说说交互是怎么回事。

在检视功能的属性面板中,可以为原型添加交互。

一般来说一个交互的过程就像我们日常生活中的某件事情的过程。

比如:帅哥小楼早晨出门的过程和一个按钮的点击交互过程的描述是相似的。(图6-59

 Axure RP 8 入门手册 – 第6章(四)

(图6-59

所以,我们在原型的制作过程中,设置每一个交互时,都要遵循图6-60的过程。这样才能准确、完整的完成交互设置。

 Axure RP 8 入门手册 – 第6章(四)

(图6-60

案例10:点击按钮等待3秒钟后打开作者的网站地址

具体步骤如下:(图6-61

 Axure RP 8 入门手册 – 第6章(四)

(图6-61

画布中放入一个按钮元件,点中这个元件。(选择主体)

在属性中,双击触发事件【鼠标单击时】打开用例编辑界面,或者点中这个触发事件,然后点击【添加用例】的按钮。(选择触发并设置情形)

在动作列表中找到并选择【等待】的动作。(选择动作1

在右侧的配置动作面板中设置{等待时间}为“3000”毫秒。(设置目标)

在动作列表中找到【打开链接】的动作,选择【当前窗口】打开链接的动作。(选择动作2

在配置动作中,选择【链接到url或文件】。(选择目标)

{超链接}文本框中输入地址:http://www.iaxure.com。(设置目标)

特别说明:在Axure中动作是由上至下按组织动作中的顺序执行的,本案例中的两个动作不可颠倒顺序。就如同生活事件中,要先拿雨伞,才能打开雨伞,而不可能先打开雨伞,再拿雨伞。如果需要调整动作的顺序,可以在用例编辑界面的组织动作中拖动调整,或者在属性面板中进行拖动调整。

冰炫:哦,原来这样就是添加交互呀!

小楼:对呀!知道了怎么添加交互,我们来看看你说的那个选择饮料分类的效果。

案例11:唯一选项选中效果

放入多个无边框矩形元件并进行样式设置,包括:调整尺寸、编辑文字、设置圆角半径(3px)以及编辑填充颜色(白色)和字体颜色(灰色)。(图6-62

 Axure RP 8 入门手册 – 第6章(四)

(图6-62

为所有元件设置交互样式,【选中】时的交互样式为蓝色的填充颜色和白色的文字颜色。(图6-63

 Axure RP 8 入门手册 – 第6章(四)

(图6-63

将“全部甜品饮品”的元件,默认设置为【选中】状态。这个状态在画布中没有效果,而在浏览器中查看原型时,“全部甜品饮品”的元件会呈现为蓝色的样式。(图6-64

 Axure RP 8 入门手册 – 第6章(四)

(图6-64

为每个元件添加交互,【鼠标单击时】【选中】【当前元件】。(图6-65

 Axure RP 8 入门手册 – 第6章(四)

(图6-65

为所有元件【设置选项组名称】为“DessertType”。(图6-66

 Axure RP 8 入门手册 – 第6章(四)

(图6-66

小楼:你们都明白了吗?

冰炫:明白了,老师!我感觉设置交互其实就是我们能够接触到的交互效果在软件中用另一种语句完成描述。这样软件就会按照既定描述去给用户进行反馈。

Alice.:嗯,我也明白了!老师!如果想准确的设置交互就必须先按你说的,找准关键的元素(主体、触发、情形、动作、目标、设置),然后把它们组织起来形成整个交互的过程。

小楼:嗯,不错!不过,要想熟练的进行交互的设置,一定要多加练习。

10          检视功能-组合属性

冰炫:老师,我还想问个问题,就是怎么让元件在鼠标指针进入的时候改变样式呀?

小楼:刚才的例子里面不是有吗?加上鼠标悬停的交互样式就可以了!

冰炫:不是的,老师。我刚刚表达不准确,我是想问几个元件怎么同时改变样式呀?

小楼:同时改变?你的意思是,鼠标进入一个元件时,有多个元件要改变样式?

冰炫:是的,老师。比如,我做一个菜单列表的时候,鼠标指针进入一个菜单项的时候,菜单项的背景和上面的文字,都要改变成另外一种样式。对了就像网易云课堂的首页菜单。(图6-67

小楼:这个不难!我给你示范一下。

 Axure RP 8 入门手册 – 第6章(四)

(图6-67

Axure RP 8中可以通过快捷功能中的组合图标或<Ctrl+G>键将多个点中的元件组合在一起,组合除了能够共同移动位置,还能够进行命名、添加交互、设置属性。取消组合可以通过快捷功能中的取消组合图标或者<Ctrl+Shift+G>键取消组合。(图6-68

 Axure RP 8 入门手册 – 第6章(四)

(图6-68

案例12:触发组合中所有元件的鼠标交互

放入矩形元件和文本标签,组成各个菜单项的基本内容。(图6-69

 Axure RP 8 入门手册 – 第6章(四)

(图6-69

为各个菜单项中的矩形设置【鼠标悬停】的交互样式为白色的填充颜色。(图6-70

 Axure RP 8 入门手册 – 第6章(四)

(图6-70

为各个菜单项中的文本标签设置【鼠标悬停】的交互样式为黑色的文字颜色。(图6-71

 Axure RP 8 入门手册 – 第6章(四)

(图6-71

将各个菜单项中,除水平线以外的元件组合。(图6-72

 Axure RP 8 入门手册 – 第6章(四)

(图6-72

在组合的属性中勾选【允许触发鼠标交互】。(图6-73

 Axure RP 8 入门手册 – 第6章(四)

(图6-73

特别说明:元件组合后如果需要对组合中的某个元件进行编辑,需要先点中组合,再点击元件。或者,在概要中直接点击需要编辑的元件,然后进行编辑。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36633/

(0)
交互精选交互精选
上一篇 2018-04-23
下一篇 2018-04-23

相关推荐

  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 交互设计 | 除了镜子,原来你还能在这发现真实的自己

    Create Your Difference. by CYD艺术设计作品: WHAT DEFINES YOU?现在,艺术家们已经不再为了审美而艺术,也不再为了艺术而艺术.在他们的创作过程中,它们通过各种形式,对身边的或遥远的一切事物进行讽刺、抗议、质疑或推崇,以此向他人传达比文字更立体的新兴概念或特殊感情。而交互装置——这种特殊的装置艺术,由于有我们人类/观众直接的参与,创作者/艺术家/设计师尝试表达的感情更为直观;更由于人机的互动,他...

    2018-05-05
  • 同学进了大公司的UED部门,我想一部分原因是…

    2017年开年,已经陆续有毕业生提前找实习工作了,在与一位成功入职的新人设计师交谈中,有一个重要发现:交互设计越来越受重视了。这位计算机专业的小伙伴,机缘巧合接触了设计,从此一发不可收拾,短短不到一年时间就熟练掌握了PS、AI、AE等软件,还自学了手绘技能。不过即使如此,她的求职仍困难重重。不是985 重点大学/非视觉传达专业/只会画图标界面等等,都成为用人单位将她拒之门外的理由。虽然要求有点苛刻,但站在公司的角度,想要在浩浩荡荡的求职...

    2018-01-31
  • 预算少时间紧还要出色的用户体验?看来只有试试精益设计了!

    低成本,高效率,还能把友商比下去的用户体验——全世界老板的目标都是一样的!问题是,这现实吗?先别着急否定,也许,精益创业方法系统中的精益用户体验设计可以帮到你。是时候淘汰预先大量设计、单打独斗、各个专业团队将交付文档甩给对方这些传统的用户体验设计了——把精益创业法与用户体验(UX)设计结合起来,共同成长,互惠共存——这就是Lean UX。三原则Lean UX 从精益创业法中吸收了三个基本原则。首先,它们能帮助我们简化 UX 设计流程。我...

    2018-05-04
  • 从了解用户的注意力开始,创造更优秀的用户体验

    作者:Norbi Gaal译者:优设网-陈子木链接:https://www.uisdc.com/introduction-to-human-attention这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构...

    2018-04-07
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 电视交互设计的一些事 | 设计基础15

    两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。✨硬件+远距离操控——基本交互基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一、 遥控...

    2018-01-30
  • 手机系统苹果、安卓交互设计的通用原则总结!

    :请点上面免费订阅系统的设计从用户角度来说,交互设计是一种如何让产品更容易用,让用户更愉悦地使用产品。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点,并用通用的交互能满足用户操作的预期。下面介绍一下在交互设计中一些比较通用的设计原则,大家可以参考一下。交互1、就近原则:将同一类的功能都组织放在页面相同模块中。2、容错原则:必须允许用户有犯错的操作,给予用户后悔的操作机会。3、帮助原则:为用户提...

    2018-02-16
  • 3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19