多语言展示
当前在线:103今日阅读:91今日分享:37

如何设计出漂亮的搜索模式?

如果你正在阅读这篇文章,那么你一定正在设计一个有搜索功能的网站或应用程序。在这篇文章中,我将介绍5个最佳实践,这些实践可以帮助大家设计了更好、更实用的搜索机制。
5个实践
1

视觉线索:使用放大镜图标,我无法保证这样会加快了搜索栏查找的速度。但是图标越简单越好,较少的细节可以让用户更快地浏览。虽然,一个图标本身没有输入容器或按钮,实际上会使搜索更加困难。注意:避免将按钮放在输入框的左侧,上方或下方。PS:在文本输入获得焦点前,你可以隐藏输入按钮。     确保按钮的大小适中,以便点击起来感觉自然。

2

输入特性:有时候,越是闪亮,强大或面积大的东西也不一定能引起人们的注意,搜索模式也一样。不如将它改为你理想的风格!但切记搜索框的设计必须与你的网站或应用程序的主题相吻合,并同时确保它足够引人注目。Youtube新的(令人惊叹的)黑色主题通过保持搜索模式与其他元素的一致性就完美地阐述了这一点。

3

透明占位符:为输入的占位符文本使用适当的副本很重要,它们通常是暗示用户可以搜索的内容。 这确保了他们知道要搜索什么,并且不会因编写错误导致查询失败而感到沮丧。最近,Web工具可以通过在HTML5中添加提示作为占位符来轻松完成此操作。

4

引导查询,即自动提示:采用自动提示的目的不是为了使搜索速度更快,而是在用户查询构建中提供一点帮助。 你可以通过执行预测的搜索模式来实现这一点。例如用户想问这个可怕的词是什么?预测的搜索模式是根据用户正在编写的所有字符,猜测输入的是什么词汇,预测他们的查询将会是什么而弹出自动建议。

5

不要忘记定位:用户对AD Shaikh&K.Lenz在2006年发现的某些UI元素和模式的位置有一定的要求。搜索就属于这种被要求的模式之一,绝大多数用户希望在界面的顶部中心或右上角找到它,就像上面提到的研究结果和以下图中所示。

注意事项

我希望这篇文章能够帮助到你们当中的一些初学者,甚至UX和UI设计的老手。

推荐信息