交互基本功:如何设计一个好用的搜索框?

搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。


搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。

交互基本功:如何设计一个好用的搜索框?

1.什么是搜索框?

搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。搜索框几乎存在所有的网站和APP中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索(框)尤其重要。

2.搜索框的应用场景

设计过那么多的搜索框,你所不知道的是,它还有以下几种细分应用场景。

(1)作为搜索引擎入口

说到搜索,我们一般人首先会想到的是搜索引擎,例如谷歌,而在搜索引擎中,首页十年始终如一的搜索框最深入人心。反过来说,正是因为搜索引擎巨头的成功,搜索才越发备受重视,搜索框也是几乎成为网站或者APP的标配。

交互基本功:如何设计一个好用的搜索框?

(2)用于查找内容

典型的应用场景,放在网站顶部之类的显眼位置,用于查找网站中的内容,一触即达。

交互基本功:如何设计一个好用的搜索框?

(3)用于快速定位

查找内容的变种,例如,在手机“设置”中,当设置的选项较多时,通过搜索框进行搜索,可以快速定位到想要的设置项。

交互基本功:如何设计一个好用的搜索框?

(4)用于活动推荐

一些电商网站,巧妙利用搜索框中预置的词,可以达到活动推荐的效果,例如下图中搜索框内置“油烟机”一词,用户只需通过点击搜索即可直达结果页或者活动页面。

交互基本功:如何设计一个好用的搜索框?

3.搜索框的类别(APP)

什么?搜索框还分类别?不是都是放大镜+线框组合么?但是,搜索框还有以下这些类别区分。

(1)隐藏式搜索框

只提供一个放大镜图标,需要再点击图标跳转到搜索页面;或者是需要下拉时才出现,例如微信首页的搜索框。

(2)普通搜索框

通常固定在页面顶部,包含搜索框的普通要素(放大镜+线框)。

(3)有提示搜索框

此类搜索框的特征是,中间有提示语,通常这类的都可以复合搜索,例如可以搜名称或者代码。

(4)含图片搜索框

顾名思义,与普通搜索框相比,增加可以“以图识图”的搜索功能,例如淘宝就可以通过上传图片,搜索与图片同类的商品。

(5)带语音搜索

语音交互是新的交互热点,相比普通搜索框,带语音搜索框可以明显减轻用户手工输入文字的烦恼,现在语音识别的成功率已经达到了很高的地步。

(6)精准分类搜索

与其他搜索框相比,此类搜索框可以先选择分类,再输入关键词搜索分类下的内容,亚马逊的习惯做法,在商品分类较多,但又需要分类检索的时候适用,日常生活中可见超市日用品、食品等分类法。

交互基本功:如何设计一个好用的搜索框?

4.搜索框的交互设计(APP)

设计一个搜索框,不比设计一个页面简单,甚至可能更复杂,它涉及到用户的精准转化,属于看起来简单,但是实现复杂的功能之一。

(1)样式

使用约定俗成的样式(🔍+线框),不要增加额外的“搜索”按钮,巧妙利用手机提供的键盘的自带“搜索”按钮。

交互基本功:如何设计一个好用的搜索框?

(2)位置

放在页面顶部位置,而不是页面中部,更符合用户的认知习惯。

交互基本功:如何设计一个好用的搜索框?

(3)搜索过程及状态

如图所示,搜索框搜索的过程共分为四种状态:默认、获取焦点、输入中、结果展示。交互设计的工作就是要清晰展示各种状态对应的反馈及具体页面细节呈现。

1.默认状态

默认展示搜索提示词

2.获取焦点

跳转到搜索页,并展示热门候选词,最近搜索记录

3.输入中

根据输入的内容展示联想结果,如果候选词包含在多个分类中,例如,烟花可能是一个歌手的名字,还有可能是一首歌曲的名称,还需要提供分类展示页面。

4.结果展示

用界面或者文字描述按照何种排序规则展示结果,如何展示。

交互基本功:如何设计一个好用的搜索框?

(4)搜索结果

下面4个要点能让搜索结果更专业,也能体现交互设计师在细节方面的把控能力。

1.给用户想要的预期结果

用户搜索的目标就是想得到预期需要的东西,搜索结果要符合用户预期,且最吻合的结果排在最靠前。

2.保留用户输入

保留用户输入的内容,就像记住朋友的名字一样,这是最基本的礼节。

3.自动纠偏

当年搜狗输入法其中一个制胜点就是自动纠正用户输入的错误拼音,给出和错误拼音最贴切的(正确)结果。搜索结果同理。

4.无结果提示

需要提示用户输入的内容无结果,比“无结果”更好的方式是“给用户推荐其他内容”,例如,在下图中,“无结果”提示语下方可以根据用户口味、或者当下热门推荐一些歌曲。

交互基本功:如何设计一个好用的搜索框?

最后,请思考一个问题:为什么带语音/图片搜索的按钮通常放在搜索框的最右侧?而不是最左边?

 

本文由@夜雨 原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23103/

(0)
CatherineCatherine
上一篇 2017-05-04 00:53
下一篇 2017-05-04 02:57

相关推荐

  • 转化率低是设计师的问题?这锅我们不背!

    市场反馈好不好是由那些自带话语权或流量的人或产品决定的,这些人或产品既左右了大部分人的喜欢和习惯,又代表了大部分人的喜欢和习惯。转化率=(产生购买行为的客户人数 / 所有到达店铺的访客人数)× 100%

    2017-08-04
  • 色彩如何应用在交互设计中?

    对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(当然,前期也经过了讨论,在纸上也画了交互的流程了)。对于时间不充分的时候来说,这样是会节约一部分时间。但是,这样经常会带来一个弊端:交互考虑不充分。为什么会这么...

    2018-04-26
  • 当产品进入碎片迭代,设计师可以做些什么?

    也许是刚毕业的你最该看的一篇干货。如果你已经习惯了等别人给需求,然后开Photoshop,再等别人说改哪里就改哪里,肯定谈不上工作成就感。想掌握设计的主动权,证明自己不仅是个画图的,建议把这篇文章提到的3个方法好好实践一番,绝对会有大收获(严肃脸)。

    2017-06-01
  • 仍停留在1999年水平的通知功能,何时能更智能?

    20年过去了,一切都在发展,唯独通知还停留在1999年的水平。——@mikeindustries20年过去了,一切都在发展,唯独通知还停留在1999年的水平。——@mikeindustries

    2017-05-25
  • 令人惊叹的移动交互设计欣赏

    dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟! Dash Dash Jeff Broderick   Rally Inte…

    2016-05-24
  • 你不知道的交互验收:定义、问题和如何解决

    工作中才发现,交互设计师的职责,不仅是在前期的产出物交付完成即可,更多的任务是在后期的交互验收和优化推动截断。

    2017-05-15
  • 【求职招聘】绝对干货

    阿里巴巴1招聘岗位1.数据研发工程师2.java研发工程师3.机器学习算法工程师(研究生及以上)4.客户端开发工程师5.前端开发工程师6.产品经理(对候选人要求高,应聘人数多,淘汰率高,投递前望客观自我评估)7.运营等(对候选人要求高,应聘人数多,淘汰率高,投递前望客观自我评估)2岗位要求计算机与理工科等相关专业,本硕博皆可3岗位说明1.申请过内推、网申、被拒绝过的无法再次内推,请勿投递2.理论上官网上面的实习岗位都可,阿里集团及下属公...

    2018-03-26
  • 【招聘】阿里、腾讯、网易、百度、亚马逊、德勤、滴滴、京东、华兴资本、去哪儿、蚂蚁金服、特斯拉等

    上海|携程+实习携程运营实习生工作内容 一周内入职1、携程app微领队社交功能“结伴”、“旅友圈”运营(删违规帖+内容运营)2、旅途聚会物料负责、寄送、整理3、旅途聚会新产品冷启动4、聚会产品上货至其他平台(搬砖+运营)5、公用区图片库等内容整理6、大型活动报名信息收集+统计(不定期,非日常)7、临时日常行政工作协助加分项1、熟练excel、ppt、word,书面表达佳2、足够耐心、细心,强责任心3、有办公室实习经验4、可来携程坐班至少...

    2018-04-08
  • 为什么重视用户体验的公司最后死掉了?

    今日头条候选:易到完成股权变更,乐视仍未完全退出;“ofo小黄车”被诉商标侵权;今天,给大家推荐的头条是「黑马高管营」导师刘爽从管理决策角度分享如何做决策、决策的依据以及避免陷入的误区,值得每一位管理者仔细阅读。【黑马高调头条】第185期文 | 创业黑马学院什么是管理决策论?管理决策论就是在管理中做各种决策的相应依据。很多创业公司的折腾闹剧现象,就是管理层管理决策弱的结果,如果具备基本的make sense,有些“学费”不是一定要交的,...

    2018-01-30
  • 我们如何创造先进的经验生态系统?

    "物联网是有趣的因为它迫使我们重新思考我们有与对象的交互范例 — —,东西是不同的关于智能对象与 '哑巴' 一个与我们接触"Thomas Wendt 写在他最近的 UX 杂志文章,"互联网的东西。"和手上的工作

    2015-01-03