面對不同的使用場景、不同的用戶需求，產(chǎn)品的“搜索歷史”設(shè)計(jì)可能會有所差異。那么，常見的“搜索歷史”設(shè)計(jì)有哪些樣式？導(dǎo)致產(chǎn)品選擇不同的布局格式的原因又有哪些？本篇文章里，作者針對“搜索歷史”設(shè)計(jì)進(jìn)行了一定解讀，一起來看。

之前給團(tuán)隊(duì)招人面試，發(fā)現(xiàn)很多候選人在回答「這里為什么這么設(shè)計(jì)」時從好看、美觀的角度來解釋。

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

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

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

一、關(guān)于搜索歷史

尼爾森前輩在他的十大可用性原則中明確建議，在設(shè)計(jì)中需要將用戶以往的歷史行為呈現(xiàn)給用戶，以此來減少用戶的記憶負(fù)擔(dān)。

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

但搜索歷史該如何設(shè)計(jì)布局呢？

二、搜索歷史的三類布局

我搜集了各行業(yè)21個競品，發(fā)現(xiàn)搜索歷史的布局大概可以歸納為以下三類。

1. 自適應(yīng)布局

關(guān)于自適應(yīng)，簡單說，就是容器的寬度跟隨內(nèi)容的變化而變化，而padding（塊內(nèi)間距）保持固定。

所有競品當(dāng)中，以下這三類產(chǎn)品的搜索歷史，全部使用了自適應(yīng)布局（考慮到篇幅原因只放部分截圖）。

1）電商類

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

2）生活服務(wù)類

美團(tuán)、餓了么這類生活服務(wù)類平臺，全部是自適應(yīng)。

3）內(nèi)容類

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

① 優(yōu)點(diǎn)

1. 大幅節(jié)省空間提升屏效，同等面積可容納更多的記錄；
2. 全圓角膠囊形式增強(qiáng)了點(diǎn)擊感（關(guān)于圓角對點(diǎn)擊行為引導(dǎo)的理論依據(jù)，可參考我之前關(guān)于按鈕的文章）；
3. 膠囊聚合的形式讓信息層級更明確和聚焦（參考同上）。

② 缺點(diǎn)

1. 面積不一致下的布局，在垂直方向無對齊關(guān)系，迫使動線水平遷移，查找和區(qū)分效率低；
2. 面積不一致，直接導(dǎo)致了點(diǎn)擊體驗(yàn)的不一致；
3. 歷史詞數(shù)量較多時，無序混亂感較強(qiáng)。

2. 雙列布局

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

① 優(yōu)點(diǎn)

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

② 缺點(diǎn)

1. 搜索詞限定了固定寬度，空間利用率較低、屏效較低，這一問題在搜索詞字符寬度很少時尤為明顯；
2. 因?yàn)槿萜鞯娜笔?，信息聚焦性和層次明確性不如膠囊。

3. 單列布局

與我們?yōu)g覽器產(chǎn)品對標(biāo)的行業(yè)內(nèi)競品中，并未出現(xiàn)過單列布局。

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

① 優(yōu)點(diǎn)

1. 搜索詞列表式排開，秩序感高，較多數(shù)量時無混亂感；
2. 每個搜索詞占據(jù)全屏寬度，面積寬闊，點(diǎn)擊體驗(yàn)?zāi)鞘窍喈?dāng)?shù)盟?/li>
3. 所有搜索詞點(diǎn)擊體驗(yàn)一致化；
4. 空間足夠，刪除的操作可直接外顯前置，減少刪除操作成本。

② 缺點(diǎn)

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

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

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

首先，任何表現(xiàn)層的設(shè)計(jì)手段歸根結(jié)底都可源自兩類訴求：業(yè)務(wù)訴求和用戶訴求。搜索歷史偏向用戶側(cè)的體驗(yàn)，這里我選擇從用戶進(jìn)行切入，也許可以發(fā)現(xiàn)一些東西。

三、關(guān)于用戶分層

體驗(yàn)設(shè)計(jì)中有個概念叫用戶分層，即便是同一個頁面，我們也需要去細(xì)分不同的場景對用戶做分層，為不同的用戶做設(shè)計(jì)。

比如很多產(chǎn)品的首頁，之所以普遍是“搜索+品類+推薦”結(jié)構(gòu)，也是基于用戶分層的設(shè)計(jì)。

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

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

四、搜索行為背后的目的

我發(fā)現(xiàn)用戶進(jìn)行搜索時的目的，大概可以細(xì)分為以下三大類：購買決策型、內(nèi)容消費(fèi)型和答疑解惑型。

1. 購買決策

這類動機(jī)的用戶基于自身對某類物品、服務(wù)進(jìn)行購買的動機(jī)，產(chǎn)生了搜索的行為。

比如我想去點(diǎn)個外賣、買個衣服。這里的第一步，就是去搜索，篩選出符合我預(yù)期的內(nèi)容。

1）搜索內(nèi)容

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

2）對應(yīng)產(chǎn)品

所有的電商類、生活服務(wù)類的應(yīng)用，如淘寶、京東、美團(tuán)、餓了么等等。

3）布局分析

我發(fā)現(xiàn)這類產(chǎn)品基本全使用了自適應(yīng)布局，為什么呢？

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

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

比如我們在點(diǎn)外賣、刷淘寶，獵物酬賞往往會讓我們沉浸其中不可自拔，忘記時間的存在，等意識過來時，發(fā)現(xiàn)已經(jīng)過去大半個小時（這里的獵物酬賞即我們在搜尋過程中接觸到的源源不斷的有價值的信息，在最后一個月了，如何用上癮模型彎道超車？這篇文章中有講，有興趣的老鐵可以去看看）。

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

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

2. 答疑解惑

這一類內(nèi)容基于用戶對某類問題的解決訴求。

1）搜索內(nèi)容

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

2）對應(yīng)產(chǎn)品

瀏覽器產(chǎn)品、知乎。

布局分析

這類產(chǎn)品為什么基本都使用了雙列布局？

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

因?yàn)閺膱鼍坝鋹偠壬蟻砜?，這類場景對應(yīng)著低或中愉悅場景。此時，用戶對時間的敏感度高，傾向于追求高效、節(jié)約時間。（當(dāng)我們?nèi)L試解決一個現(xiàn)有痛點(diǎn)、難題、困惑時，本能得渴望減少耗時）

并且，如果問題一直無法得到解決，較易出現(xiàn)急切，沮喪，挫敗等負(fù)面情緒，所以，我們會經(jīng)?；谥拜斎氲臍v史詞進(jìn)行反復(fù)的修正和嘗試，直至耐心消失殆盡。

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

絕大多數(shù)的瀏覽器產(chǎn)品，都采用了雙列這一布局。因?yàn)?strong>瀏覽器給用戶解決問題的屬性已經(jīng)深入心智，根據(jù)搜集的一些用研資料，答疑解惑型搜索在瀏覽器中也占據(jù)了最高的比例。知乎雖是內(nèi)容型產(chǎn)品，但主要功能也給用戶是答疑解惑，因此也采用了雙列的布局。

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

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

3. 內(nèi)容消費(fèi)

這一類型的動機(jī)基于對某類內(nèi)容的消費(fèi)動機(jī)。

1）搜索內(nèi)容

通常是某類抽象名詞，比如某某話題、某某事件、某某資源等等，它們通常對應(yīng)著內(nèi)容創(chuàng)作者。

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

2）對應(yīng)產(chǎn)品

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

3）布局分析

這類產(chǎn)品的布局基本會有兩類，一類是自適應(yīng)，另一類是單列。

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

但是單列布局呢？

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

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

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

五、使用場景總結(jié)

1. 自適應(yīng)布局

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

2. 雙列布局

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

3. 單列布局

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

六、最后

以上，就是「搜索歷史」在不同使用場景下的研究。其實(shí)，不論是多小的細(xì)節(jié)，我們設(shè)計(jì)師都可以基于用戶和產(chǎn)品兩類角度，通過不斷得自問「為什么」，來挖掘背后的邏輯，以讓我們的設(shè)計(jì)有理有據(jù)。不但幫助我們更順利得過稿，也可以提升我們的洞察力和專業(yè)水準(zhǔn)~

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