AxureRP教程–搜索关联效果

用AxureRP来模拟搜索效果主要是用到了它的条件判断功能,根据输入搜索的内容不一样,显示不同的搜索结果,本身只是要模拟效果,所以一般把搜索功能实现即可。这个效果也用到了动态面板,这里的设计是使用其可隐藏,可切换显示页面两个特性,还有一个单行文本框和一个按钮组件。

搜索效果最常见的是在搜索引擎上应用,现在也经常能看到各个网站的站内搜索,几乎已成标配功能,搜索功能也进化的越来越完善和人性化,这里演示的只是表面上的一些功能,不涉及深层次的搜索引擎算法等,这个就太高深了。以前搜索都是输入关键词后点搜索按钮然后出结果,现在会有关键词关联提示,一种是搜索引擎的输入某个词后会显示与这个词相关或相类似的部分关键词,一种是站内搜索的输入某个词后显示分类型的搜索内容,如微博,会提示要搜索名称含关键词的还是内容含关键词的,对于站内搜索来说,这样分类之后,个人觉得对网站的搜索性能是有帮助的,分类后搜索的范围变小,不需要全站搜索,提高了搜索效率的同时降低了站内资源的占用。

这个例子就是模拟了站内搜索的这种分类功能,依据搜索关键词,提示是搜索标题还是搜索内容,点击相应提示则显示对应的搜索内容,若直接点击搜索按钮,则显示全部搜索结果。实现原理是通过单行文本框的OnKeyUp事件来判断输入内容,进而做出相应提示,通过点击相应提示或者搜索按钮来使下方的搜索结果显示不同的内容。这里页面设计相对简单,主要是理清各个组件间相互所触发动作的逻辑顺序和关系。

实现方式是用单行文本框做搜索输入框,按钮为全站搜索,一个动态面板做关键词提示信息,一个动态面板做搜索结果,其中搜索结果设计四个页面,一是按标题搜索结果,二是按内容搜索结果,三是全站搜索结果,四是无搜索结果。通过OnKeyUp事件,根据输入内容来判断提示信息,并可以点击提示信息触发搜索结果的页面切换,这里提示信息设置了3秒的等待时间,3秒后提示信息消失。搜索结果逻辑是:按标题和内容搜索页面只能由提示信息处点击进入,全站搜索由按钮处点击进入,这里设计的测试实例是关键词上海和北京,其他关键词没有信息提示。

大家通过查看源文件会比较容易明白,这里就不再多解释了。这个例子也可以做成是像金山词霸或者百度、google那样的输一个汉字或字母就显示关联信息的效果,只不过是要多设计几个动态面板的状态,有兴趣的朋友可以自己尝试一下。这里还需要说明的一点就是,千万要记住自己所设计原型的测试实例,否则在演示的时候就没法出效果了,这点非常重要,实在记不住就在旁边加提示信息吧。另外这个实例界面上很简陋,低保真型的,有时间的朋友可以完善下,呵呵。

示例在AxureRP 5.5版本下调试通过

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–搜索关联效果”有1条评论

commenter

2011-12-13增加输入电子邮箱前缀显示各种不同电子邮箱后缀的效果。源文件见IT民工论坛http://bbs.itfarmer.com.cn/read.php?tid-5.html。增加的示例是在AxureRP 6.0下的