火星网校
为你全面分析移动端APP搜索框应该怎样设计
发布时间：2024-04-13 15:29:05 浏览量：181次
搜索是每个应用产品不可缺少的一部分，同时也是用户经常使用的功能。它是巨大的流量入口，同时又承载着产品运营的能力。一个好的搜索设计能够提高转化率，提升用户体验。
搜索入口的设计样式
搜索入口的设计与搜索功能在产品中的位置密切相关，不同的应用场景所使用的搜索入口样式也是不同的，下面介绍四种常用的搜索入口样式。
1. 底部标签栏入口
把搜索功能作为底部标签栏中的一个功能模块，适合将搜索作为重要流量入口的App，同时也可以与其他的功能模块入口相结合，如下图所示：
2. 搜索框导航入口
这是常见的展示形式之一，将搜索入口以输入框的形式放置在导航栏中或者导航栏下方，有些应用即便界面向上滑动时，搜索框仍会吸顶显示，方便用户随时操作（是否吸顶显示要根据搜索功能在应用中的权重而定），如下图所示：
3. 搜索图标入口
这同样也是常用的搜索方式，常见形式是将一个放大镜的图标放在导航栏的右侧。相对上面提到的搜索框，它在视觉引导上略逊一筹，但节省了导航栏的空间，让导航栏可以为用户提供更多的功能，适用于搜索权重不高的应用中，如下图所示：
4. 隐藏的搜索入口
为了让用户更多地使用桌面提供的快速入口，一些设计中的初始界面将搜索功能隐藏，滑动界面时才会出现搜索功能。例如iPhone手机解锁后的界面是各个应用入口，当向下滑动时，隐藏的搜索入口才会出现，如下图所示：
搜索方式
搜索方式就是我们通常会用哪些方法去搜索要找的东西，下面介绍三种常用的搜索方式。
1. 文字搜索
文字搜索是主要且常用的搜索方法，通过在输入框中输入关键字进行精准搜索。当点击输入框时，激活输入键盘，如下图所示：
2. 语音搜索
语音搜索不仅提升了搜索的便利性，也解决了老人和不会拼音的人群的问题。另外，在音乐类App中语音搜索功能得到了更好的运用，无论是在街边商场还是酒吧，当我们听见喜欢的歌曲时，可以用语音搜索功能进行歌曲识别，随时找到这首歌曲的名字，如下图所示：
3. 图像搜索
借助图像识别技术，图像搜索也得到了广泛的应用。例如，我们可以通过对图片进行拍照搜索到有关它的信息或者是和它相似的图片；还有电商应用中常用到的，对于无法准确描述的商品，可以通过图像搜索找到该物品。淘宝和蘑菇街就可以通过对现实物体拍照来找到想要的物品，如下图所示：
搜索的辅助方式
基于用户不同的搜索场景，需要给出不同的搜索辅助，一个好的搜索辅助，会让用户爱上你的应用。下面就来介绍五种常用的搜索辅助功能。
1. 热门搜索
热门搜索常见于搜索量比较大或者运营人员想让用户搜到的信息，同时给那些无目的的用户更多的选择，如下图所示：
2. 搜索历史
通过搜索历史，用户可以看到自己每次查找的记录，方便再次查看，如下图所示：
3. 猜你喜欢
猜你喜欢根据收集的用户记录为用户提供相关的内容，减少用户的思考时间，同时也为用户带来贴心的感觉，如下图所示：
4. 递进式搜索
递进式搜索通过点击系统提供的辅助字段，逐渐缩小搜索范围，对输入模糊关键字的用户也提供了很好的提示，使其更快地找到目标，如下图所示：
5. 类别搜索
当应用中涉及搜索内容的信息较多时，可以添加类别搜索功能，让用户先选择类别，然后再进行搜索，可以更快更精准地搜索到相关内容，如下图所示：
搜索结果展现形式
从搜索结果来看，依然有很多种展示形式，如文字、图片、模块、视频等。了解不同样式后，可以根据不同的应用类型来选择合适的搜索结果的展示形式。
1. 文字类
文字类主要以文字描述展示搜索结果，多用在新闻类、音乐类应用上。因为用户搜索的是关键字或歌曲本身的名字，图片对用户来说意义并不大，如下图所示：
2. 图片类
图片类主要以图片展示为主，用户会因为看到感兴趣的图片点击查看，所以多用在购物、资讯、电影等应用中，如下图所示：
3. 模块类
模块类主要用于包含多类别的应用，例如在淘票票上进行搜索时，输入“影”会发现有几个类别：电影、影院、演唱会等。所以对于多类别的应用，我们应该扩大搜索范围并分类别展示，让用户可以通过分类更准确地查找想要的信息，如下图所示：
4. 视频类
下面要说的比较特殊，通常只有在视频类的应用中出现。因为用户搜索视频的目的较为明确，同时搜索出的结果也不会多样化，所以在此界面可放入更多的操作按钮方便用户进行选择观看，如下图所示：
总结
1、搜索入口的设计样式：搜索入口的设计需要根据搜索功能在产品中的位置而定，不同的应用场景所使用的搜索入口样式也是不同的，常用的四种为：底部标签栏入口、搜索框导航入口、搜索图标入口、隐藏的搜索入口。
2、三种常用的搜索方式：文字搜索、语音搜索、图像搜索。
3、五种搜索的辅助功能：热门搜索、搜索历史、猜你喜欢、递进式搜索、类别搜索。
4、四种搜索结果展示形式：文字类、图片类、模块类、视频类。
通过上面对搜索功能的分析可知，无论在哪个阶段，都要对应用本身的适用人群、类型、功能权重等进行多维度分析，才能设计出更合理的搜索。所以搜索样式的本身没有好坏之分，在不同的场景下，选择最合适的形式才会提升搜索体验，让用户搜索得更快、更准。
相关推荐：
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
