數(shù)據(jù)產(chǎn)品PRD設(shè)計(jì)規(guī)范(一):表格設(shè)計(jì)
編輯導(dǎo)語:在B端產(chǎn)品中,數(shù)據(jù)主要通過表格的形式展現(xiàn),表格的易讀性和易操作性設(shè)計(jì),對(duì)提升B端用戶的操作效率來說十分重要。本文作者分析了表格信息結(jié)構(gòu),并且對(duì)表格PRD功能進(jìn)行了說明。
表格是B端產(chǎn)品尤其是數(shù)據(jù)產(chǎn)品中,最常用的信息展現(xiàn)形態(tài),比如商品列表、訂單列表、用戶列表,用戶行為分析系統(tǒng)的事件列表、指標(biāo)列表,DMP平臺(tái)的標(biāo)簽列表、場(chǎng)景列表等,可以說B端產(chǎn)品40%以上的頁面是由表格構(gòu)成。
看似簡單的一個(gè)表格功能,實(shí)際在PRD方案設(shè)計(jì),到最終功能上線后,經(jīng)常會(huì)遇到以下問題:
- 產(chǎn)品方案或交互說明功能遺留,開發(fā)上線后用戶反饋優(yōu)化建議,二次迭代開發(fā);
- PRD文檔里面產(chǎn)品交互說明不詳細(xì),測(cè)試驗(yàn)收環(huán)節(jié)要求開發(fā)加功能,開發(fā)吐槽產(chǎn)品需求不清晰,需求變更;
- 同一個(gè)產(chǎn)品經(jīng)理,不同時(shí)期不同項(xiàng)目表格風(fēng)格、功能不一致;
- 同一個(gè)部門,不同產(chǎn)品之間基礎(chǔ)能力和用戶體驗(yàn)意識(shí)水平不一,產(chǎn)品用戶體驗(yàn)不一致。
數(shù)據(jù)明細(xì)表格
操作列表
一、表格信息結(jié)構(gòu)
從表格承載的信息展示功能,以及用戶獲取信息的核心訴求出發(fā),對(duì)于表格的產(chǎn)品設(shè)計(jì)是可以形成標(biāo)準(zhǔn)化的PRD文檔規(guī)范的。不同場(chǎng)景下,用戶的需求如下:
- 結(jié)果篩選和過濾,針對(duì)不同的條件,快速過濾找到符合條件的數(shù)據(jù)結(jié)果;
- 新增記錄或批量操作(數(shù)據(jù)表格展示明細(xì)一般可以無此需求);
- 表格信息展示,包括核心字段展示,記錄詳情查看、信息修改等操作;
- 表格記錄統(tǒng)計(jì),及分頁功能。
結(jié)合需求,對(duì)于表格通用的布局方式如下:
表格布局
二、表格PRD功能說明
Demo模板示例
1. 功能需求及交互原則
- 篩選字段:將常用篩選過濾或搜索字段按照優(yōu)先級(jí)從高低排列,字段數(shù)量的多少取決于列表信息的篩選需求,既不能一股腦全部展示,也不能一味求少,導(dǎo)致篩選不便;
- 篩選字段交互方式:非固定內(nèi)容一般使用文本搜索框,可枚舉字段值的如狀態(tài)、類型等采用輸入+下拉搜索框,即既可以直接從下來列表中選擇(篩選項(xiàng)20個(gè)以內(nèi)),也可以輸入關(guān)鍵詞快速命中;
- 查詢按鈕:查詢按鈕主要是輔助功能,即輸入文本后點(diǎn)擊查詢后出發(fā)表格內(nèi)容更新。對(duì)于下拉篩選框,選項(xiàng)切換后直接出發(fā)查詢,不需要手動(dòng)點(diǎn)擊查詢按鈕,這種交互的優(yōu)點(diǎn)是用戶所見即所得,不需要手動(dòng)再點(diǎn)擊查詢按鈕,缺點(diǎn)是,每一次切換都要觸發(fā)查詢請(qǐng)求。在數(shù)據(jù)量不大的情況(幾萬條以內(nèi)),優(yōu)先選擇無需點(diǎn)擊查詢按鈕;
- 條件重置:適用于篩選字段較多時(shí)(5個(gè)以上),可以快速清空查詢條件;
- 條件展開:對(duì)于篩選條件過多超過2行,為了保持頁面的簡潔和突出重點(diǎn),可以把相對(duì)不常用的條件收起,默認(rèn)把最常用的條件直接鋪開;
- 新增及批量操作:針對(duì)需要變更的表格,通常會(huì)有新增記錄,或批量編輯的訴求,可以提供批量操作按鈕;
- 表格字段數(shù)量控制:由于屏幕大小限制,表格寬度需要適當(dāng)限制,最常采用的交互方式是把操作列固定,提供左右滾動(dòng)的功能,一般字段數(shù)量超過8個(gè),建議使用固定列的功能;
- 單個(gè)表格寬度限定:對(duì)于字段值內(nèi)容比較長的文本信息,為了保持表格的視覺效果,需要對(duì)最大長度做限定,比如最長不超過15個(gè)字符,超出后“…“顯示,鼠標(biāo)懸浮時(shí),tooltips展示全部內(nèi)容;
- 表格排序:對(duì)于一些包含指標(biāo)的表格,排序功能非常實(shí)用,但也是很多產(chǎn)品在設(shè)計(jì)或者開發(fā)變現(xiàn)時(shí)會(huì)忽略的功能;
- 記錄默認(rèn)排序規(guī)則:通常按最后更新時(shí)間降序排列,最后操作的,第一眼可以看到,保持信息的及時(shí)更新;
- 狀態(tài)字段:狀態(tài)字段一般用來標(biāo)識(shí)記錄的狀態(tài)變更,不同狀態(tài)以具有一定含義的不同色系的icon或文案加以區(qū)分,可以更方便對(duì)比區(qū)分;
- 操作列:單行記錄的操作按鈕,包括查看詳情、編輯、刪除等更多,通常為了保持表格的寬度,操作列的操作類型不超過4個(gè),前三個(gè)優(yōu)先展示最常用的操作,其他的在更多按鈕中聚合,點(diǎn)擊后展開更多操作;
- 批量選擇,對(duì)于需要批量操作的場(chǎng)景,表格第一列一般為復(fù)選框,可以批量全選或取消;
- 權(quán)限控制:行記錄權(quán)限,對(duì)于不同人只能查看自己的行記錄,要做好數(shù)據(jù)權(quán)限過濾,而對(duì)于資產(chǎn)目錄、信息共享類的內(nèi)容,可以展示記錄的同時(shí),控制操作權(quán)限,即只有編輯權(quán)限的人才可以對(duì)記錄進(jìn)行編輯、刪除等,查看用戶對(duì)應(yīng)按鈕禁用置灰;
- 導(dǎo)出:對(duì)于有下載后二次處理或分析的,可以提供導(dǎo)出功能;
- 分頁器:顯示記錄條數(shù)及翻頁功能,有些場(chǎng)景也可以實(shí)用滾動(dòng)下拉加載分頁。
2. 字段說明&自查清單
三、小結(jié)
表格雖然是非常簡單通用的功能,產(chǎn)品PRD輸出環(huán)節(jié),照著以上功能需求和交互清單,用戶的需求和體驗(yàn)問題基本都可以覆蓋了,這樣可以在后期開發(fā)和測(cè)試環(huán)節(jié),避免功能遺漏,節(jié)省溝通和扯皮的成本,一勞永逸。
作者:數(shù)據(jù)干飯人,微信號(hào)公眾號(hào):zhuangxiu1314,主要從事數(shù)據(jù)中臺(tái)產(chǎn)品體系建設(shè),包括:開發(fā)套件、數(shù)據(jù)資產(chǎn)、BI應(yīng)用、精準(zhǔn)營銷平臺(tái)、機(jī)器學(xué)習(xí)平臺(tái)等。
本文由@數(shù)據(jù)干飯人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
erp工作內(nèi)容
謝謝,以后會(huì)用到,已收藏
謝謝,微信公眾號(hào)會(huì)分享更多內(nèi)容,人人上有些內(nèi)容經(jīng)常審核不通過
已關(guān)注啦
歡迎關(guān)注微信公眾號(hào):數(shù)據(jù)干飯人,一起討論交流大數(shù)據(jù)產(chǎn)品
有理有據(jù)。