UI界面设计 ·

关于搜索框设计的思考

最近跟小伙伴们做界面设计的练习,在设计到首页顶部的时候,对于搜索设计成什么样式,我们产生了不同的想法,今天这篇文章就是对搜索这个小组件进行分析,如何正确的使用不同形式的搜索功能。

什么是搜索?

百度百科里说,搜索就是将APP里的内容存在数据库里,然后索引器打上关键词标签,存在索引数据库,当用户搜索时,检索器去索引数据库提取,将提取的内容呈现给用户。

搜索的样式

不同的功能需求会影响搜索功能入口的样式,根据目前市面上大部分产品的搜索样式,我们将搜索功能的样式分为了5种。

1、页面只有搜索框

类似于像夸克,百度等以搜索为他们的主营业务,因此他们的产品首页就将搜索功能放在了页面的中心位置,极大的满足了用户的核心需求。如下图所示:

夸克的页面保持了一贯的极简风格,在搜索框的下面放了其他社交网站的链接,即保持了界面的视觉,也提高了用户的搜索体验。

百度的搜索框下面是用算法推出的关于新闻个人推荐,首页内容相对夸克来说会多一点,因此视觉上夸克会显得简洁一点。

设计注意要点:

1、越简单的事情越复杂,在一整块空白的界面上仅仅放搜索功能,要做到好用和好看都很难,因此加入产品元素或者产品Logo是最实用的方案。

2、在产品功能范围内可加入其他不同的搜索方式,例如相机、语音、图片等,使用icon的展现形式,不会让界面看起来因为留白过多,造成视觉落差。

 

2、icon形式

这种形式一般出现以内容为主的APP上,位置大多在首页的左上角或者右上角,作为单独或者跟别的图标一起出现,如下图所示:

猫耳FM和最右的搜索入口就在首页作为一个单独的放大镜icon,除了能够更好的节约空间展示更多重要的信息以外,也能够使界面更有设计感,让界面更加简洁。

设计注意要点:

1、由于顶部的icon不会只出现一个,因此要注意设计时icon的视觉统一性;

2、当有两个图标放在一起的时候,需要注意点击尺寸。

 

3、顶端搜索框

搜索框往往都是固定在界面顶部,以便让用户快速使用搜索操作,来直接达到自己想要的页面。如下图所示:

飞猪和马蜂窝都是使用的顶部搜索框,因为这两款产品的首页内容相对来说都比较复杂,因此使用占用空间比较大,但相对来说最直观的一种搜索展现形式,能够最快的让用户找到。

设计注意要点:

1、如果搜索在产品架构中的重要程度不是很高,可以通过减少透明度来降低搜索框的视觉层级;

2、可以加入一些品牌基因在外框设计上。

 

4、底部标签icon

当产品中搜索功能的层级更高,并且用户使用的频次也比较频繁的时候,就将它放在底部标签栏上。如下图所示:

APP store和微博的底部icon都有搜索的功能,因为搜索在app store这样一个应用商场的产品里,是用户使用最多的一个功能,放在底部能够更快的提高用户找到自己想要的应用软件;

微博作为一款社交内容型软件,热搜这个名词也是微博特别拥有的词汇,这也侧面说明了搜索在这个产品中的重要性,能够全方位的给微博用户推荐信息。

底部的icon设计如果要说的话,下次单独出一篇文章写,这里简单的说明一下。

设计注意要点:

1、底部icon设计要保持视觉的统一性,最好加入一些趣味性和品牌特征,能够更具有识别度;

2、如果有产品需求,可增加小红点或者角标来提高搜索的点击率。

 

5、下拉页面出现

下面页面出现搜索的情况在系统界面比较容易看到,给用户提供搜索各个APP功能入口,但使用频率不是很高,因此做了隐藏处理。如下图所示:

在生活中,用户对会对手机的信息做一些管理较为注重,并且大多都是按最新的信息排列,没有显示搜索功能。但针对手机APP太多不好找的情况,则可以让采用下拉出搜索框的方式,下拉是用户在使用手机中较自然的一个交互动作,能够极大的提高用户查找信息的速度和体验。

 

总结

不同功能,不同需求的界面会影响到搜索框入口的设计。

目前主要的入口有在首页只有搜索框、点搜索icon后出现搜索框、在首页的最顶端的搜索框、底部icon的搜索框、在下拉页面时才会出现搜索框。

面对具体的需求,还需要具体分析,搜索作为应用的重要功能,有着不可代替的作用,本文只是讲了最基础的入口设计,下篇再讨论搜索方式和辅助功能。

参与评论