后臺產(chǎn)品設(shè)計之列表頁設(shè)計

時間：2023-09-01 08:36:01 | 來源：網(wǎng)站運營

時間：2023-09-01 08:36:01 來源：網(wǎng)站運營

后臺產(chǎn)品設(shè)計之列表頁設(shè)計：對于后臺產(chǎn)品來說，列表頁應該是應用范圍最廣、使用最多的頁面之一。一個優(yōu)秀的列表頁能幫助用戶快速了解相關(guān)數(shù)據(jù)，有效提升工作效率。

通常來說，一個完整的列表頁包括導航區(qū)、檢索區(qū)、頂部操作區(qū)、列表區(qū)以及分頁區(qū)5大模塊。

導航區(qū)

對于較為復雜的后臺系統(tǒng)，由于功能結(jié)構(gòu)、信息結(jié)構(gòu)層級比較多，為了讓用戶能時刻知道自己在系統(tǒng)中的位置，就需要使用導航區(qū)。

對于簡單的系統(tǒng)來說，往往利用頂部導航和側(cè)邊菜單就已經(jīng)能讓用戶了解整個系統(tǒng)架構(gòu)，這時，導航區(qū)就不是一個必備的選項。

列表頁的導航區(qū)，常見的展現(xiàn)形式為面包屑導航

針對面包屑導航，其具體的展現(xiàn)形式也非常多樣，除了上述基本形式，還包括下拉型面包屑、交互型面包屑等，考慮到后臺系統(tǒng)一般不會使用這些形式，這里不再展開。

檢索區(qū)

檢索區(qū)主要用于輔助用戶快速定位數(shù)據(jù)。在檢索項的選擇上，需要結(jié)合列表數(shù)據(jù)進行綜合考慮。一般來說檢索項越多越能幫助用戶精準定位數(shù)據(jù)，但是過多的檢索項也會對用戶造成干擾。那么到底要怎么選擇顯示檢索項呢，我認為可以參考以下原則：

• 多個字段相結(jié)合

例如用戶列表，可以同時通過姓名、手機號對用戶進行檢索，那么就可以考慮將這兩個字段融合到一個搜索框中，查找數(shù)據(jù)庫的時候聯(lián)查這兩個字段。

但是要注意的是，不要將過于相近的字段進行合并檢索，這樣會檢索出很多無關(guān)數(shù)據(jù)，無法達到讓用戶快速查找數(shù)據(jù)的目的。例如一個訂單頁同時包含訂單編號和商品編號，并且這兩個字段的定義規(guī)則相近，就不要將其合并檢索，不然本來想通過商品編號來檢索，結(jié)果檢索出一堆訂單編號中帶關(guān)鍵字的數(shù)據(jù)，就會對用戶造成很大的干擾。

• 不選擇列表中不顯示的字段

不選擇列表中不顯示的字段，一個是因為列表頁顯示的字段一般為關(guān)鍵字段，不在列表頁顯示的字段相對就比較次要，對于檢索項來說最好挑選關(guān)鍵字段進行檢索。另一個是因為如果檢索的字段不在列表中，容易給用戶一種不安感，讓用戶不確定檢索的是否是他需要的數(shù)據(jù)。

展現(xiàn)形式

• 直接羅列所有檢索項

檢索項不多的情況下，可以選擇直接進行羅列。

• 折疊部分檢索項

如果檢索項較多，可以默認顯示關(guān)鍵檢索項，折疊次要檢索項，點擊展開后再顯示全部的檢索項。

• 顯示檢索項的值

檢索項的值數(shù)量可控的情況下，可以采用將檢索項的值全部排列出來的方式。

這種方式，對于檢索項和檢索項的值，都可以結(jié)合折疊功能來搭配使用。

控件邏輯

檢索區(qū)常使用的控件包括下拉框、單行輸入框、時間控件、復選框等

• 下拉框

使用下拉框時，需要注意的是，如果下拉選項很多，可以考慮用聯(lián)動下拉框代替，通過增加下拉層級來讓選擇更為快捷。例如一個學生管理列表，如果需要通過班級來檢索學生，對于一個班級很多的學校來說，但是使用一個班級的下拉框來選擇是非常困難的，可以將班級的下拉框替換為班級分類+班級的聯(lián)動下拉框，這樣能更快捷的查找數(shù)據(jù)。

• 時間控件

在使用時間空間的時候，可以根據(jù)用戶的使用習慣將一些常用時間抽離出來作為選項。

頂部操作區(qū)

頂部操作區(qū)的操作主要包括：

1. 對列表多條數(shù)據(jù)產(chǎn)生影響的操作，例如導出、批量處理等；
2. 不對具體已有的數(shù)據(jù)產(chǎn)生影響的操作，例如新增、刷新等。

列表區(qū)

列表區(qū)是列表頁最主要的區(qū)域，通常來說可以繼續(xù)拆分為列表數(shù)據(jù)區(qū)和列表操作區(qū)。

1.列表數(shù)據(jù)區(qū)

列表數(shù)據(jù)區(qū)主要顯示列表的各項數(shù)據(jù)。當列表數(shù)據(jù)項較少的情況下可以直接全部顯示。而數(shù)據(jù)項較多的情況下，則需要挑選出關(guān)鍵數(shù)據(jù)進行展示，其他次要數(shù)據(jù)需要配合詳情頁來展示。

展現(xiàn)形式

• 表頭名稱、數(shù)據(jù)字段一一對應

表頭跟字段一一對應的方式應該是最基本、最常用的展現(xiàn)形式。

• 表頭名稱對應多個字段

可以將多個關(guān)聯(lián)性較大的字段放在一個表頭名稱下，這種方式可以通過減少字段的橫向排列來縮短列表的寬度，減少橫向滾動條的使用，更符合人眼觀察習慣。

對于多個字段顯示在同一個表頭名稱下，不建議選擇數(shù)字類型的字段這么做，因為數(shù)字類型的字段在一個列表里顯示的時候，天然有種可以直接進行縱向比較的優(yōu)勢，如果將多個字段組合在一起顯示，反而會破壞這種優(yōu)勢。

• 橫向滾動條

在字段較多的情況下，更為直接的方式是采用橫向滾動條，這種方式應該是大部分用戶都比較熟悉的方式，但是用戶體驗上來說并不是很好。

• 固定數(shù)據(jù)列

在使用橫向滾動條的方式下，可以配合使用固定數(shù)據(jù)列的方式，將重要字段固定，避免用戶要來回滑動滾動條查看數(shù)據(jù)。

• 數(shù)據(jù)列可配置

針對字段較多的情況，還可以采用數(shù)據(jù)列可配置的形式。這種形式比較適用于該列表同時服務于多種角色的用戶，每種角色的用戶關(guān)心的點各不相同的情況，可以讓用戶根據(jù)自己的需求進行數(shù)據(jù)列的配置。

雖然針對列表數(shù)據(jù)區(qū)總結(jié)了多種展示形式，但是每種形式都不是孤立的，應該結(jié)合具體情況配合使用，才能產(chǎn)生最優(yōu)解。

列表排序

列表的排序也是列表的一個關(guān)鍵內(nèi)容，好的列表排序能讓用戶很清晰的了解列表，進行操作。常見的排序方式有如下幾種：

• 根據(jù)數(shù)據(jù)創(chuàng)建時間進行排序

針對用戶可以新增數(shù)據(jù)的列表，大多采用數(shù)據(jù)創(chuàng)建的時間進行排序，這樣有利于用戶找到剛剛創(chuàng)建的數(shù)據(jù)，不至于創(chuàng)建完成后不知道數(shù)據(jù)在哪里。

• 根據(jù)某個或多個字段組合進行排序

針對用戶不能新增數(shù)據(jù)的列表，可以選擇某個或者某些字段的組合進行排序，例如根據(jù)時間、名稱的首字母等，只要符合具體場景下的需求即可。

2.列表操作區(qū)

列表操作區(qū)的操作主要是針對單條數(shù)據(jù)進行的操作，常見的操作包括修改、刪除、查看詳情、排序、審核等。

展現(xiàn)形式

• 按鈕形式

以按鈕或者文字鏈接的形式來顯示，是最為常見的一種形式。

• 圖標形式

以圖標的形式來顯示也是應用非常廣的一種形式，但是這種形式更多的適用于非常常見的、用戶非常熟悉的、能望圖生義的操作，例如修改、刪除等。

• 折疊部分操作

對于操作較多的列表，可以顯示幾個主操作，次要操作進行折疊處理，節(jié)約操作區(qū)的面積。

分頁區(qū)

對數(shù)據(jù)進行分頁可以減少數(shù)據(jù)加載的壓力。分頁區(qū)的主要內(nèi)容包括數(shù)據(jù)總條數(shù)、每頁顯示數(shù)據(jù)數(shù)、當前頁、翻頁跳頁操作。數(shù)據(jù)分頁后，就會引出這樣一些問題：

• 當前頁選擇的數(shù)據(jù)，跳頁后是否需要繼續(xù)選擇

正常其實都是需要的，但是我們要溝通清楚

• 從當前頁進入子級頁面后，返回來時是否需要仍停留在原前頁

正常其實都是需要的，但是我們要溝通清楚

總之，我們就是要溝通清楚~

好啦，今天分享就的內(nèi)容到這里啦，希望能對大家有幫助~