1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

从这3个方面,帮你大幅度提升用户的搜索体验

时间:2020-09-04   分类:交互设计    作者:网络   来源:网络整理   点击:57

大家好,我是Clippp。今天为大家带来的文章是「搜索」设计。可能很多人认为搜索设计很简单:在主页顶部设计一个搜索框或者搜索图标,就可以完成操作。但搜索前、中、后的体验大家有没有仔细考虑过呢? copyright 9fen.net

在本文中,将介绍搜索设计需要了解的内容,以及在不同App和案例中的搜索体验。 www.9fen.net

搜索前的体验

搜索是产品中不可或缺的一部分,无论打开哪个App, 我们都能很快找到搜索功能本文来自九分网络

搜索作为一个功能入口,简单的呈现方式对用户来说很重要。

九分网络

从这3个方面,帮你大幅度提升用户的搜索体验

内容采集来自9fen.net

www.9fen.net

搜索设计常见的形式有3种:

本文来自九分网络

顶部搜索框 本文来自九分网络

图标(放大镜)搜索

九分网络

底部搜索导航 本文来自九分网络

从视觉和优先程度来看,底部导航>搜索框>图标。那么每种形式的优缺点是什么,又分别在什么时候使用呢?

内容采集来自9fen.net

1. 顶部搜索框 www.9fen.net

搜索框通常位于App主页的顶部,作为一个大的触摸目标,更容易被用户发现和使用。

本文来自九分网络

搜索框的组成一般包括容器、预设文字、操作按钮。 内容采集来自9fen.net

从这3个方面,帮你大幅度提升用户的搜索体验 九分网络

www.9fen.net

容器通常填充为白色或灰色,里面带有预设好的产品文案。但是容器什么时候用白色,什么时候用浅灰色呢?这取决于App主页的背景色。 内容采集来自9fen.net

设计准则是始终将容器的颜色与页面背景色相对比。拿谷歌地图和微信读书相比较,灰色背景下用白色的搜索框,反之亦然。

本文来自九分网络

从这3个方面,帮你大幅度提升用户的搜索体验

九分网络

www.9fen.net

当然也有例外,Airbnb在白色背景上就有一个白色的搜索框。为什么这样设计呢? 本文来自九分网络

因为它的搜索框带有阴影,能和背景作出区分,也是一种可行的设计方法。 copyright 9fen.net

从这3个方面,帮你大幅度提升用户的搜索体验

copyright 9fen.net

内容采集来自9fen.net

预设文字的作用是提示用户要搜索的内容或搜索方向,告诉用户可以从搜索中得到什么。 本文来自九分网络

在App Store中,预设文字告诉用户可以搜索「游戏、应用、故事等」,Messenger中的预设文字只有「搜索」,为用户提供功能入口。 内容采集来自9fen.net

从这3个方面,帮你大幅度提升用户的搜索体验 www.9fen.net

内容采集来自9fen.net

预设文字在内容浏览类App中很常见——不仅可以展示拥有的内容类别,还能结合搜索趋势来积极地推广热门内容。 www.9fen.net

比如微信读书的搜索框使用最近流行的书作为预设文字,以此提高内容的曝光率,吸引用户阅读。 九分网络

从这3个方面,帮你大幅度提升用户的搜索体验

www.9fen.net

内容采集来自9fen.net

操作按钮虽然与搜索相关,但摆放的位置不固定。可能在搜索框内部,也可能在搜索框两侧。

copyright 9fen.net

哪些图标/文本按钮对搜索有帮助呢?最常见的是搜索框中的语音输入功能和二维码图标。 copyright 9fen.net

从这3个方面,帮你大幅度提升用户的搜索体验

本文来自九分网络

内容采集来自9fen.net

另外一个好的搜索体验的关键是能从视觉上区分与搜索相关的图标。

内容采集来自9fen.net

2. 搜索图标

九分网络

如果一款产品希望用户专注于浏览内容,或者不需要频繁使用搜索,可以采用图标的样式将搜索入口放在页面顶部。

九分网络

例如,在Medium上用户通常是漫无目的地浏览内容,而不是搜索特定的主题;Facebook上的用户通常只想浏览朋友的帖子,很少搜索内容。

本文来自九分网络

从这3个方面,帮你大幅度提升用户的搜索体验

九分网络

www.9fen.net

3. 底部搜索导航

内容采集来自9fen.net

与前两种形式相比,底部搜索导航离用户距离最近,更容易作为接触目标也被赋予更多的特性。

copyright 9fen.net

UberEats通过主页的排序和过滤,帮助用户分类感兴趣的餐厅,并将搜索作为底部导航的第二个标签,这样用户就能够不断看到和探索新餐厅。

本文来自九分网络

从这3个方面,帮你大幅度提升用户的搜索体验 copyright 9fen.net

本文来自九分网络

Tiktok也将搜索入口放在第二导航中,完整的首页有利于为浏览视频的用户提供沉浸式的体验。

www.9fen.net

标签: 优设 优设网 搜索 搜索框设计 搜索设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----