[译]如何设计出访问性更佳的搜索栏

• 原文地址：How to design: accessible search bars
• 原文做者：Marty Seinamets
• 译者：Chor

最近有一位设计师就她的 app 设计向我寻求反馈，我很高兴能够帮上她的忙。我一贯很乐意与设计师们交流心得，这是一个能够激发他们产生新灵感的过程。

我遇到的其中一个问题就是搜索栏的设计。尽管这个问题看上去很不起眼，但它也会影响到用户的第一印象。咱们并不但愿用户由于一个访问性极差的搜索栏而放弃使用咱们的产品。

对 app 设计的反馈启发我写下这篇文章，借此讨论如何设计一个兼具功能性和可访问性的搜索栏。这个话题颇有意义，毕竟咱们的决定会对用户体验产生影响。

本文的重点在于移动设备的搜索栏设计，不过其中也有一些原则一样适用于桌面设备。你能够本身挑重点记一下笔记。

1  搜索图标

为了让用户关注到网站或 app 上的搜索栏，咱们可能会考虑向搜索栏中添加一个搜索图标。做为一个视觉元素，它可让搜索栏更加显眼、更加容易被用户找到。

现现在，在视觉感知的驱动下，web 设计频繁使用图标和图片。相比文本，图标和图片能够更快地被人眼注意到，而且能够在占用空间极小的前提下传达更多的内容。

搜索图标的“出镜率”是如此之高，咱们接下来会研究它的不一样布局位置以及对应的目的。以后咱们会讨论合理的图标大小是如何提升咱们的工做效率以及用户体验的。

搜索图标在输入框前面

这种类型的搜索图标每每是用来指示搜索栏位置的。咱们无需点击任何按钮来显示结果，搜索结果会在咱们输入完毕后自动显示在搜索栏下面。

若是 app 或者网站的搜索栏隐藏了，那么图标必须是可供点击的。也就是说，在点击图标以后，搜索栏会显示在屏幕上。如若必要，还应该提供一个取消按钮用来再次隐藏搜索栏。

动画演示 —— 搜索图标用来指示输入框的位置。

搜索图标在输入框后面

这种类型的搜索图标不只用来指示搜索栏位置，并且充当了按钮。只有点击按钮，搜索结果才会显示。大多数状况下，图标自己就是一个单独的按钮，可能位于搜索栏的内部或是外部。

不过它有时候会让用户感到困惑。图标看起来像是搜索按钮，可是却不能点击，这是由于它只是用于指示输入框的位置。但话又说回来，若是只是起到指示做用，应该把它放在输入框前面。

动画演示 —— 位于输入框后面的搜索图标不只用来指示位置，并且充当了按钮

兼具二者特色

有一些搜索栏兼具上述二者的特色。用户进行输入操做以后会自动提供预备选项以供搜索，同时也能够点击搜索按钮查看更多结果。这种搜索栏是比较受欢迎的。

手机键盘自己包含的按钮也能够取代搜索栏中的搜索按钮。不过，有些用户不习惯键盘按钮，因此要根据用户状况决定是否设置搜索按钮。

动画演示 —— 无搜索按钮但兼具二者特色的搜索栏。

若是咱们提供了搜索建议，而且咱们的用户熟悉设备，那么能够将图标放在输入框前面做为标志。要想查看全部结果，用户必须点击键盘上的“回车”，“搜索”或者“前进”按钮。

若是咱们没有提供搜索建议，那么即便手机键盘上已经有“回车”，“搜索”或者“前进”按钮，也要在搜索栏中提供搜索按钮。这是为了照顾那些对设备不熟悉的人。

根据图标大小决定间距

做为一个小元素，图标所占空间并很少，但咱们依然要作到合理地利用全部空间。搜索栏中的图标占用空间较多时，会让搜索栏变得很难看。

保持图标周围的间距相等，这会让搜索栏看上去更加和谐。为了让图标周围有足够的间距，应该让其大小约为搜索栏高度的 45%。这个尺寸不会产生任何违和感。

2  占位文本

占位文本是一段短小但信息丰富的文本，描述了咱们但愿用户采起的操做。简而言之，它是用来引导和帮助用户的。

搜索栏的占位文本一般使用浅色，与大多数背景颜色不会产生强对比。接下来，咱们将探讨颜色对比度的重要性，以及一些与其相关的可访问性方面的问题。

颜色对比度和无障碍性

颜色对比度) 描述了两种不一样颜色之间的差别。若是占位文本对比度较弱，那么会给视力受损用户的阅读带来障碍，对于任何颜色来讲都是如此。

<span style="font-size:16px;color:#999">动画演示 —— 浅色的占位文本会影响无障碍性。</span>

有不少对比度检查工具能够帮助咱们避免这些问题。其中之一就是 WebAIM Contrast Checker，它能够检测对比度是否合乎 WCAG 的标准以及对应的一致性等级。

WCAG 是什么？

Web 内容无障碍指南 能够帮助设计师和开发者为障碍人士建立无障碍性的内容。本文咱们只讲解 WCAG 的部份内容，也就是颜色对比度。

WCAG 有三个从低到高依次排列的一致性等级 —— A，AA 和 AAA。等级越高，web 内容的无障碍性就越高。

3   搜索框

咱们在前面了解到了占位文本和搜索图标，是时候聊一聊搜索框了。有不少种方法能够为不一样的移动设备和用户设计和开发出更易访问的搜索框。

移动设备屏幕较小，这让咱们的点击变得很困难。尤为是当搜索栏不够大的时候，咱们很容易误点其它按钮，这是一个很常见的问题。

搜索栏并无一个全部网站和 app 都应该遵循的统一尺寸，但能够确定的是，它们应该尽量的显眼和容易访问，毕竟这些小细节会影响到用户体验。

隐藏搜索栏

隐藏图标背后的搜索栏能够节约大量空间，咱们能够利用这些空间展现更加剧要的东西。不过，在移动设备上隐藏搜索栏并不是是一个绝佳的主意，由于单个图标很难引发用户的注意。

若是用户须要反复进行搜索操做，那么应该始终在屏幕上显示搜索栏。展现搜索栏，这自己就体现出了搜索操做的重要性。

若是搜索操做是次要的，且用户即便不靠搜索也能完成主要操做，那么咱们能够将搜索栏隐藏在搜索图标后面，引导用户将注意力放在更加剧要的事情上。

动画演示 —— 点击按钮后，原先隐藏的搜索栏出如今设备屏幕上。

带有单独搜索页的 App

一些 app 将搜索功能集中放在一个单独的页面里。尤为是当 app 有众多和搜索同等重要的功能时，这种方法更加常见。这些功能通常展现在底部导航栏。

底部导航栏最多有 5 个 app 的核心功能，这种布局方式让导航更加便捷。像这样分离功能能够减小屏幕上的干扰，让咱们一次只专一一项活动。

动画演示 —— 带有单独页面的搜索功能以及底部导航栏。

总结

在设计搜索栏以前，咱们须要进一步了解搜索栏的组件，了解不一样的图标位置、颜色对比度和功能是如何影响用户体验的。

本指南旨在介绍如何设计出用户更易访问的搜索栏。恭喜，你已经阅读完本文了。最后咱们回顾一下经过这篇文章学习到的关于设计搜索栏的知识。

设计原则一览

• 在实现咱们的想法以前，咱们必须审视本身的决策或想法。这些想法会影响到咱们营造的用户体验。
• 比起文本，咱们更容易识别图片和图标，有时候，它们比文字的表现力更强。
• 位于输入框前面的搜索图标能够起到指示做用，搜索结果会显示在搜索栏下面。
• 位于输入框后面的搜索图标不只能够起到指示做用，并且还充当了按钮，要只有点击按钮才会显示搜索结果。
• 有的搜索栏兼具上述二者的特色，是否在搜索栏中设置搜索按钮，取决于咱们的用户。
• 图标的大小保持在搜索栏高度的 45%，这可让图标拥有更多空间，同时让搜索栏看起来更加和谐。
• 弱对比度会给视力受损的用户带来阅读上的障碍。WCAG 能够帮助咱们建立访问性更强的 web 内容。
• 若是用户不须要反复进行搜索操做，能够考虑隐藏搜索栏。
• 若是搜索功能是 App 的核心功能之一，而且底部使用了导航栏，那么能够将搜索功能集中放在一个单独的页面里。
• 底部导航栏最多有 5 个核心功能，这可让咱们一次只专一一项活动。