当前位置:
首页 / 资讯 / 技术文章

如何把握搜索栏的设计要素

2021-02-25网联科技发布者:admin标签:

众所周知,搜索栏是APP UI 界面设计的高频组件,我们经常用的客户端几乎都能见到,比如上外卖软件想吃份麻辣烫,逛淘宝想买双黑色运动鞋,比如遇到什么问题想谷歌百度一下,这时候都会用到搜索栏,搜索是最快速又最有效的方式,这也渐渐形成了用户习惯

这时候你可能认为一个小小的搜索栏有什么好设计的?如果你这样想的话,那就大错特错了。

今天就如何把握搜索栏的设计要素给大家一些小建议。


1. 让搜索框处于合理的位置

当用户想要搜索内容的时候还需要花费精力来寻找搜索框,这就非常尴尬了。这意味着搜索框本身就不容易被察觉。在理想情况下,搜索框的设计应当和整个网站设计风格保持一致,同时在视觉上要略显突出,应将搜索栏放置在醒目的位置,便于用户发觉它的存在。将搜索栏放在隐蔽位置的app会让用户觉得沮丧,也会让用户的操作流程变慢。

很多电商app都将搜索栏放在首页顶部,对拥有大量商品的app来说,将搜索栏放在这样的位置,能够让它既明显又能够很快被找到。


2、将放大镜图标和搜索栏放一起

只有少数图标具有世界范围内的广泛认知度,放大镜图标恰恰是其中一个。就算你没有使用文字标签说明,用户也能将放大镜图标看作是“搜索”的意思。你应该使用一个粗线条,最简化的放大镜图标。因为图形细节越少,认知速度越快。


搜索框.jpg


3、让搜索栏尽量简单

在你设计搜索框的时候,请尽量让它看起来就是一个搜索栏,并且简单易用。可用性研究表明,默认没有显示高级选项的搜索栏看起来更加友好,所以,通常情况下给用户提供的搜索框最好不要提供进阶的搜索选项。


4、合理的输入框尺寸

输入框太小是最常见的搜索栏目设计错素,虽然用户可以输入比输入框更长的内容,但是可见的部分往往无法完全可见,这种设计的可用性并不强。这样的输入框可能因为可视范围的限制,促使用户使用短的、不精确的查询方式,因为更长的内容并不适合阅读。如果输入框能够符合用户的常见输入内容的尺寸来进行匹配,那么它的可用性会更强。


5、让用户明白哪些可以搜索到

最好是在输入框中包含示例,这样可以向用户给予建议。我们在搜索栏设计的时候就要注意,设计一些利于用户使用的小元素,比如在搜索栏里加入索引“输入关键词”这一类的提示。当我们的用户点击搜索栏进行搜索的时候这些提示就要自动的消失,不然用户还需要手动去删除,然后再进行搜索,这样是很不方便的。在用户搜索完成后,他们需要搜索其他东西时,我们应该在搜索框右边加上一个小小的删除按钮,这样非常方便用户进行多次的搜索。


扫二维码与项目经理沟通

我们在微信上24小时期待您的声音

解答:网站建设、APP开发、小程序开发

网联科技是一家以提供网站建设、APP、小程序开发、CRM系统开发为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求发展的企业贡献全部力量。

网联科技微信公众号

相关信息