美文网首页
交互-搜索框设计

交互-搜索框设计

作者: 小媛小豆 | 来源:发表于2020-05-07 01:33 被阅读0次

类型

搜索框的类型

1.隐藏搜索框

只提供一个放大镜icon,需点击跳转才可搜索,或下拉显示搜索框。

占据空间小,位置灵活,层级低。

2.普通搜索框

放大镜icon+矩形框,通常固定在页面顶部。

功能性强,没有明确的销售意向,使用者有十分明确的目标,工具性APP。

3.有提示搜索框

此类搜索框的特征是,中间有提示语。

电商平台比较常见。

用户有明确的搜索目标时,会忽略;无明确目标时,根据推荐引导消费。

运营可通过不同的提示语,获取盈利。

4.带语音搜索

新的交互热点,相比于传统文字搜索,可以减轻用户输入的障碍,更加便捷。

缺点是输入会更加无序,私密性差。

5.带图片搜索

特定图片搜索需求更加精准。

减少输入程序和描述转换的不确定性,以图识别图,用户体验更佳。

6.精准分类搜索

可先选择分类,再输入关键词搜索分类下的内容,多用于区域服务型APP。


具体使用

搜索框的具体使用

样式

符合用户习惯,放大镜icon+线框,可省略搜索按钮,利用键盘自带的搜索按钮。

位于页面顶端,符合用户自上而下的浏览习惯。

使用规则

搜索前默认展示搜索提示词 点击搜索框跳转到搜索页,展示热门候选词、最近搜索记录 根据输入内容展示联想结果 搜索完成后结果展示

体验优化

- 减少输入,最理想的状态就是用户不用打字就能够进行搜索

- 给用户想要的,最符合预期的排在最前面

- 自动纠正输入,并给出正确输入

- 保留用户输入内容,记住搜索记录

- 无结果时合理推荐

相关文章

  • 交互-搜索框设计

    类型 1.隐藏搜索框 只提供一个放大镜icon,需点击跳转才可搜索,或下拉显示搜索框。 占据空间小,位置灵活,层级...

  • 后台全局搜索交互设计案例

    搜索看似简单,但是细节很多,早前写过一篇关于搜索方面的文章《交互设计基本功:如何设计一个好用的搜索框?》,帮大家普...

  • 浏览器 --- 搜索框的设计

    搜索框是浏览器中交互最为频繁的控件之一,因此如何设计一个搜索框变得极为重要。用户输入搜索关键字,浏览器会提供命中关...

  • 交互设计之(二)搜索框设计

    来源:UI中国

  • 【打卡学习】

    Day1:搜索框的设计(2days 4hours) 【学习part1—交互】 输入框和提交按钮的组合,频率最高的组...

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

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

  • 如何设计一个好用的搜索框?

    1.什么是搜索框? 搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。搜索框几乎存在所有的网站和APP...

  • 关于搜索框的交互

    首先输入框搜索流程 搜索功能从大的方向分为精确搜索和模糊搜索。精确搜索针对用户对搜索目标十分精确,通常是物流查询订...

  • 【新手指南】App原型设计:如何快速实现这6种交互效果?

    做App原型设计,那么页面切换、进度条、页面滚动、图片轮播,下拉菜单,搜索框这些交互效果必不可少。如何简单快速地实...

  • 产品设计-搜索框

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

网友评论

      本文标题:交互-搜索框设计

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