隨著我們產品承載的內容越來越多，搜索功能在大多產品中都成了一個必不可少的功能。最初我們在看搜索框的時候，都會把它當作是一個常規的UI控件來對待，但隨著我們對產品的用戶體驗越來越重視的情況下，搜索框在設計時還是有許多需要我們注意的地方。
不管用戶帶著什麼目的去使用搜索功能，其使用行為都是點擊搜索框，彈出搜索中間頁，輸入搜索內容，最後查看結果頁。因此我們應依次對照這些操作行為進行關鍵點設計。這也是今天我要跟大家分享的重點內容。
搜索入口
首先給大家看一個調查表，這是兩名在谷歌工作的人為因素心理學博士A.Dawn Shaikh（道恩·沙謝赫）和Keisi Lenz做的一項研究（用戶對於搜索框在網頁中預期出現的位置）。從結果可以看出左上角和右上角是佔比最高的兩個部分，大部分用戶還是希望搜索功能出現在一個明顯的位置上。
因此產品中只要有搜索功能，我們通常會把它放在一個相對明顯的位置上，但是搜索入口具體怎麼設計還是得看搜索功能在這個產品中的權重如何。小編在這裡不做過多的分析，簡單給大家介紹一下現在APP中搜索入口最常見的三種形式。
1. 獨立導航標籤
如上圖中「1」的位置。這種搜索入口，說明搜索功能在整個產品中佔據絕對的權重，直接出現在底部或頂部導航欄中，這樣用戶在切換幾個導航頁面時，搜索入口是常態存在的。全局性的設計讓用戶可以隨時點擊進入到搜索頁面。一般而言，此類操作觸發後對應的搜索頁面功能和層級也更加豐富。
2. 搜索框式
如上圖中「2」的位置。 任務型應用通常使用搜索框形式，這種設計方式佔據了足夠的屏幕寬度，一般放在屏幕的核心位置，通常會在頁面頂部位置出現，用戶對此一目瞭然，可以快速點擊搜索。
3. ICON入口式
如上圖中「3」的位置。 這種入口通常出現在以瀏覽為主、搜索為輔的頁面。由於佔據空間較小，出現的位置沒有嚴格限制，因此放置位置較為靈活，可以出現在頁面角落或者收起在更多入口當中，避免與其它高權重需求爭權，它更多隻是作為一個輔助功能出現。
搜索中間頁
這個頁面簡單的來說，就是用戶點擊搜索按鈕，頁面立即彈起的一個過渡頁面。由提示語、返回按鈕、歷史記錄、熱門推薦、清除按鈕這些基本功能組成。但當我們滿足這些基本功能點時，如何讓搜索中間頁的設計更加貼心呢？
1. 給我一個精確的提示語
在搜索框中放置提示語或者示範性搜索問題來建議用戶如何使用這個功能，幫用戶弄清可以搜索些什麼。這樣對用戶也是一種良性的引導，給用戶提供了一個心理預期，如下圖中（圖一）和（圖二）。
（圖三）在完成基本功能時，它根據用戶之前的大數據搜索情況，量身定製了每個用戶的專屬提示語。把用戶的習慣放在第一位，打造一種專屬感，讓用戶覺得他是被區別對待的，從細節中去打動用戶。
2. 歷史記錄靠近一點
在開始這個話題之前先給大家說一個概念，如上圖展示，我們的眼睛會自動把紅色圓形從黑色圓形中找出歸為一類，這就是格式塔-相似律原則。相似律本質上是簡化和整體化認知對象的組織原則，它傾向於將接近、近似的元素組合起來作為一個整體。
如圖四、圖五，歷史記錄可以有效的減少用戶對重複性內容的不必要操作，呈現用戶的搜索歷史。根據認知心理學中的相似律，搜索框通常位於頁面頂部，歷史記錄緊貼搜索框展示，此時用戶的視覺焦點在這裡，更容易注意到，也不會產生認知偏差，因此該位置要避免被其他信息模塊佔據從而割裂二者的聯繫。同時對不同模塊在樣式上做點區別，更好的幫用戶區分模塊間的區別。
3. 分類搜索
在搜索功能全局性的情況下，搜索涵蓋的內容太多，僅在搜索框中出現提示詞已不足以滿足用戶對於信息分類搜索的需求。可以前置分類搜索模塊，在搜索開始前就縮小搜索範圍。
搜索過程
通常當我們點擊搜索框之後到進入搜索頁，輸入內容，點擊「搜索」按鈕到最後完成搜索。通常幾秒就完成了，但就是這幾秒鐘的時間，是我們產品功能人性化與智能化的體現。那我們應該怎麼更好的完善這個過程呢？
1. 動態實時搜索
根據你輸入的文本，對應的搜索結果將會實時動態過濾顯示在屏幕上，幫助用戶更快地找到自己想要的結果，體現我們產品的智能性。
2. 給用戶一點建議
當用戶在搜索框輸入內容時，搜索框下面出現了關於這個關鍵詞的眾多搜索建議，然後把每條建議進行了細化的拆分，用標籤提示。為用戶省去了到結果頁進行篩選的步驟，可以幫助用戶更快地到達搜索結果頁。
3. 加點微交互
在輸入關鍵字時，搜索框下方會出現一系列的聯想，而在點擊某條聯想右邊的箭頭後，我們會發現該聯想進入搜索框並引發了又一系列的聯想，選擇最終確認詞條，點擊搜索按鈕到達結果頁。整個過程可以讓用戶快速精準的到達搜索結果頁，避免輸入過程中出現錯誤輸入，最終提升產品轉化率。
4. 搜索時間過長，請考慮動畫
雖然搜索的過程正常3秒內可以完成，當網絡不好或者內容過多的時候，一定要給一個搜索狀態展示（或進度展示）。告訴用戶我們這個頁面正在進行中，分散用戶等待過程中的無聊感。
搜索結果頁
搜索結果頁是用戶的終極目標。怎樣把用戶所需要的信息準確且重點的展示出來，讓用戶一目瞭然，是這個頁面的主要任務。
1. 多維度展示
當展示內容過多時，應該對不同模塊的內容進行分類整理，把結果內容進行模塊展示，提升信息的清晰度和可讀性，幫助用戶快速找到目標信息。
2. 增加操作功能
在反饋結果頁上附加操作功能，讓用戶快速抵達目的地，縮短操作路徑，更有利於提升用戶操作效率。
3. 結果數呈現
顯示搜索出來的結果的數量，以便用戶可以決定他們要花費多長時間瀏覽結果。
4. 關鍵字高亮
結果頁面中快速查看到關鍵字並非一件易事，尤其是頁面文字數量眾多且關鍵字多次出現時。對結果頁中關鍵字高亮顯示，可以讓用戶快速找到自己想要的東西。
5. 進行有效的提示和糾錯
當我們出現輸入錯誤的時候，不要給用戶一個錯誤呈現頁，可以對用戶進行有效的糾錯和提示，以便幫助用戶快速且準確的完成輸入。
鏈接：優設網 - UISDC - 設計師交流學習平臺 - 看設計文章，學軟件教程，找靈感素材，盡在優設網！
今天就分享到這裡啦~~
想了解更多UI方面的知識可以私信站長喲
閱讀更多 UI設計靠譜站長 的文章
