APP搜索結果頁的模塊化系統架構設計實踐

關鍵詞：模塊化、搜索結果頁、設計實踐

本文為關於搜索的設計實踐總結系列篇

在負責搜索業務設計的初期，工作是繁瑣而枯燥的。每天都會有不同的需求需要在搜索上展示，今天平台上了一個新服務需要展示，明天上了一個新頻道需要扶持，後天又有了新遊戲玩法需要開發產品，重點是這些服務、頻道、產品什麼玩法都不一樣，不同國家不一樣，不同行業不一樣，不同時段不一樣。而且在搜索這個這麼大流量的產品上隨時需要調整功能，需要立馬生效，風險可想而知。設計師和開發工程師不堪負重，夜以繼日的設計開發趕工，承擔巨大的心理壓力，經過長久的磨礪後，最後大家一起想了個出路，對搜索頁面的模塊化系統架構設計。它能減去設計師和開發的繁瑣重複工作，也能快速響應線上反饋，實時調整。

什麼是搜索頁面的模塊化系統架構設計

這個架構設計需要滿足幾個條件：可定製、通用靈活、節省開發設計時間、快速響應。這裡的節省開發設計時間不是單純減少重複造輪子的時間，而是直接減少開發，如下就是我們的模塊化系統架構設計的業務流程邏輯圖。

這個架構的流動是這樣的，起點是運營或者其它業務對搜索產品提出業務支持需求，設計師根據業務要求從已有的模塊庫裡面挑選需要的基礎搜索功能模塊和特殊功能模塊拼裝或者定製成業務需要的產品功能，之後服務端開發根據設計稿的模塊定製和數據定製進行配置，無需開發或少量開發快速線上生效多套方案，通過後台數據監控多套方案的數據情況，最終折優選擇上線方案。

這個架構的特色：

【數據源、交互形式、布局分離】：數據、布局開發從端開發轉移到服務端配置，交互設計和端開發的工作轉移為維護和開發基礎功能模塊，同時根據行業和國家差異化生產一些特色的功能模塊組件，一起構成完整的功能庫。在這之前的開發方式是整個頁面的布局和交互形式是固定一起的，要想改哪個功能模塊，就需要重新發布整個頁面，牽一髮動全身就是這個意思。新的開發方式使得每次更新只需要在服務端更改配置，而不需要再發布整個頁面了。所以這大量減少了開發資源和設計師的繁瑣工作。與此同時，因為模塊的通用性，可以輸入多樣的數據，也使得搜索可以在有限的模塊下產生多樣性，在下文我會詳細介紹如何將搜索結果頁模塊化、通用化設計。

【搜索心智傳達一致】：搜索是一個用戶消費心智的地方，任何固定的形式或者交互都是一種心智的傳達，用戶看到後會以光速判斷是否要繼續下去，一旦我們將不同的功能用相同的交互或者樣式來表達都會給用戶造成困擾或者誤解。而搜索的模塊化設計同時將這個模塊的功能心智確定了，任何地方使用都是統一心智，有利於搜索心智傳達一致化，提高用戶判斷頁面元素的時間效率。

【實時生效】：服務端控制數據和布局了，基本無客戶端開發成本，上線新功能就像打開電燈開關一樣方便快捷。產生任何問題都可以快速響應，將風險降到最低。

【折優上線】：方案開發快，降低了AB實驗成本，每個版本都可以快速同時看到線上數據反饋，產品不用靠拍腦袋決定上哪個方案，靠譜的設計方案放上線測試一下用戶反饋，快速選擇當前最優解。

搜索結果頁面的模塊化、通用化設計

搜索結果頁面設計端的模塊化設計框架如下。分為橫向圖層模塊化和縱向頁面內容模塊化，如下圖所示（以iOS為例）：

橫向圖層模塊化是將搜索結果頁分層，原則是：

• 層與層之間不能有功能內容交叉;
• 相同類型的功能只能放在同一個層裡面;
• 且每個層的先後次序是固定不可動;
• 在同一個場景上每個層都只能有唯一的一個，不能有多個相同的層;
• 制定好層承載的內容類型規則後，開發服務端同步規則協議，在需要的時候調用並填充數據即可。

拆分的層的具體定義為：

【內容層】這個層只能存放於搜索結果有關的內容和工具，如相關搜索詞下的營銷內容、產品結果內容、店鋪內容、多媒體內容等，搜索結果排列和篩選工具、搜索結果有關提示等內容；

【工具面板層】它是用來承載由工具入口觸發的二級工具內容面板，目前有篩選面板、排序面板等；

【導航層】全局導航和搜索bar的位置

【浮層】用來承載搜索結果內容衍生的更多的內容，類似查看更多等；還可以承載和搜索詞相關的營銷結果內容，例如紅包、字幕、活動內容。

上面這個案例用來說明如何做模塊化組件設計。這個組件的功能主要是用來提供給用戶錄入自己的信息，搜索結果根據用戶信息縮小產品範圍，這裡的設計定製給了汽車配件行業使用，用戶錄入自己車型號，搜索結果僅提供相關型號車的配件。同樣的功能也可以應用在母嬰行業下，例如輸入自己baby的年齡、體重、身高信息，通過這些信息縮小產品範圍。這個組件包含信息展示面板、信息錄入面板、信息管理面板三個功能。方案1的信息管理面板和信息展示面板集合在一個區域（方案1的第5張圖），這樣就導致內容層和工具面板層之間有交互，造成開發在層與層之間的耦合。方案2的設計就清晰地將信息展示安排在內容層，信息管理和信息輸入都放在了工具層，整個劃分非常清晰，雖然導致操作路徑從層變化變成了頁面的變化，稍微長了一點，但是用戶邏輯非常清楚，層與層之間沒有耦合，這樣整個功能模塊更加通用，數據配置也方便很多，不會因為有的行業沒有下拉數據操作就用不了。

縱向頁面內容模塊化這裡將內容層進行模塊化分割，在設計不同業務和場景的搜索結果頁時，可以將裡面的任意模塊組合使用。模塊化設計原則：

• 模塊之間的內容、布局不能有交叉，採取樓層的方式劃分；
• 每個樓層有正反兩面，都可以承載內容；
• 每個功能模塊有自己定義的心智內容，這個心智內容固定統一，不能混用；
• 不同心智的模塊的順序是固定的，不能隨意改動；
• 模塊展示的數據多樣化：可以根據不同的業務進行定製。從功能層面上模塊即可以填入工具型內容，也可以填入搜索結果相關內容，從數據形式上模塊既可以填入圖片、鏈接、文本、視頻等，從交互形式上看模塊既可以是純靜態展示，也可以是動態交互組件，如單選、下拉選項等；

當前拆分的模塊有：

【導航模塊】頁面頭部的全局導航，不可更換位置，單獨成獨立的模塊；

【工具模塊】對內容進行縮小範圍、排序等操作的工具，如排序、類目篩選、屬性篩選、活動篩選、服務篩選等；

【內容模塊】內容模塊包含與搜索詞相關的所有結果內容，如產品信息、活動促銷信息、遊戲紅包互動信息、視頻信息、博文評價類信息、直播信息等；

【營銷模塊】與搜素詞相關的內容被單獨拉出來強調營銷，如店鋪宣傳入口；

這套系統的應用案例

下面來介紹如何使用這套模塊化設計邏輯來快速開發產品。上圖是3種不同場景搜索結果頁，左圖是假髮寬泛詞的類目橋頁，用戶進來需要進行葉子類目分流。中間圖為假髮的具體詞的搜索結果頁，用戶需要根據類目產品屬性進行進一步縮小產品結果範圍。最右邊是fashion類搜索詞的搜索結果頁，這裡強化品牌功能，需展示品牌篩選的功能。這三種不同的場景，其實唯一的區別就是給用戶提供不同的工具幫助用戶從不同的角度進行縮小產品範圍的功能。

之前的開發流程是基於當前場景劃定能夠生效的業務範圍，如劃定假髮寬泛詞結果頁，然後這個場景的搜索結果布局是需要有導航、排序工具、類目分流導航、搜索結果列表的，這些組成一個完整的搜索頁設計，需要在端開發，服務端僅提供數據的傳遞。後面兩個場景也是這樣一個接一個地開發和上線發布的。

而現在的工作方式為：

第一步選擇模塊：我們的模塊庫裡面有圖文導航模塊、條件篩選功能模塊、平鋪的單條件篩選模塊（品牌牆）等等，如果沒有所需要的功能模塊，則需要我們的模塊庫補充新的通用功能模塊。這種補充新的模塊需要對功能進行審核，審核它是否是行業通用性的，是否是其它功能模塊不可替代的。

第二步拼合布局：一個頁面的組成可以是基礎的模塊加上這些特別的模塊。基礎模塊為：導航條+排序功能條（包含排序、切換視圖和常規篩選面板入口）+搜索結果列表。這些特別的模塊因為都是對搜索結果產生作用的工具模塊，所以都必須放在排序功能條之下，搜索結果之上。

第三步服務端配置：確定了模塊、布局，數據，這時需要服務端限定場景範圍，配置布局、模塊和數據。以上三個場景可以同時快速配置，快速AB測試生效。

這樣的設計思維變化後，之前的三種場景的設計等同於設計師只需要根據需求從模塊庫裡面挑選模塊確定布局即可交給服務端開發。當然這個的前提基礎是設計師需要在日常時間不斷的打磨已有的基礎組件，同時不斷豐富組件庫，將日常的設計工作轉化為去創新設計新的功能組件，而不是消耗在繁瑣的排版、貼圖、打標等重複性工作中。

不同功能模塊在相同層配置應用其它案例，左側兩個圖在搜索結果列表裡既有產品模塊，又有促銷banner模塊和熱門屬性詞篩選模塊，這裡其實是兩個不同場景的布局設計。左圖1是用戶查看很多屏商品後，沒有任何操作，這個時候提供一些大多相關query的屬性詞，快速提供給用戶幫助用戶決策和進一步縮小範圍。左圖2是用戶在查看商品結果時提供一些相關的營銷活動給用戶。這兩個就是在搜索結果集中插入其它功能模塊的設計方式。右圖則是在浮層上展示不同的功能模塊，第3個圖是紅包抽獎功能模塊，第4個圖是字幕模塊，這些模塊只需要開發一次，就可以配置在多個場景不斷復用。

再來看一些模塊的衍生應用。無線空間有限，為了滿足展示更多的功能，除了浮層的使用外，我們將模塊開發成可橫向無限擴展。如上圖中查看相似產品，按照常規設計，可能是點擊產品卡片某個位置，然後新開頁面或者浮層展示。可是這樣會將用戶帶離原來的瀏覽路徑，因此我們希望原地展開，看完還留在原地。這樣的要求下我們將卡片變成可橫向無線擴展，向左滑動可以查看相似商品。與此相似的還有天貓的商品模塊正反面應用。

天貓搜索商品後在展示列表中點擊其中一商品查看詳情後回到列表，該商品卡片區域會增加一個相似商品推薦浮層。巧妙運用了視覺停留時間以及卡片空間正反面設計，增加了觸達點。

結語

這套系統的設計和開發花費了比較長的時間，中間和開發業務制定協議也耗費了一些時間，但是磨刀不誤砍柴工，後續的搜索業務支持設計毫不費力。在實施的過程中，大家需要根據規則來設計和使用，形成用戶統一連貫的搜索心智輸出，減少用戶的困惑，所謂自律才能更自由就是這個意思。

--------- 招聘分割線 ---------

國際 UED 是阿里唯一一支國際化設計團隊， 為集團的國際及國內業務提供設計支持。我們在杭州、深圳、北京、香港、美國、俄羅斯都有 Office，如果你對我們的工作感興趣歡迎加入我們。

目前團隊開放職位：

資深前端開發工程師

資深交互設計師

用戶研究專家

資深視覺設計師

Content Manager

簡歷投遞郵箱：key.chent@alibaba-inc.com

如果你是無線開發工程師，我們這裡也同樣非常歡迎。來郵件吧！

等你哦！