小廠B端啥都干-表格設(shè)計入門指南(上)
編輯導(dǎo)語:對于B端產(chǎn)品經(jīng)理來說,表格一定是日常工作接觸最多的組件之一了,本篇文章作者向我們介紹了表格設(shè)計的入門指南,詳細地講述了表格設(shè)計的基礎(chǔ)部分內(nèi)容,一起來學(xué)習(xí)一下吧。
眾所周知,表格是一種可以清晰、全面、高效地將數(shù)據(jù)展示出來的組件,作為B端產(chǎn)品,表格一定是產(chǎn)品設(shè)計工作中接觸最多的組件,今天我就以一個小場景來說說B端表格的應(yīng)該如何入門。
關(guān)于本系列文章,有幾點需要提前告訴你:
- 無特別說明的業(yè)務(wù)案例,都是虛構(gòu)案例,邏輯合理,但可能過于簡潔,不符合業(yè)務(wù)的復(fù)雜性;
- 使用的解決方案更像是一個臨時方案;
- 簡單的業(yè)務(wù)、臨時的方案是為了將你快速地帶入到場景中來,無需深究;
我是個野路子出身的產(chǎn)品經(jīng)理,做過Java研發(fā),后來轉(zhuǎn)做過2G、2B的產(chǎn)品經(jīng)理,我的學(xué)習(xí)歷程是先看別人怎么做,想想為什么,然后嘗試自己做一下,最后再想辦法去學(xué)習(xí)怎么做,慢慢去提升。所以,我的文章通常會分為三個部分,本次B端表格設(shè)計入門指南將分為如下幾個部分:
- 上篇:表格常見的樣式、組件配合(看看別人怎么做的,為什么這么做,然后自己試一下)
- 中篇:表格的概念和設(shè)計原理(想辦法去學(xué)習(xí))
- 下篇:只能幫你到入門了(慢慢去提升)
一、基礎(chǔ)表格
假設(shè)有個系統(tǒng),現(xiàn)在需要將人員信息展示出來,這時也許就是一個簡單的表格。
隨著信息的增加,業(yè)務(wù)的推進,表格可能變成下面這種情況。
這時候表格就會變得很長,在視覺體驗上不會很好,所以此時就引入了固定列的概念。
二、固定列+固定行
這樣可以保證在表格長度很長的情況下,常用信息、重要信息、操作按鈕能始終出現(xiàn)在用戶的最佳可視范圍內(nèi)。
同理,如果表格高度非常高的的情況下,我們也可以使用固定行的設(shè)計,來將表頭信息始終展現(xiàn)出來。
若展示出來的數(shù)據(jù)越來越多的話,或者操作按鈕越來越多了,此時固定列將無法滿足展示的需求,這時可以改成展開行、按鈕組的形式來展示。
三、展開行+按鈕組
將展開行與按鈕組的功能放在一起介紹,是因為他們有一個共同的特性,優(yōu)先級分層,展開行是將信息分為了重要主要信息和次要信息,而按鈕組則是將按鈕分成了常用按鈕和非常用按鈕,也可以設(shè)計成預(yù)覽查看類和操作類按鈕等等。
四、分頁+搜索+篩選+排序
當(dāng)數(shù)據(jù)的逐漸增多,在一屏中展示大量的數(shù)據(jù)會讓用戶感到疲憊和無力,這時就可以引入分頁,來減少用戶的視覺疲勞,同時再使用精準(zhǔn)搜索+篩選這兩種組件,來幫助用戶更快、更舒適的查看和查找表格數(shù)據(jù)。
為了減少用戶的記憶成本,我們也可以使用模糊搜索;同時,基于用戶的習(xí)慣,或者說是視覺能力,我們也可以讓用戶來決定在每頁展示更多(也可能是更少)的數(shù)據(jù)量;最后,加入一個簡單的排序功能,一定能幫助用戶更快的去找到那些關(guān)鍵人物,如年齡最小的那個人、工號最靠前的那個人。
五、樹表格+斑馬線
隨著產(chǎn)品的使用,用戶可能不在要求數(shù)據(jù)內(nèi)容的展示程度(數(shù)據(jù)維度),而更希望能在數(shù)據(jù)結(jié)構(gòu)上、視覺體驗上有一個更好的呈現(xiàn)方式,對于本次的人員信息,我們以部門為區(qū)分依據(jù),對人員進行樹結(jié)構(gòu)調(diào)整。這里為了增加每行數(shù)據(jù)的辨識度,減少用戶的閱讀成本,還是用了一個隔行變色的設(shè)計。
六、合并行+合并列
對于樹形表格,其實并不是所有用戶都能很好的接受他,雖然他很直觀,但在B端用戶中,他們可能跟習(xí)慣類似Excel中的一些展示形式。
七、批量操作(刪除、修改、導(dǎo)入/導(dǎo)出)
當(dāng)需要操作的數(shù)據(jù)很多時,比如需要現(xiàn)在需要新增100個員工,用戶可能需要現(xiàn)在線下先用Excel將新員工的信息收集上來,然后再一個個錄入到信息中,又比如現(xiàn)在某個部門的人員集體辭職了,或者這個部門的人員全部調(diào)動到另一個部門了等等,這些同質(zhì)化的反復(fù)操作,我們都應(yīng)該將他做成批量操作。
八、小結(jié)
表格設(shè)計中可以用到的思路當(dāng)然不止這些,比如表頭可以使用合并列來對數(shù)據(jù)進行一個分類,可以實現(xiàn)鼠標(biāo)指向的那一行高亮,可以使用氣泡來增加隱藏字段的顯示,可以使用標(biāo)注信息來增加表頭的內(nèi)容等等,這些我會在下一篇中給大家講到,但我認為,最基礎(chǔ)的部分就是第一篇中介紹的這些內(nèi)容,這些功能熟悉后,將決定你設(shè)計表的一個能力下限達到一個及格水平,及格水平意味著你設(shè)計出來的表格可能不美觀、不好用,但一定是能用的,能滿足用戶需求的。
最后需要重提一下,第一篇中的業(yè)務(wù)場景和解決方案略微偏離實際,而且還有些理想主義在里面,但這并不影響,因為你需要了解的是,表格設(shè)計常用的手段有哪些,有固定行列位置、展開行、分頁、搜索/篩選等等,而不是糾結(jié)于我當(dāng)前的解決方式是否合理。
本文由 @何海不擇細流 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!