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

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

我們?cè)谧鋈粘Ｐ枨髸r(shí)，也可以通過(guò)不斷的自問(wèn)「為什么」來(lái)尋找支撐。比如我之前做的「搜索歷史」的需求，看似一個(gè)非常簡(jiǎn)單的功能，但當(dāng)我自問(wèn)這么設(shè)計(jì)的支撐依據(jù)時(shí)，卻很難說(shuō)出口。

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

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

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

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

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

二、搜索歷史的三類布局

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

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

簡(jiǎn)單說(shuō)，就是容器的寬度跟隨內(nèi)容的變化而變化，而 padding（塊內(nèi)間距）保持固定。

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

① 電商類

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

② 生活服務(wù)類

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

③ 內(nèi)容類

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

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

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

缺點(diǎn)

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

2. 雙列布局

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

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

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

缺點(diǎn)

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

3. 單列布局

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

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

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

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

缺點(diǎn)

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

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

別忽略它們，把所有困惑列下來(lái)，然后嘗試各種辦法去思考，去解決。多問(wèn)為什么，是培養(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ì)中有個(gè)概念叫用戶分層，即便是同一個(gè)頁(yè)面，我們也需要去細(xì)分不同的場(chǎng)景對(duì)用戶做分層，為不同的用戶做設(shè)計(jì)。

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

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

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

四、搜索行為背后的目的

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

1. 購(gòu)買決策

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

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

① 搜索內(nèi)容

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

② 對(duì)應(yīng)產(chǎn)品

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

③ 布局分析

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

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

購(gòu)買決策型的用戶，場(chǎng)景上偏高愉悅場(chǎng)景。高愉悅場(chǎng)景下，我們更傾向于"浪費(fèi)"時(shí)間。

比如我們?cè)邳c(diǎn)外賣、刷淘寶，獵物酬賞往往會(huì)讓我們沉浸其中不可自拔，忘記時(shí)間的存在，等意識(shí)過(guò)來(lái)時(shí)，發(fā)現(xiàn)已經(jīng)過(guò)去大半個(gè)小時(shí)。（這里的獵物酬賞即我們?cè)谒褜み^(guò)程中接觸到的源源不斷的有價(jià)值的信息，關(guān)于上癮模型可以看這篇文章：

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

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

2. 答疑解惑

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

① 搜索內(nèi)容

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

② 對(duì)應(yīng)產(chǎn)品

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

③ 布局分析

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

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

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

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

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

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

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

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

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

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

① 搜索內(nèi)容

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

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

② 對(duì)應(yīng)產(chǎn)品

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

③ 布局分析

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

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

但是單列布局呢？

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

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

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

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

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

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

2. 雙列布局

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

3. 單列布局

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

最后

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

其實(shí)，不論是多小的細(xì)節(jié)，我們?cè)O(shè)計(jì)師都可以基于用戶和產(chǎn)品兩類角度，通過(guò)不斷得自問(wèn)「為什么？」，來(lái)挖掘背后的邏輯，以讓我們的設(shè)計(jì)有理有據(jù)。不但幫助我們更順利得過(guò)稿，也可以提升我們的洞察力和專業(yè)水準(zhǔn)~

希望這篇干貨對(duì)你有所幫助。

作者：Andrew的設(shè)計(jì)筆記