App中的搜索功能

我们日常使用的大多数app都有搜索功能，这些app设计搜索功能的方式则千差万别。但是，为什么需要对同一个功能做不同的设计呢？有没有最优的选择呢？让我们来看一看。

主页面上的搜索栏

这几个常用的app都把搜索栏设计在了主页面上，这种设计的优点是设计栏很容易被发现，因为大部分时间它都在页面的最顶端。

这种顶部的搜索框更适用于用户有明确的搜索意图的情况，搜索的结果将取决于用户输入的关键字。

（这个理念同样适用于将搜索icon放在页面右上角的app，我曾经将这两种方式放在一起进行比较，发现它们的易用、和可获得性、甚至连点击次数都十分相似。）

将搜索标签放在导航栏中

这些app将搜索功能作为一个标签放在了导航栏中。这种方式中，搜索功能没有上一种方式那样容易被发现，但是它们很容易被访问，因为用户用拇指点击就可以轻松访问。

这种方式中，搜索功能有一个单独的页面，搜索页在顶部有一个搜索框，页面的其余地方是一些数据，这些数据既可以帮助用户搜索，也可以帮助用户探索平台上的内容。这种方式适用于没有明确搜索意图的用户进行探索性搜索。

使用搜索框还是搜索页面？

这两种搜索功能的设计方式服务于不同的用户，使用哪种设计方式取决于是哪种类型的平台以及平台提供什么内容。

使用顶部搜索框的情况

用户打开app的主要目的是搜索一些东西。例如：Google地图、优步或者 Zomato。大多数时间用户打开这些app都希望搜索一个地点、餐厅或者菜肴。
用户有明确的搜索意图，就像在Facebook中，用户通常使用搜索功能搜索其它用户或页面，即使有时他们不是很确定它们是怎样拼写的。类似Facebook这种平台，用户对他们想要搜索的信息有很清晰的了解，即使他们可能不太了解，平台也无法帮助他们。

在底部导航栏添加搜索标签的情况

你希望能够鼓励用户探索和发现平台上的新内容，从而提高用户的参与度。例如：Instagram and Twitter这两个平台都希望用户可以在app上停留更多的时间，因此它们在你的搜索范围之外，提供了个性化的的内容，帮助你发现你可能感兴趣的新用户和新内容。
用户不确定他们在寻找什么时，app可以指导用户发现他们想要的内容。例如：Netflix and Uber Eats，这两个app允许用户通过流派和菜系去探索app，这适用于这样的用户，他们知道自己想看一档喜剧节目，但不确定应该看哪一个。

Airbnb是怎么做的？

Airbnb混合使用了这两种搜索功能的设计方式，在主页面上方有搜索栏，并且页面下方的的导航栏也有搜索按钮。Airbnb肯定对此有着一定的考虑，通过这种方式，他可以同时顾及到两类用户：有着明确搜索意图的用户，以及随便逛逛还在想要去哪里的用户。

结论

两种不同的设计方案都各有优劣，都有各自不同的适用场景，通过上面的例子，我们可以发现，有两个因素决定我们采用何种搜索方案——用户的使用意图以及产品能够为用户提供何种功能。

欢迎关注微信公众号：IceyTalk 原文链接

转载于:https://juejin.im/post/5b38402fe51d4558c232653a

探索移动端的搜索设计相关推荐

不玩虚的！深入B端SaaS产品设计核心理念【干货】
[前言] 本文讨论"为什么采用SaaS模式"."SaaS产品有哪些"以及"如何做好SaaS产品设计"三个话题,核心是产品设计,主要从需求定义 ...
探索移动Web网页编码设计
如果你正准备为你的网站制作一个移动设备版本,那这篇文章将会对你相当有用,在本文中,将探索移动Web网页编码设计的各种技巧和注意事项: 为了移动设备上的用户体验可以被接受,代码得怎么设计. Mobile ...
OPPO Find X3通过网站推广正式官宣，打破常规探索高端旗舰新突破！
早在三月初OPPO就已经开始针对OPPO Find X3新系列产品做出预热,从选择姜文作为新系列高端旗舰产品的代言人就可以看出,此次OPPO有着全新的考量.借用姜文经典电影中的台词"什么TM ...
【干货】深入B端SaaS产品设计核心理念
本文讨论"为什么采用SaaS模式"."SaaS产品有哪些"以及"如何做好SaaS产品设计"三个话题,核心是产品设计,主要从需求定义.方案设计 ...
一文搞懂产品中的搜索设计
搜索功能是我们日常生活中接触最多的功能之一,它更够很好的提高用户使用产品的效率,用户对搜索功能的依赖性也比较大,所以设计好搜索功能将会很大程度上提高用户体验.本文作者通过分享这篇文章,帮我们搞懂产品中 ...
iOS端的UI设计文档
iOS端的UI设计文档 APP和网站,风格色调始终注意保持一致(平台一致性) 在App不断更新的过程中定义设计准则.风格.规范设计规范: 1.分类合理(为了能让用户快速查找,合理的分类必不可少) 2 ...
网站搜索设计读书笔记
网站搜索设计作者:Shari Thurow + Nick Musica 2008年出版的书,到2021年看还是很实用.从网站的SERP展示效果一直讲到转化. 从分工出发: 可用性:分析用户需求,确定 ...
美团民宿跨端复用框架设计与实践
从 PC 时代.移动时代到万物互联的 IoT 时代,伴随终端设备的日趋多样化,跨端复用的种子自此落地,开始生根发芽.从依靠容器能力.各类离线化预装包的 Hybrid 方案,到通过 JSC 连接 Jav ...
ueditor上传组件显示乱码_最全面的移动端 UI组件设计详解：中篇
上一期给大家讲解了<最全面的移动端UI组件设计详解:上篇>,主要分享了:布局组件和导航组件2个部分:这次给大家带来:基础组件.表单组件和反馈组件详解,希望你在设计APP.小程序.H5页面中 ...

探索移动端的搜索设计