赞助商
立即赞助

如何设计移动端搜索?来看我总结的这四个部分!

UI设计3年前 (2021)更新 流光
2.1K 0 0

小溜Epik:目前搜索功能是个应用品不可缺少部分,时也是用户经常顾到功能。个好搜索设计能够提高转化率,提升用户验。下面我们来看看搜索设计的一套路。

目录:

  • 搜索入的计式
  • 搜索方式
  • 搜索辅助功能
  • 搜索结果的展示形式

一、搜索入口的设计样式

搜索口的设计需要根据搜索功能在产品中的位置,不同的应用场所使用的搜索口样式也是不同的,接下来分别和大家介绍一下四种搜索口的常用样式。

1. 底部标签栏口(Tab Bar)

把搜索功能为底部标签栏中的一个功能模块口,适合将搜索为重要流量口的 App,同时也以同其他的 Tab Bar口相结合,「卡漫画」就是把搜索和类似现功能的口相结合。但是底部标签栏的搜索口身并不带搜索功能,所以通常与搜索框样式相结合使用。(例:App Store、卡漫画)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

2. 搜索框导航口

常见的展示形式之一,将搜索口以输框的形式放置在导航栏中或者导航栏下方,有应用即便界面向上滑动时,搜索栏吸顶显示,方便用户随时操(是否吸顶显示要根据搜索功能在应用中的权重)。

搜索框导航入口除了必须要有输入框,需要个搜索图标予用户提示。目前很多应用也会利用搜索框内区域进预设文案,可作为提示用户关键词,也可以作为运入口来展示。(例如:花瓣、即刻)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

3. 搜索图标入口

样也是常用搜索,常见形是将个放大镜图标放在导航栏右侧。相上提到搜索框在视觉引导上略逊筹,节省了导航栏空,这样导航栏可以提供用户更多功能,适用于搜索权不高应用。

当然有特别的搜索图标方式,例如:自如客,同样是搜索图标的样式由于同的位置和层级变,变得更突。(例如:自如客、TIM)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

4. 隐藏的搜索入口

为了户更多的使桌面供的快速入口,初始界面时将搜索功隐藏,当进行滑界面时才会现搜索功,例如:iPhone手机解锁后是各个应入口,当向右滑时,隐藏的搜索入口就会现。

如图:

如何设计移动端搜索?来看我总结的这四个部分!

二、搜索方式

搜索方式就是我们通会哪些方法搜索我们要的东西,面介绍种我们的搜索方式。

1. 输字搜索

要且的搜索方法,通过在输入框中输入想要搜索的字进行精准搜索。同时当点击输入框时,激输入键盘。

如图:

如何设计移动端搜索?来看我总结的这四个部分!

2. 语音搜索

语音搜索仅升了搜索的利性,同时解决了老人对键盘输入困扰和会拼音的人群的问题。另外在音乐类App 中语音功得到了更好,无论是在边商场,酒等,当听见我们爱忍释的歌曲时,可语音功进行歌曲识别,随时到我们歌曲的名字。还有在驾车时可利语音搜索功查询路线。(例如:QQ音乐,德地图)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

3. 图像搜索

借助图像识别技术,图像搜索得到了广泛的应。例如:我们可通过对图片进行拍照搜索到有图片的信息或者是和它相似的图片,还有电商应中到的,对于无法准确描述的商,可通过图像搜索到该物。如:蘑菇中可通过对现实物体拍照来到想要的物。(例如:蘑菇、百)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

三、搜索的辅助功能

基于户同的搜索场景,需要给同的搜索辅助,一个好的搜索辅助,会户爱上你的应,面就来介绍五种的搜索辅助功。

1. 热门搜索

目前搜索量较大或者营想我们搜到的东西,同时给那些无目的的户更多的择。

如图:

如何设计移动端搜索?来看我总结的这四个部分!

2. 搜索历史

户可看到自己每次查的记录,方户再次查看。

如图:

如何设计移动端搜索?来看我总结的这四个部分!

3. 猜你

根据收集户的记录为户供相的容,减户的思考时间,同时会给你户贴心的感觉。(例如:天猫,今日头条)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

4. 递进式搜索

通过点击系统供的辅助字,逐渐缩小搜索范围,对于搜索模糊的户供了很好的示,可更快的到查目标。(例如:淘宝)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

5. 类别搜索

当应中涉及到的搜索容类似较多时,可添类别搜索功,先择类别后在进行搜索,可更快更精准的搜索到相容。(例如:36氪、豆瓣)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

四、搜索结果展示形式

从搜索结果来看,依然有很多种展示形式,字、图片、分类、视频类等,我们了解同样式后可根据同的应类来择合适的搜索结构的展示形式。

1. 字类

要字描述展示搜索结果,多在音乐类应上,因为我搜索的是歌曲本身的名字,图片对我们来说意义并大。(如36氪,QQ音乐)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

2. 图片类

要图片展示为,户会因为看到感兴趣的图片点击查看,多在购物、资讯、电影等(如:每日优、小红书)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

3. 模类

要于包含多类别的应,如:我们在得到上进行搜索时,输入一个「人类简史」会发现有两个类别,一个是电子书,一个是音频,对于多类别的应我们应该扩大搜索范围并分类别展示,户可通过分类更准确的查想要的信息。(如得到、猫眼)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

4. 视频类

面要说的较特殊,通只有在视频类的应中现,因为视频类的户通搜索目的较为明确,同时搜索的结果会多样,在此界面放入更多的操作按钮更方户进行择观看。(如土豆,优酷视频)

如图:

如何设计移动端搜索?来看我总结的这四个部分!

结语

通过上面的对搜索功的分析可知,一个搜索功的样式,无论在哪个阶都要对应本身适人群、类、权重等多维进行分析,才设计更合的搜索。搜索样式的本身没有好坏之分,只要在同的场景,择最合适的形式才会升搜索体验,户搜索的更快、更准。

欢迎关注作者的公众号:「海盐社」

如何设计移动端搜索?来看我总结的这四个部分!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在我接触交互设计之前,我一直把搜索功能的设计看作「搜索框+提示词+删除icon+取消button」的设计,但其实看似简单的搜索框背...
搜索
对于搜索,百度百科给出的基本解释是: 给予一定的条件后再寻求,搜查。因此, 搜索,可以看做是用户快速获取特定信息的一种方...
搜索框设计
在一个内容型的APP中,搜索功能可以说是标配。它是巨大的流量入口,同时又承载着产品运营的能力。碰巧最近在做JOOX搜索页面的...
搜索技巧
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计
“搜索”是产品中一个非常必要的功能模块,搜索就像为用户提供了一条便捷的绿色通道,方便用户快速检索内容。 搜索动作在 App ...
ui设计
随着我们产品承载的内容越来越多,搜索功能在大多产品中都成了一个必不可少的功能。最初我们在看搜索框的时候,都会把它当作...
搜索框设计
大家好,我是Clippp。今天为大家带来的文章是「搜索」设计。可能很多人认为搜索设计很简单:在主页顶部设计一个搜索框或者搜...
搜索
本文作者将从用户诉求、信息层级、界面表现三个层次上,试图对搜索和筛选两者的边界进行理清,并分别给出一些设计切入点。 一...
搜索技巧