中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

1. 輸入框

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

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

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

2. 下拉列表框

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

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

3. 單選框

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

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

4. 復(fù)選框

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

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

5. 日期選擇框

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

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

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

6. 上傳文件框

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

• 是否必填。如果必選則在前面加個(gè)紅色星號(hào)*，失去焦點(diǎn)或者提交表單的時(shí)候檢測(cè)到必填項(xiàng)沒(méi)有填寫(xiě)則高亮對(duì)應(yīng)組件邊框?yàn)榧t色。
• 框外提示文字。一般位于下拉列表框的后面或者下一行。
• 約束條件。比如支持jpg/png格式，最大2MB。

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

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

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

1. 提交按鈕

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

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

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

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

2. 取消按鈕

點(diǎn)擊”取消”按鈕，返回到上一層頁(yè)面。

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

三、總結(jié)

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

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

相關(guān)文章

Web后臺(tái)產(chǎn)品的列表頁(yè)規(guī)范

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

?從3個(gè)角度講解：PM該如何畫(huà)出輸入框

#專(zhuān)欄作家#

浪子，個(gè)人微信langzipm，公眾號(hào)：浪子畫(huà)原型(langzisay)。擅長(zhǎng)于A(yíng)PP原型設(shè)計(jì)和產(chǎn)品架構(gòu)。

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

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