數(shù)據(jù)產(chǎn)品PRD設(shè)計規(guī)范(一):表格設(shè)計

6 評論 13697 瀏覽 103 收藏 8 分鐘

編輯導(dǎo)語:在B端產(chǎn)品中,數(shù)據(jù)主要通過表格的形式展現(xiàn),表格的易讀性和易操作性設(shè)計,對提升B端用戶的操作效率來說十分重要。本文作者分析了表格信息結(jié)構(gòu),并且對表格PRD功能進(jìn)行了說明。

表格是B端產(chǎn)品尤其是數(shù)據(jù)產(chǎn)品中,最常用的信息展現(xiàn)形態(tài),比如商品列表、訂單列表、用戶列表,用戶行為分析系統(tǒng)的事件列表、指標(biāo)列表,DMP平臺的標(biāo)簽列表、場景列表等,可以說B端產(chǎn)品40%以上的頁面是由表格構(gòu)成。

看似簡單的一個表格功能,實際在PRD方案設(shè)計,到最終功能上線后,經(jīng)常會遇到以下問題:

  • 產(chǎn)品方案或交互說明功能遺留,開發(fā)上線后用戶反饋優(yōu)化建議,二次迭代開發(fā);
  • PRD文檔里面產(chǎn)品交互說明不詳細(xì),測試驗收環(huán)節(jié)要求開發(fā)加功能,開發(fā)吐槽產(chǎn)品需求不清晰,需求變更;
  • 同一個產(chǎn)品經(jīng)理,不同時期不同項目表格風(fēng)格、功能不一致;
  • 同一個部門,不同產(chǎn)品之間基礎(chǔ)能力和用戶體驗意識水平不一,產(chǎn)品用戶體驗不一致。

數(shù)據(jù)明細(xì)表格

操作列表

一、表格信息結(jié)構(gòu)

從表格承載的信息展示功能,以及用戶獲取信息的核心訴求出發(fā),對于表格的產(chǎn)品設(shè)計是可以形成標(biāo)準(zhǔn)化的PRD文檔規(guī)范的。不同場景下,用戶的需求如下:

  • 結(jié)果篩選和過濾,針對不同的條件,快速過濾找到符合條件的數(shù)據(jù)結(jié)果;
  • 新增記錄或批量操作(數(shù)據(jù)表格展示明細(xì)一般可以無此需求);
  • 表格信息展示,包括核心字段展示,記錄詳情查看、信息修改等操作;
  • 表格記錄統(tǒng)計,及分頁功能。

結(jié)合需求,對于表格通用的布局方式如下:

表格布局

二、表格PRD功能說明

Demo模板示例

1. 功能需求及交互原則

  • 篩選字段:將常用篩選過濾或搜索字段按照優(yōu)先級從高低排列,字段數(shù)量的多少取決于列表信息的篩選需求,既不能一股腦全部展示,也不能一味求少,導(dǎo)致篩選不便;
  • 篩選字段交互方式:非固定內(nèi)容一般使用文本搜索框,可枚舉字段值的如狀態(tài)、類型等采用輸入+下拉搜索框,即既可以直接從下來列表中選擇(篩選項20個以內(nèi)),也可以輸入關(guān)鍵詞快速命中;
  • 查詢按鈕:查詢按鈕主要是輔助功能,即輸入文本后點擊查詢后出發(fā)表格內(nèi)容更新。對于下拉篩選框,選項切換后直接出發(fā)查詢,不需要手動點擊查詢按鈕,這種交互的優(yōu)點是用戶所見即所得,不需要手動再點擊查詢按鈕,缺點是,每一次切換都要觸發(fā)查詢請求。在數(shù)據(jù)量不大的情況(幾萬條以內(nèi)),優(yōu)先選擇無需點擊查詢按鈕;
  • 條件重置:適用于篩選字段較多時(5個以上),可以快速清空查詢條件;
  • 條件展開:對于篩選條件過多超過2行,為了保持頁面的簡潔和突出重點,可以把相對不常用的條件收起,默認(rèn)把最常用的條件直接鋪開;
  • 新增及批量操作:針對需要變更的表格,通常會有新增記錄,或批量編輯的訴求,可以提供批量操作按鈕;
  • 表格字段數(shù)量控制:由于屏幕大小限制,表格寬度需要適當(dāng)限制,最常采用的交互方式是把操作列固定,提供左右滾動的功能,一般字段數(shù)量超過8個,建議使用固定列的功能;
  • 單個表格寬度限定:對于字段值內(nèi)容比較長的文本信息,為了保持表格的視覺效果,需要對最大長度做限定,比如最長不超過15個字符,超出后“…“顯示,鼠標(biāo)懸浮時,tooltips展示全部內(nèi)容;
  • 表格排序:對于一些包含指標(biāo)的表格,排序功能非常實用,但也是很多產(chǎn)品在設(shè)計或者開發(fā)變現(xiàn)時會忽略的功能;
  • 記錄默認(rèn)排序規(guī)則:通常按最后更新時間降序排列,最后操作的,第一眼可以看到,保持信息的及時更新;
  • 狀態(tài)字段:狀態(tài)字段一般用來標(biāo)識記錄的狀態(tài)變更,不同狀態(tài)以具有一定含義的不同色系的icon或文案加以區(qū)分,可以更方便對比區(qū)分;
  • 操作列:單行記錄的操作按鈕,包括查看詳情、編輯、刪除等更多,通常為了保持表格的寬度,操作列的操作類型不超過4個,前三個優(yōu)先展示最常用的操作,其他的在更多按鈕中聚合,點擊后展開更多操作;
  • 批量選擇,對于需要批量操作的場景,表格第一列一般為復(fù)選框,可以批量全選或取消;
  • 權(quán)限控制:行記錄權(quán)限,對于不同人只能查看自己的行記錄,要做好數(shù)據(jù)權(quán)限過濾,而對于資產(chǎn)目錄、信息共享類的內(nèi)容,可以展示記錄的同時,控制操作權(quán)限,即只有編輯權(quán)限的人才可以對記錄進(jìn)行編輯、刪除等,查看用戶對應(yīng)按鈕禁用置灰;
  • 導(dǎo)出:對于有下載后二次處理或分析的,可以提供導(dǎo)出功能;
  • 分頁器:顯示記錄條數(shù)及翻頁功能,有些場景也可以實用滾動下拉加載分頁。

2. 字段說明&自查清單

三、小結(jié)

表格雖然是非常簡單通用的功能,產(chǎn)品PRD輸出環(huán)節(jié),照著以上功能需求和交互清單,用戶的需求和體驗問題基本都可以覆蓋了,這樣可以在后期開發(fā)和測試環(huán)節(jié),避免功能遺漏,節(jié)省溝通和扯皮的成本,一勞永逸。

 

作者:數(shù)據(jù)干飯人,微信號公眾號:zhuangxiu1314,主要從事數(shù)據(jù)中臺產(chǎn)品體系建設(shè),包括:開發(fā)套件、數(shù)據(jù)資產(chǎn)、BI應(yīng)用、精準(zhǔn)營銷平臺、機(jī)器學(xué)習(xí)平臺等。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. erp工作內(nèi)容

    來自廣東 回復(fù)
  2. 謝謝,以后會用到,已收藏

    來自湖北 回復(fù)
    1. 謝謝,微信公眾號會分享更多內(nèi)容,人人上有些內(nèi)容經(jīng)常審核不通過

      來自江蘇 回復(fù)
    2. 已關(guān)注啦

      來自湖北 回復(fù)
  3. 歡迎關(guān)注微信公眾號:數(shù)據(jù)干飯人,一起討論交流大數(shù)據(jù)產(chǎn)品

    來自江蘇 回復(fù)
  4. 有理有據(jù)。

    來自北京 回復(fù)