产品设计-搜索框


1.什么是搜索框?

搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。

目的一:搜索引擎的入口,如google、bing、百度等

目的二:内容搜索/导航定位

目的三:热搜推广/广告推广等

目的四:定位选项,选择框中搜索。

2.搜索为什么是一个重量级的行为?

搜索类用户尤其的重要,假设该用户属于app/网站的目标群体,他带着搜索目的而来,有效的返回搜索结果将有利于该用户的体验。反之,该搜索目的没有在产品内有效达到,则活生生的将用户逼去了竞品市场。

3.搜索的形式

(1)隐藏,如微信,下拉时出现搜索框;

(2)明显,首行展示搜索框,如淘宝,豆瓣;

(3)支持图片识别,用户可以通过上传图片进行搜索,以图识图,如淘宝;

(4)语音填写搜索内容,通过语音识别减少用户输入的成本;

(5)多项选择

4.设计搜索框的注意点

(1)使用放大镜

当前放大镜代表搜索的概念,已经是普遍用户意识了

(2)  位置:右上角

下面的图表来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研究:它显示了参与调查的142名参与者针对网站中的搜索表单的位置的预期情况。研究发现,对于用户来说,搜索框最佳的位置是网站上每个页面的左上方或右上方——用户可以使用常见的F形浏览模式轻松地找到它。

搜索框最佳的位置是网站上每个页面的左上方或右上方

(3) 搜索框大小:如果app或网站 字符较长的内容 搜索较多,则需要特别注意,不要涉及过短,以避免 字符无法正常显示。

(4)支持自动匹配,下拉菜单支持自动匹配

(5)保留用户输入

(6)无结果提示

(7)给用户想要的预期结果,搜索排序,这个是最为重要的。

5.搜索框的用户交互

step1. 搜索icon或者搜索框展示(搜索提示文字,如 “搜索歌手”)

step2. 搜索框输入聚焦(点击搜索框开始输入)

step3. 搜索自动匹配(用户输入超过几个字符时,下拉菜单需要进行自动匹配)

step4. 搜索到目标项目,点击匹配到的某一个项目(搜索策略);没有对应搜索答案,则返回“无匹配结果”

对于信息/内容型搜索,搜索策略是核心,如何精准的返回用户期望搜索的答案是最为重要的!而交互体验则是加分项或者减分项。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,009评论 3 119
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,245评论 4 61
  • 千隔伊人何安眠, 透窗细雨影孤灯。 欲与有朝长相思, 幻境万般初相见。
    匠門装饰周佳伟阅读 143评论 0 0
  • 1、下载支付宝SDK 2、进入支付平台注册应用 3、获取支付相关的 '私钥' 和 '密钥' 下载macOSX版本 ...
    MdWhat阅读 1,577评论 2 6
  • 昨日单位组织秋游,要早起集合。提前一天晚上入睡前,告诉孩子妈妈不能送她到幼儿园,因为要早起,单位有事,只能爸爸送。...
    baby妈咪阅读 141评论 0 0