2021-1-20 高勁
降本增效一直是為B端賦能的首要宗旨，那么我們該如何從設(shè)設(shè)層面為用戶提高表單錄入的效率呢？
什么是表單頁
表單都是界面中最 常見、最 重要 的組件之一，屬于 數(shù)據(jù)錄入 板塊。
表單是2B產(chǎn)品“管理”的第一步。軟件/系統(tǒng)/平臺本身是沒有信息的，像是一個空的架子，表單是用戶向系統(tǒng)輸入信息的一種非常重要的手段，只有用戶向系統(tǒng)添加了豐富的信息，系統(tǒng)才能實現(xiàn)其價值。
表單是信息添加、錄入的通用形式；主要作用是負責(zé)數(shù)據(jù)采集，是最常用的信息錄入工具，隨著互聯(lián)網(wǎng)興起，特別是最近幾年B端的興起，表單的重要性顯得越來越突出。
表單的設(shè)計原則
- 充分考慮用戶填寫表單的目的，區(qū)分必填項和非必填項，刪減不必要的表單信息（例如：填寫了身份證就無需再填寫出生日期，因身份證信息內(nèi)包含出生日期，系統(tǒng)自動識別即可），確定完表單內(nèi)容。必要的時候?qū)π畔⒎纸M，表單項并非從上到下無序羅列，而是根據(jù)表單內(nèi)容，按照一定的邏輯或者用戶熟悉的模式順序，對表單項進行排序和分組，才能讓用戶瀏覽和填寫流暢且。
準確- 信息表達要準確無誤，避免歧義，提示說明要合適，不要給正確的廢話，例如：填寫備注的提示用“請輸入備注”沒有意義，換成“不超過100字”更有助用戶對表單的理解。
一致- 組件的規(guī)范和操作的規(guī)范同樣重要。同一套系統(tǒng)同一個組件使用一個樣式即可，這樣才能保證頁面的視覺統(tǒng)一。同一個功能按鈕，在A頁面點擊給的彈窗，在B頁面也同樣要為彈窗。
易懂- 給予高質(zhì)量的信息提示及反饋，如果需要輸入某種特殊格式，請給出具體要求（例如：密碼長度8-20位)；錯誤提示的時候要給用戶錯誤的具體內(nèi)容（例如：登錄時不能單純?nèi)ヌ崾尽澳斎氲男畔⒂姓`”，需準確提示是賬號格式錯誤，還是密碼長度錯誤）。
我們先看看表單主構(gòu)成，表單主要由這5部分構(gòu)成：
分組標題：表單項較多的情況下建議分組，分組標題有引導(dǎo)用戶完成表單填寫的作用。
表單標簽：也就是填寫或操作內(nèi)容的標題。標簽規(guī)范的方式時標題后帶冒號，還是不帶冒號呢？這個其實都可以，沒有硬性的標準，自定義一個規(guī)范去執(zhí)行就可以了。
表單域：表單是用來數(shù)據(jù)采集的容器，也可以視為一個對象。包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框、下拉選擇框和文件上傳等，用于采集用戶的輸入或選擇的數(shù)據(jù)。
提示信息：分為說明性提示信息和操作反饋提示。提示信息可以放在表單域里邊（例如：備注的提示“不超過100字”），也可以在表單域或后邊，還可以收進“問號icon”里，鼠標hover后給氣泡提示展示信息即可。
操作按鈕：操作按鈕為頁面的全局操作，為滿足用戶隨時對表單進行操作的需求，操作按鈕會懸浮在頁面底部。一般情況按鈕最多只有一個主按鈕，可以有多個次按鈕。
(1) 分類
左標簽：優(yōu)勢-節(jié)約縱向空間，信息表達明確，多用于web端；劣勢-橫向空間利用率不高，不適用移動端等狹窄空間。
頂標簽：優(yōu)勢-視覺舒適，節(jié)約橫向空間；劣勢-縱向空間利用率不高。
行內(nèi)標簽：優(yōu)勢-最節(jié)省空間，多用于注冊登錄等字段少的表單；劣勢-輸入時和輸入后標簽消失，令用戶迷茫（可優(yōu)化為浮動標簽，在光標鍵入時，標簽展示輸入框上），字段多的表單不建議使用行內(nèi)標簽及浮動標簽。
(2) 對齊方式
左對齊：從左至右的閱讀順序，符合人們的閱讀習(xí)慣，一般用于詳情的陳列。
右對齊：也被稱為“冒號對齊”，右對齊使得標簽和輸入之間的距離固定，有明確的視覺關(guān)聯(lián)，操作效率高，非常適合表單錄入。
表單域大致分為以下5個大類：輸入、內(nèi)容選擇、日期時間選擇、數(shù)值范圍和上傳。
選擇適合的控件，不光能在視覺上做到統(tǒng)一規(guī)范，還能提高用戶操作效率。
(1) 輸入
文本框：選擇適合的大小，它的大小應(yīng)該向用戶暗示所需輸入內(nèi)容的長度，以此減輕判斷負擔(dān)（注意：文章類超長文本不適用于長文本輸入框，建議使用富文本編輯器）。
特定前/后綴：涉及到金額輸入時，當用戶輸入的金額超過千時，出現(xiàn)千分位最數(shù)據(jù)進行分組，方便用戶快速識別金額。
帶icon或按鈕：“日期選擇”和“時間選擇”一般都附帶icon，便于用戶快速識別。帶按鈕的表單項在“密碼輸入”用的最多，可做隱藏密碼和顯示密碼的切換用，因為盲輸及可能會出錯。
(2) 選擇
內(nèi)容選擇：含單選、多選、選擇器（常用的有下拉單選/多選）、級聯(lián)選擇（多層級聯(lián)動選擇）、樹選擇、穿梭框、開關(guān)。
1、單選框、復(fù)選框：一般用于選項不多且相對固定的情況，選項控制在6個以內(nèi)為宜，用戶可以一眼看到所有內(nèi)容。單選框只能是其中一個選項，多選框則可以選擇其中一個或多個選項。
2、開關(guān)：使用開關(guān)控件的條件是選項的性質(zhì)互斥（例如：是和否、打開和關(guān)閉、開啟和禁用等）；
3、選擇器：當選擇項超6個，就需要考慮用到選擇器了。下拉列表是網(wǎng)頁中一種最省頁面空間的選擇方式，單擊下拉按鈕后能看到最多展示的8個選項，少于8個則顯示實際個數(shù)自適應(yīng)，多余8個則出現(xiàn)滾動條。下拉選擇器根據(jù)屏幕位置決定向下展示或者向上展示。
選擇器適用廣泛，同類選項（例如：選擇客戶、商品名稱、貨物編號等）、增量選項（例如：年份選擇）。
4、級聯(lián)選擇、樹選擇：二者都屬層級選擇，區(qū)別在于級聯(lián)選好選項后框內(nèi)顯示的是含層級的內(nèi)容選項，且只能選擇需最子集選項（例如：江蘇省/蘇州市/工業(yè)園區(qū)，不能選擇江蘇省，因為前面的選項只為導(dǎo)航至最子集），而樹選擇框內(nèi)展示的是單個選項的內(nèi)容，不展示層級，但可以選擇任何層級（例如下圖：浙江省）
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區(qū)間；他們很特殊，只為日期和時間選項而生。
1、日期、時間選擇：當用戶需要一個時間/日期，可以點擊標準輸入框，彈出選擇面板進行選擇，或者輸入時間后自動定位到該選項，無需手動選擇。
2、日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；下例相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
數(shù)值范圍：
1、滑動輸入器：滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區(qū)間內(nèi)進行選擇。
2、步進器：也稱為計數(shù)器，僅允許輸入自定義范圍內(nèi)標準的數(shù)字值，當自定義標準數(shù)字值為整數(shù)時，輸入小數(shù)點后回車，帶小數(shù)點的數(shù)字只保留整數(shù)呈現(xiàn)。上下按鈕也不是每點擊一次數(shù)值±1，可以設(shè)置跳每點擊一次±N，N可以為任何數(shù)字，也可以為小數(shù)。
(3) 上傳
文件、圖片上傳：第一種情況是上傳圖片和文件合在一個上傳控件里；第二種情況是區(qū)分了圖片上傳和除了圖片之外的其他文件的上傳，這種情況下的圖片成功上傳后是有縮略圖的；根據(jù)需求選擇其中一種即可。要注意的是上傳有四種狀態(tài)：上傳前、上傳中、上傳后的成功狀態(tài)、上傳后的失敗狀態(tài)，UI都需要設(shè)計出來，一個都不能少。
(1) 占位符
占位符就是先占據(jù)一個固定的位置，等著用戶往里面添加內(nèi)容的符號或文字。在鍵入信息前，出現(xiàn)在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正確的廢話”，因為給不到用戶任何提示幫助，如果表單項沒有制定規(guī)則，可用表單項編輯方式占位“請輸入”/“請選擇”，以新增商品為案例：
(2) 幫助信息
幫助信息和占位符類似，也是在輸入編輯前給用戶的提示信息。和占位符不同點在于“幫助信息”不占據(jù)輸入編輯的位置，不會因為鍵入信息后消失，屬于表單中的常駐信息。三種方式可以同時運用在一套系統(tǒng)內(nèi)，視當前表單情況選定。
(3) 校驗信息
校驗信息是在輸入后或者提交后，系統(tǒng)對編輯的信息進行的校驗，分為前端校驗和后端校驗兩種。
前端校驗：一般校驗顯示錯誤和格式錯誤：必填項、（郵箱、電話號、地址）格式、密碼強度等。快速反饋，直接提醒用戶錯誤內(nèi)容，讓用戶及時知曉并更改。
后端校驗：唯一性驗證、驗證碼、敏感詞等，觸發(fā)校驗請求后系統(tǒng)會去數(shù)據(jù)庫查詢校驗信息，再給予用戶相應(yīng)的反饋。
(1) 分布的位置
表單頂部、表單底部：用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現(xiàn)的條件不同。默認顯示表單頂部按鈕，當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。
跟隨表單項：這種情況很少用到，一般是需要校驗的情況下使用，或者可手動增減的表單項。
分組底部：一般是對于這個分組進行的操作按鈕。
溫馨提示：當操作按鈕超三個時，可以將相對低頻的操作按鈕折疊收起，點擊或鼠標hover“更多操作”時下拉展開顯示所有按鈕。
(2) 閱讀順序、按鈕層級、對齊方式
其實這三者的規(guī)則都是一樣的，當按鈕右對齊頁面的時候，閱讀順序自然是從右向左，而按鈕層級也是從右向左遞減，比如頂部的提交、保存、取消三個按鈕；商品列表的“添加商品”和“刪除全部商品”，左對齊頁面，閱讀順序和層級自然也是從左至右。
表單頁面主要的交互方式有四種：原位編輯、氣泡卡片、彈窗/抽屜、頁面跳轉(zhuǎn)。表單頁面在交互方式的選擇取決于表單容量及表單親密度。
原位編輯是輕量型信息采集表單，適用于表單編輯項較少（盡量低于5個編輯項），且屬于主功能分支的場景。其優(yōu)點在于操作便捷，隨時啟用與退出，能夠保證用戶對主要功能的操作流暢度。其存在的意義在于完善或者增強主功能的操作，而不是打斷。
使用場景：常用于列表及卡片，詳情內(nèi)也可以使用原位編輯（例如：詳情內(nèi)只有A和B可以編輯，且需分別編輯，此時建議用原位編輯進行操作），需要注意的是，盡量不要用在長文本編輯。
激活方式：信息展示區(qū)域通過雙擊、單擊、hover或點擊“編輯”按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。最常見的比如：微信/企業(yè)微信修改群名就是單擊激活，列表、表格的點擊“編輯”激活，相比之下hover去激活相對用的少。
與頁面的親密度：親密度高，編輯內(nèi)容即為展示內(nèi)容，當編輯內(nèi)容不止表格內(nèi)展示的字段數(shù)量，且存在聯(lián)動關(guān)系時，需慎重（例如：“部門”和“班次”屬于上下級聯(lián)動關(guān)系，列表內(nèi)只顯示“部門”，而“班次”在詳情頁面顯示，則不適用原位編輯）。
使用場景：常用于條件篩選的設(shè)置，點擊或hover后顯示氣泡卡片內(nèi)容（建議不超過5個設(shè)置項）。觸發(fā)生效機制可以是設(shè)置項點擊即生效，也可以多個設(shè)置項選擇后，觸發(fā)操作按鈕生效（操作按鈕建議不超過2個），觸發(fā)機制可以根據(jù)項目實際需求而定。
與頁面的親密度：親密度高，所見即所得，編輯前/后都不遮擋列表，用戶剛剛操做了什么，即在當前展示操作后的結(jié)果，讓用戶感受到一切都在掌握之中，不會出現(xiàn)斷裂感，交互很友好；
(1) 彈窗
雖說設(shè)計上對彈窗的使用都是持謹慎態(tài)度的，但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦，且不用離開當前頁面就能更快速更容易完成任務(wù)。
其實該使用彈窗的時候也是要用的，特別是在B端，如果彈窗能解決的問題，不建議頻繁的跳頁面去操作。如下例：下單錄入涉及添加產(chǎn)品，而產(chǎn)品信息字段又很多，不是一個模糊搜索就能解決的，此時建議使用彈窗而不是跳頁面去操作。來回跳頁面頻繁刷新，不如用彈窗選擇操作更為簡單，在當前頁的彈窗選擇產(chǎn)品，再將產(chǎn)品信息帶入當前錄入頁面，此流程更符合用戶操作時的心理預(yù)期。
使用場景：所有頁面均可，3個以上的錄入項即可使用彈窗；需要注意保持交互一致性（例如：在列表“新增會員”點擊觸發(fā)是彈窗，在其他頁面也同樣要是彈窗）；當然也有特殊情況，例如：快捷新增時只需錄入一個名稱，可以先使用快捷操作添加極少的信息，后續(xù)在編輯頁面進行補充；
與頁面的親密度：可以有強關(guān)聯(lián)，也可以沒有關(guān)聯(lián)。有強關(guān)聯(lián)指的是，比如說：點擊“新增會員”按鈕彈出來的此彈窗，在其他也要用這個“新增會員”名稱，避免用戶迷茫（當然了，很多新增和編輯其實用的同一個彈窗，這個特殊情況除外）。沒有關(guān)聯(lián)是指，可以在列表頁面使用“新增會員”彈窗，也可以在工作臺或者其他有需求的頁面去使用“新增會員”彈窗。
(2) 抽屜
抽屜彈窗也被稱為側(cè)彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側(cè)邊彈出的交互方式，其操作成本和用戶使用心理負擔(dān)會小很多。
注意事項：如果系統(tǒng)大部分用的彈窗，就優(yōu)先選用彈窗，如果表單內(nèi)增加了更多字段，可以換成抽屜彈窗；
使用場景：超出了彈窗/抽屜的承載量，就要用到頁面跳轉(zhuǎn)了，一般一級模塊的設(shè)置項也會用到頁面跳轉(zhuǎn)，因為會牽一發(fā)動全身。還有初始化入駐也需要跳轉(zhuǎn)頁面進行操作，不光因為需要提交大量信息，還因為各種認證審核需要一項一項進行，此時用抽屜和彈窗承載內(nèi)容顯然不合適，因為彈窗和抽屜，代表著快速完成。
與頁面的親密度：跳轉(zhuǎn)了頁面，不管是新開頁面還是刷新原頁面，與原頁面的關(guān)聯(lián)性已經(jīng)沒那么強了，只能說他們屬于同一條路徑下不同頁面。
根據(jù)內(nèi)容的多少及親密程度來決定，我們設(shè)計時應(yīng)選用哪種交互方式，或者可以直接根據(jù)內(nèi)容承載量做判斷也是可以的，從少到多依次此為：氣泡卡片-原位編輯-彈窗-抽屜-頁面跳轉(zhuǎn)。
排版布局的方式有四種：平鋪、分組、標簽頁、分步驟。根據(jù)內(nèi)容項的多少及實際需求相應(yīng)合理的布局。
輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據(jù)表單輸入內(nèi)容的相關(guān)性、內(nèi)容的所屬類別，可以將同類型的數(shù)據(jù)統(tǒng)一輸入，減少用戶輸入信息的跨度，提高輸入效率。
使用場景：平鋪顧名思義就是指表單項不做分組，全部平鋪展開，很多注冊和登錄都是這種布局。適用于表單項少，或者多但表單項之間親密性很強，就無需額外分組，直接將表單項平鋪開展示，簡單明了。
對于內(nèi)容過多的表單輸入頁面，分組、分模塊的排版方式讓用戶感覺更友好，不是密密麻麻一大片，讓人喘不過氣來，而是有條理的布局，張弛有度，疏密有致。用戶可以在填寫好一段內(nèi)容后進行心理上停頓休息，減少視覺疲勞和心理壓力。
(1) 標題分組
使用場景：超過了7個設(shè)置項，且較為復(fù)雜的表單，標題分組之間的關(guān)聯(lián)性較弱，就可以去分類歸納表單信息，位的是降低用戶的認知負擔(dān)，提高用戶體驗。注意：分組內(nèi)組內(nèi)設(shè)置項要有強關(guān)聯(lián)性，否則不能歸為一組，不能因為字段多，為了分組去分組。
(2) 卡片分組
使用場景：7-15個設(shè)置項，用標題分組不足以給信息做層級區(qū)分，為了讓用戶在操作時更聚焦，也需要給用戶更明確的操作引導(dǎo)，即可使用卡片分組。
卡片分組之間關(guān)聯(lián)性更弱，分類更明確，多個設(shè)置項，多個分類。需要注意，一個表單項不要分過多的卡片分組，不能每兩項做一個分組，這反而會造成用戶視覺壓力和操作負擔(dān)。
使用場景：當標題分組和卡片分組都不足以對表單進行分組時，就可以考慮用tab切換了。每個設(shè)置都包含多個錄入，且使用了標簽。
注意事項：tab標簽的填寫沒有先后順序的規(guī)則，標簽頁彼此之間沒有特定的關(guān)聯(lián)性，可獨立去設(shè)置。也就是說先填寫tab1還是先填寫tab2，對表單的其他tab項沒有任何影響，不存在聯(lián)動關(guān)系。
標簽頁對應(yīng)的詳情展示：一項一項上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點定位，點擊錨點定位的標題即可自動定位到該區(qū)域，方便用戶快速定位瀏覽位置。
使用場景：對輸入表單進行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會有階段性的成就感，同時分步驟的輸入還有利于減少信息的錯誤率。如果輸入表單的內(nèi)容較多，同時輸入內(nèi)容有邏輯上的先后順序，此時可以考慮將輸入表單進行分步驟處理。
利用步驟條，將大型、復(fù)雜任務(wù)拆解為多個部分，并按照相關(guān)性分組，可以提高用戶處理的專注度，降低頁面的復(fù)雜性，減輕用戶操作負擔(dān)，降低用戶出錯率，提高用戶體驗。
根據(jù)內(nèi)容關(guān)聯(lián)性的強弱程度來決定，我們設(shè)計時應(yīng)選用哪種布局方式，或者可以直接根據(jù)復(fù)雜程度做選擇也是可以的，從弱到強依次此為：平鋪-標題分組-卡片分組-標簽頁/分步驟轉(zhuǎn)。
提高易用性的方式有以下四種分別為：視覺清晰、信息降噪、智能、準確易懂，每個表單，每個頁面都要應(yīng)用這四項準則，不光是在表單頁面，所有頁面都適用。
布局方式-單列布局：常見的表單布局為單列信息展示布局，比如：蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進行頁面排版。設(shè)計中盡量采用單列布局，是為保證用戶的視覺動線流暢，不容易遺漏信息；
在輸入項較多時，每次填寫完一項都要鼠標選中下一個輸入框，很容易讓用戶失去耐心，而單列布局恰好能解決這個問題并提高用戶體驗，輸入完一項按enter鍵可快速切換至下一項，提高用戶操作效率。
當然了按Tab鍵也是一樣的效果，只是，一般情況下，大眾都更習(xí)慣也更熟悉回車鍵的位置，需要注意的是，長文本輸入框的屬性里回車鍵是文本換行的意思，需要區(qū)別設(shè)置兩者的操作機制。
布局方式-橫向布局：橫向布局也是單列布局，是它的發(fā)散版本。如果出于業(yè)務(wù)方復(fù)雜需求的考慮，必須在橫向增加內(nèi)容，那增加的表單項一定要和前表單項有關(guān)聯(lián)，才可作為分組橫向排列，還需注意不能出現(xiàn)Y軸平行豎向分組（如下圖），避免用戶迷茫或遺漏信。
(1) 合理設(shè)置必填項
正常情況下，我們標示“*”標就是為了提示用戶此項必須要填寫方能提交單據(jù)。
但當一個編輯頁面的必填項非常多時，就可以無需標注必填，只標明哪些是非必填項就行。
當編輯頁全部都是必填項時，可在大標題處用標示必填即可。
(2) 折疊不重要非必填信息
在能完整獲取需要信息的前提下，輸入項越少越好，當表單頁很長，且有些信息非必填，或者說填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起，點擊“展示更多”下拉展開全部表單項，讓用戶可以選擇性錄入不重要的信息。
(1) 智能填寫
根據(jù)上下文信息可自動獲取的，無需用戶再次填寫。如下例：通過客戶名稱數(shù)據(jù)庫可自動匹配客戶手機號，或者通過手機號匹配客戶名稱。填寫郵寄信息的時候，只需選擇省市區(qū)，郵政編碼便自動填充，減少了用戶查找郵政編碼的繁瑣（甚至可以提議“郵政編碼”字段直接去掉）。而生日和性別都可以在身份證號內(nèi)提取。
(2) 智能排序
默認高頻：當選擇器內(nèi)容超過5個選則項時，可以對內(nèi)容選項進行一定排序規(guī)則（首字母排序、數(shù)字排序或設(shè)置默認高頻選項等），方面用戶提前預(yù)知選項的大致位置，檢索找到相應(yīng)的選項。
(3) 智能聯(lián)想
智能聯(lián)想是給予用戶鍵入字段的聯(lián)想功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
自動搜索：當下拉選項超過16個時，建議加入輸入選擇功能，用戶可使用下拉選擇，也可以輸入關(guān)鍵字后智能匹配顯示對應(yīng)的選項。或者可以再加上信息排序，根據(jù)點擊頻次進行排序，高頻選項前置。
后綴聯(lián)想：一般用于郵箱信息的錄入，當輸入內(nèi)容后，自動將默認高頻的郵箱后綴作為補充數(shù)據(jù)填充在后方，減少用戶的輸入。
操作直觀：去除冗余且無用的部件：切換“開關(guān)”操作后會立即生效展示結(jié)果，無需與操作按鈕搭配使用，避免造成用戶的誤解，導(dǎo)致體驗不友好。
準確的錯誤提示：反饋提示是頁面系統(tǒng)對用戶的輸入的內(nèi)容進行的校驗，并對校驗結(jié)果予以展示的提示形式。可分為前端校驗和后端校驗兩種。
錯誤提示的時候要給用戶錯誤的具體內(nèi)容，而非簡單粗暴的錯誤提示。例如：登錄時不能單純?nèi)ヌ崾尽澳斎氲男畔⒂姓`”，需準確提示是賬號信息錯誤，還是密碼校驗錯誤。
前端校驗：也被稱為“即時校驗”，一般是校驗顯現(xiàn)的數(shù)據(jù)內(nèi)容，比如字符長度、格式（是否包含非法字符）、是否為空等。該方式的校驗條件多在本地，無需實時向服務(wù)器發(fā)命令而得到反饋。
后端校驗：包含“局部校驗”和“全局校驗”，局部校驗：在注冊賬號時，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗反饋。全局校驗反饋：多指在輸入完成提交或者階段性完成（分步驟跳轉(zhuǎn)下一步）時，系統(tǒng)給出的校驗反饋。在用戶操作反饋動作按鈕后，界面在相應(yīng)位置（一般為單個輸入框的下方或右側(cè)）一次性給出對應(yīng)的錯誤提示。
文章來源：UI中國 作者：AI-玲玲
藍藍設(shè)計( m.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.ocunn.cn