2023年后臺列表設(shè)計避坑指南（上）

后臺列表設(shè)計避坑指南（上）列表頁是構(gòu)成后臺使用界面的重要組成之一，聚合了眾多信息并供應(yīng)操作入口。

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

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

列表頁由「搜尋」、「表格」和「操作項」三大基本塊組成。

剛才提到的沖突點也是由這三個模塊之前的相互影響和制約（后面會具體闡述）。

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

這篇文章就將「搜尋」、「列表」、「操作」三塊問題進行分析和定位，盤點一下那些被淘汰掉的解決方案，給大家供應(yīng)一份避坑指南。

留意，不存在“最好”的通用方案，只有應(yīng)對詳細需求“最合適”的解決方案。

一、搜尋

1.問題定位

搜尋功能的主要問題是，條件特殊多。

假如全部條件堆疊在屏幕上，會嚴峻擠占列表的展現(xiàn)空間，使得首屏留給列表的空間所剩無幾；用戶在查找詳細搜尋條件時，仿佛大海撈針，耗時費勁。

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

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

設(shè)計方案要能同時滿意下面3個需求：

用戶可以快速找到搜尋條件——掌握條件的數(shù)量；能滿意搜尋細致程度上的要求——搜尋條件要充分；將展現(xiàn)區(qū)域更多留給表格——避開搜尋區(qū)域占用太多屏幕空間。2.淘汰

淘汰方案1：把搜尋條件根據(jù)權(quán)限隱蔽。

例如職責(zé)A的用戶展現(xiàn)搜尋條件1、2、3、4，職責(zé)B的用戶搜尋條件1、2、5、6；此方案的確能同時滿意①②③，但需要特別細致的配置工作；若組織架構(gòu)發(fā)生變動，維護的工作量很難預(yù)估。

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

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

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

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

這樣設(shè)計后，看起來也能滿意①②③——默認狀態(tài)下的列表的確清爽了不少。

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

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

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

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

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

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

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

3.最終方案

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

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

OneMoreThing：假如后臺系統(tǒng)的數(shù)據(jù)加載時間比較久