B端交互組件之表格篇

12 評論 11482 瀏覽 87 收藏 19 分鐘

編輯導(dǎo)語:在B端產(chǎn)品中,表格的利用率是很高的,同時,由于數(shù)據(jù)是及其重要性的,所以表格組件的設(shè)計尤為重要。接下來,本文作者將表格拆分成多個細(xì)節(jié),詳細(xì)地講解各部分應(yīng)該如何設(shè)計,以及復(fù)雜業(yè)務(wù)場景下如何利用表格,讓我們來一起學(xué)習(xí)吧。

B端項目或產(chǎn)品中,表格應(yīng)該是被利用的最多的了,很多主體界面基本都會用到表格組件。我們常說一個基本的功能是包含增刪改查的,為了完整的表達(dá)這一功能,常見的就是用表格組件。

B端產(chǎn)品中數(shù)據(jù)是關(guān)鍵,而表格主要是用于展示和管理數(shù)據(jù),如何用好表格,對產(chǎn)品整體的用戶體驗起到重要作用。

目前有很多數(shù)據(jù)也可以用可視化圖表來展示,但僅僅只是用于最終的數(shù)據(jù)輸出,數(shù)據(jù)管理還是傾向于用表格組件。

下面我將表格拆分成多個細(xì)節(jié),并詳細(xì)講解各部分如何來設(shè)計,另外還會談?wù)剰?fù)雜業(yè)務(wù)場景下如何利用表格。

一、查詢

常見的就是查詢區(qū)域在頭部,下面緊接著一個表格組件。

當(dāng)數(shù)據(jù)量小的時候,打開該頁面時,應(yīng)該是可以看到全量數(shù)據(jù)的,并通過分頁器來部分加載數(shù)據(jù);如果數(shù)據(jù)量很大,例如億級單位的數(shù)據(jù)量,系統(tǒng)估計會直接崩潰,所以需要對查詢結(jié)果做條件限制。

1.?沒有必輸條件

這種模式就是常見的,打開頁面可以看到所有數(shù)據(jù),通過查詢條件進(jìn)一步縮小搜索范圍。

值得注意的是查詢條件都是非必填項,當(dāng)你輸入一個或多個條件查出結(jié)果后,點擊重置按鈕后再點查詢,即可恢復(fù)為全量查詢結(jié)果。

如下圖所示:

2.?有必輸條件

本次說的重點是這種有必填查詢條件的情況,打開頁面時看不到數(shù)據(jù),查詢條件含有必填項,一個或多個;不輸入查詢條件,直接點擊查詢按鈕會提示必填字段必須輸入,此方式主要用于縮小查詢范圍。

必填查詢條件輸入后,其他非必填查詢條件也可以搭配輸入,進(jìn)一步縮小查詢范圍。

如下圖所示:

3.?反顯查詢條件

有些系統(tǒng),根據(jù)權(quán)限控制要求,一些查詢條件需要反顯,并根據(jù)業(yè)務(wù)要求控制是否可以修改,不可修改的可以置灰。

反顯固定值,如下圖所示:

反顯值可修改,如下圖所示:

很多時候是系統(tǒng)在用戶輸入沒權(quán)限的條件時再做校驗,好的用戶體驗就是容錯,可以避免用戶去犯錯。

這里涉及到權(quán)限的條件可以固定反顯某個值,或者反顯可以修改的一些值,用戶不管怎么選,都有權(quán)限來查,這樣可以避免用戶被提示無權(quán)限查詢時的焦慮感。

二、按鈕

B端產(chǎn)品使用按鈕的地方很多,本文主要談?wù)劚砀竦念^部按鈕和右側(cè)按鈕。

1.?頭部按鈕

頭部按鈕主要是用于不需要選擇表格數(shù)據(jù)的操作按鈕,最常用的就是新建功能。

另外就是支持批量操作的功能按鈕,例如導(dǎo)出和刪除,勾選一條或多條導(dǎo)出;不勾選時導(dǎo)出所有,勾選多條數(shù)據(jù),批量刪除。批量操作時,表格最左側(cè)需要搭配復(fù)選框元件。

如下圖所示:

2.?右側(cè)按鈕

右側(cè)按鈕主要是針對單條數(shù)據(jù)操作的按鈕,例如查看、修改、刪除等。

如果放在頭部,需要勾選一條數(shù)據(jù)來操作,勾選多條或者不勾選數(shù)據(jù)點擊按鈕時,系統(tǒng)都需要校驗;其實也提高了用戶的認(rèn)知成本,所以我覺得這類操作按鈕可以全部放到右側(cè)來。

對于不同數(shù)據(jù),功能按鈕根據(jù)權(quán)限不同來設(shè)計,可以免去校驗的認(rèn)知成本,用戶可以直接上手操作,也可避免犯錯時的焦慮感。

例如有些數(shù)據(jù)不能修改和刪除時,就可以直接在右側(cè)不顯示,避免點擊后再去提示用戶。

如下圖所示:

另外這里有個關(guān)鍵點,當(dāng)表格中的字段很多或者數(shù)據(jù)內(nèi)容很多時,會出現(xiàn)橫向滾動條,用戶很有可能看不到右側(cè)的操作列,這種體驗是很糟糕的。

這里需要將操作列固定在最右側(cè),另外左側(cè)的復(fù)選框也可以配合固定在最左側(cè),因為當(dāng)滾動條往右拖動時,也會看不到左側(cè)復(fù)選框區(qū)域,不便于用戶去操作導(dǎo)出或者其他功能操作。

三、表頭

正常的表頭都是單層,有時候也會有多層的表頭,另外還可以對表頭進(jìn)行配置,有的是直接在表頭處配置,有的是去系統(tǒng)管理單獨(dú)配置。

1.?普通表頭

這種情況是最常見的,表頭字段都是單獨(dú)排列,有的會把排序直接放在表頭操作,例如下拉箭頭,可以選擇降序或者升序等。

如下圖所示:

如果需要對字段進(jìn)行組合排序,也可以將排序功能單獨(dú)做成一個功能按鈕來操作。

2.?復(fù)雜表頭

復(fù)雜表頭主要是指有多層結(jié)構(gòu)的表頭,有時候表頭是普通的,但是數(shù)據(jù)內(nèi)容是多層的,就看具體業(yè)務(wù)情況了,我們的設(shè)計主要是為了提高業(yè)務(wù)操作效率。

如下圖所示:

3.?表頭篩選

具體展示哪些表頭,也不是一成不變的,可能有些系統(tǒng)是固定的值,這也是在前期需求分析時,跟業(yè)務(wù)確定下來的;就是該業(yè)務(wù)場景下,這些字段不存在變化,當(dāng)然就不需要對表頭內(nèi)容修改了。

但是也才存在一些需要對表頭內(nèi)容修改的場景,比如默認(rèn)有一套表頭字段,但是根據(jù)不同用戶,可以選擇不同的表頭字段配置。這種是由用戶選擇不同模式,還有一種就是由用戶自定義來配置。

根據(jù)用戶不同配置不同的表頭字段,主要是考慮到不同崗位的用戶,查看數(shù)據(jù)的視角不一樣,對應(yīng)的關(guān)心的字段也會不一樣。如果前期需求分析階段,可以很清晰的確定這些,可以設(shè)計成讓用戶選擇崗位來展示不同的表頭字段。

如下圖所示:

如果不是很確定,也可以全部讓用戶自定義,或者兩者結(jié)合起來用。比如:可以根據(jù)崗位先選擇一套表頭字段,另外用戶也可以自定義再調(diào)整。

如下圖所示:

另外還有種情況,就是把表頭字段的設(shè)置放到系統(tǒng)管理中來配置,也可以理解為不讓普通用戶來配置,只讓系統(tǒng)管理員來控制表頭字段。

如下圖所示:

可以批量選擇表頭字段,也可以批量刪除掉。

四、行

行主要是針對數(shù)據(jù)而言,比如行數(shù)據(jù)展示、選擇行、鼠標(biāo)滑過行等,同時需要配合左側(cè)選擇框來使用。

1.?行數(shù)據(jù)展示

當(dāng)數(shù)據(jù)很多時,密密麻麻堆積在表格內(nèi),用戶很容易看錯位,把A行的數(shù)據(jù)看成B行的。為了有效解決這種問題,最常用的就是用間隔行背景色,就是間隔行設(shè)置一個不同的背景色。

如下圖所示:

2.?滑過行

滑過行主要是鼠標(biāo)滑過某行數(shù)據(jù)時,給一個滑過顏色,也是輔助方便用戶查看數(shù)據(jù)的一種手段。

如下圖所示:

3.?選擇行

選擇行主要是針對選中某行時的背景色變化,這里可以配合左側(cè)選擇框來使用。

如果只支持單行選擇,左側(cè)可以用單選框,選中某行時,除了背景色變化外,左側(cè)單選框也是選中狀態(tài);選中其他行時,選中狀態(tài)即可切換過來。

如下圖所示:

如果支持多行選擇,左側(cè)可以用復(fù)選框,選中某行時,除了背景色變化外,左側(cè)復(fù)選框也是選中狀態(tài),繼續(xù)選擇其他行后,可以增加這種選中狀態(tài)。

如下圖所示:

五、數(shù)據(jù)對齊

數(shù)據(jù)對齊也是一種方便用戶查看數(shù)據(jù)的手段,包含三種對齊方式:左對齊、居中對齊、右對齊,另外表頭一般是采用居中對齊方式。

下面我將詳細(xì)講解下三種對齊方式主要用于哪種場景下:

1.?左對齊

左對齊一般針對字符串類型的數(shù)據(jù),例如賬號、文件名等。這種數(shù)據(jù)長度不固定的,為了有一個良好的展示效果,一般是左對齊,并且給一個左側(cè)間距。

如下圖所示:

2.?居中對齊

居中對齊一般針對固定長度類型的數(shù)據(jù),比較常見的就是含下拉值的字段,并且下拉值不太多的情況,例如性別、狀態(tài)等。

如下圖所示:

3.?右對齊

右對齊一般針對金額類數(shù)值型數(shù)據(jù),有的可能還固定含有兩位小數(shù)點,可以根據(jù)具體業(yè)務(wù)情況來設(shè)計。

如下圖所示:

六、分頁器

分頁器一般在表格底部,只要是數(shù)據(jù)量不是太少的情況,一般都會有分頁器的,主要是對數(shù)據(jù)進(jìn)行分段刷新。

分頁器樣式有很多種,在此就不詳細(xì)舉例了。

如下圖所示:

七、復(fù)雜表格

以上說的都是正常單層表格的各種細(xì)節(jié)問題,在一些復(fù)雜的業(yè)務(wù)場景下,經(jīng)常會出現(xiàn)多層表格,可以設(shè)計成多層結(jié)構(gòu)或聯(lián)動結(jié)構(gòu)。

1.?多層表格

多層表格常出現(xiàn)于有父子級關(guān)系的場景,并且父子級都包含新建、修改、刪除等功能。

另外子級表格需要關(guān)聯(lián)父級表格,如果父級表格目前數(shù)據(jù)為空,子級表格是不能新建的;如果父子級的字段都是獨(dú)立的,這里可以在子級中加一個用于關(guān)聯(lián)父級的字段,這樣就將父子級串聯(lián)起來了。

兩層的比較好設(shè)計,就是兩個表格上下擺或者左右擺即可。

如下圖所示:

多層可能不止兩層,可能是三層或者四層,還有的系統(tǒng)為了擴(kuò)展性,可以無限地增加層級。這樣業(yè)務(wù)結(jié)構(gòu)就看著很復(fù)雜了,作為設(shè)計師而言,我們就是要將復(fù)雜的業(yè)務(wù)給簡單化,提高業(yè)務(wù)人員操作效率。

多層的正好之前有過經(jīng)歷,我將父級和子級拆分開了,父級和中間子級放一起,最終子級單獨(dú)放,具體怎么拆,要看業(yè)務(wù)情況了。

我之前設(shè)計的是命題系統(tǒng),從產(chǎn)品那里獲取的用戶操作習(xí)慣,一般是先把大題命好,就是總分多少、每個題型多少分、題型層級如何等。

感覺就是先搭好框架,然后再把小題命好。根據(jù)這種業(yè)務(wù)規(guī)則,我就將父級與中間子級放一起了,作為大題,最終子級作為小題。

比如語文試卷中,首先分為基礎(chǔ)語言部分、閱讀理解部分、寫作部分,然后基礎(chǔ)語言部分又分好幾種題型,每個題型下面又有多個小題,這樣看差不多就是三層結(jié)構(gòu)了。

實際情況可能比這復(fù)雜,子級題型可能又分為A部分和B部分,所以命題系統(tǒng)的層級關(guān)系是要支持無限拓展的。

如下圖所示:

小結(jié):B端產(chǎn)品設(shè)計有時候并沒有所謂的標(biāo)準(zhǔn)答案,到底如何設(shè)計,確實要根據(jù)實際的業(yè)務(wù)場景來定;我們的使命本來就是賦能業(yè)務(wù),提高業(yè)務(wù)的操作效率。

如果說業(yè)務(wù)線下的操作習(xí)慣,你不去遵循,違背了業(yè)務(wù)的心理模型,這樣設(shè)計出來的產(chǎn)品才真叫不好用,并且也加大了業(yè)務(wù)培訓(xùn)成本。

2.?聯(lián)動表格

多層表格如果不設(shè)置關(guān)聯(lián)字段,也可以采用聯(lián)動的方式。

比如選中父級表格中某行數(shù)據(jù),子級表格數(shù)據(jù)會跟著變動,這里子級表格的數(shù)據(jù)是根據(jù)父級表格選中的行來變化的,每次只展示某個父級行的子級數(shù)據(jù)。

如下圖所示:

這里要區(qū)別下多層表格,多層表格的子級表格是展示的全量子級數(shù)據(jù),所以當(dāng)數(shù)據(jù)量很大時,可以采用聯(lián)動表格方式,具體還是看實際業(yè)務(wù)情況了。

回到前面說的命題系統(tǒng),小題部分我就是設(shè)計成聯(lián)動的模式,選中大題或者子級可以看到對應(yīng)的小題。因為大題層級可以無限拓展,設(shè)計成多層表格,到小題這里看著就會很亂了,所以我采用聯(lián)動表格,小題每次只展示對應(yīng)大題的。

如下圖所示:

八、總結(jié)

以上便是我將表格組件拆分后的詳細(xì)情況,組件是死的,人是活的。遇到具體的業(yè)務(wù)場景,還是需要設(shè)計師活學(xué)活用,多考慮下業(yè)務(wù)的心理模型,不要讓表現(xiàn)模型趨近于實現(xiàn)模型,或者說開發(fā)模型。

舉個例子:很多時候開發(fā)會覺得某個設(shè)計太麻煩了,實現(xiàn)起來耗時耗力。因為開發(fā)只是站在實現(xiàn)模型角度考慮問題,作為交互設(shè)計師,我們就要學(xué)會平衡模型的兩邊,盡量讓表現(xiàn)模型趨近于業(yè)務(wù)心理模型,這樣才能打造出讓業(yè)務(wù)尖叫的產(chǎn)品。

 

作者:D.cheerful,微信號:dcf8859,8年B端交互設(shè)計經(jīng)驗。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我想請教個問題,甲方總是提出在分頁表格的表尾加上合計,針對某幾列數(shù)字型進(jìn)行合計,并且是兩個合計,一個人當(dāng)前頁合計,一個是所有頁合計,我一直都很反感這個需求,我該如何解釋并拒絕

    來自中國 回復(fù)
    1. 在表格上方加個統(tǒng)計

      來自中國 回復(fù)
  2. 你好,可以請教下這個反顯查詢條件是什么嗎?查了下,網(wǎng)上說是查詢條件重置,但是你那上面有重置按鈕,不太懂,感謝??

    來自浙江 回復(fù)
    1. 根據(jù)用戶權(quán)限自動判斷的,比如你是湖北分行用戶,機(jī)構(gòu)查詢條件就只能是湖北分行;如果是總行用戶,機(jī)構(gòu)查詢條件則是所有的一級分行,例如湖北分行、浙江分行等

      來自湖北 回復(fù)
    2. 嗯嗯,好的,感謝

      來自浙江 回復(fù)
  3. 個人感覺表格篇寫的太泛了沒有解釋性:
    首先是查詢統(tǒng)計對于條件的限制沒有體現(xiàn)。
    其次查詢后的結(jié)果如何展示如何查看,以及常規(guī)查統(tǒng)如何呈現(xiàn)界面規(guī)則,大量的篇幅去寫了比較細(xì)的如hover樣式,選中樣式、聯(lián)動表格(某種意義我不認(rèn)為這是一種好的解決方案)。
    表格篇我覺得作者還可以繼續(xù)深挖一下,目前寫的內(nèi)容只是暴露了表格篇作者遇到的情況還不夠多。希望再開新坑,再次書寫!

    來自浙江 回復(fù)
    1. 組件的幾篇文章其實都寫得很泛,主要是對之前項目經(jīng)歷的一種回顧以及個人的一些看法,有了新項目的感悟,后期會修正補(bǔ)充的

      來自湖北 回復(fù)
    2. 恩恩,期待更新!

      來自浙江 回復(fù)
  4. 這個真不錯,我一個專注于b端產(chǎn)品的公眾號想轉(zhuǎn)載這幾篇文章,可以么?

    回復(fù)
    1. 可以轉(zhuǎn)載

      回復(fù)
  5. 再加幾個 例如自定義表格單元右鍵事件,表格監(jiān)聽鍵盤事件,提供表格快速編輯能力。

    回復(fù)
    1. 建議很好,只是我以前的項目沒有經(jīng)歷過這些,學(xué)習(xí)了

      回復(fù)