“搜尋” 是許多移動端應用中的常見功能，尤其對於電商類、引擎類、資訊流類的應用，搜尋往往是其中重要的功能之一，據說淘寶多使用者 90% 的行為都從搜尋框開始。無論是移動端還是 pc 端，“搜尋” 的設計思考都以 “多使用者要得到什麼？” 作為出發點；但兩者的展現形式卻不盡相同。相較於 pc 端，移動端的搜尋功能需要在更小的螢幕空間上佔有一席之地；根據不同的業務形式，其展現的方式也是多種多樣。本文以 “搜尋的時間邏輯” 作為脈絡，從 “為什麼要搜尋－搜尋前－搜尋時－搜尋後” 對搜尋功能進行解剖式分析，給自己做分析整理的同時也分享給剛剛入門做移動端體驗設計的同學。
為什麼要搜尋－關於搜尋的行為思考

不同的搜尋目的
不同的多使用者或使用場景，多使用者搜尋的目的往往不同，一般分以下三類。
1 、精確搜尋。這種場景下多使用者目的清晰明確、直奔主題，透過在搜尋框輸入內容快速找到所需目標，完成此次搜尋動作。常見案例如百度地圖、 UBER 、網易有道詞典、同花順的搜尋功能等。
2 、提高尋找效率，高效鎖定目標或快速縮小範圍。這時候 “搜尋” 功能在一定程度上和 “篩選” 近似，有時候往往和篩選一起使用。這種常見於資訊瀏覽類應用，在多使用者瀏覽資訊的同時往往 “迸發” 出念頭，想要快速瀏覽有針對性內容，於是開始使用搜尋。常見案例如愛奇藝、下廚房、優酷、美團、大眾點評、知乎等。
3 、多使用者不知道自己想要什麼，透過 “搜尋” 啟發自己靈感。因為很多應用的搜尋頁面中往往有 “精心安排” 的資訊。為迎合這類多使用者需求，搜尋頁面一般有熱門搜尋的關鍵詞、搜尋類目、記錄等等。
寫在搜尋前－搜尋怎麼放
1 、搜尋圖示：在導航欄一側或其他位置放置，根據多使用者場景和重要級需求決定。一般搜尋圖示放在右側，當右側有兩個及以上按鈕時，考慮平鋪或摺疊。
2 、搜尋欄：以搜尋欄的形式直接放在導航欄或放在導航欄下方等其他位置，此時搜尋欄可結合語音、拍照、刪除（在輸入後顯示）等功能按鈕。
3 、搜尋作為標籤欄中的某一個功能：根據內容重要性決定排在第幾個標籤中。
4 、搜尋以單獨頁面或主頁 P0 功能展現：直接作為主頁面或主頁以較大篇幅顯示搜尋欄，內容及形式根據多使用者場景定義。（見圖一）

我是圖一
搜尋時－搜尋框的變身
1. 以搜尋欄形式展現的搜尋功能，搜尋框的位置可以出現較短的文案，長度需限制在搜尋框的長度以內，起到隱性提示和引導的作用，有時也會加入運營內容；當出現搜尋框時，往往配合 “取消”“刪除”“語音輸入”“拍照輸入” 等功能；當搜尋框與其他功能按鈕一起出現時，需要注意各個功能按鈕的可用性問題。（見圖二）

我是圖二
2. 以圖示形式展現的搜尋功能，當多使用者點選時，或以動效形式出現搜尋框，或直接至單獨的搜尋頁面。當然，搜尋框的形式展現時，點選行為也會觸發至一個新的頁面。無論以上哪種形式，當至單獨的搜尋頁面時，可展現的關於 “搜尋” 的內容就更加精彩紛呈了。一般可以給出以下內容：
1）與搜尋欄位相關的聯想詞列表：頁面上實時展現與搜尋關鍵詞有關的單一內容列表或多樣性內容展示。若關聯詞有相關操作或二級內容，如關閉、搜尋結果的副標題或補充內容等，可直接在關聯詞後露出。
2）搜尋內容的支援範圍：定義內容、類目列表、範圍欄（scope bar）給出支援的標籤或者 tab 。其目的是讓多使用者明確 “搜尋” 支援的範圍，相當於搜尋的 tips，有時候 “篩選” 功能會在該頁配合搜尋一起使用。（見圖三）

我是圖三
3. 搜尋歷史
4. 熱門搜尋
5. 可能在搜尋（根據多使用者習慣、喜好等資料推薦）
6. 精華內容
7. 運營推廣內容：如內容推薦、建議類目的關鍵詞。（如類目的設計、 CMS 頻道的設計、促銷活動的設計）（參考案例百度地圖）
8. 廣告
9. 以上幾種內容的結合體（見圖四）

我是圖四
10. 針對關鍵詞的進一步推薦搜尋的列表（我個人稱之為漸進式搜尋，參考案例：（知乎 WordPress APP），這是一種搜尋內容未能提供情況下，讓多使用者能夠 “有所得” 得好方法，提升了多使用者體驗。試想當您輸入了一大段文字之後展現的頁面是 “暫無內容”，相比於此，提前讓多使用者知道：“我們這裡暫時沒有您要的。但是，或許可以看看別的”“別的內容或許也有您意想不到的驚喜奧！” 此方案看上去像降級方案，但本質是讓多使用者的搜尋行為可控，反而提升了搜尋結果的多使用者體驗。（見圖 5）

我是圖五
搜尋後－搜尋的結果呈現
當我們完成搜尋時，以何種形式呈現什麼樣的內容才能更好的滿足我們的需求呢？當多使用者點選搜尋時，有兩種資訊的呈現形式，一種是在當前頁面展示，另一種是新開頁面。
1 、在當前頁面展示搜尋結果的頁面，內容較簡單，主要目的是為了讓多使用者進一步點選選擇，使得搜尋的結果可控。這種情況下常以列表形式平鋪地展現資訊，相關地二級標題或按鈕會結合搜尋結果同步露出。這種情況下，很多時候鍵盤地 “搜尋” 按鈕是禁用的或者鍵盤的設計無搜尋按鈕。
2 、當需要展示的內容有不同屬性，如列表、圖、圖文結合或更多的其他形式，則一般採用新開頁面的方式，資訊的展示也需要做分層處理。資訊的分層包括每個單元內資訊之間的對比、強調和弱化。不同單元和屬性的資訊間優先順序展示以及展示方式的區分。參考案例如下：（見圖 6）

我是圖六
3 、當搜尋無內容時，我們給多使用者什麼？簡單粗暴的形式是直接告訴多使用者沒有，但這種體驗太不好，作為互動設計師應該思考一件事 ““在沒有結果展示時我們還能為多使用者做點兒什麼？” 從多使用者的角度思考，即 “啥都沒有，我要做什麼呢？” 帶著疑問來開始這個頁面的設計，多使用者分為主動和被動。主動的多使用者這時候會做什麼？或許會重新發起一次搜尋，輸入更加精確的關鍵詞、提交報錯或反饋，這類多使用者總會找到他想做的事情。而對於被動的多使用者，我們就應該去了解他，投其所好。如相似度和關聯性推薦、熱門推薦、可能喜歡、搜尋歷史等形式。（見圖 7）

我是圖七
有時候多使用者對於搜尋結果並不滿意，我們可以在頁面上做結果頁展示的補償方案：如讓多使用者進一步明確搜尋詞，縮小搜尋範圍，如透過分類和篩選功能。二是引導多使用者在應用可支援的範圍內進行搜尋，如同花順的股票搜尋、知乎的搜尋案例等。
結語
本文僅從 “時間邏輯” 的角度把搜尋功能的形式做了一次簡單總結；但搜尋的場景往往根據具體業務需求千變萬化，但這恰恰是多使用者體驗設計的意義點所在，也是設計的本源，即 “探索人搜尋的初始慾望” 。關於搜尋，可以思考的點還有很多，隨意丟擲一個問題，如：點選 “搜尋” 的時候一定要喚起鍵盤嗎？再問，點選 “搜尋框” 的時候一定要喚起鍵盤嗎？這些都沒有永恆的固定答案，而相對正確的答案都在每一次的具體業務中。選擇 WordPress 網站建設 SEO 站群 WordPress 微信公眾號：sz-shamofeng