2023年后臺列表設計避坑指南（下）

后臺列表設計避坑指南（下）列表頁是構成后臺使用界面的重要組成之一，聚合了眾多信息并供應操作入口。

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

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

列表頁由「搜尋」、「表格」和「操作項」三大基本塊組成。剛才提到的沖突點也是由這三個模塊之前的相互影響和制約（后面會具體闡述）。

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

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

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

二、列表

列表的主要問題照舊是內(nèi)容太多帶來的：

表頭字段太多，超出屏幕之外，左右滑動才能完整查看條目內(nèi)容，導致眼動頻繁，增加認知負擔。條目太多，批量操作可能要多次翻頁。另外，其他潛在問題也會增加列表展現(xiàn)的簡單性，例如條目之間存在肯定相關性——基于某份主合同后續(xù)簽訂幾份補充合同（這里不爭論業(yè)務規(guī)律合理性）；那么簡潔根據(jù)簽訂時間點排序，就無法體現(xiàn)合同之間的關聯(lián)關系。

在設計時，應著眼于避開內(nèi)容太多導致的認知負擔和操作成本。我們嘗試了一些方法來削減信息噪音，抽象來說方法歸為兩個字——「藏」和「換」。

「藏」，就是隱蔽低優(yōu)先級信息，需要的時候才允許他們消失；「換」就是轉(zhuǎn)換信息呈現(xiàn)的形式；下面我們一一綻開。

1.方法一：藏

1）用戶來配置展現(xiàn)哪些表頭項

和之前提到的搜尋區(qū)域配置功能類似，允許用戶配置表頭項，隱蔽暫不需要的內(nèi)容。

△設計者AshmitaBhattacharyya

2）使用綻開行

適合主次層級對比劇烈的列表。將重要度低的內(nèi)容放入綻開行內(nèi)，這樣可以避開橫向滑動。

但假如同時查看多條綻開行，需要多次點擊綻開。

△圖片來自ElementUI3、樹形數(shù)據(jù)

使用樹形數(shù)據(jù)可以將一組有父子關系的數(shù)據(jù)聚合呈現(xiàn)，類似文章一開頭提到的主合同+補充合同的場景。

△圖片來自ElementUI

2.方法二：換

1）使用圖像代替文字

圖像比文字在信息傳遞上更直觀——緣由是人們對圖像的處理效率遠高于閱讀和理解；利用清楚易懂的圖像可以將信息檢索效率提升一個數(shù)量級。

△圖片來自設計者Dwinawan2、合理的默認排序規(guī)章

常見的排序規(guī)章包含時間的正、倒序等；合理的排序規(guī)章，打算了首屏是否能呈現(xiàn)對用戶重要度更高的內(nèi)容，以及操作反饋是否可見。

舉個例子，用戶新創(chuàng)建完成一個新條目后，列表根據(jù)創(chuàng)建時間正序排列，刷新后沒有任何變化，需要用戶翻到最終才能觀察，那么這個反饋體驗就不太好。

我們也可以依據(jù)信息的狀態(tài)設置權重參數(shù)，綜合計算權重值后，重要度高的信息排在前面。

舉個微信的例子，大家是否發(fā)覺訂閱號消息的排序并不是根據(jù)更新時間排序？

微信的解釋是——訂閱號消息排列挨次會依據(jù)訂閱號的優(yōu)質(zhì)程度、用戶對訂閱號的寵愛程度以及群發(fā)文章的內(nèi)容質(zhì)量等綜合因素動態(tài)變化；也就是有多個權重參數(shù)值疊加，綜合排序。

另外還可以允許用戶將任意條目置頂?shù)?，例如微信可以將某人或某群組的消息置頂。

3.留意

1）橫向滾動條

橫向滾動條在底部的話，可能由于列表條目太多（例如一頁展現(xiàn)50條），導致用戶未將列表拉究竟就看不到滾動條；假如設備是觸屏，無法支持左右滑動會特別不便，因此列表頂部也需要展現(xiàn)橫向滾動條。

2）固定列

假如列表支持橫向滾動，那么選擇列、名稱等標識列、操作列等建議固定，便于定位和操作。

△頂部橫向滾動條、固定列

3）數(shù)字右對齊

在小數(shù)位保持全都的狀況下，數(shù)字右對齊，更簡單對比數(shù)字大小。

4）空數(shù)據(jù)

沒有的數(shù)據(jù)不要為空，可以用符號「-」代替。

△數(shù)字右對齊、空數(shù)據(jù)

三、操作

操作我們大致分成兩類來分析：

批量操作，例如添加/導入、設置/安排、刪除、導出等。針對單條內(nèi)容的操作，例如編輯、刪除、查看等。1.批量操作

批量操作相對簡單度高，出錯的概率也更大，以下幾條內(nèi)容是我們設計摸索過程中總結出來的防錯策略：

不建議支持跨頁選擇跨頁選擇首先會增加開發(fā)難度及測試簡單度，用戶操作也簡單出錯；比如，在選擇過程中，已選擇數(shù)據(jù)的狀態(tài)可能在外部發(fā)生了變化，不再符合批量操作的條件，從而導致任務處理失敗。設置處理數(shù)目上限假如數(shù)據(jù)量太大，系統(tǒng)負擔過重，也會增加超時等任務失敗的頻率。幫助計算在用戶選擇過程中動態(tài)計算合計值并實時反饋，防止用戶提交后才發(fā)覺無法通過系統(tǒng)的校驗條件；例如用戶在批量還清多筆賬單時，可以在選擇頁面就提示用戶所選金額超出賬戶余額限制，而不是在提交后才給用戶報錯。異步反饋有些操作數(shù)據(jù)量大，處理耗時較長，例如導出全量內(nèi)容等，可采納異步的反饋方式，以避開耽擱用戶處理其他任務；依據(jù)場景，異步反饋還可采納多種通道保證信息傳達給客戶，例如系統(tǒng)內(nèi)提示+短信+郵箱提示等。2.單條操作

1）列表的信息展現(xiàn)，我們會嘗試取舍和隱蔽；但關于操作，在許多場景下，盡量全部展現(xiàn)，避開用戶需額外點擊才能將操作項喚出。

緣由有二：降低學習成本、提升操作效率。

△圖片來自設計者AsishSunny，設計方案將部分操作隱蔽，不過在許多場景下并不適用

2）在展現(xiàn)上，可以使用圖標按鈕代替文字按鈕，但要留意語義肯定要精確?????，不要過于追求創(chuàng)新導致語義和用戶心理模型產(chǎn)生偏差。圖標除了具有按鈕功能，還能提示信息狀態(tài)，一舉兩得。