Axure新手养成计划(连载17)

Axure书籍 小楼一夜听春语 18881℃ 0评论

6.3.3.  元件交互的使用(案例)

元件的交互决定着原型中的绝大部分效果的呈现,所以使用好交互事件、动作,是原型设计中非常重要的部分。下面就让我们用一些很有代表性的案例,来看看怎样高效、清晰的完成交互效果。

6.3.3.1.      唯一选项组

苏苏:楼哥,前面你讲了性别的唯一选择,那个是单选按钮的效果。像有些网站的一些菜单项鼠标进入的时候唯一菜单项会变色,其它的恢复原色。这种效果又怎么实现呢?

小楼:这个用矩形做菜单项,然后设置每个矩形鼠标悬停时的样式就可以呀!

苏苏:啊?不对不对!我说错了,是点击击菜单的时候只有一个变色的。

小楼:这个呀?这个就不能单纯在属性里面设置交互样式了。还需要配合交互用例来实现。你看……

菜单项唯一被选中的效果也是通过组能够实现的,不过菜单项不同于单选按钮可以直接点击时变成选中的状态,而且菜单项被选中时还涉及到改变颜色。这些特殊的需求,需要属性里的交互样式、组名设置以及交互里面设置用例的配合来实现。

具体实现步骤如下:

1、属性中的设置(图105)

首先,同时选中三个元件,然后在属性中,为这三个元件添加统一的【选中】交互样式,用来实现按钮被选中时变色。比如:我们让三个菜单项的选中时颜色为蓝色,字体颜色为白色。

然后,在属性中我们还要为三个按钮添加同一个组名称,和单选按钮不同的是这里的组名称叫“选项组名称“。

最后,如果有需要默认被选中的元件,可以单独点中元件后,勾选属性里面“选中“的复选框(箭头所指位置)。

105

(图105)

2、交互中的设置

首先,点中第一个菜单项,双击【鼠标单击时】,打开用例编辑界面,从左侧的动作列表中找到了【选中】这个动作,点击过后又在右侧的【配置动作】中勾选了【当前元件】,然后在下方设置选中状态为【值】【true】,然后点击【确定】退出了用例编辑界面(图106)。

106
(图106)

然后,因为菜单项都是点击时选中“自己“,也就是当前元件,而刚刚在第一个菜单项上编辑的交互用例恰恰也是点击时选中【当前元件】,所以,可以直接复制第一个菜单项上的交互用例到其它菜单项上使用。我们在第一个菜单项的触发事件【鼠标点击时】上点右键进行复制,然后分别点中其它两个菜单项元件,用快捷键Ctrl+V进行粘贴。(图107)

107

(图107)

到这里,菜单项唯一被选中的效果制作完成。

备注:

1、当前元件指当前被添加用例的元件;与之对应的还有目标元件,就是在交互中被控制的元件;

2、选中状态值为“true“,表示元件被选中或者说选中状态为”真“。在Axure通常会有三种状态就是true、false和toggle,True代表真或成立,False代表假或不成立。toggle代表在True和False两种状态中切换。


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

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

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

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载17)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 赞一个!
    十年一觉莫忘梦2015-09-06 17:35 回复
  2. 不写组名不行吗???
    菜鸟2015-09-20 16:55 回复
    • 小楼一夜听春语
      不行
      小楼一夜听春语2015-09-21 09:11 回复
    • 不写组名,就不能成为一个选项组。
      一默如雷2015-09-22 14:24 回复
  3. 楼哥,您这连载 大概 能连载多少篇哈
    妮妮2015-10-04 20:58 回复
    • 小楼一夜听春语
      还有一些
      小楼一夜听春语2015-10-05 20:19 回复
  4. 我是一网络小白,谢谢小楼让我有了学习的地方,受益匪浅
    Sunny2015-11-04 22:47 回复
  5. 建议可以加一个实际效果演示动画,比较方便快速理解要做什么。
    雪海2015-12-11 10:30 回复
    • 我认同这个观点,不太清楚本节的教学任务是什么
      sky2016-01-26 21:09 回复
  6. AXURE自带的Classic Menu功能实现的就是这个吧?
    狄火火2015-12-30 21:42 回复
  7. 为什么我的预览时默认选中了第三个
    小丸子零零72016-09-20 15:42 回复
    • 因为你的选项组勾选了“禁用”
      which2017-01-19 10:46 回复