“搜索” 是許多移動端應用中的常見功能，尤其對於電商類、引擎類、資訊流類的應用，搜索往往是其中重要的功能之一，據説淘寶多用户 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