如何设计搜索功能的入口 ?

搜索入口相当于用户搜索流程的第一步,在设计上不同品类的设计方案不尽相同,本文就来聊一下搜索入口都有哪几种设计方案?

不知道大家有没有注意到一点,当我们去商场时,一进门总是能看到一个叫做服务台的区域,一旦在商场里有什么疑问,当我看到服务台三个字,就知道,可以去那里咨询。

那么用户使用app的时候也是一样,某一页面出现的搜索入口就相当于写着服务台的工位,当用户看到搜索两字或者相关标识,就可以获取到一个信息,在这里我可以使用搜索功能,可以进行搜索。

所以对于搜索入口的设计,有两个原则:

  • 在用户需要的时候随时都可以找到它;
  • 在用户不需要的时候,它可以隐藏。

也就是让它,既显眼,又没有存在感。搜索入口在页面中一般具有鲜明简单的标志,在页面提示用户可以在这里进行搜索,也可以引导用户怎样去搜索。

所以说搜索入口相当于用户搜索流程的第一步,在设计上不同品类设计方案也不尽相同,今天我们来聊一下搜索入口都有哪几种设计方案?

01 顶部搜索框

我们可以注意到,一般主流的产品,都会将搜索入口放置顶部。页面是平面图形,放眼望去,页面的各个部分尽收眼底;但事实上,不同的位置,用户的关注点并不相同。

通常情况下,我们会习惯性的从页面的中上部开始阅读,这也就是为什么往往电商app会将轮播广告放在这里。所以,放在页面顶部的搜索框此时便毫无存在感;但当用户有需求,从上往下排查时,第一眼便可看到。

当用户进入页面,内容繁多,想要通过搜索进行筛选,这时页面顶部放置一个搜索入口,即可满足用户需求。

1. 引导类

上面我们说到了在顶部放一个搜索入口,让用户想搜索的时候,可以立刻找到搜索功能并使用。

那么如何让用户知道这里是搜索呢?

顶部的搜索入口有一类为顶部搜索框。这样我们就可以将文案在搜索框内显示,对用户进行引导。

我们来看在iOS系统设置页面的场景,内容其实不算很多,但每个菜单下都存在子级,子级里面又含有子级,用户如果想要进行一个锁屏密码的设置,了解流程的情况下,也要点开三个子级才能找到。此时如果放个搜索入口,文本框内提示搜索两字,便能对用户达成引导目的,告诉他这里是搜索入口,可以搜索定位相关功能。

如何设计搜索功能的入口 ?

2. 推荐信息类

在满足了引导用户找到搜索入口以后,我们可以对文本框的内容进行进一步提升,在引导用户使用的同时,加强用户搜索时候的联想性。也就是我们平时说的默认词放入框内,其参考内容可能是产品当下的热门品类或活动,也可能是大数据根据用户的日常浏览搜索记录匹配出来的智能推荐,主要针对于消费场景的app多一些。

这种推荐式的细节功能,使得用户在app内的单次留存时间变长;也是app对自身产品的二次推广,比如电商软件在双十一的时候,将默认词改为双十一活动文案,增加了活动的宣传性,也让用户有更多的百分比可以进入活动页面购买下单。如果活动有多个,部分软件将默认词以轮播的形式展出,同样也是达到了加强了宣传效果,促进用户了解消费。

如何设计搜索功能的入口 ?

3. 当前信息类

上述两类只针对单一内容进行搜索,但当搜索内容多元化的时候,便可以将搜索信息进行代入,引用当前信息,进行n+1次搜索加速系统筛选颗粒度。

如高德地图app,用户查找一个地点后,再对该点附近的地点展开搜索,使得搜索结果更加精细准确。

如何设计搜索功能的入口 ?
除了顶部文本框的搜素,顶部还有纯粹的图标搜索,虽然都是顶部搜索入口,但两者并不相同。当app采用搜索icon的设计,可以减少页面排版空间,搜索功能相对来说没有那么重要。

设计者的希望用户先从中上部浏览页面内容,浏览完毕后,当用户有其他需求,从顶部开始排查时,按照通常阅读习惯,从左往右依次看过去,最后才到搜索icon,所以一般搜索icon都是放在页面的右上角。

相对于顶部搜索框,顶部搜索icon是对搜索入口的一种弱化,设计时,希望用户先浏览完页面的所有内容,再进行搜索操作。

比如蚂蚁财富,主要是通过向用户提供理财服务、行情介绍,进而促进用户下单,相对于淘宝饿了么此类app而言,用户的搜索目的没有那么明确。

不过对于搜索icon的选择,建议还是越明显越好,让用户一看就知道是搜索功能,大多数产品使用的都是放大镜icon,不过为了表现特色,每个设计师多多少少会在大小粗细颜色等细节进行修改美化,但千万不要过度设计。

如何设计搜索功能的入口 ?

03 底部tab栏

那么除了顶部可以让搜索入口既显眼又无存在感,哪里也可以达到这种效果呢?

那就是页面底部tab。

底部tab设置为搜索,说明在这里搜索是该场景下的主要功能之一。用户在任何时间都可以进入搜索页面,一般偏内容类的app多些。这类app的页面功能较少,目的性较强,搜索会作为一个底部tab出现,比如小说阅读器等;

这类搜索入口外面可布置的内容较多,可将热门搜索展示在入口页面,给用户推荐一些热门搜索内容,帮助用户思考,增加更多可能性,拉长用户在此app的使用时间。

推荐热词的设置和默认词类似,但是可以找不同的是,一般来讲,热词对字数有一定限制,相对简洁精短,那么默认词占长度优势,可以描述的更加详细。

但如果此时app底部导航已经含有四个及以上的更重要的功能tab,那么就无需再将搜索功能加入,以防tab过多,影响用户使用感受。

如何设计搜索功能的入口 ?

那么,当我们对以上搜索入口进行设计时,要考虑哪几点呢?

1. 搜索入口要足够明显

搜索入口主要是让用户快速进行搜索操作,那么搜索框的位置需要足够明显,让用户在页面内可以第一瞬间捕捉到。

2. 搜索入口的样式设计

当一个搜索入口摆在页面,除了文字,用户如何知道这是一个搜索框呢?

最好是一个显而易见的查找图片,调查发现,多数app做这个功能时,都选用了放大镜图标,首先放大镜意味着搜索,这一印象已经深入人心;其次这一设计简洁明了,符合搜索入口的设计要求。

调研放大镜图标时,桃浪注意到了一点,几乎所有的放大镜icon,它的把手都是冲着右下角,我认为,这可能是在模拟多数人用放大镜去找东西这一动作,当然左撇子的朋友不要抓住我这一点讨论哦~大家有什么不一样的想法也可以在下面留言,我们一起讨论~

3. 新增除文字以外的其他搜索字符

随着科技的发展,我们使用手机等移动产品时,已经开始运用语音,图片等语言方式,来更快速的表达想法。搜索也是如此,增加图片、语音等其他搜索入口,可以增加搜索效率,提升用户体验。比如用户不方便打字时,可以通过语音进行搜索;在搜索一些无法用言语表达清楚的数据时,可以发送图片智能识别匹配。

4. 风格高效简洁

搜索入口的职责就是帮助用户快速使用搜索功能,注重简单高效,如无特殊要求,则不需要繁琐的设计,只要将搜索框或搜索图标等基础内容展现出来就足够了,装饰过多反而影响用户使用。

5. 搜索按钮

贯彻一切从简、高效的原则,调研下来我发现,很多搜索入口其实已经隐藏了搜索按钮,取而代之的是输入法的回车键,那么从用户的使用角度来看,相对于还需要点击搜索按钮进行搜素,直接利用输入法的回车键触发搜索条件,简化了用户的操作动作,相对来说更加便捷高效。

作者:桃浪;公众号:桃浪产品日记

人已赞赏
设计园地

设计笔记「二」按钮细节交互

2020-4-24 13:44:39

设计园地

大屏数据可视化规范总结

2020-4-27 12:38:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索