編輯導(dǎo)語(yǔ)：后臺(tái)系統(tǒng)在日常工作中是非常重要的，后臺(tái)內(nèi)容的列表足夠全面，可以讓我們快速定位到內(nèi)容，提高工作效率；本文作者根據(jù)自身經(jīng)驗(yàn)分享了關(guān)于列表頁(yè)的“坑”和必坑指南，我們一起來(lái)學(xué)習(xí)一下。

列表頁(yè)是構(gòu)成后臺(tái)使用界面的重要組成之一，聚合了眾多信息并提供操作入口。

區(qū)別于小而美的C端產(chǎn)品列表，后臺(tái)系統(tǒng)的用戶希望列表的內(nèi)容又多又全面（表格），但在操作時(shí)又能支持快速定位（搜索，包含篩選）、準(zhǔn)確處理（操作）。

這需求貌似有些矛盾，但在很多場(chǎng)景下，例如：客服在接待客戶時(shí)窗口時(shí)間極其短暫，既要全面獲取相關(guān)信息，又要快速應(yīng)對(duì)解決客戶問(wèn)題；因此這需求不僅合理而且是剛需。

列表頁(yè)由「搜索」、「表格」和「操作項(xiàng)」三大基本塊組成。

剛才提到的矛盾點(diǎn)也是由這三個(gè)模塊之前的互相影響和制約（后面會(huì)詳細(xì)闡述）。

我們當(dāng)初由于在設(shè)計(jì)時(shí)忽視了特定場(chǎng)景細(xì)節(jié)，以及生搬硬套了一些看起來(lái)很美很簡(jiǎn)約的交互樣式，沒(méi)有處理好這三個(gè)模塊內(nèi)部以及之間的關(guān)系，被用戶抱怨說(shuō)不好用。

這篇文章就將「搜索」、「列表」、「操作」三塊問(wèn)題進(jìn)行分析和定位，盤點(diǎn)一下那些被淘汰掉的解決方案，給大家提供一份避坑指南。

注意，不存在“最好”的通用方案，只有應(yīng)對(duì)具體需求“最合適”的解決方案。

一、搜索

1. 問(wèn)題定位

搜索功能的主要問(wèn)題是，條件特別多。

如果全部條件堆疊在屏幕上，會(huì)嚴(yán)重?cái)D占列表的展示空間，使得首屏留給列表的空間所剩無(wú)幾；用戶在尋找具體搜索條件時(shí)，仿佛大海撈針，耗時(shí)費(fèi)力。

造成搜索條件多的原因，一方面是由于數(shù)據(jù)信息量大，維度多。

在非精準(zhǔn)搜索的場(chǎng)景下，少量的條件不足以篩選出特定內(nèi)容；另外列表由多個(gè)職責(zé)權(quán)限的用戶共用，展示的是各權(quán)限下條件合集。

設(shè)計(jì)方案要能同時(shí)滿足下面3個(gè)需求：

• 用戶可以快速找到搜索條件——控制條件的數(shù)量；
• 能滿足搜索細(xì)致程度上的要求——搜索條件要充足；
• 將展示區(qū)域更多留給表格——避免搜索區(qū)域占用太多屏幕空間。

2. 淘汰

淘汰方案1：把搜索條件按照權(quán)限隱藏。

例如職責(zé)A的用戶展示搜索條件1、2、3、4，職責(zé)B的用戶搜索條件1、2、5、6；此方案確實(shí)能同時(shí)滿足①②③，但需要非常細(xì)致的配置工作；若組織架構(gòu)發(fā)生變動(dòng)，維護(hù)的工作量很難預(yù)估。

淘汰方案2：將搜索條件放置在列表左側(cè)。

這個(gè)方案試圖滿足需求③，希望保證首屏的展示主體是列表，但其實(shí)列表的橫向展示空間被擠占了；如果列表很寬，那么瀏覽的時(shí)候就需要頻繁的左右滑動(dòng)；若是設(shè)備不支持左右滑動(dòng)（不包含觸摸板），用戶只能頻繁拖動(dòng)滾動(dòng)條，想一想這體驗(yàn)就很糟糕。

另外搜索區(qū)域的展示布局由塊面轉(zhuǎn)變?yōu)闂l狀，需要向下滾動(dòng)（可能是多次）才能完整預(yù)覽所有條目，降低了搜索效率。

淘汰方案3：默認(rèn)顯示少數(shù)搜索條件，全部條件轉(zhuǎn)移至彈窗內(nèi)呈現(xiàn)。

這樣設(shè)計(jì)后，看起來(lái)也能滿足①②③——默認(rèn)狀態(tài)下的列表確實(shí)清爽了不少。

但如果用戶需要多次切換搜索條件的組合方式時(shí)，需多次打開(kāi)+關(guān)閉彈窗，大大增加點(diǎn)擊次數(shù)。

這種方案還需要注意一點(diǎn)：搜索條件和結(jié)果展示之間的具有強(qiáng)關(guān)聯(lián)性，需要在特定區(qū)域展示當(dāng)前生效的搜索條件。

淘汰方案4：隱藏輸入框標(biāo)題，使用占位符提示搜索內(nèi)容。

某個(gè)同學(xué)提出這個(gè)方案，原因是標(biāo)題在輸入框上方，隱藏標(biāo)題可以使搜索條件排布的更緊密，給列表騰地方。

這種設(shè)計(jì)其實(shí)挺常見(jiàn)，但前提是輸入框數(shù)量極少，且為用戶所熟知；但后臺(tái)系統(tǒng)有些輸入框需要選擇“是”或“否”，選擇后用戶只憑“是”或“否”，可能回想不出這個(gè)選項(xiàng)對(duì)應(yīng)的是什么搜索條件。

淘汰方案5：縮短輸入框列寬，從而增加每行的列數(shù)，減少行數(shù)。

這樣可以減少篩選項(xiàng)的行數(shù)，目的也是在首屏給列表騰地方。但填寫至輸入框的文本只能展示前面幾個(gè)字，影響預(yù)覽和理解。例如在地區(qū)的輸入框中只能顯示“浙江省杭州市…”無(wú)法看到“區(qū)”、“街道”等更詳細(xì)的重要信息。

3. 最終方案

最終方案：用戶可設(shè)置展示哪些選項(xiàng)，且通過(guò)賬號(hào)記錄設(shè)置結(jié)果。

這個(gè)方案較全面的解決了問(wèn)題，每個(gè)用戶都可以根據(jù)自己的需求和習(xí)慣決定展示哪些選項(xiàng)，甚至選項(xiàng)排序；這個(gè)方案滿足了①②③的需求，但這個(gè)需要后端開(kāi)發(fā)的支持。

One More Thing：如果后臺(tái)系統(tǒng)的數(shù)據(jù)加載時(shí)間比較久（不管是數(shù)據(jù)量大還是開(kāi)發(fā)方式導(dǎo)致），盡量避免采用輸入/選擇后即執(zhí)行搜索的交互樣式；這可能導(dǎo)致每次輸入/選擇后用戶都需要被迫等待；如果選擇N個(gè)搜索條件，等待時(shí)間要乘以N。

作者：杜小杜，公眾號(hào)：能呆書房一整天

本文由 @杜小杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議