本文主要介紹了“列字段過多時如何處理、列表操作、列表如何排序”三個問題的一些思考。

筆者結合后臺設計的工作經歷，總結在后臺列表設計工作中會遇到的一些常見問題及設計思考。初次發文，不足之處請多多包涵~

一、列表定義及作用

列表是一種信息集合的方式，可承載文字、列表、圖片、段落，常用于后臺數據展示頁面。列表設計主要體現在可讀性與易管理操作兩個方面，用戶可快速地管理數據（查看、查詢、操作、分析、等操作）。

二、常見列表結構

列表結構設計上，可根據列字段內容選取合適列表結構，例如適用于數據平鋪展示的基礎型列表，強調層級關系、從屬關系、遞進關系的主從型列表（如子母表），或合并單元格展示的綜合型列表等，關于列表結構分析網上有眾多分享文章，此處不作過多闡述。

三、列表設計常見問題

簡單梳理后臺列表設計會遇到的一些問題及可參考的設計方法，根據具體業務場景選取最合適的解決方案。

常見問題1：列字段過多時怎么辦？

我們都知道列表設計要盡量避免橫向滾動條的出現，橫滾會降低可讀性及操作效率，但是日常工作中我們還是會看到產品經理提過來的列字段是屏幕寬度展示不下的，這個時候可以通過以下幾種方法來解決：

（1）刪減字段

刪減無用字段，留下重要的字段。刪減階段需要與產品經理一起合作，還原業務場景，為列表展示字段做減法。

（2）合并字段

針對復雜列表你會發現，刪減后的字段還是很多，這時候你可以考慮是否可以合并字段，將屬性差不多的字段合為一列，舉個簡單栗子，如下圖“商品圖片、商品名稱、sku屬性”列字段可合并為“商品信息”一個列字段完成展示，使信息關系更緊密，并且可節省列表橫向空間。

合并字段

（3）主從型結構展示

列表具有較強的層級關系、從屬關系、遞進關系，可選用主從型結構列表展示，也可有效避免橫向滾動。

主從型結構展示

（4）列設置

針對B端或G端業務，同一個列表會面向多種受眾角色，經辦崗、審核崗、監管崗等等， 每種用戶角色對列表的字段需求有相同也有不同之處，眾口難調，列設置功能可有效解決這種情況，市面上CRM管理系統基本都支持自定義列設置來滿足不同用戶的列表需求，在產品設計上也只需要設計一套通用的列表，適用于不同的角色。

自定義列設置

（5）固定首列及操作列

如果真的必須出現橫向滾動，建議固定首列及操作列的方法，來滿足操作效率。

常見問題2：列表操作如何設計？

（1）直接羅列

列表操作直接顯現在列表上，支持用戶不需要查看詳情頁，直接根據列表字段就可以快速作出判斷并且高頻發生的操作，操作效率高。但是當操作很多的時候，還是需要將更多的操作收納到一個組內，將高頻操作放在組操作之外。

操作直接羅列

（2）操作隱藏

在列表頁將所有操作隱藏起來。比較適用于一些操作頻率使用較低或操作風險較高的列表。

操作隱藏

（3）批量操作

當列表批量操作場景為主要場景時，可不放置單行操作，將所有操作都放在批量操作模塊。不過對于不同狀態數據的批量操作邏輯會比較復雜，會存在數據過濾的邏輯。

常見問題3：列表如何排序？

此處探討的排序非數據查詢排序，而是用戶對數據位置排序的功能需求。

（1）拖拽排序

針對數據體量小，可選用鼠標拖拽交互進行排序，所見即所得。但是不適用數據體量大的列表。

拖拽排序

（2）上/下移動排序

更適用于局部上下順序調整，不適用調整較大范圍。

（3）序號排序

針對數據體量大，選用序號排序，操作效率更高。下圖是曾經做過的關于數據量較大的列表排序需求，就選用了手動輸入序號的方式，完成列表數據的排序。

序號排序

初次發文，不足之處請多多包涵~謝謝 ：）

#參考文章#

《B端產品常用web列表設計模式總結》

《列表設計的一些思路》

本文由 @菜蛋 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。