5000字干貨幫你全方位解析搜索歷史模塊的設計

5000字干貨，幫你全方位解析搜索歷史模塊的設計之前給團隊招人面試，發(fā)現(xiàn)很多候選人在回答「這里為什么這么設計」時從好看、美觀的角度來解釋。這個維度是很重要，但這種主觀的決策依據(jù)，不僅和用戶、業(yè)務訴求斷層，也很難讓我們的設計站穩(wěn)腳跟，讓對方信服。所以，每一處細節(jié)背后的設計思路就變得尤為重要。我們在做日常需求時，也可以通過不斷的自問「為什么」來尋找支撐。比如我之前做的「搜索歷史」的需求，看似一個非常簡單的功能，但當我自問這么設計的支撐依據(jù)時，卻很難說出口。所以，我花了些時間挖掘它背后的邏輯，并將思考過程和成果沉淀成文，希望這些內(nèi)容能給你帶來幫助和啟發(fā)。一、關(guān)于搜索歷史尼爾森前輩在他的十大可用性原則中明確建議，在設計中需要將用戶以往的歷史行為呈現(xiàn)給用戶，以此來減少用戶的記憶負擔。搜索歷史功能就是一個典型，它和播放器的歷史跳轉(zhuǎn)功能、轉(zhuǎn)賬的歷史賬戶功能一樣，本質(zhì)都是為了減少用戶的記憶成本而存在。但搜索歷史該如何設計布局呢？二、搜索歷史的三類布局我搜集了各行業(yè)21個競品，發(fā)現(xiàn)搜索歷史的布局大概可以歸納為以下三類。1.自適應布局關(guān)于自適應，簡單說，就是容器的寬度跟隨內(nèi)容的變化而變化，而padding（塊內(nèi)間距）保持固定。所有競品當中，以下這三類產(chǎn)品的搜索歷史，全部使用了自適應布局（考慮到篇幅原因只放部分截圖）。1）電商類淘寶、考拉、京東、閑魚、天貓、pdd，這些產(chǎn)品的搜索歷史普遍使用了自適應布局。2）生活服務類美團、餓了么這類生活服務類平臺，全部是自適應。3）內(nèi)容類包含各種短視頻類、資訊類、音頻類的內(nèi)容產(chǎn)品。比如網(wǎng)易新聞、騰訊新聞、喜馬拉雅、簡書、荔枝、小紅書。它們的歷史記錄也全部是自適應。①優(yōu)點大幅節(jié)省空間提升屏效，同等面積可容納更多的記錄；全圓角膠囊形式增強了點擊感（關(guān)于圓角對點擊行為引導的理論依據(jù)，可參考我之前關(guān)于按鈕的文章）；膠囊聚合的形式讓信息層級更明確和聚焦（參考同上）。②缺點面積不一致下的布局，在垂直方向無對齊關(guān)系，迫使動線水平遷移，查找和區(qū)分效率低；面積不一致，直接導致了點擊體驗的不一致；歷史詞數(shù)量較多時，無序混亂感較強。2.雙列布局使用這種布局的競品不多，頭條、百度、知乎和西瓜，都使用了雙列布局。①優(yōu)點一家人就得整整齊齊，相比自適應，雙列布局視覺秩序感高，在數(shù)量較多時也不會產(chǎn)生混亂感；明確的對齊關(guān)系，引導動線垂直掃視，查找和區(qū)分效率高；每個搜索詞占據(jù)近半屏的空間，面積足夠，點擊體驗爽歪歪；所有搜索詞點擊體驗一致。②缺點搜索詞限定了固定寬度，空間利用率較低、屏效較低，這一問題在搜索詞字符寬度很少時尤為明顯；因為容器的缺失，信息聚焦性和層次明確性不如膠囊。3.單列布局與我們?yōu)g覽器產(chǎn)品對標的行業(yè)內(nèi)競品中，并未出現(xiàn)過單列布局。但有意思的是，這種布局存在于一些典型的社交型應用中，比如前年9月份全量上線搜一搜功能的微信、再比如qq和微博，都是單列。另外，抖音的搜索歷史也是單列布局。①優(yōu)點搜索詞列表式排開，秩序感高，較多數(shù)量時無混亂感；每個搜索詞占據(jù)全屏寬度，面積寬闊，點擊體驗那是相當?shù)盟?；所有搜索詞點擊體驗一致化；空間足夠，刪除的操作可直接外顯前置，減少刪除操作成本。②缺點限定了全屏固定寬度，空間利用率賊低，屏效賊低；信息聚焦性和層次明確性不如膠囊。到這里，可能你跟我有一樣的困惑。一個簡單的搜索歷史，為什么不同的產(chǎn)品使用了不同的布局？布局和產(chǎn)品本身有哪些關(guān)系？到底什么情況下適合自適應？什么情況適合雙列？什么情況適合單列？別忽略它們，把所有困惑列下來，然后嘗試各種辦法去思考，去解決。多問為什么，是培養(yǎng)設計師洞察力的絕佳手段。首先，任何表現(xiàn)層的設計手段歸根結(jié)底都可源自兩類訴求：業(yè)務訴求和用戶訴求。搜索歷史偏向用戶側(cè)的體驗，這里我選擇從用戶進行切入，也許可以發(fā)現(xiàn)一些東西。三、關(guān)于用戶分層體驗設計中有個概念叫用戶分層，即便是同一個頁面，我們也需要去細分不同的場景對用戶做分層，為不同的用戶做設計。比如很多產(chǎn)品的首頁，之所以普遍是“搜索+品類+推薦”結(jié)構(gòu)，也是基于用戶分層的設計。用戶來到首頁后，可以大致分為瀏覽型和目的型兩類。前者沒有明確目標，隨便逛逛，因此產(chǎn)品可以通過算法進行模塊化精準推薦；后者有明確的目的，知道自己想要什么，因此產(chǎn)品可以通過提供搜索和品類入口，幫助這類用戶定點查找。而目的型用戶在進行了搜索這個行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。四、搜索行為背后的目的我發(fā)現(xiàn)用戶進行搜索時的目的，大概可以細分為以下三大類：購買決策型、內(nèi)容消費型和答疑解惑型。1.購買決策這類動機的用戶基于自身對某類物品、服務進行購買的動機，產(chǎn)生了搜索的行為。比如我想去點個外賣、買個衣服。這里的第一步，就是去搜索，篩選出符合我預期的內(nèi)容。1）搜索內(nèi)容通常是某類具象的名詞，比如粥、火鍋、串串香、球鞋等，或者店鋪名。2）對應產(chǎn)品所有的電商類、生活服務類的應用，如淘寶、京東、美團、餓了么等等。3）布局分析我發(fā)現(xiàn)這類產(chǎn)品基本全使用了自適應布局，為什么呢？①購買決策型的搜索內(nèi)容基本對應了具象名詞，通常字符數(shù)較少。所以采用自適應能夠保證極高的空間利用率。如果采用雙列或者單列的布局，會存在明顯的空間浪費、降低屏效、影響其他內(nèi)容的曝光。②購買決策型的用戶，場景上偏高愉悅場景。高愉悅場景下，我們更傾向于“浪費”時間。比如我們在點外賣、刷淘寶，獵物酬賞往往會讓我們沉浸其中不可自拔，忘記時間的存在，等意識過來時，發(fā)現(xiàn)已經(jīng)過去大半個小時（這里的獵物酬賞即我們在搜尋過程中接觸到的源源不斷的有價值的信息，在最后一個月了，如何用上癮模型彎道超車？這篇文章中有講，有興趣的老鐵可以去看看）。映射到現(xiàn)實生活中，就好像我們平日里去琳瑯滿目的商場、超市購物，有充足的時間慢慢得精挑細選、貨比三家。所以，購買決策型的搜索場景不會追求高效，用戶對歷史詞快速查找和使用的訴求相對較低。即便自適應布局降低了效率，負面影響偏低。2.答疑解惑這一類內(nèi)容基于用戶對某類問題的解決訴求。1）搜索內(nèi)容通常以5w1h的句式呈現(xiàn)，比如「南京公積金怎么提取」、「凡爾賽是什么意思」、「為什么會失眠」等等。2）對應產(chǎn)品瀏覽器產(chǎn)品、知乎。布局分析這類產(chǎn)品為什么基本都使用了雙列布局？搜索詞通常遵循5w1h類型，字符往往較長（包含搜索聯(lián)想詞）。答疑解惑型的搜索內(nèi)容，通常對應著用戶背后遭遇的問題，沒有人希望自己的生活被問題填充和纏繞，所以絕大多數(shù)的問題，背后都裹挾了【我想盡快解決！】的訴求。因為從場景愉悅度上來看，這類場景對應著低或中愉悅場景。此時，用戶對時間的敏感度高，傾向于追求高效、節(jié)約時間。（當我們?nèi)L試解決一個現(xiàn)有痛點、難題、困惑時，本能得渴望減少耗時）并且，如果問題一直無法得到解決，較易出現(xiàn)急切，沮喪，挫敗等負面情緒，所以，我們會經(jīng)常基于之前輸入的歷史詞進行反復的修正和嘗試，直至耐心消失殆盡。而雙列這種穩(wěn)如老狗的布局，以垂直動線加速用戶對歷史詞的的查找使用（數(shù)量較多時也不會出現(xiàn)混亂感），足夠高效。而且，足夠的空間也符合較長的字符寬度。因此雙列布局是答疑解惑型搜索的不二之選。絕大多數(shù)的瀏覽器產(chǎn)品，都采用了雙列這一布局。因為瀏覽器給用戶解決問題的屬性已經(jīng)深入心智，根據(jù)搜集的一些用研資料，答疑解惑型搜索在瀏覽器中也占據(jù)了最高的比例。知乎雖是內(nèi)容型產(chǎn)品，但主要功能也給用戶是答疑解惑，因此也采用了雙列的布局?？吹竭@里，你可能會問，單列也滿足條件啊，為什么很少看到單列的？沒錯，單列布局雖然也能符合這些要求，但是，它最大的缺陷就是——太占空間了。同等面積下，雙列能顯示12個歷史詞，單列只能顯示一半。最關(guān)鍵的是，產(chǎn)品還需要通過加塞實時熱搜、搜索熱榜這些玩意兒盈利。所以，商業(yè)價值的驅(qū)使下，單列布局的場景基本很少。3.內(nèi)容消費這一類型的動機基于對某類內(nèi)容的消費動機。1）搜索內(nèi)容通常是某類抽象名詞，比如某某話題、某某事件、某某資源等等，它們通常對應著內(nèi)容創(chuàng)作者。比如「王思聰土味情話」、「建黨一百周年」、「蘇州酒店坍塌事故」等等。2）對應產(chǎn)品主要為內(nèi)容、社交型產(chǎn)品，比如各類新聞資訊、短視頻類產(chǎn)品、簡書、喜馬拉雅、微博、微信（搜一搜）等等。3）布局分析這類產(chǎn)品的布局基本會有兩類，一類是自適應，另一類是單列。內(nèi)容消費和購買決策本質(zhì)上都屬于“消費”范疇，只不過前者是內(nèi)容、后者是需要付費的實物。它和購買決策一樣，都屬于高愉悅場景，而且由于內(nèi)容的即時性和形式的多變性，引起的愉悅感往往要更加強烈。所以，自適應同樣是合理的布局。但是單列布局呢？前面有說過，單列布局的體驗比肩甚至優(yōu)于雙列，但最明顯的缺憾就是太占空間，而空間向來是業(yè)務的必爭之地。因此，單列布局的使用場景和具體業(yè)務相關(guān)。比如業(yè)務需要確保其他搜索模塊（如熱搜、個性化搜索推送等）的曝光，那么是否可以允許這些搜索模塊前置，讓搜索歷史作為一個單獨頁面，觸發(fā)搜索框的聚焦后，和軟鍵盤同步喚起。比如微信和qq。再比如是否允許減少歷史詞露出數(shù)，來達到搜索模塊和歷史詞共處一頁的目的，減少跳轉(zhuǎn)，比如微博和抖音。五、使用場景總結(jié)1.自適應布局適用于購買決策型、或者內(nèi)容消費型的搜索場景，此類場景下搜索詞較短，且用戶對歷史詞快速查找和使用的訴求相對較低。常見于電商、生活服務類產(chǎn)品。2.雙列布局雙列布局，適用于答疑解惑型的搜索場景，此類場景下搜索詞較長，且用戶對歷史詞快速查找和使用的訴求較高。常見于瀏覽器產(chǎn)品，