快好知 kuaihz订阅看过栏目

 

 

Axure交互小技巧1:百度一下,你就知道

案例来源:百度-搜索界面

案例效果:点击搜索框后搜索框边线变蓝,下方显示最近搜索记录,如图

案例描述:

搜索界面中,包含顶部菜单栏、搜索栏和底部网站备案信息等。当焦点进入搜索框时,搜索框边框变为蓝色,同时下方显示出最近搜索记录;失去焦点时,恢复灰色,下方最近搜索记录收起。

元件准备:

包含命名:

矩形(搜索框):搜索输入框

文本框(用于输入文字):文本框

矩形(搜索按钮):百度一下,按钮

思路分析:

输入框的样式在两种不同状态下切换,可以通过交互样式来实现;

文本框获取焦点时,呈现选中的样式;

文本框失去焦点时,呈现未选中的样式。

操作步骤:

1、设置元件“搜索输入框”的选中时交互样式为淡蓝色边框;

2、设置搜索文本框【获取焦点时】,【选中】元件“搜索输入框”;

事件交互设置:获取焦点——元件——设置选中——选中——配置动作(选择搜索输入框)——设置状态值为true——确定

事件交互设置:失去焦点——元件——设置选中——取消选中——配置动作(选择搜索输入框)——设置状态值为false——确定

至此,点击搜索输入框边线变蓝已经实现,接下来我们看如何让下方显示搜索历史。

思路分析:

点击搜索框下方显示出最近搜索历史,可以通过动态面板+交互来实现;

鼠标单击时,显示动态面板;

鼠标移开时,隐藏动态面板。

操作步骤:

1、设置动态面板信息

拖进一个动态面板,调整大小

双击动态面板,弹出动态面板管理,设置名称,双击命名好的“列表”,进入动态面板页面

设置动态面板列表信息

勾选隐藏动态面板

2、设置文本框单击时交互事件,触发显示动态面板

事件交互设置:鼠标单击时—元件——显示/隐藏——显示——搜索历史——确定。

事件交互设置:鼠标单击时—元件——显示/隐藏——隐藏——搜索历史——确定。

搜索建议:交互  交互词条  一下  一下词条  技巧  技巧词条  知道  知道词条  百度  百度词条  
原型

 作为PM,你居然不知道Axure...

提到Axure,这可是绝大多数PM童鞋靠着吃饭的家伙事儿。Axure被很多人定义为一个以交互见长的原型设计工具。很多初入坑甚至入坑甚久的PM为画出炫酷的原型挖空...(展开)

原型

 Axure RP官方教程翻译(9...

最后10篇(前8篇点击查看)看看是否有自己感兴趣的模块,每个功能都挺有意思的。这10篇分别是:第 9篇:账号登录第10篇:旋转式幻灯放映机第11篇:自动点击区域...(展开)

原型

 Axure RP 9 教程:页面...

本期效果是一个三级拖动,第一次点击弹出部分列表,向上拖动时显示完整的列表,向下拖动时显示最低级的列表。一起看看怎么操作~本期效果:本期效果是一个三级拖动,第一次...(展开)