之前給團隊招人面試，發現很多設計師朋友在回答「這里為什么這么設計」時，基本都從好看、美觀的角度來解釋。

這個維度是很重要，但這種主觀的決策依據，不僅和用戶、業務訴求斷層，也很難讓我們的設計站穩腳跟，讓對方信服。所以，每一處細節背后的設計思路就變得尤為重要。

我們在做日常需求時，也可以通過不斷的自問「為什么」來尋找支撐。比如我之前做的「搜索歷史」的需求，看似一個非常簡單的功能，但當我自問這么設計的支撐依據時，卻很難說出口。

所以，我花了些時間挖掘它背后的邏輯，并將思考過程和成果沉淀成文，希望這些內容能給你帶來幫助和啟發~

一、關于搜索歷史

尼爾森前輩在他的十大可用性原則中明確建議，在設計中需要將用戶以往的歷史行為呈現給用戶，以此來減少用戶的記憶負擔。

搜索歷史功能就是一個典型，它和播放器的歷史跳轉功能、轉賬的歷史賬戶功能一樣，本質都是為了減少用戶的記憶成本而存在。

但搜索歷史該如何設計布局呢？

二、搜索歷史的三類布局

我搜集了各行業 21 個競品，發現搜索歷史的布局大概可以歸納為以下三類

1. 自適應布局

簡單說，就是容器的寬度跟隨內容的變化而變化，而 padding（塊內間距）保持固定。

所有競品當中，以下這三類產品的搜索歷史，全部使用了自適應布局（考慮到篇幅原因只放部分截圖）

① 電商類

淘寶、考拉、京東、閑魚、天貓、pdd，這些產品的搜索歷史普遍使用了自適應布局。

② 生活服務類

美團、餓了么這類生活服務類平臺，全部是自適應。

③ 內容類

包含各種短視頻類、資訊類、音頻類的內容產品。比如網易新聞、騰訊新聞、喜馬拉雅、簡書、荔枝、小紅書。它們的歷史記錄也全部是自適應。

優點

1. 大幅節省空間提升屏效，同等面積可容納更多的記錄；
2. 全圓角膠囊形式增強了點擊感；（關于圓角對點擊行為引導的理論依據，可參考以下這篇按鈕文章
3. 膠囊聚合的形式讓信息層級更明確和聚焦

缺點

1. 面積不一致下的布局，在垂直方向無對齊關系，迫使動線水平遷移，查找和區分效率低；
2. 面積不一致，直接導致了點擊體驗的不一致；
3. 歷史詞數量較多時，無序混亂感較強

2. 雙列布局

使用這種布局的競品不多，頭條、百度、知乎和西瓜，都使用了雙列布局。

優點

1. 一家人就得整整齊齊嘛，相比自適應，雙列布局視覺秩序感高，在數量較多時也不會產生混亂感；
2. 明確的對齊關系，引導動線垂直掃視，查找和區分效率高；
3. 每個搜索詞占據近半屏的空間，面積足夠，點擊體驗爽歪歪；
4. 所有搜索詞點擊體驗一致

缺點

1. 搜索詞限定了固定寬度，空間利用率較低、屏效較低，這一問題在搜索詞字符寬度很少時尤為明顯；
2. 因為容器的缺失，信息聚焦性和層次明確性不如膠囊

3. 單列布局

與我們瀏覽器產品對標的行業內競品中，并未出現過單列布局。

但有意思的是，這種布局存在于一些典型的社交型應用中，比如前年 9 月份全量上線搜一搜功能的微信、再比如 qq 和微博，都是單列。另外，抖音的搜索歷史也是單列布局。

優點

1. 搜索詞列表式排開，秩序感高，較多數量時無混亂感；
2. 每個搜索詞占據全屏寬度，面積寬闊，點擊體驗那是相當得爽；
3. 所有搜索詞點擊體驗一致化；
4. 空間足夠，刪除的操作可直接外顯前置，減少刪除操作成本

缺點

1. 限定了全屏固定寬度，空間利用率賊低，屏效賊低；
2. 信息聚焦性和層次明確性不如膠囊

到這里，可能你跟我有一樣的困惑。一個簡單的搜索歷史，為什么不同的產品使用了不同的布局？布局和產品本身有哪些關系？到底什么情況下適合自適應？什么情況適合雙列？什么情況適合單列？

別忽略它們，把所有困惑列下來，然后嘗試各種辦法去思考，去解決。多問為什么，是培養設計師洞察力的絕佳手段。

首先，任何表現層的設計手段歸根結底都可源自兩類訴求：業務訴求和用戶訴求。搜索歷史偏向用戶側的體驗，這里我選擇從用戶進行切入，也許可以發現一些東西。

三、關于用戶分層

體驗設計中有個概念叫用戶分層，即便是同一個頁面，我們也需要去細分不同的場景對用戶做分層，為不同的用戶做設計。

比如很多產品的首頁，之所以普遍是“搜索+品類+推薦”結構，也是基于用戶分層的設計。

用戶來到首頁后，可以大致分為瀏覽型和目的型兩類。前者沒有明確目標，隨便逛逛，因此產品可以通過算法進行模塊化精準推薦；后者有明確的目的，知道自己想要什么，因此產品可以通過提供搜索和品類入口，幫助這類用戶定點查找。

而目的型用戶在進行了搜索這個行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。

四、搜索行為背后的目的

我發現用戶進行搜索時的目的，大概可以細分為以下三大類：購買決策型、內容消費型和答疑解惑型。

1. 購買決策

這類動機的用戶基于自身對某類物品、服務進行購買的動機，產生了搜索的行為。

比如我想去點個外賣、買個衣服。這里的第一步，就是去搜索，篩選出符合我預期的內容。

① 搜索內容

通常是某類具象的名詞，比如粥、火鍋、串串香、球鞋等，或者店鋪名。

② 對應產品

所有的電商類、生活服務類的應用，如淘寶、京東、美團、餓了么等等。

③ 布局分析

我發現這類產品基本全使用了自適應布局，為什么呢？

購買決策型的搜索內容基本對應了具象名詞，通常字符數較少。所以采用自適應能夠保證極高的空間利用率。如果采用雙列或者單列的布局，會存在明顯的空間浪費、降低屏效、影響其他內容的曝光。

購買決策型的用戶，場景上偏高愉悅場景。高愉悅場景下，我們更傾向于“浪費”時間。

比如我們在點外賣、刷淘寶，獵物酬賞往往會讓我們沉浸其中不可自拔，忘記時間的存在，等意識過來時，發現已經過去大半個小時。（這里的獵物酬賞即我們在搜尋過程中接觸到的源源不斷的有價值的信息，關于上癮模型可以看這篇文章：

映射到現實生活中，就好像我們平日里去琳瑯滿目的商場、超市購物，有充足的時間慢慢得精挑細選、貨比三家。

所以，購買決策型的搜索場景不會追求高效，用戶對歷史詞快速查找和使用的訴求相對較低。即便自適應布局降低了效率，負面影響偏低。

2. 答疑解惑

這一類內容基于用戶對某類問題的解決訴求。

① 搜索內容

通常以 5w1h 的句式呈現，比如「南京公積金怎么提取」、「凡爾賽是什么意思」、「為什么會失眠」等等。

② 對應產品

瀏覽器產品、知乎

③ 布局分析

這類產品為什么基本都使用了雙列布局？

1. 搜索詞通常遵循 5w1h 類型，字符往往較長（包含搜索聯想詞）
2. 答疑解惑型的搜索內容，通常對應著用戶背后遭遇的問題，沒有人希望自己的生活被問題填充和纏繞，所以絕大多數的問題，背后都裹挾了「我想盡快解決！」的訴求。

因為從場景愉悅度上來看，這類場景對應著低或中愉悅場景。此時，用戶對時間的敏感度高，傾向于追求高效、節約時間。（當我們去嘗試解決一個現有痛點、難題、困惑時，本能得渴望減少耗時）

并且，如果問題一直無法得到解決，較易出現急切，沮喪，挫敗等負面情緒，所以，我們會經常基于之前輸入的歷史詞進行反復的修正和嘗試，直至耐心消失殆盡。

而雙列這種穩如老狗的布局，以垂直動線加速用戶對歷史詞的的查找使用（數量較多時也不會出現混亂感），足夠高效。而且，足夠的空間也符合較長的字符寬度。因此雙列布局是答疑解惑型搜索的不二之選。

絕大多數的瀏覽器產品，都采用了雙列這一布局。因為瀏覽器給用戶解決問題的屬性已經深入心智，根據搜集的一些用研資料，答疑解惑型搜索在瀏覽器中也占據了最高的比例。知乎雖是內容型產品，但主要功能也給用戶是答疑解惑，因此也采用了雙列的布局。

看到這里，你可能會問，單列也滿足條件啊，為什么很少看到單列的？沒錯，單列布局雖然也能符合這些要求，但是，它最大的缺陷就是：太特么占空間了。

同等面積下，雙列能顯示 12 個歷史詞，單列只能顯示一半。最關鍵的是，產品還需要通過加塞實時熱搜、搜索熱榜這些玩意兒盈利。所以，商業價值的驅使下，單列布局的場景基本很少。

3. 內容消費

這一類型的動機基于對某類內容的消費動機。

① 搜索內容

通常是某類抽象名詞，比如某某話題、某某事件、某某資源等等，它們通常對應著內容創作者。

比如「王思聰土味情話」、「建黨一百周年」、「蘇州酒店坍塌事故」等等。

② 對應產品

主要為內容、社交型產品，比如各類新聞資訊、短視頻類產品、簡書、喜馬拉雅、微博、微信（搜一搜）等等。

③ 布局分析

這類產品的布局基本會有兩類，一類是自適應，另一類是單列。

內容消費和購買決策本質上都屬于“消費”范疇，只不過前者是內容、后者是需要付費的實物。它和購買決策一樣，都屬于高愉悅場景，而且由于內容的即時性和形式的多變性，引起的愉悅感往往要更加強烈。所以，自適應同樣是合理的布局。

但是單列布局呢？

前面有說過，單列布局的體驗比肩甚至優于雙列，但最明顯的缺憾就是太占空間，而空間向來是業務的必爭之地。因此，單列布局的使用場景和具體業務相關。

比如業務需要確保其他搜索模塊（如熱搜、個性化搜索推送等）的曝光，那么是否可以允許這些搜索模塊前置，讓搜索歷史作為一個單獨頁面，觸發搜索框的聚焦后，和軟鍵盤同步喚起。比如微信和 qq。

再比如是否允許減少歷史詞露出數，來達到搜索模塊和歷史詞共處一頁的目的，減少跳轉，比如微博和抖音。

五、使用場景總結

1. 自適應布局

適用于購買決策型、或者內容消費型的搜索場景，此類場景下搜索詞較短，且用戶對歷史詞快速查找和使用的訴求相對較低。常見于電商、生活服務類產品。

2. 雙列布局

雙列布局，適用于答疑解惑型的搜索場景，此類場景下搜索詞較長，且用戶對歷史詞快速查找和使用的訴求較高。常見于瀏覽器產品，或者知識問答類產品。

3. 單列布局

單列布局，適用于內容消費型的搜索場景，此類場景下搜索詞較長，因占據較多空間，需要視具體業務情況使用。

最后

以上，就是「搜索歷史」在不同使用場景下的研究。

其實，不論是多小的細節，我們設計師都可以基于用戶和產品兩類角度，通過不斷得自問「為什么？」，來挖掘背后的邏輯，以讓我們的設計有理有據。不但幫助我們更順利得過稿，也可以提升我們的洞察力和專業水準~

希望這篇干貨對你有所幫助。

歡迎關注作者微信公眾號：「Andrew的設計筆記」