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

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


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

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

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

相关推荐

  • 最重要的用户体验设计细节恰恰是被忽视的地方

      编者按 : 本杰明·布兰德尔(Benjamin Brandall)是 Process Street 的内容设计师。 我算不上是一个优秀的设计师,事实上我的设计水平还比较糟糕。不过我对设计的理念很感兴趣。我读过和写过很多关于 客户成…

    2015-11-30
  • UED专访 | “看不见的城市”:带你了解城市地下空间

    由广州市人民政府主办、广州市住房和城乡建设委员会承办、《城市·环境·设计》(UED)杂志社协办、广州地铁设计研究院有限公司支持的“看不见的城市——城市市政与公共交通论坛”作为“2017年广州首届国际设计论坛”的四个分论坛之一,探讨城市骨架中更为基础的市政、公共交通的相关问题,共同解读城市发展与设计中重要的一环。我们邀请到了本场论坛的主持人,广州地铁集团副总工、广州地铁设计院总工、住房城乡建设部专家、城市轨道交通和地下工程专家、教授级高工...

    2018-02-08
  • 掌握交互设计思想,从用户视觉心理开始

    什么是交互设计师?在刚刚开始研究交互的时候,我也经常问自己:什么是交互设计师?这两年“用户体验”这个词非常火,以前在技术沟通中经常生硬的用“用户体验”这个词来说服技术,难免有些空洞。其实用户体验不止于产品的交互设计有关,还包含产品的内容和服务、表现形式,大部分情况下产品的内容和服务才是整个用户体验的核心。而我所理解的交互设计就是把表现形式、内容和用户行为相互协调的一门学问,是影响用户体验的关键因素之一。另外,按国内就业情况来看,目前交互...

    2018-04-26
  • 让手势设计带你的产品体验“飞”…

    小Q在《细节体验|你离用户只差一个好的交互》一文中较为详尽的归纳了反馈给用户体验带来的好处,那么,今天我就继续讲讲“动作”(即为手势)是如何让你的产品体验可以“飞“起来的。本文所指的直接操作内容的自然人机交互方式,不仅符合用户的感知习惯,也能很好地节约屏幕空间,创造沉浸式的阅读体验。一是滑动过程中页面要跟随手指,这样能让用户形成对产品的控制感和更明确的层级感,二是滑动过程中,用户的视觉可以看到的空间更整洁,体验更纯粹。

    2017-05-17
  • 网页设计的五个实际应用的趋势

    无一例外,每当我高兴的点击类似名为“今年网页设计趋势”的链接后都会感到失望。如果你写了一个2016年设计趋势列表,其中包括了全屏视频背景那你应该回去看看一些网站之前的各个版本。总之,闲话少说,下面列出五个今年上班年的实际趋势。

    2016-08-17
  • 如何进行AR交互设计?

    AR类产品的出现,可能是第一次实现虚拟世界与现实世相互“融合”,完成屏幕的“跨越”,人机交互设计也开始从二维平面迈向三维世界。然而,由于市场和技术的因素,AR产品的人机交互界面仍然处于早期,各种理念和方法仍处于逐步形成与试验阶段。通过对现有AR产品交互设计的调研和思考,以及现有移动产品的对比,本文将阐述一些方法,以供思考和交流。AR效果的呈现有多种方式,市场在短期内主要分为基于手机等移动设备的移动AR和基于头显设备的AR眼镜(包括一体机...

    2018-04-29
  • 快来感受一下美帝的体验创新之旅

    追逐着2014年最后一天的时光尾巴,MUX五位同学加入了IXDC美国体验创新之旅,从北京跨国太平洋来到旧金山(San Francisco),深入参访硅谷多家互联网创新企业,交流和感悟体验创新。 8 ▲先来张大合照,三十多人,我…

    2015-01-20
  • 交互设计中的心理学

    整理认知心理学中对交互设计(用户研究)有所启发的一些知识点(参考《认知与设计——理解UI设计准则》)包括:中央凹与边界视野——如何呈现信息以获取注意力格式塔原理——如何处理不同界面元素的关系时间感知——如何让…

  • 移动端下拉表单的更好选择

    在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

    2017-04-28
  • 58内部方法!一个更适合产品迭代的卡片创意法

    58UXD:交互设计 师常常需要进行迭代设计,在已有的产品框架上发现问题,优化体验,更好地达成产品目标。

    2017-08-25