編輯導(dǎo)讀：不管是APP還是網(wǎng)頁端，表單頁都是經(jīng)常用到的功能之一。網(wǎng)頁端PM需要了解常見表單頁的相關(guān)規(guī)范，作者根據(jù)多年的經(jīng)驗總結(jié)出了通用邏輯和文檔規(guī)范，希望對你有所啟發(fā)。

表單頁通常由多種輸入組件和提交按鈕組成，輸入組件通常包含輸入框、下拉列表框、單選框、復(fù)選框等等。接下來分別介紹他們的邏輯規(guī)范和應(yīng)用場景。

相關(guān)規(guī)范以Axure原型的方式整理到網(wǎng)址https://5d2myh.axshare.com

一、輸入組件規(guī)范

填寫表單主要考慮的是輸入組件的規(guī)范，常見的有輸入框(文本框)、選擇框(下拉列表框)、單選框、復(fù)選框、日期選擇器(文本框)、上傳文件框。

1. 輸入框

輸入框的邏輯需要考慮是否必填，輸入類型，框內(nèi)提示文字，框外提示文字，約束條件。

• 是否必填。如果必填則在前面加個紅色星號*，失去焦點或者提交表單的時候檢測到必填項沒有填寫則高亮對應(yīng)組件邊框為紅色。
• 輸入類型。通常為字符串、字母、數(shù)字、整數(shù)、郵箱、電話號碼、網(wǎng)址等。他們對應(yīng)Axure默認(rèn)的文本框，需要用約束條件來進(jìn)行限制。
• 輸入單位。通常使用提示文字表示。但是如果是金額，等涉及到計算的單位，單位為元或者萬元。此時不僅僅是提示文字的作用，還可能涉及到計算規(guī)則。
• 框內(nèi)提示文字。用來描述輸入什么或者提示信息或者注意事項，輸入文字則自動消失。比如最多1000字，支持換行。
• 框外提示文字。一般位于輸入框的后面或者下一行，作用和框內(nèi)提示文字相近。
• 約束條件。比如約束最多輸入多少字，超過則無法輸入到框中或者高亮提醒用戶超過。比如最多輸入多少金額，超過則紅色文字提示超出。比如約束輸入整數(shù)，輸入非整數(shù)則自動刪除小數(shù)點后面的數(shù)字輸入非數(shù)字則自動清空且紅色文字提示。

另外可以閱讀作者寫過的相關(guān)文章：善用Axure寫PRD，APP文本框通用的輸入規(guī)則 和 ?從3個角度講解：PM該如何畫出輸入框？

2. 下拉列表框

下拉列表框的邏輯需要考慮是否必選，字段值，默認(rèn)值，框外提示文字。

• 是否必選。如果必選則在前面加個紅色星號*，失去焦點或者提交表單的時候檢測到必填項沒有填寫則高亮對應(yīng)組件邊框為紅色。
• 字段值。下拉列表框通常包含N個值，注意可能包含提示文字“請選擇”或者直接默認(rèn)選擇一個值。
• 默認(rèn)值。如果有了默認(rèn)值，相當(dāng)于滿足了必選的條件。
• 框外提示文字。一般位于下拉列表框的后面或者下一行。

3. 單選框

單選框的邏輯需要考慮是否必選，字段值，默認(rèn)值，框外提示文字。

具體規(guī)范同下拉列表框。

4. 復(fù)選框

復(fù)選框的邏輯需要考慮是否必選，字段值，默認(rèn)值，框外提示文字。

具體規(guī)范同下拉列表框。

5. 日期選擇框

日期選擇框的邏輯需要考慮是否必選，字段值，默認(rèn)值，框外提示文字。

• 是否必選。如果必選則在前面加個紅色星號*，失去焦點或者提交表單的時候檢測到必填項沒有填寫則高亮對應(yīng)組件邊框為紅色。
• 默認(rèn)值。默認(rèn)顯示當(dāng)天日期，點擊日期選擇框則會顯示彈窗并可以選擇其他日期。
• 框內(nèi)提示文字。用來描述輸入什么或者提示信息或者注意事項，輸入文字則自動消失。比如最多1000字，支持換行。
• 框外提示文字。一般位于輸入框的后面或者下一行，作用和框內(nèi)提示文字相近。
• 約束條件。通常約束格式為yyyy-mm-dd，如果手動輸入日期，非指定格式的內(nèi)容則會自動清空。

注意：日期選擇框組件，可以通過修改Axure默認(rèn)元件庫的文本框類型為日期實現(xiàn)，最終體現(xiàn)在生成的Axure原型中。

6. 上傳文件框

日期選擇框的邏輯需要考慮是否必選，字段值，默認(rèn)值，框外提示文字。

• 是否必填。如果必選則在前面加個紅色星號*，失去焦點或者提交表單的時候檢測到必填項沒有填寫則高亮對應(yīng)組件邊框為紅色。
• 框外提示文字。一般位于下拉列表框的后面或者下一行。
• 約束條件。比如支持jpg/png格式，最大2MB。

二、提交組件規(guī)范

提交表單的時候主要考慮提交按鈕和取消按鈕的相應(yīng)邏輯和規(guī)范。

提交按鈕和取消按鈕通常位于表單最下面。如有必要，也可以設(shè)置為相對屏幕位置固定不變。

1. 提交按鈕

提交按鈕通常叫做“保存”“提交”“確定”“確認(rèn)”，點擊提交按鈕依次進(jìn)行以下判斷，當(dāng)然順序可以根據(jù)需求調(diào)整。

• 判斷是否已填充所有必填項。如果沒有則toast提示”請補充所有必填項”并且高亮對應(yīng)的組件邊框。
• 判斷是否滿足所有約束條件。約束條件通常是在對應(yīng)組件失去焦點的時候進(jìn)行處理，也有部分約束條件是提交表單的時候才會進(jìn)行處理。
• 判斷文件大小是否滿足條件。如果超出則toast提示“文件已超過最大限制”。
• 判斷文件是否上傳成功。如果文件比較大，上傳需要一定時間。如果超時未上傳成功，則需要toast提示“文件太大已超時，請重新上傳！”
• 判斷調(diào)用接口進(jìn)行查重。如果存在則需要toast提示“該信息已存在，請修改后重試！”

當(dāng)后端返回提交成功后，前端最好給予用戶反饋，比如toast提示“保存成功”。然后跳轉(zhuǎn)到相應(yīng)的頁面。

考慮到文件上傳、網(wǎng)絡(luò)等多種復(fù)雜情況，可以在提交后增加一個浮層“正在提交中，請稍等”，減緩用戶的焦急等待感。

2. 取消按鈕

點擊”取消”按鈕，返回到上一層頁面。

特殊情況下會保存剛剛的表單數(shù)據(jù)到草稿箱，下次打開該頁面的時候會加載對應(yīng)的數(shù)據(jù)。

三、總結(jié)

表單頁通常分為2種狀態(tài)。

1. 增。整個表單頁的初始數(shù)據(jù)是空白的，需要用戶一個個填充或者選擇或者上傳。
2. 改。整個表單頁的初始數(shù)據(jù)需要先從數(shù)據(jù)庫加載出來然后用戶去修改。但是它們的邏輯規(guī)范和交互規(guī)范是一樣的，希望大家能夠從本文中獲得一些啟發(fā)。

相關(guān)文章

Web后臺產(chǎn)品的列表頁規(guī)范

善用Axure寫PRD，APP文本框通用的輸入規(guī)則

?從3個角度講解：PM該如何畫出輸入框

#專欄作家#

浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。擅長于APP原型設(shè)計和產(chǎn)品架構(gòu)。

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

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