5000字干貨，幫你全方位解析搜索歷史模塊的設計之前給團隊招人面試，發現很多候選人在回答「這里為什么這么設計」時從好看、美觀的角度來解釋。這個維度是很重要，但這種主觀的決策依據，不僅和用戶、業務訴求斷層，也很難讓我們的設計站穩腳跟，讓對方信服。所以，每一處細節背后的設計思路就變得尤為重要。我們在做日常需求時，也可以通過不斷的自問「為什么」來尋找支撐。比如我之前做的「搜索歷史」的需求，看似一個非常簡單的功能，但當我自問這么設計的支撐依據時，卻很難說出口。所以，我花了些時間挖掘它背后的邏輯，并將思考過程和成果沉淀成文，希望這些內容能給你帶來幫助和啟發。一、關于搜索歷史尼爾森前輩在他的十大可用性原則中明確建議，在設計中需要將用戶以往的歷史行為呈現給用戶，以此來減少用戶的記憶負擔。搜索歷史功能就是一個典型，它和播放器的歷史跳轉功能、轉賬的歷史賬戶功能一樣，本質都是為了減少用戶的記憶成本而存在。但搜索歷史該如何設計布局呢？二、搜索歷史的三類布局我搜集了各行業21個競品，發現搜索歷史的布局大概可以歸納為以下三類。1.自適應布局關于自適應，簡單說，就是容器的寬度跟隨內容的變化而變化，而padding（塊內間距）保持固定。所有競品當中，以下這三類產品的搜索歷史，全部使用了自適應布局（考慮到篇幅原因只放部分截圖）。1）電商類淘寶、考拉、京東、閑魚、天貓、pdd，這些產品的搜索歷史普遍使用了自適應布局。2）生活服務類美團、餓了么這類生活服務類平臺，全部是自適應。3）內容類包含各種短視頻類、資訊類、音頻類的內容產品。比如網易新聞、騰訊新聞、喜馬拉雅、簡書、荔枝、小紅書。它們的歷史記錄也全部是自適應。①優點大幅節省空間提升屏效，同等面積可容納更多的記錄；全圓角膠囊形式增強了點擊感（關于圓角對點擊行為引導的理論依據，可參考我之前關于按鈕的文章）；膠囊聚合的形式讓信息層級更明確和聚焦（參考同上）。②缺點面積不一致下的布局，在垂直方向無對齊關系，迫使動線水平遷移，查找和區分效率低；面積不一致，直接導致了點擊體驗的不一致；歷史詞數量較多時，無序混亂感較強。2.雙列布局使用這種布局的競品不多，頭條、百度、知乎和西瓜，都使用了雙列布局。①優點一家人就得整整齊齊，相比自適應，雙列布局視覺秩序感高，在數量較多時也不會產生混亂感；明確的對齊關系，引導動線垂直掃視，查找和區分效率高；每個搜索詞占據近半屏的空間，面積足夠，點擊體驗爽歪歪；所有搜索詞點擊體驗一致。②缺點搜索詞限定了固定寬度，空間利用率較低、屏效較低，這一問題在搜索詞字符寬度很少時尤為明顯；因為容器的缺失，信息聚焦性和層次明確性不如膠囊。3.單列布局與我們瀏覽器產品對標的行業內競品中，并未出現過單列布局。但有意思的是，這種布局存在于一些典型的社交型應用中，比如前年9月份全量上線搜一搜功能的微信、再比如qq和微博，都是單列。另外，抖音的搜索歷史也是單列布局。①優點搜索詞列表式排開，秩序感高，較多數量時無混亂感；每個搜索詞占據全屏寬度，面積寬闊，點擊體驗那是相當得爽；所有搜索詞點擊體驗一致化；空間足夠，刪除的操作可直接外顯前置，減少刪除操作成本。②缺點限定了全屏固定寬度，空間利用率賊低，屏效賊低；信息聚焦性和層次明確性不如膠囊。到這里，可能你跟我有一樣的困惑。一個簡單的搜索歷史，為什么不同的產品使用了不同的布局？布局和產品本身有哪些關系？到底什么情況下適合自適應？什么情況適合雙列？什么情況適合單列？別忽略它們，把所有困惑列下來，然后嘗試各種辦法去思考，去解決。多問為什么，是培養設計師洞察力的絕佳手段。首先，任何表現層的設計手段歸根結底都可源自兩類訴求：業務訴求和用戶訴求。搜索歷史偏向用戶側的體驗，這里我選擇從用戶進行切入，也許可以發現一些東西。三、關于用戶分層體驗設計中有個概念叫用戶分層，即便是同一個頁面，我們也需要去細分不同的場景對用戶做分層，為不同的用戶做設計。比如很多產品的首頁，之所以普遍是“搜索+品類+推薦”結構，也是基于用戶分層的設計。用戶來到首頁后，可以大致分為瀏覽型和目的型兩類。前者沒有明確目標，隨便逛逛，因此產品可以通過算法進行模塊化精準推薦；后者有明確的目的，知道自己想要什么，因此產品可以通過提供搜索和品類入口，幫助這類用戶定點查找。而目的型用戶在進行了搜索這個行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。四、搜索行為背后的目的我發現用戶進行搜索時的目的，大概可以細分為以下三大類：購買決策型、內容消費型和答疑解惑型。1.購買決策這類動機的用戶基于自身對某類物品、服務進行購買的動機，產生了搜索的行為。比如我想去點個外賣、買個衣服。這里的第一步，就是去搜索，篩選出符合我預期的內容。1）搜索內容通常是某類具象的名詞，比如粥、火鍋、串串香、球鞋等，或者店鋪名。2）對應產品所有的電商類、生活服務類的應用，如淘寶、京東、美團、餓了么等等。3）布局分析我發現這類產品基本全使用了自適應布局，為什么呢？①購買決策型的搜索內容基本對應了具象名詞，通常字符數較少。所以采用自適應能夠保證極高的空間利用率。如果采用雙列或者單列的布局，會存在明顯的空間浪費、降低屏效、影響其他內容的曝光。②購買決策型的用戶，場景上偏高愉悅場景。高愉悅場景下，我們更傾向于“浪費”時間。比如我們在點外賣、刷淘寶，獵物酬賞往往會讓我們沉浸其中不可自拔，忘記時間的存在，等意識過來時，發現已經過去大半個小時（這里的獵物酬賞即我們在搜尋過程中接觸到的源源不斷的有價值的信息，在最后一個月了，如何用上癮模型彎道超車？這篇文章中有講，有興趣的老鐵可以去看看）。映射到現實生活中，就好像我們平日里去琳瑯滿目的商場、超市購物，有充足的時間慢慢得精挑細選、貨比三家。所以，購買決策型的搜索場景不會追求高效，用戶對歷史詞快速查找和使用的訴求相對較低。即便自適應布局降低了效率，負面影響偏低。2.答疑解惑這一類內容基于用戶對某類問題的解決訴求。1）搜索內容通常以5w1h的句式呈現，比如「南京公積金怎么提取」、「凡爾賽是什么意思」、「為什么會失眠」等等。2）對應產品瀏覽器產品、知乎。布局分析這類產品為什么基本都使用了雙列布局？搜索詞通常遵循5w1h類型，字符往往較長（包含搜索聯想詞）。答疑解惑型的搜索內容，通常對應著用戶背后遭遇的問題，沒有人希望自己的生活被問題填充和纏繞，所以絕大多數的問題，背后都裹挾了【我想盡快解決！】的訴求。因為從場景愉悅度上來看，這類場景對應著低或中愉悅場景。此時，用戶對時間的敏感度高，傾向于追求高效、節約時間。（當我們去嘗試解決一個現有痛點、難題、困惑時，本能得渴望減少耗時）并且，如果問題一直無法得到解決，較易出現急切，沮喪，挫敗等負面情緒，所以，我們會經常基于之前輸入的歷史詞進行反復的修正和嘗試，直至耐心消失殆盡。而雙列這種穩如老狗的布局，以垂直動線加速用戶對歷史詞的的查找使用（數量較多時也不會出現混亂感），足夠高效。而且，足夠的空間也符合較長的字符寬度。因此雙列布局是答疑解惑型搜索的不二之選。絕大多數的瀏覽器產品，都采用了雙列這一布局。因為瀏覽器給用戶解決問題的屬性已經深入心智，根據搜集的一些用研資料，答疑解惑型搜索在瀏覽器中也占據了最高的比例。知乎雖是內容型產品，但主要功能也給用戶是答疑解惑，因此也采用了雙列的布局。看到這里，你可能會問，單列也滿足條件啊，為什么很少看到單列的？沒錯，單列布局雖然也能符合這些要求，但是，它最大的缺陷就是——太占空間了。同等面積下，雙列能顯示12個歷史詞，單列只能顯示一半。最關鍵的是，產品還需要通過加塞實時熱搜、搜索熱榜這些玩意兒盈利。所以，商業價值的驅使下，單列布局的場景基本很少。3.內容消費這一類型的動機基于對某類內容的消費動機。1）搜索內容通常是某類抽象名詞，比如某某話題、某某事件、某某資源等等，它們通常對應著內容創作者。比如「王思聰土味情話」、「建黨一百周年」、「蘇州酒店坍塌事故」等等。2）對應產品主要為內容、社交型產品，比如各類新聞資訊、短視頻類產品、簡書、喜馬拉雅、微博、微信（搜一搜）等等。3）布局分析這類產品的布局基本會有兩類，一類是自適應，另一類是單列。內容消費和購買決策本質上都屬于“消費”范疇，只不過前者是內容、后者是需要付費的實物。它和購買決策一樣，都屬于高愉悅場景，而且由于內容的即時性和形式的多變性，引起的愉悅感往往要更加強烈。所以，自適應同樣是合理的布局。但是單列布局呢？前面有說過，單列布局的體驗比肩甚至優于雙列，但最明顯的缺憾就是太占空間，而空間向來是業務的必爭之地。因此，單列布局的使用場景和具體業務相關。比如業務需要確保其他搜索模塊（如熱搜、個性化搜索推送等）的曝光，那么是否可以允許這些搜索模塊前置，讓搜索歷史作為一個單獨頁面，觸發搜索框的聚焦后，和軟鍵盤同步喚起。比如微信和qq。再比如是否允許減少歷史詞露出數，來達到搜索模塊和歷史詞共處一頁的目的，減少跳轉，比如微博和抖音。五、使用場景總結1.自適應布局適用于購買決策型、或者內容消費型的搜索場景，此類場景下搜索詞較短，且用戶對歷史詞快速查找和使用的訴求相對較低。常見于電商、生活服務類產品。2.雙列布局雙列布局，適用于答疑解惑型的搜索場景，此類場景下搜索詞較長，且用戶對歷史詞快速查找和使用的訴求較高。常見于瀏覽器產品，