一份平平無奇的web端表格設計需求文檔說明

0 評論 10872 瀏覽 66 收藏 9 分鐘

編輯導語:產品經理的工作內容往往會涉及到web端表格設計,那么,當產品經理撰寫web端表格設計需求文檔說明時,有哪些需要注意的內容呢?本文作者從表格功能的PRD為切入點,為我們整理了一部分產品經理需要考慮的信息,希望能夠對各位產品經理日后的工作有所幫助。

關于web表格設計的指導很多,書籍也有,例如:《web表單設計:點石成金的藝術》、《移動UI設計模式》,大多偏重于設計原則和樣式展示。那么,產品經理在撰寫關于表格的需求時,需要說明哪些內容呢?

這篇文章從表格功能的PRD為切入點,整理一部分產品經理需要考慮的信息。

一、信息的說明

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

以上幾部分內容,參照f型的視覺動線和用戶常規習慣繪制原型圖如下所示:

一份平平無奇的web端表格設計需求文檔說明

原型布局方式

一份平平無奇的web端表格設計需求文檔說明

F型眼球動線

1. 刷新

可以讓用戶主動刷新,也可以設置頁面定時刷新,一般涉及到狀態的更新、表單提交,需要設計刷新按鈕,方便用戶主動觸發刷新。

2. 空值顯示

定義當數據為空時,要顯示什么,可以是某一種符號(如,”–“)也可以是文字說明,如圖所示。

一份平平無奇的web端表格設計需求文檔說明

3. 搜索

產品需要定義搜索范圍、搜索內容和搜索方式。搜索范圍可以是當前頁也可以是全局,搜索內容可以僅限于某個字段也可以是搜索任意表單字段,搜索方式有模糊搜索和精確搜索兩種。根據使用場景決定即可。

4. 邏輯關系

需要說明表格和表格之間的字段是否有邏輯關系。常見的有包含關系,例如:任務和子任務。

5. 字數說明

明確表格顯示的字數,有全角和半角兩種不同的字符。全角是中文字符,半角是英文和數字,半角占據的顯示空間更小。

6. 導出

支持導出的文件類型有哪些。

7. 上傳

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

8. 日期控件

說明選擇時間點還是時間區間。如果是時間區間,可以設置常用的快捷區間,比如,近7天、近一個月。

一份平平無奇的web端表格設計需求文檔說明

9. 新建表單

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

10. 自動生成

是否有自動生成某些號碼的功能,優化體驗。

11. 自動填充

已經在其他表單填寫的信息是否需要系統自動填充,減少用戶操作步驟。

12. 默認顯示

當用戶首次進入頁面,表格展示為空(只展示表格),還是默認展示某個時間范圍的數組。

13. 錯誤提示

和技術同事明確有哪些錯誤類型和發現錯誤之后用戶該如何操作,歸納整理后給用戶明確的提示,具體情況和系統有關,最基礎的例如:網絡連接失敗,請檢查網絡設置。

一份平平無奇的web端表格設計需求文檔說明

14. 分頁

是否需要分頁,可否設置每頁展示的條目數量。

二、交互和UI說明

每個公司產品的職責不同,有的產品需要負責交互,有的不需要。但是!如果產品考慮不周,出了問題都可以找產品背鍋,因而這里也提供一些關于交互和UI的說明。

1. 反饋

鼠標懸停,一些操作之后的提示語。

一份平平無奇的web端表格設計需求文檔說明

2. 篩選功能

常見的篩選方式是下拉框,如果選項在4個以內,平鋪選項的方式更為推薦。平鋪的方式減少了交互動作,下拉框需要先點擊下拉框區域才可以選擇選項,平鋪的方式可以直接選擇。

一份平平無奇的web端表格設計需求文檔說明

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

3. 操作區

操作區的操作大于四個時,可以增加更多按鈕,將不常用的按鈕收納起來,減少視覺噪音。

一份平平無奇的web端表格設計需求文檔說明

4. 對齊方式

文字左對齊,數字右對齊。文字左對齊符合大家的閱讀習慣,數字右對齊便于數字大小的對比。

5. 更多

更多也可以表現為展開和收起,當信息較多,可將一部分的信息放到更多里,優化視覺體驗。

6. 分步驟

具有新建功能的表格會涉及到表單的設計,當表單信息較多可以將信息分類分步驟填寫,優化使用體驗。

7. 文案準確性校驗

可以讓其他同事體驗產品,看有沒有一些名詞定義讓用戶產生誤解。下面附上一個交互走查表,該表來源于網絡,沒有標明出處,歡迎認領。

8. 待認領

佚名

一份平平無奇的web端表格設計需求文檔說明

一份平平無奇的web端表格設計需求文檔說明

一份平平無奇的web端表格設計需求文檔說明

一份平平無奇的web端表格設計需求文檔說明

#專欄作家#

牛奶,公眾號:產品經理的小紅書

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!