本文主要介紹了“列字段過多時如何處理、列表操作、列表如何排序”三個問題的一些思考。
本文主要介紹了“列字段過多時如何處理、列表操作、列表如何排序”三個問題的一些思考。
筆者結(jié)合后臺設(shè)計的工作經(jīng)歷，總結(jié)在后臺列表設(shè)計工作中會遇到的一些常見問題及設(shè)計思考。初次發(fā)文，不足之處請多多包涵~
一、列表定義及作用
列表是一種信息集合的方式，可承載文字、列表、圖片、段落，常用于后臺數(shù)據(jù)展示頁面。列表設(shè)計主要體現(xiàn)在可讀性與易管理操作兩個方面，用戶可快速地管理數(shù)據(jù)（查看、查詢、操作、分析、等操作）。
二、常見列表結(jié)構(gòu)
列表結(jié)構(gòu)設(shè)計上，可根據(jù)列字段內(nèi)容選取合適列表結(jié)構(gòu)，例如適用于數(shù)據(jù)平鋪展示的基礎(chǔ)型列表，強調(diào)層級關(guān)系、從屬關(guān)系、遞進(jìn)關(guān)系的主從型列表（如子母表），或合并單元格展示的綜合型列表等，關(guān)于列表結(jié)構(gòu)分析網(wǎng)上有眾多分享文章，此處不作過多闡述。
三、列表設(shè)計常見問題
簡單梳理后臺列表設(shè)計會遇到的一些問題及可參考的設(shè)計方法，根據(jù)具體業(yè)務(wù)場景選取最合適的解決方案。
常見問題1：列字段過多時怎么辦？
我們都知道列表設(shè)計要盡量避免橫向滾動條的出現(xiàn)，橫滾會降低可讀性及操作效率，但是日常工作中我們還是會看到產(chǎn)品經(jīng)理提過來的列字段是屏幕寬度展示不下的，這個時候可以通過以下幾種方法來解決：
（1）刪減字段
刪減無用字段，留下重要的字段。刪減階段需要與產(chǎn)品經(jīng)理一起合作，還原業(yè)務(wù)場景，為列表展示字段做減法。
（2）合并字段
針對復(fù)雜列表你會發(fā)現(xiàn)，刪減后的字段還是很多，這時候你可以考慮是否可以合并字段，將屬性差不多的字段合為一列，舉個簡單栗子，如下圖“商品圖片、商品名稱、sku屬性”列字段可合并為“商品信息”一個列字段完成展示，使信息關(guān)系更緊密，并且可節(jié)省列表橫向空間。
合并字段
（3）主從型結(jié)構(gòu)展示
列表具有較強的層級關(guān)系、從屬關(guān)系、遞進(jìn)關(guān)系，可選用主從型結(jié)構(gòu)列表展示，也可有效避免橫向滾動。
主從型結(jié)構(gòu)展示
（4）列設(shè)置
針對B端或G端業(yè)務(wù)，同一個列表會面向多種受眾角色，經(jīng)辦崗、審核崗、監(jiān)管崗等等， 每種用戶角色對列表的字段需求有相同也有不同之處，眾口難調(diào)，列設(shè)置功能可有效解決這種情況，市面上CRM管理系統(tǒng)基本都支持自定義列設(shè)置來滿足不同用戶的列表需求，在產(chǎn)品設(shè)計上也只需要設(shè)計一套通用的列表，適用于不同的角色。
自定義列設(shè)置
（5）固定首列及操作列
如果真的必須出現(xiàn)橫向滾動，建議固定首列及操作列的方法，來滿足操作效率。
常見問題2：列表操作如何設(shè)計？
（1）直接羅列
列表操作直接顯現(xiàn)在列表上，支持用戶不需要查看詳情頁，直接根據(jù)列表字段就可以快速作出判斷并且高頻發(fā)生的操作，操作效率高。但是當(dāng)操作很多的時候，還是需要將更多的操作收納到一個組內(nèi)，將高頻操作放在組操作之外。
操作直接羅列
（2）操作隱藏
在列表頁將所有操作隱藏起來。比較適用于一些操作頻率使用較低或操作風(fēng)險較高的列表。
操作隱藏
（3）批量操作
當(dāng)列表批量操作場景為主要場景時，可不放置單行操作，將所有操作都放在批量操作模塊。不過對于不同狀態(tài)數(shù)據(jù)的批量操作邏輯會比較復(fù)雜，會存在數(shù)據(jù)過濾的邏輯。
常見問題3：列表如何排序？
此處探討的排序非數(shù)據(jù)查詢排序，而是用戶對數(shù)據(jù)位置排序的功能需求。
（1）拖拽排序
針對數(shù)據(jù)體量小，可選用鼠標(biāo)拖拽交互進(jìn)行排序，所見即所得。但是不適用數(shù)據(jù)體量大的列表。
拖拽排序
（2）上/下移動排序
更適用于局部上下順序調(diào)整，不適用調(diào)整較大范圍。
（3）序號排序
針對數(shù)據(jù)體量大，選用序號排序，操作效率更高。下圖是曾經(jīng)做過的關(guān)于數(shù)據(jù)量較大的列表排序需求，就選用了手動輸入序號的方式，完成列表數(shù)據(jù)的排序。
序號排序
初次發(fā)文，不足之處請多多包涵~謝謝 ：）
#參考文章#
本文由 @菜蛋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
