徐倩 发表于 2011-4-28 17:10:08

axure 交互设计做输入框文字自动消失和显示以及弹出框

xueshitianqian 发表于 2011年4月28日 14:09:47      今天在webppd网站上看axure一些交互设计时候看了下在输入框中,光标放在输入框提示内容消失、光标移开输入框提示内容显示,用axure 也同样能做的不错,论坛上的朋友写了大概的思路,细节方面没有写完整,让我花费长点时间研究出来了,这回想作为笔记在博客上写下,也方便以后做这个交互的新手参考下。

http://www.hongren.org/upload/交互页面.jpg





1,在交互事件选择onFocus事件,添加交互属性

这里需要注意:选择交互属性“设置变量和组件值”下面只出现“set 蓝色超链接这一排”,我们还需要添加条件,在左上角第一步。如下图所示设置完,后显示两排,条件和结果语句来触发事件。
http://www.hongren.org/upload/交互属性设置.jpg



2,第一步属性操作完成了,别忘了,还有一步光标离开动作设置 onlostFocus事件设置。

注意:这里设置组件值说明,(设置组件属性和条件这里就不说了。)

http://www.hongren.org/upload/交互设置组件值.jpg







3,以上两个事件的交互设置完后,回到操作区看看是否正确 如下图

注意:途中红色框中的,和设置的内容是否一致。仔细检查区别哦。
http://www.hongren.org/upload/注释和交互.jpg



交互一:输入框光标自动显示文字内容和消失内容的交互功能基本完成了。

交互二:登录按钮出现弹窗提示,(在当前页面提示弹窗)。

交互二
1,说明:点击登录按钮,提示登录成功或者失败弹出框。
2,画出动态模板区,在动态模板中画弹出框内容字段。以及关闭按钮.
3,属性:选择隐藏动态面板,蓝色链接选择动态模板。
4,注意:隐藏默认页面动态弹窗,在动态面板管理标签下建新的标签“状态1覆盖即可”

http://www.hongren.org/upload/交互弹窗.jpg





动态面板那个隐藏只是在操作区影藏了,但是在静态页隐藏不了,只能用新的动态模板覆盖了,不知道还有其他办法解决不,希望更多爱好axure 做交互的朋友可以一起交流学习。

徐倩SEO博客:http://www.hongren.org/post/289.html

尹广磊 发表于 2011-4-28 22:36:04

图片和附件的上传方法:
http://www.hiaxure.com/thread-3345-1-1.html

老蔡 发表于 2011-5-4 14:00:22

之前我也做了搜索栏的这个交互效果。用6.0的。做起来稍微简单一点。



尹广磊 发表于 2011-5-4 18:28:47

3# 蔡高泽

这样不好,会把用户输入的内容给清空掉。对于用户已输入的搜索词尽量做保留,以便于用户在此基础上搜索下一个词。

刘玉石 发表于 2011-5-5 09:48:59

恩,最好加一个判断,看用户是否输入了内容
页: [1]
查看完整版本: axure 交互设计做输入框文字自动消失和显示以及弹出框