后臺系統:數據展示列表

7 評論 54626 瀏覽 319 收藏 6 分鐘

后臺數據列表設計,有哪些需要注意的點呢?通過文章一起來看看。

在后臺產品設計中,涉及到比較多的恐怕就是數據列表了。那么,列表應該怎樣進行設計,在設計過程中有需要考慮哪些因素呢。

首先,一個后臺的數據列表頁,主要可以分為以下幾個:

  • 搜索
  • 操作
  • 列表

在有的數據列表頁面,你可能會看到兩個列表,一個是數據詳情列表,另一個則是對所選數據某些字段的一個簡單統計。在設計中是否需要,需要看業務需求而定。

一、搜索

上圖僅做了一個簡單的搜索作為舉例,但在設計搜索時,每個條件都需要仔細思考。主要包括以下幾個問題:

  1. 哪些需要作為搜索條件,哪些是重要的,哪些不重要。當搜索條件過多時,可以挑選幾個重要的或常用的展示出來,其他的可以默認隱藏起來,通過“展開”和“收起”來進行操作;
  2. 哪些支持多選單選,哪些僅支持多選,每個選項搜索條件的默認值是什么;
  3. 每一個搜索條件該如何設置,如是否支持首字母搜索、下拉選項的排序方式、哪些選項是有聯動關系的、時間需要支持單天選擇還是多天選擇、是否需要設置快捷搜索條件扥等因素都是需要考慮的;
  4. 不同權限的賬號登錄時,需要怎么展示,哪些人可以看到哪些搜索條件;
  5. 每選擇一個條件就直接響應搜索還是點擊“搜索”時才執行搜索;
  6. 在頁面上,還要考慮無搜索結果時,頁面該如何提示;

二、操作

對數據列表的操作又可以分為整體操作和單條數據操作。

  1. 批量操作:在頁面設計上,整體操作按鈕都會展示在列表的最上方,比如刪除、禁用、排序、篩選等,當然,上面所講到的搜索也屬于整體操作的內容;
  2. 單條數據操作:每條數據后面的操作欄。通常情況下,數據詳情以及數據的一些設置基本上都會放在后面的操作欄里,如下圖中的“查看詳情”;

三、數據列表

設計數據列表時,需要注意和考慮的有以下幾點:

  1. 數據信息:數據列表頁最重要的就是需要展示的字段信息,這需要在充分了解業務及需求的條件下進行設計和考量;
  2. 列表分頁:顧名思義,分頁則是把數據分成多頁展示,基本上后臺的數據量都會很大,不可能一頁展示完,這就需要考慮一頁展示多少數據了。分頁時,涉及到的主要有:當前頁、上一頁/下一頁、頁面總數、頁面的快捷跳轉,若有需要,還可以展示一下數據總條數以及一頁展示多少條的設置,當然,這些還要考慮研發使用何種組件以及實現的難易程度;
  3. 數據加載:數據的加載與列表的設計有很密切的關系。由于數據量通常都比較大,若一次性加載,則會導致速度特別慢。所以需要提前與研發溝通清楚各種情形下的數據加載方式、是否需要做本地緩存等問題。雖然這些是研發方面的問題,但若不提前溝通,勢必會出現問題;
  4. 若數據比較多而雜,可以就某些重點字段做一個簡單的統計表,如上圖“金額匯總”表;
  5. 列表展示規則:需要考慮數據的默認展示方式,如默認按照日期倒序排列等,在列表的表頭處,也可以在某些字段旁增加排序、篩選的操作;
  6. 特殊標記:某些異常數據在展示上需要作何區別,如用顏色、字體、圖標等進行區分,方便發現問題;
  7. 其他:可以考慮是否需要提供一些其他的功能,如快捷復制訂單編號等等,當然,這些就是比較細的問題了,可以根據需要添加。

本文由 @?姜蕁 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 列表字段經常很多,但是又沒辦法刪減,在小屏電腦上就會向右拖很長,有沒有比較好的處理方式呢

    來自江蘇 回復
    1. 重要數據放在前面,固定位置。后面超長的部分,使用滾動條。

      來自北京 回復
    2. 1、自定義展示表格字段
      2、滾動條

      來自山東 回復
  2. 總結的還是比較全面的,剛做過后臺,很有感受

    來自重慶 回復
  3. 挺不錯的 最近在做后臺產品設計 都是查詢加上表單設計

    來自上海 回復
  4. 回復
  5. 最近在做電商后臺產品,請問下方便加好友交流一下嗎

    來自上海 回復