文本框中自动完成的应用
近来积累了一些关于自动完成的应用方式,今天将其扩展延伸并整理了些常见的应用方法供大家一起学习。
“自动完成”的设计思路源自于Poka-yoka预防机制。是一种自动纠偏方法,在生产中用以防止人为失误发展成为最终产品缺陷。
网页设计中自动完在输入框的应用已很广泛,属于反应性界面的强大模式。能够尝试猜测用户输入的文字,并且动态的搜索出适配的结果并推荐给用户,辅助完成输入。目的是避免用户打错字,起到提示作用,智能预测用户心理期望,从而确保他们的搜索更有效率。
优点:
“自动完成”输入框能预防错误。用户经常在输入几个字的情况下就能在推荐列表中发现正确的名称,而不会因为笔误找不到适配的搜索结果。
防止用户为已经在存在于数据中的名称创建多条数据库记录。
这种输入框列出的搜索结果不会分页。因为搜索结果是随着输入的文字增加而变化的,所以就在当前页面中。因此完全没有必要点开“下一页”,查看其余的结果。
这个功能的灵活性使用户更加信任这个网站,使事情变得简单可依赖。虽然这个功能有很多值得夸赞的地方,但它也同样有一些局限性。
局限性:
当用户搜索一些小范围的数据时,例如某个学科的分支目录,他会很有用,但是对于在google和yahoo 这样的网站中进行广域搜索的用户来说,并不一定有用。
首先,那些盯着键盘输入文字的用户通常注意不到推荐列表,虽然已经把一切都送到眼前,他们还是看不到。有些人偶尔会在输入完想要的内容后抬头才发现推荐列表,但他们往往都是敲了回车键才抬头,所以根本没看清楚列表里面是什么。
其次,用户会因为推荐而放弃自己先前的主张,但其实他们自己想输入的文字很可能比推荐的词汇更加有效。原因是用户认为系统推荐的将会产生更有效的结果,也有可能他们认为这些搜索词是开发者希望他们使用的词汇。
“冷启动”是个问题,也即最初可能没有任何用户行为数据。这时候需要结合热点挖掘的方式给用户一个最初的感受,不过需要很好的把控质量,并进行灰度放量,AB test
suggest的一些质量评测点
1. 垃圾词过滤。比如带无意义符号的查询串要进行处理
2. 意义重复的query,比如“天上人间照片”和“天上人间的照片”属于同意
3. 在去重复基础上考虑多样性
4. 匹配模式,前缀匹配、后缀匹配
5. 中英文(拼音)混合串的质量
6. 错别字智能纠错
7. 政治、黄词、零结果等的过滤
8. 新闻类检索需要引入时新性
9. 如果有类似阿拉丁的直达区,考虑直达区策略以及展示样式
10. 数据方面主要看CTR。但是要注意,用户只要输入query,就会调用suggestion,多一个查询词,suggest就又检索一次,如果以单纯的检索量做分母是不合适的。应该以一次完整的检索行为作为分母,以点击提示词的次数为分子。
Google suggest是Google搜索引擎最重要的人性化服务之一,即在搜索栏输入框内使用了此功能,使用户在输入搜索关键词时能及时调整关键词推荐列表,以获得最需要的搜索结果。其中通过各种搜索请求的流行度来确定这些预测推荐请求的排列顺序等。目前中国的版本已经没有这个功能了
百度
云云网
在suggestion中进行分类,将搜索到的关键词信息按照类别区分,以下为人和话题的分类,用照片来表示人,用创建者来表示话题。
suggestion的特点是需要快速,键盘按下去,提示马上就出来。它用的是前缀匹配或后缀匹配算法等,也就是说提示的内容中和输入的关键词是一样的内容都会跳到你的面前,这个用简单的查找就可以做,所以很快,目前的列表是按照时间排序,选取了部分较新的问题呈现。下图为填写标题文本框suggestion应用
推荐话题标签是用话题搜索来做的,从原理上来说,需要先对问题内容进行分词,也就是说要理解你的问题是什么。“北京中国”和“中国北京”都会被拆分成相同的问题,这样就可以更准确的命中结果,相应的问题就是时间会比较长,不能实时显示,所以在问题和推荐中间加入问题描述文本框也是可以起到拖延时间的作用。
Quora
A fancy Apple.com-style search suggestion (演示地址)
这是一个使用HTML/CSS,jQuery,MySQL PHP等技术实现的Search Suggestion。
TextboxList (演示地址)
这个Mootools插件能够将普通的文本输入框,转换成拥有Autocomplete功能风格类似于Facebook的文本输入框。支持任意类型的数据源(XHR、Json)。
Tokenizing Autocomplete Text Entry (演示地址)
一个jQuery插件能够让用户从一个预设的列表中,选择多个项目。并提供Autocompletion功能来帮助用户搜索项目。支持通过CSS控制和定制布局。能够缓存搜索结果减少服务器加载次数。支持用鼠标或键盘来选择项目。提供平滑的动画数据加载效果。
有道
有道为suggest添加三栏显示、网页预览等功能,帮助用户更快的找到答案。在优酷等视频网站中也有此功能。
优酷
参考文献
<http://www.zhihu.com/question/19571974>
<http://paranimage.com/33-javascript-autocomplete-scripts/>
<瞬间之美>
“自动完成”的设计思路源自于Poka-yoka预防机制。是一种自动纠偏方法,在生产中用以防止人为失误发展成为最终产品缺陷。
网页设计中自动完在输入框的应用已很广泛,属于反应性界面的强大模式。能够尝试猜测用户输入的文字,并且动态的搜索出适配的结果并推荐给用户,辅助完成输入。目的是避免用户打错字,起到提示作用,智能预测用户心理期望,从而确保他们的搜索更有效率。
优点:
“自动完成”输入框能预防错误。用户经常在输入几个字的情况下就能在推荐列表中发现正确的名称,而不会因为笔误找不到适配的搜索结果。
防止用户为已经在存在于数据中的名称创建多条数据库记录。
这种输入框列出的搜索结果不会分页。因为搜索结果是随着输入的文字增加而变化的,所以就在当前页面中。因此完全没有必要点开“下一页”,查看其余的结果。
这个功能的灵活性使用户更加信任这个网站,使事情变得简单可依赖。虽然这个功能有很多值得夸赞的地方,但它也同样有一些局限性。
局限性:
当用户搜索一些小范围的数据时,例如某个学科的分支目录,他会很有用,但是对于在google和yahoo 这样的网站中进行广域搜索的用户来说,并不一定有用。
首先,那些盯着键盘输入文字的用户通常注意不到推荐列表,虽然已经把一切都送到眼前,他们还是看不到。有些人偶尔会在输入完想要的内容后抬头才发现推荐列表,但他们往往都是敲了回车键才抬头,所以根本没看清楚列表里面是什么。
其次,用户会因为推荐而放弃自己先前的主张,但其实他们自己想输入的文字很可能比推荐的词汇更加有效。原因是用户认为系统推荐的将会产生更有效的结果,也有可能他们认为这些搜索词是开发者希望他们使用的词汇。
“冷启动”是个问题,也即最初可能没有任何用户行为数据。这时候需要结合热点挖掘的方式给用户一个最初的感受,不过需要很好的把控质量,并进行灰度放量,AB test
suggest的一些质量评测点
1. 垃圾词过滤。比如带无意义符号的查询串要进行处理
2. 意义重复的query,比如“天上人间照片”和“天上人间的照片”属于同意
3. 在去重复基础上考虑多样性
4. 匹配模式,前缀匹配、后缀匹配
5. 中英文(拼音)混合串的质量
6. 错别字智能纠错
7. 政治、黄词、零结果等的过滤
8. 新闻类检索需要引入时新性
9. 如果有类似阿拉丁的直达区,考虑直达区策略以及展示样式
10. 数据方面主要看CTR。但是要注意,用户只要输入query,就会调用suggestion,多一个查询词,suggest就又检索一次,如果以单纯的检索量做分母是不合适的。应该以一次完整的检索行为作为分母,以点击提示词的次数为分子。
Google suggest是Google搜索引擎最重要的人性化服务之一,即在搜索栏输入框内使用了此功能,使用户在输入搜索关键词时能及时调整关键词推荐列表,以获得最需要的搜索结果。其中通过各种搜索请求的流行度来确定这些预测推荐请求的排列顺序等。目前中国的版本已经没有这个功能了
百度
![]() |
云云网
在suggestion中进行分类,将搜索到的关键词信息按照类别区分,以下为人和话题的分类,用照片来表示人,用创建者来表示话题。
![]() |
suggestion的特点是需要快速,键盘按下去,提示马上就出来。它用的是前缀匹配或后缀匹配算法等,也就是说提示的内容中和输入的关键词是一样的内容都会跳到你的面前,这个用简单的查找就可以做,所以很快,目前的列表是按照时间排序,选取了部分较新的问题呈现。下图为填写标题文本框suggestion应用
![]() |
推荐话题标签是用话题搜索来做的,从原理上来说,需要先对问题内容进行分词,也就是说要理解你的问题是什么。“北京中国”和“中国北京”都会被拆分成相同的问题,这样就可以更准确的命中结果,相应的问题就是时间会比较长,不能实时显示,所以在问题和推荐中间加入问题描述文本框也是可以起到拖延时间的作用。
![]() |
Quora
![]() |
A fancy Apple.com-style search suggestion (演示地址)
这是一个使用HTML/CSS,jQuery,MySQL PHP等技术实现的Search Suggestion。
![]() |
TextboxList (演示地址)
这个Mootools插件能够将普通的文本输入框,转换成拥有Autocomplete功能风格类似于Facebook的文本输入框。支持任意类型的数据源(XHR、Json)。
![]() |
Tokenizing Autocomplete Text Entry (演示地址)
一个jQuery插件能够让用户从一个预设的列表中,选择多个项目。并提供Autocompletion功能来帮助用户搜索项目。支持通过CSS控制和定制布局。能够缓存搜索结果减少服务器加载次数。支持用鼠标或键盘来选择项目。提供平滑的动画数据加载效果。
![]() |
有道
有道为suggest添加三栏显示、网页预览等功能,帮助用户更快的找到答案。在优酷等视频网站中也有此功能。
![]() |
![]() |
![]() |
优酷
![]() |
参考文献
<http://www.zhihu.com/question/19571974>
<http://paranimage.com/33-javascript-autocomplete-scripts/>
<瞬间之美>
还没人赞这篇日记