搜索就像是用户与app或者网站之间的对话:用户通过提问表达信息需求,app或者网站通过展示结果来作为回应。用户期待流畅的搜索体验,并且基于搜索结果的质量用户通常会对一个app的价值形成一个快速的判断。
当我们设计搜索界面的时候有很多点是需要考虑的,不过为了方便阅读,我将这篇文章分为两部分来讲:搜索栏的设计和结果展示页的设计。尽管文中的某些具体建议对于你的设计需求和目标(cause)来说会显得比较主观,但还是有一些通用的设计要点是行之有效的,它可以适用于不同的app和网站。在开始整篇文章之前,我们先思考一个问题(Emerson)——什么时候需要用到搜索?
二. 什么场景下该用/不该用搜索
小的站点最好不要有搜索功能。当一个网站的网站内容有限时,其实没必要有搜索功能。
只有当网站的规模和复杂度都达到一定程度的时候搜索功能才会显得尤其重要。网页设计在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。由于用户通常需要找到某一个具体的商品,因此电商网站或许是使用搜索功能最常见的案例了。在一些大型的电商网站,搜索栏甚至会独立于头部并且会在UI界面中占据视觉焦点的位置。高达30%的用户会使用网站内的搜索工具,而这一行为会极大地帮助商家搞清楚用户到底需要什么。
搜索功能对那些像订机票或者提供信息服务(fú wù)的网站来说也尤其重要。网页设计在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。
三. 如何设计好搜索框
搜索框是输入区域和提交按钮的组合。也许有人会认为搜索框根本不需要设计,毕竟它就只有两个元素。但是由于搜索框在海量信息网站内容的网站是最常被使用的设计元素,因此其易用性不言而喻。下文将分为 8 各部分来说明如何设计好搜索框:
在视觉上突出搜索框
搜索框与放大镜icon配合使用
将搜索框置于用户预期的位置
提供搜索按钮
告诉用户他们可以搜索哪些网站内容
每个页面都要有搜索框
合适的尺寸
使用智能(intelligence)推荐/匹配机制
1. 在视觉上突出搜索框
搜索框设计最重要的原则就是让它变得很醒目。如果搜索在你的网站或者app里是一个很重要的功能,那么它应该被放在最醒目的位置(position ),因为它是用户查找内容最快捷的路径。
通过点击单独的icon或者按钮来激活隐藏的搜索框有以下劣势:
搜索功能不容易被用户注意(attention)到。网站制作为了做到主题鲜明突出,要点明确,我们将按照客户的要求,以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。相比于开放式的文案输入框,icon所占用的空间更小,因此在视觉上单独的icon和按钮更难被用户注意到。
增加交互成本。换句话说在用户使用搜索框之前还得增加一步操作控制。
2. 搜索框与放大镜icon配合使用
Icon从其含义理解是某种事物、行为或者想法的视觉符号。拥有放之四海皆准的可识别的icon是少之又少,而放大镜却是其中之一,甚至不需要多余的文案标签用户就能知道放大镜代表的是“搜索”。