[譯]如何設計出訪問性更佳的搜索欄

• 原文地址：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 個核心功能，這可讓咱們一次只專一一項活動。