知乎怎麼刪除贊同記錄
面對不同的使用場景、不同的使用者需求，產品的“搜尋歷史”設計可能會有所差異。那麼，常見的“搜尋歷史”設計有哪些樣式？導致產品選擇不同的佈局格式的原因又有哪些？本篇文章裡，作者針對“搜尋歷史”設計進行了一定解讀，一起來看。
之前給團隊招人面試，發現很多候選人在回答「
這裡為什麼這麼設計
」時從好看、美觀的角度來解釋。
這個維度是很重要，但這種主觀的決策依據，不僅和使用者、業務訴求斷層，也很難讓我們的設計站穩腳跟，讓對方信服。所以，
每一處細節背後的設計思路
就變得尤為重要。
我們在做日常需求時，也可以透過不斷的自問「
為什麼
」來尋找支撐。比如我之前做的「搜尋歷史」的需求，看似一個非常簡單的功能，但當我自問這麼設計的支撐依據時，卻很難說出口。
所以，我花了些時間挖掘它背後的邏輯，並將思考過程和成果沉澱成文，希望這些內容能給你帶來幫助和啟發。
一、關於搜尋歷史
尼爾森前輩在他的十大可用性原則中明確建議，
在設計中需要將使用者以往的歷史行為呈現給使用者，以此來減少使用者的記憶負擔。
搜尋歷史功能就是一個典型，它和播放器的歷史跳轉功能、轉賬的歷史賬戶功能一樣，本質都是為了
減少使用者的記憶成本
而存在。
但搜尋歷史該如何設計佈局呢？
二、搜尋歷史的三類佈局
我搜集了各行業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. 雙列布局
雙列布局，適用於答疑解惑型的搜尋場景，此類場景下搜尋詞較長，且
使用者對歷史詞快速查詢和使用的訴求較高
。常見於瀏覽器產品，或者知識問答類產品。
3. 單列布局
單列布局，適用於內容消費型的搜尋場景，此類場景下搜尋詞較長，因佔據較多空間，需要視具體業務情況使用。
六、最後
以上，就是「搜尋歷史」在不同使用場景下的研究。其實，不論是多小的細節，我們設計師都可以基於使用者和產品兩類角度，
透過不斷得自問「為什麼」，來挖掘背後的邏輯，以讓我們的設計有理有據。
不但幫助我們更順利得過稿，也可以提升我們的洞察力和專業水準~
希望這篇乾貨對你有所幫助。
專欄作家
Andrewchen；微信公眾號：轉行人的設計筆記，人人都是產品經理專欄作家。中科院碩士自學轉行，擅長透過文字幫助年輕設計師成長和提效。延遲滿足、長期主義。
本文原創釋出於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。