同今生活在线网

音频 | 好用的搜索页都是这么设计的

UI设计培训 2019-09-26 07:39156未知yp hyds

在从入口到中间页再到结果页的搜索过程中,中间页是涉及功能最多的页面,对搜索过程能否做到高效快速的影响非常大。但作为过程我们往往对它没有足够的重视,一笔带过的情况也很多。其实要做好搜索中间页需要思考和注意的地方还真不少,那么今天我们就来好好重新认识一下被忽视的搜索中间页吧↓↓↓

搜索是产品中的常见功能,通过搜索可以让用户更快速准确的定位目标。从用户角度,合格的搜索功能需要做到快速精准,而从产品角度,搜索功能则还需要兼顾用户引流、产品推荐、内容曝光等方面的需求,这就让搜索中间页有了丰富多样的功能。

下面我们就从中间页中出现的主要功能来展开,一一分析其样式特点及适用场景。

搜索中间页的主要功能有:搜索框、关键词联想、搜索分类、热门搜索、历史记录和猜你喜欢/广告区等↓↓↓

搜索框

搜索框无疑是中间页众多功能中的C位,如果说其他功能是可以自由组合的配菜,那么搜索框肯定就是无可替代的汤底啦,是每个搜索中间页的标配。它位于中间页的顶部,样式应延续其搜索入口的设计风格,需要我们注意的主要有两点:

·取消与返回

不同于一般页面的导航栏左侧是”返回“的设计,搜索中间页多数选择的是无”返回“按钮,而在搜索框右侧加“取消”,通过键盘的回车键确认并进行搜索。这也与iOS人机交互指南中的建议一致,多数产品都采用了这种设计。

除了这种主流样式也一些不同的设计,比如左侧依旧为”返回“按钮,右侧是”搜索“按钮的设计。

两种设计在只有一级的搜索页面时并无明显区别,无论是返回或是取消,都是结束当前搜索行为,二者的区别更多是体现在出现二级页面时。

比如拥有搜索分类的微信,搜索一级页面采用的是右侧取消的,而进入二级、三级页时,加上了左侧返回,这里”返回“对应回到上一步的操作页面,”取消“则对应结束整个搜索行为,直接回到最初页面。

· 是否默认弹起键盘

多数产品进入搜索中间页后,搜索框光标闪烁,键盘自动弹起呈待输入状态,让用户可以更方便快捷的操作。但也有一些产品进入中间页后需要重新点击搜索框唤起键盘,为页面内容预留更多展示空间,侧重于突出中间页的推荐内容。

关键词联想

关键词联想是在用户输入搜索词的时候实时反馈,对该词进行模糊匹配,以列表展示节约用户的输入成本,帮助用户更快速的找到目标完成搜索。

· 色彩区分

表现关键词与匹配内容的关联度,有三种形式分别是:无区别显示、弱区别显示与高亮显示。

无区别显示更加注重匹配结果的整体感,适合在格式统一的列表中使用;高亮显示则较为注重匹配结果与关键词的关系,在格式多样的列表中可以更好的突出重点。

杰途IT培训学习网 备案号:

本站内容部份来自网络和网友自行发布,如有侵权等问题请联系本站删除。