移动端搜索,都有什么套路?

2018-09-30 - 移动端搜索 用户体验优化 搜索功能优化

网页.jpg

图片来源图虫:已授站长之家使用

作者:小溜Epik,公众号:海盐社

目前搜索功能是每个应用产品不可缺少一部分,同时也是用户经常光顾到的功能。一个好的搜索设计能够提高转化率,提升用户体验。下面我们来看看搜索设计的一些套路。

目录:

第一部分:搜索入口的设计样式

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

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

把搜索功能作为底部标签栏中的一个功能模块入口,适合将搜索作为重要流量入口的App,同时也可以同其他的Tab Bar入口相结合,如“布卡漫画”就是把搜索和类似发现功能的入口相结合。但是底部标签栏的搜索入口本身并不带搜索功能,所以通常与搜索框样式相结合使用。(例如:App Store、布卡漫画)

如图:

2. 搜索框导航入口

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

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

如图:

3. 搜索图标入口

同样也是常用搜索方式,常见形式是将一个放大镜的图标放在导航栏的右侧。相对上面提到的搜索框在视觉引导上略逊一筹,但节省了导航栏的空间,这样导航栏中可以提供用户更多的功能,适用于对搜索权重不高的应用中。

当然也有特别的搜索图标方式,例如:自如客,同样是搜索图标的样式由于不同的位置和层级变化,变得更加突出。(例如:自如客、TIM)

如图:

4. 隐藏的搜索入口

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

如图:

第二部分:搜索方式

搜索方式也就是我们通常会用哪些方法去搜索我们要找的东西,下面介绍三种我们常用的搜索方式:

1. 输文字搜索

主要且常用的搜索方法,通过在输入框中输入想要要搜索的文字进行精准搜索。同时当点击输入框时,激活输入键盘。

如图:

2. 语音搜索

语音搜索不仅提升了搜索的便利性,同时也解决了老人对键盘输入困扰和不会拼音的人群的问题。另外在音乐类App中语音功能得到了更好运用,无论是在街边商场,酒吧等,当听见我们爱不忍释的歌曲时,可以用语音功能进行歌曲识别,随时找到我们喜欢歌曲的名字。还有在驾车时可以利用语音搜索功能查询路线。(例如:QQ音乐,高德地图)

如图:

3. 图像搜索

借助图像识别技术,图像搜索也得到了广泛的应用。例如:我们可以通过对图片进行拍照搜索到有关图片的信息或者是和它相似的图片,还有电商应用中常用到的,对于无法准确描述的商品,可以通过图像搜索找到该物品。如:蘑菇街中可以通过对现实物体拍照来找到想要的物品。(例如:蘑菇街、百度)

如图:

处处留白,外贸网站转化率反而变高?

外贸网站设计留白时兼顾网页布局均衡,会注意设计元素之间的联系性,并不会一味留白。

APP开发产品策划:消息系统设计有哪些注意之处

APP开发产品而言,消息系统都是一个必不可少的功能模块,其核心目的是让产品直接与用户产生交互

移动端网站设计:图文和按钮的布局方法

今天给大家一起学习移动端网站UI设计过程中的视觉布局方法,只有合适的布局没有对错的布局。...