产品设计-搜索框

作者: 简里的简书 | 来源:发表于2018-08-05 16:57 被阅读26次


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. 搜索到目标项目,点击匹配到的某一个项目(搜索策略);没有对应搜索答案,则返回“无匹配结果”

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

相关文章

  • 产品设计-app搜索框-搜索功能

    产品设计-app搜索框-搜索功能 思考一:是否需要搜索框 搜索框的设计主要方便用户快速找到相关内容,涉及到大量线上...

  • 产品设计-搜索框

    1.什么是搜索框? 搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。 目的一:搜索引擎的入口,如go...

  • 搜索框控制器问题总结

    最简易的搜索框控制器 设置搜索框uisearchBar的背景色 设置搜索框弹出的背景色 去掉搜索框的黑线 修改光标颜色

  • 子类控件-快捷代码

    按钮 搜索框 点击跳转 搜索框 点击搜索 KVO 保存图片 判断viewLoad是否加载 for 循环

  • 搜索框

    #import "RootViewController.h" //编辑搜索框需要遵守两个协议: //UISearc...

  • 搜索框

    来一张效果图看看,在这里不能传视频,(鼠标放置时,搜索框变长,背景颜色改变): 先来看一下HTML代码,很简单,就...

  • 搜索框

    https://my.oschina.net/u/2340880/blog/509756 (搜索框的详细属性方法)...

  • 搜索框

    使用type=search的元素 在元素内,使用appearance:none 使用伪元素,去掉不必要的样式 以上...

  • 搜索框

    最近自己在写一个APP,其中需要实现搜索框搜索功能,于是乎就想写篇博客介绍下UISearchController和...

  • 搜索框

网友评论

本文标题:产品设计-搜索框

本文链接:https://www.haomeiwen.com/subject/ntcrmftx.html