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

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


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

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

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

相关推荐

  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • 与潘通CEO对话:合理的色彩运用,才能设计吸引人的产品包装

    年度流行色从何而来?潘通如何决定每年的流行色?你知道小黄人的颜色是潘通挑选的吗?以上问题在这篇对话中一一为你揭秘。“基于 Pantone 公司的核心业务,色卡销售,色彩咨询,以及色彩授权,中国目前是 Pantone 继美国后的全球第二大市场。按照中国的国际化趋势,不久后就有可能超越美国成为 Pantone 在全球的第一大市场。尤其,中国市场目前愈发突显了对设计的追求和重视。”Color defines our world. ——  Laurie Pressman  Vice-President of the Pantone Color Institute“For me it has always been such a calm color. Grey is like your favorite T- Shirt.” —— Jason Wu

    2017-05-11
  • 交互设计师的专业度表现 ?

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-10-14
  • 一些交互设计原则 | 蓝鲸

    从用户角度来说,交互设计是一种如何让产品更易用,让用户更愉悦的产品设计。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点。以下就介绍一下在交互设计中一些通用的原则。1、前馈/反馈:前馈就是操作之前要给的信息,提示用户点击之后会出现什么、点击之后结果是什么。前馈适用于新产品(还不知道怎么用的产品)。反馈就是用户操作结束后给的信息提示。如:您的操作过于频繁,请稍后再试。2、状态可见原则:比如进度条,...

    2018-04-24
  • APP细节打磨绝招 “微交互动画”

    著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。

    2016-09-08
  • 交互设计师的60日计划之第二天

    此次分享的[button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 张茂泽:论黄帝陵的文化内涵 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起的“黄帝陵国家文化公园规划设计大师工作营”,邀请了中国具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地,对黄帝陵国家文化公园进行实地调研、研讨,分别提出未来黄帝陵国家文化公园的规划设计理念及方案。3月9日,西北大学中国思想文化研究所教授张茂泽作为探班大师来到工作营现场,以《论黄帝陵的...

    2018-03-17