如上所述，常見的過濾篩選的設計形式有下拉列表，Tab選項卡，Segmented Controls控制項，彈窗形式（包括彈窗/側邊欄/浮層等），標籤，多選，單選，toggle標籤按鈕等，通過這些篩選過濾的形式來展現和不同維度的約束條件即可對搜索結果進行篩選和過濾。值得注意的點是，篩選過濾的設計形式不能對搜索結果展示造成影響，即搜索結果的展示是主體，篩選過濾是輔助功能，一般而言，過濾篩選區域位於搜索結果列表的頭部，所佔區域不能過大，當過濾篩選的結構邏輯和操作比較複雜時，可以採用彈窗/側邊欄/浮層的形式，將一些精細的過濾篩選隱藏轉移到次級結構結構中，用戶需要時點擊入口展示篩選過濾條件即可。

（7）提示引導信息

大體上提示引導信息有兩大類，第一類是幫助用戶操作或使用產品的說明信息，如搜索框中hint提示用戶「輸入關鍵詞」，這類信息相對比較固定，引導用戶操作和使用產品功能，用戶基本上不會反感；第二類是向用戶傳遞不是用戶所預期的「誘導」信息，如搜索框中hint提示「京東618 大牌距惠」，這類信息多半是定製的，一般來說帶有「商業利益」的性質，如果使用不當，可能會讓用戶產生反感。提示引導信息是與用戶的操作是相關聯的，有操作的地方就可以有提示引導信息。

a. 搜索前——提示引導信息

搜索前用戶的操作路勁是從搜索入口進入搜索頁面，因此可以在這兩個地方向用戶提供一定的「信息」，提示引導用戶。

對於搜索入口來說，如果是獨立的搜索入口形式，如搜索圖標，那麼基本上無法有提示引導「信息」，畢竟樣式簡單，空間有限；如果是搜索框的形式，那麼可以利用文本框的hint提示，向用戶傳遞「信息」，這也是普遍的做法了。

搜索頁面是單獨的頁面，布局邏輯相對比較複雜，因此是提示引導信息很好的載體。通過搜索框的hint提示向用戶傳遞提示引導信息，當然這些「信息」的類型可能不一樣，有些應用為用戶提供的操作引導，比如音樂搜索中提示「可以通過歌詞來搜索歌曲」，這是第一類提示引導信息；有些可能是定製化的「信息」，例如用戶最近在淘寶上瀏覽過滑鼠相關的信息，那麼搜索框的hint提示信息可能就是「羅技新滑鼠」，這種「信息」是動態的，定製的；另外有些應用會向所有的用戶展示相同的信息，比如hint提示都是「xxx軟體管家」，後面兩種都屬於第二類提示引導信息。有一點需要注意，就是「信息」的形式和量。推薦使用純文本字元標籤或簡單顏色圖標的形式，而不要使用圖片或大色塊複雜的圖標或banner等。此外搜索時輸入法鍵盤會調起，為避免信息被鍵盤遮擋，最好將主要的提示引導信息布局在頁面上半部分。如下圖紅色所示為網易雲音樂的搜索推薦，使用了純文本字元標籤的形式，即向用戶傳達了「熱搜」信息，引導用戶搜索「熱搜關鍵詞」，又不會過分引起用戶注意力而干擾用戶的搜索行為。

b. 搜索中——提示引導信息

在搜索中，用戶主要操作集中在搜索框中輸入關鍵詞和過濾篩選搜索結果。

用戶輸入關鍵詞的過程中，上文已經分析的實時匹配結果就是一種提示引導信息，實時匹配結果可以為用戶提供「關鍵詞」相關的提示引導信息，甚至還可以提供部分不相關的信息，當然不建議這麼做，畢竟會大大損害用戶體驗。

常見應用常見還會在搜索結果中插入相關或不相關的提示引導信息。如下左圖所示為在用淘寶中搜索「羅技鍵盤」，在搜索列表中會出現「提示引導信息」的關鍵詞（紅色框區域），其中「雙飛燕鍵盤」「雷蛇遊戲鍵盤」已經完全不屬於用戶預期的搜索範疇，其目的是用了引導用戶去購買或者對比該品牌的鍵盤，當然這樣的「提示引導」不僅可以引導用戶購買其他品牌的鍵盤，還可以完善用戶整個購物體驗，算是很「完美」的設計。小米應用商店的搜素模塊的設計就比較直接了，如下右圖所示為在小米商店搜索「淘寶」時給出的搜索結果，排在第一位的卻是拼多多（紅色框區域），雖然將視覺樣式做了一些區分，但這種提示引導的「廣告氣息」太重。此外針對網易考拉的展現形式也不是標準的列表形式，而添加了更為豐富的縮略圖列表樣式（紅色框區域）來吸引「戶注意力」，也是很明顯的「誘導」提示信息。

c. 搜索後——提示引導信息

用戶確定搜索結果後大多數應用都會跳轉到其他模塊的頁面，比如淘寶會跳轉到商品詳情頁，所以在搜索後的這個過程中，很難向用戶展示引導提示信息。就算有提示引導信息也是與其他模塊頁面緊密相連，比如購物類app在下單完成後會根據用戶購買的實際情況在頁面出現一些商品推薦，比如買一個碗，會推薦一些其他的廚房用品。當然從嚴格的產品邏輯結構上講，這些「信息」已經不屬於搜索模塊了，但從用戶完整的使用流程上講，還是有關聯的。

產品的目的從來都不僅僅是為了服務用戶，還需要考慮產品的「目的」（如利潤或是用戶數），只有將用戶需求和產品目的相結合才能讓產品長遠的發展。 雖然搜索模塊中的商業性質的提示引導信息可以帶來一些商業利益，但要把握一個度，如何在合適的地方、在合適的時機為用戶展示這些「信息」需要深思，如果隨便展示這些「信息」，那就會對用戶的使用體驗造成非常大的負面影響。在這一點，淘寶的搜索模塊做的很好，將「信息」與用戶的搜索操作關聯起來，不僅不會干擾用戶正常的搜索操作和流程，還會提升用戶的購物體驗，值得借鑒和深思。

（8）搜索記錄

搜索記錄或稱為歷史搜索，保存了用戶搜索過的關鍵詞，主要目的是為了方便用戶重複搜索時無需重新輸入關鍵詞。搜索記錄一般展示在搜索頁面中（頁面初始狀態，輸入關鍵詞後不展示），其形式多為標籤或列表。如下左圖所示為淘寶搜索模塊中的搜索記錄，淘寶還提供了清除搜索記錄的功能，點擊刪除按鈕則刪除所有搜索記錄。如下右圖所示為網易樂音樂的搜索記錄，每一個搜索關鍵詞都是單獨一行，並在關鍵詞右邊展示刪除「X」按鈕，點擊則可以刪除該條搜索記錄。搜索記錄對於產品而言是用戶大數據的一部分，產品可以針對用戶的搜索行為與記錄，為用戶提供個性化服務，因此條件允許的話，在產品前期中就可以做一些規劃和埋點。

淘寶和網易雲音樂的搜索記錄設計是2種比較典型的設計，其中設計模式都是「歷史搜索關鍵詞」+「刪除搜索記錄」，形式不一樣但本質是一樣的。至於搜索記錄放在什麼位置可以根據實際情況決定，一般都會在搜索頁面首屏中，在提示引導信息之後或者之前都是可以的。

6. 普適性搜索模塊設計模式歸納

通過上述的分析和歸納，針對搜索模塊，可以歸納出一種的較為普適性的「設計模式」，該設計模式包括搜索模塊的主要頁面路徑以及頁面布局，如下圖所示，其中的設計形式是綜合考慮所有因素（包括產品，技術，用戶，成本，使用體驗等）的結果，在實際中可以根據產品自身的需要採用不同的布局和實現方式（如上文中一些常見的主流設計形式），比如該設計模式中認為通過返回按鈕（Up Button）來實現完成或放棄搜索回到原頁面是最簡單最有效也是最為普適性的方式，但實際中依然可以採用其他設計方案來實現同樣的功能。

該設計模式將搜索模塊分為搜索入口和搜搜頁面，其中搜索的主要流程都是在搜索頁面中通改變頁面的內容和狀態來完成的，即搜索頁面是單一頁面和結構，上圖中第2，3，，4，5屏頁面都屬於同一頁面的不同狀態。搜索模塊的設計模式中有些功能元素是一定需要的，有些功能元素是可選，在實際中，可根據產品的實際需要來選擇。

7.總結

單獨從搜索本身來講，搜索功能並不複雜，但是如何做好產品的搜索功能也不是一件容易的事，在設計過程中是需要選擇一種最適合自身產品的搜索形式。可以從以下幾個方面進行思考和分析：

（1）產品分析

產品特點（如定位和發展策略）會影響具體的設計方案。比如產品包含大量的信息，那麼在整個產品架構中搜索模塊的重要性就非常高，而產品中對搜索功能需要程度不同，那麼就需要採用不同的搜索形式和設計方案。每個產品的特點都是不同的，甚至同一產品在不同時期的產品特點都是不同的，這些特點都會影響設計方案，所以在設計中需要考慮這些特點。

（2）用戶分析

任何設計都是為用戶服務的，產品是為滿足用戶需求而存在的，搜索模塊也是一樣如此。在設計方案前最好對使用搜索的用戶進行深入的分析，包括用戶使用場景，用戶特徵，用戶搜索目標特徵以及用戶使用流程特徵等等。在設計方案過程中，應該根據用戶的「需求和特徵」來進行設計，並在最終的設計方案中體現這些用戶特點。

（3）用戶體驗和產品目標之間的平衡

做為合格的設計師要懂得如何平衡用戶體驗和產品的目標，既要保證用戶使用產品的體驗，又要保證產品的目標。這兩者之間的平衡是一種良性循環，好的使用體驗能夠實現更多的產品目標，更多產品目標的實現更好的設計。在設計前期就需要對各方面進行深入的分析和研究，比如產品定位，產品目標，用戶需求，用戶特徵，具體功能需求等，只有在前期將這些所有相關的「利益因素」分析透徹，才能在具體的方案中體現這種平衡。建議利用雷達圖去分析各個「利益因素」，簡單高效。

（4）設計方案的拓展性和延續性

羅馬不是一天建成的，同樣優秀的產品和設計都需不斷的改進和迭代。因此在設計方案的時候需要考慮方案在後期迭代中的拓展性和延續性，尤其是成熟產品，並不能每一次需求都可以給予設計師天馬行空設計的機會，因此在設計方案前期就需要針對性的進行考慮，保證方案的拓展性和延續性，這樣既能保證用戶的體驗也能保證產品的長遠發展。

寫在最後

這次文章不是很滿意。我之前一直在想，一定要寫的有理有據，因此在文中盡量將所有的相關點都寫出來了，最終卻導致文章結構有點亂，行文也是啰里八嗦的，寫完後，在想要不想po出來，但最想想還是留下來了，不管寫的怎麼樣，僅僅勉勵自己，希望再次進步。

作者現在是一名交互設計師，寫的不好不正確的請見諒。記錄，僅以此自勉。歡迎關注我的公眾號notestudy，會定期寫一些與設計相關的短文，謝謝支持。

推薦閱讀：