起点雷霆萬鈞学院课程

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

0 评论 4767 浏览 13 收藏 12 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程㊣ 和方法,学完就能写一份数据报告!了解一下>>

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

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

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

所以对于搜索入口的可沒那么簡單就被他們闖出來设计,有两个原则:

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

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

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

01 顶部搜索框

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

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

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

1. 引导类

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

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

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

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

2. 推荐信息类

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

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

3. 当前信息类

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

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

02 顶部搜索icon

除了顶部文本框的搜素,顶部还有纯粹的图标搜索,虽然都是顶部搜索入口,但两者并不相同。当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. 搜索按钮

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

 

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

本文由 @桃浪 原创发布于人人都是产給我裹品经理走吧。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信▲公众号或下载App
起点学院课程
评论
评论请死神鐮刀直接出現在手中登录
  1. 目前还没评论,等你发挥!