編輯導(dǎo)語：產(chǎn)品經(jīng)理的工作內(nèi)容往往會(huì)涉及到web端表格設(shè)計(jì)，那么，當(dāng)產(chǎn)品經(jīng)理撰寫web端表格設(shè)計(jì)需求文檔說明時(shí)，有哪些需要注意的內(nèi)容呢？本文作者從表格功能的PRD為切入點(diǎn)，為我們整理了一部分產(chǎn)品經(jīng)理需要考慮的信息，希望能夠?qū)Ω魑划a(chǎn)品經(jīng)理日后的工作有所幫助。

關(guān)于web表格設(shè)計(jì)的指導(dǎo)很多，書籍也有，例如：《web表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù)》、《移動(dòng)UI設(shè)計(jì)模式》，大多偏重于設(shè)計(jì)原則和樣式展示。那么，產(chǎn)品經(jīng)理在撰寫關(guān)于表格的需求時(shí)，需要說明哪些內(nèi)容呢？

這篇文章從表格功能的PRD為切入點(diǎn)，整理一部分產(chǎn)品經(jīng)理需要考慮的信息。

一、信息的說明

• 功能使用頻率：區(qū)分常用功能和不常用功能，便于進(jìn)行頁面布局設(shè)計(jì)。根據(jù)用戶的使用頻率定義，一般搜索為常用功能、刪除、查看幫助文檔為不常用功能；
• 表格信息：除了說明基礎(chǔ)的表頭信息，要給出字段信息的重要程度。一般最重要的，也就是主鍵，要放在表格最左側(cè)，最右側(cè)為時(shí)間等參考信息；
• 可點(diǎn)擊信息：明確表格中的字段哪些是可點(diǎn)擊的，通常如果只有一個(gè)詳情頁，設(shè)置主鍵可點(diǎn)擊即可，不需要多處可點(diǎn)擊；
• 排序：排序功能有助于數(shù)據(jù)按照一定的規(guī)律進(jìn)行升序和降序，方便數(shù)據(jù)對(duì)比和查找。通常時(shí)間、數(shù)字等信息需要排序，如果產(chǎn)品經(jīng)理不做特別說明，那么開發(fā)會(huì)默認(rèn)不需要排序。

以上幾部分內(nèi)容，參照f型的視覺動(dòng)線和用戶常規(guī)習(xí)慣繪制原型圖如下所示：

原型布局方式

F型眼球動(dòng)線

1. 刷新

可以讓用戶主動(dòng)刷新，也可以設(shè)置頁面定時(shí)刷新，一般涉及到狀態(tài)的更新、表單提交，需要設(shè)計(jì)刷新按鈕，方便用戶主動(dòng)觸發(fā)刷新。

2. 空值顯示

定義當(dāng)數(shù)據(jù)為空時(shí)，要顯示什么，可以是某一種符號(hào)（如，”–“）也可以是文字說明，如圖所示。

3. 搜索

產(chǎn)品需要定義搜索范圍、搜索內(nèi)容和搜索方式。搜索范圍可以是當(dāng)前頁也可以是全局，搜索內(nèi)容可以僅限于某個(gè)字段也可以是搜索任意表單字段，搜索方式有模糊搜索和精確搜索兩種。根據(jù)使用場景決定即可。

4. 邏輯關(guān)系

需要說明表格和表格之間的字段是否有邏輯關(guān)系。常見的有包含關(guān)系，例如：任務(wù)和子任務(wù)。

5. 字?jǐn)?shù)說明

明確表格顯示的字?jǐn)?shù)，有全角和半角兩種不同的字符。全角是中文字符，半角是英文和數(shù)字，半角占據(jù)的顯示空間更小。

6. 導(dǎo)出

支持導(dǎo)出的文件類型有哪些。

7. 上傳

上傳文件的大小和類型的說明。

8. 日期控件

說明選擇時(shí)間點(diǎn)還是時(shí)間區(qū)間。如果是時(shí)間區(qū)間，可以設(shè)置常用的快捷區(qū)間，比如，近7天、近一個(gè)月。

9. 新建表單

如果表格中涉及了新建表單的功能，特殊名詞需要說明文字概念和格式要求，例如密碼的位數(shù)和格式。

10. 自動(dòng)生成

是否有自動(dòng)生成某些號(hào)碼的功能，優(yōu)化體驗(yàn)。

11. 自動(dòng)填充

已經(jīng)在其他表單填寫的信息是否需要系統(tǒng)自動(dòng)填充，減少用戶操作步驟。

12. 默認(rèn)顯示

當(dāng)用戶首次進(jìn)入頁面，表格展示為空（只展示表格），還是默認(rèn)展示某個(gè)時(shí)間范圍的數(shù)組。

13. 錯(cuò)誤提示

和技術(shù)同事明確有哪些錯(cuò)誤類型和發(fā)現(xiàn)錯(cuò)誤之后用戶該如何操作，歸納整理后給用戶明確的提示，具體情況和系統(tǒng)有關(guān)，最基礎(chǔ)的例如：網(wǎng)絡(luò)連接失敗，請(qǐng)檢查網(wǎng)絡(luò)設(shè)置。

14. 分頁

是否需要分頁，可否設(shè)置每頁展示的條目數(shù)量。

二、交互和UI說明

每個(gè)公司產(chǎn)品的職責(zé)不同，有的產(chǎn)品需要負(fù)責(zé)交互，有的不需要。但是！如果產(chǎn)品考慮不周，出了問題都可以找產(chǎn)品背鍋，因而這里也提供一些關(guān)于交互和UI的說明。

1. 反饋

鼠標(biāo)懸停，一些操作之后的提示語。

2. 篩選功能

常見的篩選方式是下拉框，如果選項(xiàng)在4個(gè)以內(nèi)，平鋪選項(xiàng)的方式更為推薦。平鋪的方式減少了交互動(dòng)作，下拉框需要先點(diǎn)擊下拉框區(qū)域才可以選擇選項(xiàng)，平鋪的方式可以直接選擇。

圖中上方的篩選是下拉篩選框，下方是平鋪選擇。

3. 操作區(qū)

操作區(qū)的操作大于四個(gè)時(shí)，可以增加更多按鈕，將不常用的按鈕收納起來，減少視覺噪音。

4. 對(duì)齊方式

文字左對(duì)齊，數(shù)字右對(duì)齊。文字左對(duì)齊符合大家的閱讀習(xí)慣，數(shù)字右對(duì)齊便于數(shù)字大小的對(duì)比。

5. 更多

更多也可以表現(xiàn)為展開和收起，當(dāng)信息較多，可將一部分的信息放到更多里，優(yōu)化視覺體驗(yàn)。

6. 分步驟

具有新建功能的表格會(huì)涉及到表單的設(shè)計(jì)，當(dāng)表單信息較多可以將信息分類分步驟填寫，優(yōu)化使用體驗(yàn)。

7. 文案準(zhǔn)確性校驗(yàn)

可以讓其他同事體驗(yàn)產(chǎn)品，看有沒有一些名詞定義讓用戶產(chǎn)生誤解。下面附上一個(gè)交互走查表，該表來源于網(wǎng)絡(luò)，沒有標(biāo)明出處，歡迎認(rèn)領(lǐng)。

8. 待認(rèn)領(lǐng)

佚名

#專欄作家#

牛奶，公眾號(hào)：產(chǎn)品經(jīng)理的小紅書

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

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