一份平平無奇的web端表格設計需求文件說明
編輯導語:產品經理的工作內容往往會涉及到web端表格設計,那麼,當產品經理撰寫web端表格設計需求文件說明時,有哪些需要注意的內容呢?本文作者從表格功能的PRD為切入點,為我們整理了一部分產品經理需要考慮的資訊,希望能夠對各位產品經理日後的工作有所幫助。
關於web表格設計的指導很多,書籍也有,例如:《web表單設計:點石成金的藝術》、《移動UI設計模式》,大多偏重於設計原則和樣式展示。那麼,產品經理在撰寫關於表格的需求時,需要說明哪些內容呢?
這篇文章從表格功能的PRD為切入點,整理一部分產品經理需要考慮的資訊。
一、資訊的說明- 功能使用頻率:區分常用功能和不常用功能,便於進行頁面佈局設計。根據使用者的使用頻率定義,一般搜尋為常用功能、刪除、檢視幫助文件為不常用功能;
- 表格資訊:除了說明基礎的表頭資訊,要給出欄位資訊的重要程度。一般最重要的,也就是主鍵,要放在表格最左側,最右側為時間等參考資訊;
- 可點選資訊:明確表格中的欄位哪些是可點選的,通常如果只有一個詳情頁,設定主鍵可點選即可,不需要多處可點選;
- 排序:排序功能有助於資料按照一定的規律進行升序和降序,方便資料對比和查詢。通常時間、數字等資訊需要排序,如果產品經理不做特別說明,那麼開發會預設不需要排序。
以上幾部分內容,參照f型的視覺動線和使用者常規習慣繪製原型圖如下所示:
原型佈局方式
F型眼球動線
1. 重新整理可以讓使用者主動重新整理,也可以設定頁面定時重新整理,一般涉及到狀態的更新、表單提交,需要設計重新整理按鈕,方便使用者主動觸發重新整理。
2. 空值顯示定義當資料為空時,要顯示什麼,可以是某一種符號(如,”–“)也可以是文字說明,如圖所示。
產品需要定義搜尋範圍、搜尋內容和搜尋方式。搜尋範圍可以是當前頁也可以是全域性,搜尋內容可以僅限於某個欄位也可以是搜尋任意表單欄位,搜尋方式有模糊搜尋和精確搜尋兩種。根據使用場景決定即可。
4. 邏輯關係需要說明表格和表格之間的欄位是否有邏輯關係。常見的有包含關係,例如:任務和子任務。
5. 字數說明明確表格顯示的字數,有全形和半形兩種不同的字元。全形是中文字元,半形是英文和數字,半形佔據的顯示空間更小。
6. 匯出支援匯出的檔案型別有哪些。
7. 上傳上傳檔案的大小和型別的說明。
8. 日期控制元件說明選擇時間點還是時間區間。如果是時間區間,可以設定常用的快捷區間,比如,近7天、近一個月。
如果表格中涉及了新建表單的功能,特殊名詞需要說明文字概念和格式要求,例如密碼的位數和格式。
10. 自動生成是否有自動生成某些號碼的功能,最佳化體驗。
11. 自動填充已經在其他表單填寫的資訊是否需要系統自動填充,減少使用者操作步驟。
12. 預設顯示當用戶首次進入頁面,表格展示為空(只展示表格),還是預設展示某個時間範圍的陣列。
13. 錯誤提示和技術同事明確有哪些錯誤型別和發現錯誤之後使用者該如何操作,歸納整理後給使用者明確的提示,具體情況和系統有關,最基礎的例如:網路連線失敗,請檢查網路設定。
是否需要分頁,可否設定每頁展示的條目數量。
二、互動和UI說明每個公司產品的職責不同,有的產品需要負責互動,有的不需要。但是!如果產品考慮不周,出了問題都可以找產品背鍋,因而這裡也提供一些關於互動和UI的說明。
1. 反饋滑鼠懸停,一些操作之後的提示語。
2. 篩選功能常見的篩選方式是下拉框,如果選項在4個以內,平鋪選項的方式更為推薦。平鋪的方式減少了互動動作,下拉框需要先點選下拉框區域才可以選擇選項,平鋪的方式可以直接選擇。
圖中上方的篩選是下拉篩選框,下方是平鋪選擇。
3. 操作區操作區的操作大於四個時,可以增加更多按鈕,將不常用的按鈕收納起來,減少視覺噪音。
文字左對齊,數字右對齊。文字左對齊符合大家的閱讀習慣,數字右對齊便於數字大小的對比。
5. 更多更多也可以表現為展開和收起,當資訊較多,可將一部分的資訊放到更多里,最佳化視覺體驗。
6. 分步驟具有新建功能的表格會涉及到表單的設計,當表單資訊較多可以將資訊分類分步驟填寫,最佳化使用體驗。
7. 文案准確性校驗可以讓其他同事體驗產品,看有沒有一些名詞定義讓使用者產生誤解。下面附上一個互動走查表,該表來源於網路,沒有標明出處,歡迎認領。
8. 待認領佚名
牛奶,公眾號:產品經理的小紅書
本文原創釋出於人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基於 CC0 協議