2B產(chǎn)品設(shè)計套路二:表格頁設(shè)計

LCC
5 評論 7091 瀏覽 84 收藏 18 分鐘

上一篇《2B產(chǎn)品設(shè)計套路一:表單設(shè)計》總結(jié)了“增刪改查顯”中的“增”和“改”對應(yīng)的表單設(shè)計,這一篇繼續(xù)講講“查”和“顯”。

我們可以通過數(shù)據(jù)統(tǒng)計、表格、詳情頁配合篩選、搜索實現(xiàn)查和顯的操作,達到從不同維度向用戶輸出的目的。

從數(shù)據(jù)的概括程度看:數(shù)據(jù)統(tǒng)計>表格>詳情頁。數(shù)據(jù)統(tǒng)計(或者叫dashboard、態(tài)勢展示)對數(shù)據(jù)的抽象程度最高、最概括,一般是對數(shù)據(jù)整體情況的概覽;其次是表格展現(xiàn),可以逐條展示數(shù)據(jù),顯示重要的信息,但是一般受限于屏幕大小,只能展示10個左右字段;最詳細的是數(shù)據(jù)詳情頁,可以詳細的展現(xiàn)某一實例相關(guān)的所有信息。

dashboard

數(shù)據(jù)統(tǒng)計頁

數(shù)據(jù)表格頁

數(shù)據(jù)詳情頁

1. 表格&表格頁

表格是表格頁的主體,是展現(xiàn)數(shù)據(jù)的有效組織形式,可以展現(xiàn)大量的、比較詳細的數(shù)據(jù)。表格天然是結(jié)構(gòu)化的形式,所以在展示結(jié)構(gòu)化數(shù)據(jù)的時候,很自然的我們會想到用表格的形式。

表格頁包含了更豐富的元素,像樞紐站一樣,可以提供通往各個功能的入口,通過【新增】按鈕可以到達“增”功能的表單,通過【修改】/【編輯】按鈕可以額到達“改”功能的表單,通過【刪除】可以實現(xiàn)“刪”功能,其他按鈕也可以作為各式各樣的業(yè)務(wù)功能的入口。

所以在表格頁中,表格是展示的主體,配合一些按鈕就可以實現(xiàn)數(shù)據(jù)的增刪改查顯功能,從而實現(xiàn)數(shù)據(jù)的閉環(huán)。

2. 表格頁的組成

表格頁主要包括表格、搜索欄、操作欄以及分頁欄四個部分。

表格主要包括表頭和表體,表頭除了說明每列數(shù)據(jù)的內(nèi)容外,還可以包含篩選、排序功能。

表體按列可以分為多選列、數(shù)據(jù)列、操作列,如果表格數(shù)據(jù)需要批量操作,就得通過多選框復(fù)選數(shù)據(jù),所以需要一列專門展示選擇框;數(shù)據(jù)列則完全是根據(jù)業(yè)務(wù)展現(xiàn)需要的信息;操作列主要是顯示針對單行數(shù)據(jù)的操作按鈕,比如查看詳情、編輯信息等。

搜索欄的作用主要是方便用戶在大量的數(shù)據(jù)中精確地查找到自己想要的數(shù)據(jù),是表格好伴侶。

一般搜索對流程是用戶輸入查詢條件,然后觸發(fā)搜索,表格刷新,只顯示符合查詢條件的數(shù)據(jù)。搜索欄可以是簡單的關(guān)鍵詞輸入框(只能實現(xiàn)單字段搜索或者模糊搜索),也可以提供多字段聯(lián)合搜索功能(包括下拉框選擇字段+關(guān)鍵詞輸入框),也可以是高級搜索(針對搜索和篩選混合使用),但在這里我們暫不展開討論搜索功能。

操作欄一般是多個按鈕組成的,比如說常見的【新增】按鈕和各種批量操作按鈕。通過【新增】按鈕打開新增表單,實現(xiàn)向表格增加一條數(shù)據(jù)。批量操作一般是業(yè)務(wù)功能,根據(jù)需求我們也可以把【刪除】作為一種批量操作。

分頁是一次只展示少量的數(shù)據(jù)(十幾到幾十條),目的是防止數(shù)據(jù)量大的情況下瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出,但分頁也會造成篩選、排序、多選時候的一些坑,后邊會詳細總結(jié)。

下邊圍繞幾個主題總結(jié)下我在設(shè)計表格頁時候遇到的一些問題。

3. 兩個操作欄

細心的小讀者會發(fā)現(xiàn),一個表格頁其實包括了兩個操作區(qū):一個在表格外,一個在表格內(nèi),那么很自然的我們會遇到一個問題,一個功能該放在哪呢?

習(xí)慣上我們會認為一行數(shù)據(jù)是對某一個對象實例的描述,比如在學(xué)生信息表格中,一行數(shù)據(jù)是對某個學(xué)生sam的描述,包括他的姓名、年齡、性別、成績等等。所以表格內(nèi)的操作也是針對某個對象實例的。

一般我會把一次只能針對一個對象操作的功能放在表格內(nèi),比如【查看詳情】和【編輯】,因為查看詳情不太可能一次查看多個對象,編輯修改信息也是

那么反過來,不屬于任何一個對象實例的功能就需要放在表格外的操作欄,比如說【新增】。另外一種需要放在表格外的功能是批量操作,因為批量操作需要對多行數(shù)據(jù)進行同時操作,也不是屬于單個對象實例的。

一個反例

這個栗子中,就是把本來是只能單個數(shù)據(jù)操作的功能【修改】放在了表格外,首先會造成功能的操作步驟變多(如果放在表內(nèi)的操作列中該功能的步驟是1,放在表外操作步驟變?yōu)榱?),其次還要處理如果用戶多選數(shù)據(jù)后再點擊【修改】的邏輯。

刪除功能究竟該放在哪?

不知道大家有沒有想過這個問題,我剛開始當pm時候這個問題困擾了我好久。刪除可以作為行內(nèi)操作(我們暫時把這種叫做單個刪除),優(yōu)點是更便捷。也可以放在表外作為是批量操作(暫時叫做批量刪除),這樣更方便的同時刪除多個數(shù)據(jù),但如果只刪除一個數(shù)據(jù)時就會增加用戶的操作步驟?;蛘邇煞N方式都提供,雖然更靈活但是會讓頁面比較冗余。

單個刪除

批量刪除

單個刪除+批量刪除

其實怎么選擇還是要根據(jù)具體業(yè)務(wù)場景來決定,首先判斷用戶批量刪除是不是高頻功能,如果是,顯然只有單個刪除功能就不能滿足需求;如果刪除是低頻操作,那么完全可以只提供單個刪除功能。

我一般不會在頁面中同時提供單個刪除和批量刪除,畢竟相對業(yè)務(wù)功能來說,刪除本來就相對低頻,我們應(yīng)該把更多的空間留給用戶每天都要用到的功能。

4. 篩選和排序

我覺得篩選和排序?qū)Ρ砀駚碚f甚至比搜索更重要,因為用戶對數(shù)據(jù)的查找可能沒有達到搜索那么精確,篩選和排序可以幫助他們縮小范圍以找到他們需要的數(shù)據(jù)。(就像表單輸入時選擇要好于輸入,給用戶幾個選項要比讓他們自己思考好一些)

那么設(shè)計功能時就要確定哪些字段需要被篩選和排序。一個簡單粗暴的解決方案是給所有字段都加上篩選、排序,但這樣表頭看起來就會非常亂。

有幾種改進方案:

  • 一是只保留重要的那些字段的篩選排序功能,但這樣很考驗pm對業(yè)務(wù)的理解,如果一些用戶關(guān)心的字段沒有篩選和排序功能可能會被吐槽。
  • 二是在默認模式時候隱藏篩選和排序的按鈕,通過表格外的按鈕觸發(fā)顯示,這樣會犧牲一點用戶體驗,讓操作步驟+1。

  • 三是如果你的產(chǎn)品恰好設(shè)計了“高級搜索”功能,可以把篩選功能放在高級搜索里,表頭只留排序按鈕。

5. 分頁造成的影響

前邊我們講了分頁帶來的好處,頁面不用一次加載出全部數(shù)據(jù),加快了頁面的響應(yīng)速度,這在數(shù)據(jù)量大時是非常要必要的。但分頁也帶來了一些坑,因為瀏覽器前端拿到的數(shù)據(jù)只是當前頁的,而不是全量數(shù)據(jù),這就可能會對篩選、排序、多選功能產(chǎn)生影響。

有時篩選和排序是前端來實現(xiàn)的,這時只能對當前頁的數(shù)據(jù)進行篩選或排序。但我們或者用戶想要的效果往往是全局數(shù)據(jù)的篩選或排序,所以和RD溝通時候務(wù)必向他們說明你想要的效果。

類似的,多選時如果用戶在第1頁選中了一些數(shù)據(jù),然后翻到第2頁繼續(xù)選擇,我們要考慮第1頁選擇的數(shù)據(jù)是不是應(yīng)該被保留(多數(shù)情況下我覺得是應(yīng)該的),如果是,確保RD小哥哥明白這一點,否則結(jié)果很可能不是你想要的(別問我怎么知道的)。

6. 友好的表格

對齊

這里對齊主要指表格的每列數(shù)據(jù)的對齊,對齊方式有左對齊、右對齊和居中三種,數(shù)據(jù)類型可以分為文本、數(shù)字和標簽三種。不同的數(shù)據(jù)使用恰當?shù)膶R方式可以幫助用戶更方便、快速的理解數(shù)據(jù)。

一般的對齊處理方式:文本使用左對齊,數(shù)字右對齊,標簽、按鈕、序號等居中。因為我們的閱讀習(xí)慣是從左到右,文本左對齊可以利用用戶的視覺流提高閱讀效率,這和表單標簽的對齊原則是一樣的。數(shù)字右對齊是因為在小數(shù)點保存相同位數(shù)的情況下,用戶可以通過數(shù)字的長短來判斷大小,更加直觀、效率更高。

缺失數(shù)據(jù)顯示

當頁面上沒有顯示出來一個數(shù)據(jù)的時候,有兩種情況:一是數(shù)據(jù)庫中沒有存儲,二是由于各種錯誤數(shù)據(jù)無法加載。如果我們不加以區(qū)分,用戶是無法判斷是哪一種情況造成沒有數(shù)據(jù)的,所以友好的表格應(yīng)該將兩者區(qū)分開,我們通常會將數(shù)據(jù)庫中沒有數(shù)據(jù)的字段顯示為’-’

固定行列

在數(shù)據(jù)行、列較多的情況下,表格需要滾動才能看到被隱藏的數(shù)據(jù)。但滾動時有一些重要的信息會被隱藏掉,比如表頭、名稱列、操作列,這樣用戶就可能會發(fā)出我是誰,我在哪,我在看什么的疑問三連。

作為友好的表格,我們需要保證在不論在什么情況下,用戶都能輕易的定位到自己所在的位置,完整自己想做的操作,一個有效的方法就是把重要的信息固定下來,不要讓它們隨著表格滾動。

新增數(shù)據(jù)的處理

新增一條數(shù)據(jù)后,這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢?

這是個和表格默認排序有關(guān)的問題,表格數(shù)據(jù)應(yīng)該默認按添加的時間排序,還是應(yīng)該按某個字段的名稱排序?

如果我們默認按某個字段排序,比方說資產(chǎn)名稱,當增加一條新數(shù)據(jù)后它會被插入到表格中相應(yīng)的位置,比如增加的數(shù)據(jù)的資產(chǎn)名稱叫“飲水機”,它會被插入到首字母y的數(shù)據(jù)附近,而首字母y的數(shù)據(jù)很可能不在所有數(shù)據(jù)的靠前位置。

這時就會出現(xiàn)一個問題,用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù),或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了,這會讓他們覺得自己的操作失敗了。解決這個問題的一個方法就是按照數(shù)據(jù)添加時間默認排序,這樣新增的數(shù)據(jù)會出現(xiàn)在表格的第一條,用戶很容易就能發(fā)現(xiàn)它。

導(dǎo)入導(dǎo)出

導(dǎo)入導(dǎo)出也是友好表格的一種常見的輔助功能,核心是“批量”的思想。

導(dǎo)入主要是指從excel表格批量導(dǎo)入數(shù)據(jù)至軟件,我覺得導(dǎo)入功能很多情況下是很必要的:

一是因為2B業(yè)務(wù)中數(shù)據(jù)量真的很大,有時候用戶需要一下增加幾十幾百條數(shù)據(jù),一條一條錄入很快就會讓人想砸鍵盤,從excel導(dǎo)入數(shù)據(jù)是個可行的解決方案;

二是2B業(yè)務(wù)涉及到歷史數(shù)據(jù)的導(dǎo)入,如果用戶之前沒有用信息化軟件管理的話,那么他們的數(shù)據(jù)多半存在excel表格中,如果直接能把歷史數(shù)據(jù)導(dǎo)入新軟件,用戶會對產(chǎn)品有個不錯的印象。

導(dǎo)出數(shù)據(jù)主要是為了方便和其他軟件、系統(tǒng)的數(shù)據(jù)交互,以及滿足用戶報告、存檔等需求。導(dǎo)出數(shù)據(jù)可以是excel文件,也可以是根據(jù)需求定義的其他格式。我也遇到過根據(jù)數(shù)據(jù)生成word報告的需求,雖然不是通用需求,但是的確幫用戶解決了問題。

盡量使用已有樣式

我想說的最后一點:2B產(chǎn)品應(yīng)該著眼于業(yè)務(wù),對產(chǎn)品的表現(xiàn)層要求其實不高,為了提升開發(fā)效率,我們在設(shè)計產(chǎn)品時最好盡量采用團隊正在使用的樣式庫中已有的樣式(常見的elementUI、antDesign組件庫中的表格組件已經(jīng)很全面了,可以滿足80%的需求),這樣可以大大的縮短開發(fā)周期、提高開發(fā)效率。

 

本文由 @LCC 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 詳情頁和編輯頁采用布局一致的好處是什么?為什么詳情頁有些標簽左對齊有些頂對齊出于什么考慮???

    回復(fù)
  2. 列表前面什么需要加序號,什么時候不需要加序號啊·?

    來自江蘇 回復(fù)
  3. 這個系列的還有嗎?最近在做b端相關(guān)的業(yè)務(wù),正在找這樣的文章看呢

    來自湖南 回復(fù)
    1. 有的有的!爭取盡快更新!

      來自內(nèi)蒙古 回復(fù)
  4. 測試一下

    回復(fù)