Axure常用交互效果制作

标签: 资料报告 Axure | 发表时间:2011-09-16 20:51 | 作者:P迪 章明
出处:http://www.alibuybuy.com

本文旨在分享一些在Axure中,相对复杂但又常见的交互行为的制作方法,本期包含带提示的文本框拖拽效果。

1.带提示的文本框

将提示信息放置于文本框内是一种常见的交互方式。当文本框获得焦点时,提示文字消失。当文本框失去焦点时,提示文字重新显示出来。现在就让我们看下这种控件的制作方法。

第一步:

从widget库中拖出text field控件。双击控件在其中输入提示文字。然后在widget properties面板里,为该text field写入标签:“find people”。

第二步:

双击widget properties面板里的,然后在打开的case editor中,点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。 设置如下图所示:

点击“OK”保存设置退出Set Value Editor和Case Editor。

 

第三步:

双击widget properties面板里的,然后在打开的case editor中,点击Add Condition,在Condition Builder里设置如下:

(该步骤的目的是,当用户在text field里面输入值之后,text field失去焦点时显示用户输入的值,而不再显示提示文字。)

点击“OK”保存设置并退出Condition Editor,然后再Case Editor中,点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。 设置如下图所示:

点击”OK”保存设置退出Set Value Editor和Case Editor。

 

至此带提示的文本框的制作就结束了,按“F5”可在浏览器中查看效果~

 

2.拖拽

在设计中应用拖拽,可以直观有趣的替代移动、复制、添加、删除等操作。在Axure中,拖拽效果的实现相对复杂。具体如下:

第一步:

从widget 库中拖出一个矩形,双击添加文字“拖拽物”。在矩形上点击右键,选择Convert – Convert to Dynamic Panel。然后在widget properties面板里,为该矩形写入标签:“拖拽物”。

 

第二步:

选中该矩形,在软件右侧区域中的“组件属性(Widgets Properties)”中选择“交互(Interactions)”面板,双击“OnDragStart”, 在Case Editor中设置如下:

点击“OK”后保存设置并退出Case Editor。该步骤是为了保证在有多个拖拽物存在的时候,被拖动的拖拽物总是在最前面,不会被其他的拖拽物所遮挡。

点击“OK”后保存设置并退出Case Editor。

 

第三步:

双击“OnDrag”, 在Case Editor中设置如下:

注意此处在右下角的Move下拉菜单中默认是“with drag”,也就是说拖拽物会完全跟随鼠标移动。如果是选择“with drag x”,则是跟随鼠标x轴(水平)移动,垂直方向位置不变。如果是选择“with drag y”,则是跟随鼠标y轴(处置)移动,水平方向位置不变。

 

第四步:

双击“OnDragDrop”, 在Case Editor中设置如下:

注意此处在右下角的Move下拉菜单中默认是“to x,y beofore drag”,也就是说拖拽物在鼠标左键松开的时候,会回到起始位置。如果此处选择“with drag x”,则拖拽物停留于鼠标x轴坐标处。如果是选择“with drag y”,则拖拽物停留于鼠标的y轴坐标处。

点击“OK”后保存设置并退出Case Editor。

 

至此最简单的拖拽效果就已经实现了。按“F5”可在浏览器中查看效果。

 

写在最后

哈,这次就先分享这么多,希望大家能通过这两个小小的例子,能够更加熟悉Axure中Case Editor、Condition Builder和Set Value Editor的使用方法。如果有什么问题,欢迎大家交流指正~

来源:http://www.sndaued.com


© 推荐 for 互联网的那点事, 2011. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

Axure RP Pro 教程:注释annotations

Axure组件值传递妙用

利用Axure封装视觉标准

Axure中级互动设计3—设计多层选单

Axure高级互动设计1—设定逻辑条件
无觅

Feed enhanced by Better Feed from Ozh

相关 [axure 效果 制作] 推荐:

Axure常用交互效果制作

- snip.wu - 盛大游戏UED 专注用户体验,改变生活,让互动娱乐更精彩
本文旨在分享一些在Axure中,相对复杂但又常见的交互行为的制作方法,本期包含带提示的文本框和拖拽效果. 将提示信息放置于文本框内是一种常见的交互方式. 当文本框获得焦点时,提示文字消失. 当文本框失去焦点时,提示文字重新显示出来. 现在就让我们看下这种控件的制作方法. 从widget库中拖出text field控件.

基于axure的PRD协作

- - 幻风阁|kent.zhu'sBlog
大约1年多前我写了一篇《 基于axure的PRD写作思考》,其主旨思想是将文档版本的PRD与线框图及流程图结合起来,统一由axure来输出,降低PM与研发之间的沟通成本及交付物的传递成本. 当时这个文档是基于我做Web端产品设计的经验为蓝本完成的,这1年多来我从Web端完全转到Mobile端,还在继续的使用着这套方法.

基于Axure的PRD写作思考

- 超群 - 幻风阁|kent.zhu'sBlog
从半只脚迈入产品经理这个大门的那天起我就被2个文档的名称深深的纠缠着,他们是市场需求文档(MRD)、产品需求文档(PRD). 先不论你是什么方向的PM,这2个玩意一定会一直伴随你的Title跟着你. 这2个文档在不同的团队中有不同的叫法和写法,我也见过有团队的MRD其实就是PRD,不沾半点商业市场分析的边的,当然,这些不是本文探讨的内容.

AXURE在原型设计中的应用

- 超群 - 互联网的那点事
产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动. 就我个人而言,目前使用频率最多,最高效,交互效果最好的原型工具是axure. 今天给大家介绍一些我在工作中使用axure的经验.

设计增强型Axure组件的必要性

- ninickck - 盛大游戏UED 专注用户体验,改变生活,让互动娱乐更精彩
        在交互设计师的工具箱当中,相信 Axure是必不可少和得心应手的交互原型设计工具. 今天主要想探讨在工作中不断提炼和积累增强型组件(Enhanced-Widgets) 的必要性,以便提高工作效率. 同时,提供了本人制作的一套增强型组件. 什么是组件(Widgets).   组件面板是用来进行线框图和流程图的设计.

提高Axure设计效率的10条建议

- - 人人都是产品经理
Axure 是创建软件原型的快速有力的工具. 上手很容易,但是,其中存在一个危险. 这款软件是如此的直观以至于很多用户可以在没有接受过任何正式培训的情况下进行使用. 他们可能不知道的是他们可能没有以恰当的方式来使用 Axure. 作为一位有经验的用户体验设计师,我很少在画一页的时候第一次就能把它设计正确.

快速产品原型设计软件:Axure RP Pro 6汉化绿色版

- Keen - 精品绿色便携软件
Axure RP Pro是一个产品经理必备的交互原型设计工具,能够高效率制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML模版等. Axure RP Pro是专为Rapid Prototype Design而生,它可以辅助产品经理快速设计完整的产品原型,并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员,如UI、UE等等,并在讨论中不断完善.

[转载] 在熟练使用2B铅笔前,请不要打开Axure

- - 牛国柱
前言:本文为 @叶铮BJ 同学的推荐,非常精彩,所以转载到这里. 本文与前一篇文章《 如何有效使用Axure. 》的思想一致,都在反对对Axure的过度使用,但这篇文章更细致的、结合用户体验要素的5层级理论,分析了应该在那个层级使用铅笔,那个层级使用Axure. 顺便提一句:本文在结构层的信息架构设计可以用脑图软件来实现,如MindManager、FreeMind、XMind,推荐XMind.

Pola – 轻松制作宝丽来效果照片

- slackware - MacDocks(苹果软件,软件下载,苹果资讯,iPod,iPhone,iPad,Mac Tips)
Pola 一款简单的宝丽来效果照片制作小工具,实现宝丽来效果很容易. 只需拖照片到Pola软件的窗口,等一会儿,然后点击它来保存起来.