面對不同的使用場景、不同的使用者需求，産品的“搜尋曆史”設計可能會有所差異。那麼，常見的“搜尋曆史”設計有哪些樣式？導緻産品選擇不同的布局格式的原因又有哪些？本篇文章裡，作者針對“搜尋曆史”設計進行了一定解讀，一起來看。
之前給團隊招人面試，發現很多候選人在回答「這裡為什麼這麼設計」時從好看、美觀的角度來解釋。
這個次元是很重要，但這種主觀的決策依據，不僅和使用者、業務訴求斷層，也很難讓我們的設計站穩腳跟，讓對方信服。是以，每一處細節背後的設計思路就變得尤為重要。
我們在做日常需求時，也可以通過不斷的自問「為什麼」來尋找支撐。比如我之前做的「搜尋曆史」的需求，看似一個非常簡單的功能，但當我自問這麼設計的支撐依據時，卻很難說出口。
是以，我花了些時間挖掘它背後的邏輯，并将思考過程和成果沉澱成文，希望這些内容能給你帶來幫助和啟發。
一、關于搜尋曆史
尼爾森前輩在他的十大可用性原則中明确建議，在設計中需要将使用者以往的曆史行為呈現給使用者，以此來減少使用者的記憶負擔。
搜尋曆史功能就是一個典型，它和播放器的曆史跳轉功能、轉賬的曆史賬戶功能一樣，本質都是為了減少使用者的記憶成本而存在。
但搜尋曆史該如何設計布局呢？
二、搜尋曆史的三類布局
我搜集了各行業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協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。