您的位置: 首页 > 软件教程 > 移动端搜索功能小技巧 | 探讨搜索入口和搜索主页设计

移动端搜索功能小技巧 | 探讨搜索入口和搜索主页设计

编辑:伢子
2024-03-29 10:36:28

移动端搜索功能在我们日常生活中已经变得无可或缺,而搜索入口和搜索主页设计则成为影响用户体验的关键因素。搜索入口的设计直接影响用户对搜索功能的使用频率,同时搜索主页的布局和推荐算法也会直接影响搜索结果的准确性和用户的满意度。在移动端搜索功能的发展中,不断探索和优化搜索入口和搜索主页设计,将为用户提供更加便捷、高效的搜索体验。

搜索功能的使用流程以时间维度可以分为搜索前、搜索中和搜索后三个阶段。以页面维度划分可以分为搜索入口、搜索主页、搜索输入页和搜索结果页。

搜索入口

搜索入口按其在产品中的功能权重分为独立Tab式、搜索表单式、搜索框和搜索图标四种形式。

①独立Tab式

独立Tab式是将搜索放的最重的一种形式。app界面底部的Tab栏是产品的一级导航,是优先级最高的部分,搜索功能放在该位置是将其作为重要的流量入口,鼓励用户探索和发现平台上的新内容。

以新浪微博为例(见图3),搜索入口为一个独立的页面,承载着三个主要功能。第一个是基础功能,也就是可以让用户输入关键词的搜索框;第二个是流量入口,为平台特定的内容导流;第三个是运营内容,承载着产品的运营需求。

移动端搜索功能小技巧

图3 独立Tab式搜索入口

②搜索表单

搜索表单通常分为两部分,即预置的搜索限制条件表单和搜索触发按钮。常见于出行类应用(如订酒店、车票/机票、租车等)。

图4 搜索表单

③搜索框(持久性搜索)

搜索框一般位于界面的导航栏区域,在有的应用中滑动内容时,搜索框还会悬停在界面顶部,给用户提供一种持久性的搜索体验。其优点是提高了用户搜索操作的方便性与快捷性。

搜索框的基本结构主要由搜索图标、预置关键词和扩展搜索控件三部分组成(如图5)。其中预置关键词有两种,一种是提示可搜索内容类别的占位符,告知用户使用搜索功能可以搜索哪些内容,给用户一定的心理预期,是一种良性引导,避免用户因随意输入关键词而造成无结果的不良体验;另一种是运营关键词,通常是一些热点话题、特殊节日或推荐的相关商品或活动。

图5 搜索框

④搜索图标

搜索图标是功能权重最低的搜索入口,其使用频率较低,功能被弱化。一般采用这种占用界面空间小的形式是希望给用户带来一种沉浸式的浏览体验,让用户专注于内容区域,而搜索只是作为一种辅助功能,如安卓版的微信(如图6)。

图6 搜索图标

搜索主页

搜索主页是点击搜索入口后的着陆页,主要由主页搜索框、内容区和输入区构成(如图7)。输入区就是搜索框获取焦点后屏幕底部弹出的输入键盘。内容区主要是由搜索历史和搜索推荐组成的运营区域。

图7 搜索主页

①主页搜索框

主页搜索框由四部分功能构成:返回、输入、触发和扩展功能。

图8 主页搜索框通用样式

返回功能为用户提供了取消搜索返回产品主页面的操作。

输入功能引导用户输入搜索内容,可以是文字输入,也可以是语音输入或图片输入。

触发功能是用户输入完成后的点击确认操作,通常采用按钮的形式。有的布置在搜索框的右侧,有的是直接调用输入键盘右下角的搜索按钮。

扩展功能一般在主页搜索框的左侧,有的是定位功能,常见于对地理位置有要求的应用(如租房类和求职类应用);有的是分类功能,对应用内的结果进行前置分类,方便有明确搜索目的的用户在特定的分类下搜索,减小搜索结果的细粒度,常见于电商类应用;还有的是产品自身的其他功能(如图9)。

图9 扩展功能常见类型

对于老版本的安卓手机来说,底部有物理的返回按键,而全面屏手机的返回操作是滑动手机屏幕的左右边缘,所以不必为主页搜索框设计专门的返回按钮。而iphone8以下版本的苹果设备由于其返回操作需要有专门的返回按钮,所以在设计主页搜索框时需要设计有返回操作的按钮(返回or取消),如图10。

图10

由于在实际的开发过程中,一套设计稿要适配不同型号和版本的设备,所以采用低版本的设计形式。

②搜索历史

搜索历史通常在主页搜索框下方,属于搜索核心体验的一部分,具有降低输入成本、帮助用户快速达到搜索目的的作用。

a、适用场景

搜索历史的适用场景主要有三种:

第一种是用户在一次搜索中没有找到自己想要的结果,重新回到搜索主页后根据搜索历史调整关键词再次搜索;

第二种是用户正在浏览搜索结果,中间被外部因素打断不得不退出当前页面,等一段时间后再次进入应用时,后台已将其关闭,用户只能重新通过搜索到达之前的结果页;

第三种是结果页的内容有更新,用户每次搜索相同的关键词得到的结果是不一样的(如租房应用中房源信息通常隔一段时间会有更新)。针对后两种场景,用户每次通过搜索历史进入相关结果的体验并不是最好的,如果频率较高,可以引导用户进行收藏、订阅和关注等操作。

b、表现形式

搜索历史的表现形式主要有标签式和列表式两种。标签式可以展示更多,但不能添加其它信息;列表式则可以展示更多信息(如图11)。

图11 搜索历史表现形式

c、清空历史

清空历史的操作有两种,一种是在搜索历史标题右侧放置清除历史的按钮(常见为垃圾桶icon);另一种是在底部,常见于列表式的搜索历史。

图12 清空搜索历史的方式

d、删除单条历史记录

由于搜索历史属于用户数据,具有一定的隐私性,所以最好为用户提供可以单条删除的操作。标签式有长按进入点击删除和长按出现弹框删除两种方式;列表式除了长按弹框删除外,还有点击列表右侧叉号删除和向左滑动删除的方式。

图13 删除单条历史记录的方式

e、数目展示与控制

由于移动端内的界面资源寸土寸金,大部分都不会展示所有的搜索历史,所以会对数目有一定的控制。一种是通过规定搜索历史的保留时间范围,只显示几条搜索历史;另一种将更早的搜索历史隐藏,用户需要时显示更多,可以是折叠的方式,也可以是横向滑动的方式。

图14 控制搜索历史数目展示的方式

f、其他扩展

每条搜索历史可以有更多的扩展信息或功能。有的用icon区分不同历史项的属性(常见于外卖类和地图类);有的在每条历史项中有其他的交互操作(如地图类);有的会嵌入广告位;有的则会根据关键词以二级标签的形式进行分类细化。

图15 搜索历史其他扩展信息和功能

③搜索推荐

搜索推荐是运营的重要手段,主要包括猜你喜欢、热门搜索和一些运营需求。

A、猜你喜欢&热门搜索

猜你喜欢和热门搜索在形式上较为类似,区别在于猜你喜欢是根据用户特征和搜索习惯进行推测,带给用户个性化的选项。而热门搜索是按照平台上用户的搜索热度,或是根据某些特定的运营需求进行的推荐。

a、表现形式

表现形式同样分为标签式和列表式。

b、辅助功能

如果所推荐的选项不是用户感兴趣的,可提供换一换和展示更多为用户推荐更多的选项。除此之外,由于猜你喜欢涉及用户的隐私,有的应用提供了贴心的隐藏功能。

图16 搜索推荐辅助功能

c、运营层面

根据运营需求,有的推荐词条会被重点标注;有的在猜你喜欢的词条中嵌入一些运营热词,相当于是猜你喜欢和热门搜索的结合展示;有的则是基于地理位置进行个性化推荐(如自如会根据所在的位置推荐附近的小区);还有的则会根据所推荐的词条属性进行标签分类或细分类别。

图17

B、运营需求

运营需求主要是为特定的内容导流,有的是一些运营的专题活动,有的是产品主推的业务。形式上看,有的是在搜索推荐标题的右侧植入广告位,有的则是直接以banner的形式展示。

图18 搜索推荐中的运营需求

④搜索分类设计形态

对于业务复杂,内容量多的产品,搜索主页会通过前置分类帮助用户在特定的分类下搜索,这种限制范围的搜索方式可以提高搜索效率。

a、Tab式

有些应用采用标签分类的形式对搜索内容进行分类,用户可以通过切换标签在不同的搜索范围内进行搜索,通常默认第一个标签为全部搜索内容。

b、下拉列表式

下拉列表式的搜索分类较为隐藏,一般针对有较明确搜索目的的用户,他们会在输入关键词之前就选好自己所要寻找内容的类别。而出于考虑到大部分用户的需求,该分类方式仍然默认第一项为搜索全部内容。

c、类目/功能入口

直接在主页搜索框下方以模块入口的方式为用户展示不同的搜索类型(如微信、脉脉)。

图19 搜索分类设计形态

搜索分类设计除了可以提高用户的搜索效率外,还能便于用户在搜索前提前了解产品的业务范围,让用户知道在产品里可以获得哪些内容。

搜索主页承载了多方面的需求,主要有用户的直观需求、产品的运营需求和用户的潜在需求。直观需求就是为用户提供基本的搜索功能,降低输入成本,达到快速搜索的目的;产品的运营需求满足了运营人员的需要,合理的组织可以提升产品的体验,丰富产品的层次,但运营过度会使该页面成为运营的重灾区;同时,通过对该页面内用户数据的积累与分析,不断挖掘用户的潜在需求,提升搜索推荐的精度。


上一篇:干货 | 移动端搜索功能(一)

下一篇:干货 | 移动端搜索功能(三)-搜索输入页&搜索结果页