公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

什么是表單頁(yè)

表單都是界面中最 常見(jiàn)、最 重要 的組件之一，屬于 數(shù)據(jù)錄入 板塊。

表單是2B產(chǎn)品“管理”的第一步。軟件/系統(tǒng)/平臺(tái)本身是沒(méi)有信息的，像是一個(gè)空的架子，表單是用戶(hù)向系統(tǒng)輸入信息的一種非常重要的手段，只有用戶(hù)向系統(tǒng)添加了豐富的信息，系統(tǒng)才能實(shí)現(xiàn)其價(jià)值。

表單是信息添加、錄入的通用形式；主要作用是負(fù)責(zé)數(shù)據(jù)采集，是最常用的信息錄入工具，隨著互聯(lián)網(wǎng)興起，特別是最近幾年B端的興起，表單的重要性顯得越來(lái)越突出。

表單的設(shè)計(jì)原則

- 充分考慮用戶(hù)填寫(xiě)表單的目的，區(qū)分必填項(xiàng)和非必填項(xiàng)，刪減不必要的表單信息（例如：填寫(xiě)了身份證就無(wú)需再填寫(xiě)出生日期，因身份證信息內(nèi)包含出生日期，系統(tǒng)自動(dòng)識(shí)別即可），確定完表單內(nèi)容。必要的時(shí)候?qū)π畔⒎纸M，表單項(xiàng)并非從上到下無(wú)序羅列，而是根據(jù)表單內(nèi)容，按照一定的邏輯或者用戶(hù)熟悉的模式順序，對(duì)表單項(xiàng)進(jìn)行排序和分組，才能讓用戶(hù)瀏覽和填寫(xiě)流暢且。

準(zhǔn)確- 信息表達(dá)要準(zhǔn)確無(wú)誤，避免歧義，提示說(shuō)明要合適，不要給正確的廢話(huà)，例如：填寫(xiě)備注的提示用“請(qǐng)輸入備注”沒(méi)有意義，換成“不超過(guò)100字”更有助用戶(hù)對(duì)表單的理解。

一致- 組件的規(guī)范和操作的規(guī)范同樣重要。同一套系統(tǒng)同一個(gè)組件使用一個(gè)樣式即可，這樣才能保證頁(yè)面的視覺(jué)統(tǒng)一。同一個(gè)功能按鈕，在A頁(yè)面點(diǎn)擊給的彈窗，在B頁(yè)面也同樣要為彈窗。

易懂- 給予高質(zhì)量的信息提示及反饋，如果需要輸入某種特殊格式，請(qǐng)給出具體要求（例如：密碼長(zhǎng)度8-20位)；錯(cuò)誤提示的時(shí)候要給用戶(hù)錯(cuò)誤的具體內(nèi)容（例如：登錄時(shí)不能單純?nèi)ヌ崾尽澳斎氲男畔⒂姓`”，需準(zhǔn)確提示是賬號(hào)格式錯(cuò)誤，還是密碼長(zhǎng)度錯(cuò)誤）。

我們先看看表單主構(gòu)成，表單主要由這5部分構(gòu)成：

分組標(biāo)題：表單項(xiàng)較多的情況下建議分組，分組標(biāo)題有引導(dǎo)用戶(hù)完成表單填寫(xiě)的作用。

表單標(biāo)簽：也就是填寫(xiě)或操作內(nèi)容的標(biāo)題。標(biāo)簽規(guī)范的方式時(shí)標(biāo)題后帶冒號(hào)，還是不帶冒號(hào)呢？這個(gè)其實(shí)都可以，沒(méi)有硬性的標(biāo)準(zhǔn)，自定義一個(gè)規(guī)范去執(zhí)行就可以了。

表單域：表單是用來(lái)數(shù)據(jù)采集的容器，也可以視為一個(gè)對(duì)象。包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框、下拉選擇框和文件上傳等，用于采集用戶(hù)的輸入或選擇的數(shù)據(jù)。

提示信息：分為說(shuō)明性提示信息和操作反饋提示。提示信息可以放在表單域里邊（例如：備注的提示“不超過(guò)100字”），也可以在表單域或后邊，還可以收進(jìn)“問(wèn)號(hào)icon”里，鼠標(biāo)hover后給氣泡提示展示信息即可。

操作按鈕：操作按鈕為頁(yè)面的全局操作，為滿(mǎn)足用戶(hù)隨時(shí)對(duì)表單進(jìn)行操作的需求，操作按鈕會(huì)懸浮在頁(yè)面底部。一般情況按鈕最多只有一個(gè)主按鈕，可以有多個(gè)次按鈕。

(1) 分類(lèi)

左標(biāo)簽：優(yōu)勢(shì)-節(jié)約縱向空間，信息表達(dá)明確，多用于web端；劣勢(shì)-橫向空間利用率不高，不適用移動(dòng)端等狹窄空間。

頂標(biāo)簽：優(yōu)勢(shì)-視覺(jué)舒適，節(jié)約橫向空間；劣勢(shì)-縱向空間利用率不高。

行內(nèi)標(biāo)簽：優(yōu)勢(shì)-最節(jié)省空間，多用于注冊(cè)登錄等字段少的表單；劣勢(shì)-輸入時(shí)和輸入后標(biāo)簽消失，令用戶(hù)迷茫（可優(yōu)化為浮動(dòng)標(biāo)簽，在光標(biāo)鍵入時(shí)，標(biāo)簽展示輸入框上），字段多的表單不建議使用行內(nèi)標(biāo)簽及浮動(dòng)標(biāo)簽。

(2) 對(duì)齊方式

左對(duì)齊：從左至右的閱讀順序，符合人們的閱讀習(xí)慣，一般用于詳情的陳列。

右對(duì)齊：也被稱(chēng)為“冒號(hào)對(duì)齊”，右對(duì)齊使得標(biāo)簽和輸入之間的距離固定，有明確的視覺(jué)關(guān)聯(lián)，操作效率高，非常適合表單錄入。

表單域大致分為以下5個(gè)大類(lèi)：輸入、內(nèi)容選擇、日期時(shí)間選擇、數(shù)值范圍和上傳。

選擇適合的控件，不光能在視覺(jué)上做到統(tǒng)一規(guī)范，還能提高用戶(hù)操作效率。

(1) 輸入

文本框：選擇適合的大小，它的大小應(yīng)該向用戶(hù)暗示所需輸入內(nèi)容的長(zhǎng)度，以此減輕判斷負(fù)擔(dān)（注意：文章類(lèi)超長(zhǎng)文本不適用于長(zhǎng)文本輸入框，建議使用富文本編輯器）。

特定前/后綴：涉及到金額輸入時(shí)，當(dāng)用戶(hù)輸入的金額超過(guò)千時(shí)，出現(xiàn)千分位最數(shù)據(jù)進(jìn)行分組，方便用戶(hù)快速識(shí)別金額。

帶icon或按鈕：“日期選擇”和“時(shí)間選擇”一般都附帶icon，便于用戶(hù)快速識(shí)別。帶按鈕的表單項(xiàng)在“密碼輸入”用的最多，可做隱藏密碼和顯示密碼的切換用，因?yàn)槊ぽ敿翱赡軙?huì)出錯(cuò)。

(2) 選擇

內(nèi)容選擇：含單選、多選、選擇器（常用的有下拉單選/多選）、級(jí)聯(lián)選擇（多層級(jí)聯(lián)動(dòng)選擇）、樹(shù)選擇、穿梭框、開(kāi)關(guān)。

1、單選框、復(fù)選框：一般用于選項(xiàng)不多且相對(duì)固定的情況，選項(xiàng)控制在6個(gè)以?xún)?nèi)為宜，用戶(hù)可以一眼看到所有內(nèi)容。單選框只能是其中一個(gè)選項(xiàng)，多選框則可以選擇其中一個(gè)或多個(gè)選項(xiàng)。

2、開(kāi)關(guān)：使用開(kāi)關(guān)控件的條件是選項(xiàng)的性質(zhì)互斥（例如：是和否、打開(kāi)和關(guān)閉、開(kāi)啟和禁用等）；

3、選擇器：當(dāng)選擇項(xiàng)超6個(gè)，就需要考慮用到選擇器了。下拉列表是網(wǎng)頁(yè)中一種最省頁(yè)面空間的選擇方式，單擊下拉按鈕后能看到最多展示的8個(gè)選項(xiàng)，少于8個(gè)則顯示實(shí)際個(gè)數(shù)自適應(yīng)，多余8個(gè)則出現(xiàn)滾動(dòng)條。下拉選擇器根據(jù)屏幕位置決定向下展示或者向上展示。

選擇器適用廣泛，同類(lèi)選項(xiàng)（例如：選擇客戶(hù)、商品名稱(chēng)、貨物編號(hào)等）、增量選項(xiàng)（例如：年份選擇）。

4、級(jí)聯(lián)選擇、樹(shù)選擇：二者都屬層級(jí)選擇，區(qū)別在于級(jí)聯(lián)選好選項(xiàng)后框內(nèi)顯示的是含層級(jí)的內(nèi)容選項(xiàng)，且只能選擇需最子集選項(xiàng)（例如：江蘇省/蘇州市/工業(yè)園區(qū)，不能選擇江蘇省，因?yàn)榍懊娴倪x項(xiàng)只為導(dǎo)航至最子集），而樹(shù)選擇框內(nèi)展示的是單個(gè)選項(xiàng)的內(nèi)容，不展示層級(jí)，但可以選擇任何層級(jí)（例如下圖：浙江省）

日期及時(shí)間選擇：分為日期選擇、時(shí)間選擇、日期時(shí)間選擇，可以是單個(gè)時(shí)間，也可以是時(shí)間區(qū)間；他們很特殊，只為日期和時(shí)間選項(xiàng)而生。

1、日期、時(shí)間選擇：當(dāng)用戶(hù)需要一個(gè)時(shí)間/日期，可以點(diǎn)擊標(biāo)準(zhǔn)輸入框，彈出選擇面板進(jìn)行選擇，或者輸入時(shí)間后自動(dòng)定位到該選項(xiàng)，無(wú)需手動(dòng)選擇。

2、日期時(shí)間選擇：相當(dāng)于將日期和時(shí)間這兩個(gè)選擇項(xiàng)集為一身，在同一個(gè)選擇器里選擇（年月日時(shí)分秒）；下例相當(dāng)于兩個(gè)下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點(diǎn)擊“確定按鈕”旁邊的“選擇時(shí)間”，則切換為步驟2的時(shí)間選擇框。

數(shù)值范圍：

1、滑動(dòng)輸入器：滑動(dòng)型輸入器，展示當(dāng)前值和可選范圍，通過(guò)拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇。

2、步進(jìn)器：也稱(chēng)為計(jì)數(shù)器，僅允許輸入自定義范圍內(nèi)標(biāo)準(zhǔn)的數(shù)字值，當(dāng)自定義標(biāo)準(zhǔn)數(shù)字值為整數(shù)時(shí)，輸入小數(shù)點(diǎn)后回車(chē)，帶小數(shù)點(diǎn)的數(shù)字只保留整數(shù)呈現(xiàn)。上下按鈕也不是每點(diǎn)擊一次數(shù)值±1，可以設(shè)置跳每點(diǎn)擊一次±N，N可以為任何數(shù)字，也可以為小數(shù)。

(3) 上傳

文件、圖片上傳：第一種情況是上傳圖片和文件合在一個(gè)上傳控件里；第二種情況是區(qū)分了圖片上傳和除了圖片之外的其他文件的上傳，這種情況下的圖片成功上傳后是有縮略圖的；根據(jù)需求選擇其中一種即可。要注意的是上傳有四種狀態(tài)：上傳前、上傳中、上傳后的成功狀態(tài)、上傳后的失敗狀態(tài)，UI都需要設(shè)計(jì)出來(lái)，一個(gè)都不能少。

(1) 占位符

占位符就是先占據(jù)一個(gè)固定的位置，等著用戶(hù)往里面添加內(nèi)容的符號(hào)或文字。在鍵入信息前，出現(xiàn)在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正確的廢話(huà)”，因?yàn)榻o不到用戶(hù)任何提示幫助，如果表單項(xiàng)沒(méi)有制定規(guī)則，可用表單項(xiàng)編輯方式占位“請(qǐng)輸入”/“請(qǐng)選擇”，以新增商品為案例：

(2) 幫助信息

幫助信息和占位符類(lèi)似，也是在輸入編輯前給用戶(hù)的提示信息。和占位符不同點(diǎn)在于“幫助信息”不占據(jù)輸入編輯的位置，不會(huì)因?yàn)殒I入信息后消失，屬于表單中的常駐信息。三種方式可以同時(shí)運(yùn)用在一套系統(tǒng)內(nèi)，視當(dāng)前表單情況選定。

(3) 校驗(yàn)信息

校驗(yàn)信息是在輸入后或者提交后，系統(tǒng)對(duì)編輯的信息進(jìn)行的校驗(yàn)，分為前端校驗(yàn)和后端校驗(yàn)兩種。

前端校驗(yàn)：一般校驗(yàn)顯示錯(cuò)誤和格式錯(cuò)誤：必填項(xiàng)、（郵箱、電話(huà)號(hào)、地址）格式、密碼強(qiáng)度等。快速反饋，直接提醒用戶(hù)錯(cuò)誤內(nèi)容，讓用戶(hù)及時(shí)知曉并更改。

后端校驗(yàn)：唯一性驗(yàn)證、驗(yàn)證碼、敏感詞等，觸發(fā)校驗(yàn)請(qǐng)求后系統(tǒng)會(huì)去數(shù)據(jù)庫(kù)查詢(xún)校驗(yàn)信息，再給予用戶(hù)相應(yīng)的反饋。

(1) 分布的位置

表單頂部、表單底部：用于放置全局按鈕，兩個(gè)位置的功能按鈕是一樣的，只是出現(xiàn)的條件不同。默認(rèn)顯示表單頂部按鈕，當(dāng)頂部按鈕因?yàn)轫?yè)面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。目的在于用戶(hù)無(wú)需上下滑動(dòng)到固定位置才能對(duì)表單進(jìn)行操作，省時(shí)增效。

跟隨表單項(xiàng)：這種情況很少用到，一般是需要校驗(yàn)的情況下使用，或者可手動(dòng)增減的表單項(xiàng)。

分組底部：一般是對(duì)于這個(gè)分組進(jìn)行的操作按鈕。

溫馨提示：當(dāng)操作按鈕超三個(gè)時(shí)，可以將相對(duì)低頻的操作按鈕折疊收起，點(diǎn)擊或鼠標(biāo)hover“更多操作”時(shí)下拉展開(kāi)顯示所有按鈕。

(2) 閱讀順序、按鈕層級(jí)、對(duì)齊方式

其實(shí)這三者的規(guī)則都是一樣的，當(dāng)按鈕右對(duì)齊頁(yè)面的時(shí)候，閱讀順序自然是從右向左，而按鈕層級(jí)也是從右向左遞減，比如頂部的提交、保存、取消三個(gè)按鈕；商品列表的“添加商品”和“刪除全部商品”，左對(duì)齊頁(yè)面，閱讀順序和層級(jí)自然也是從左至右。

表單頁(yè)面主要的交互方式有四種：原位編輯、氣泡卡片、彈窗/抽屜、頁(yè)面跳轉(zhuǎn)。表單頁(yè)面在交互方式的選擇取決于表單容量及表單親密度。

原位編輯是輕量型信息采集表單，適用于表單編輯項(xiàng)較少（盡量低于5個(gè)編輯項(xiàng)），且屬于主功能分支的場(chǎng)景。其優(yōu)點(diǎn)在于操作便捷，隨時(shí)啟用與退出，能夠保證用戶(hù)對(duì)主要功能的操作流暢度。其存在的意義在于完善或者增強(qiáng)主功能的操作，而不是打斷。

使用場(chǎng)景：常用于列表及卡片，詳情內(nèi)也可以使用原位編輯（例如：詳情內(nèi)只有A和B可以編輯，且需分別編輯，此時(shí)建議用原位編輯進(jìn)行操作），需要注意的是，盡量不要用在長(zhǎng)文本編輯。

激活方式：信息展示區(qū)域通過(guò)雙擊、單擊、hover或點(diǎn)擊“編輯”按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。最常見(jiàn)的比如：微信/企業(yè)微信修改群名就是單擊激活，列表、表格的點(diǎn)擊“編輯”激活，相比之下hover去激活相對(duì)用的少。

與頁(yè)面的親密度：親密度高，編輯內(nèi)容即為展示內(nèi)容，當(dāng)編輯內(nèi)容不止表格內(nèi)展示的字段數(shù)量，且存在聯(lián)動(dòng)關(guān)系時(shí)，需慎重（例如：“部門(mén)”和“班次”屬于上下級(jí)聯(lián)動(dòng)關(guān)系，列表內(nèi)只顯示“部門(mén)”，而“班次”在詳情頁(yè)面顯示，則不適用原位編輯）。

使用場(chǎng)景：常用于條件篩選的設(shè)置，點(diǎn)擊或hover后顯示氣泡卡片內(nèi)容（建議不超過(guò)5個(gè)設(shè)置項(xiàng)）。觸發(fā)生效機(jī)制可以是設(shè)置項(xiàng)點(diǎn)擊即生效，也可以多個(gè)設(shè)置項(xiàng)選擇后，觸發(fā)操作按鈕生效（操作按鈕建議不超過(guò)2個(gè)），觸發(fā)機(jī)制可以根據(jù)項(xiàng)目實(shí)際需求而定。

與頁(yè)面的親密度：親密度高，所見(jiàn)即所得，編輯前/后都不遮擋列表，用戶(hù)剛剛操做了什么，即在當(dāng)前展示操作后的結(jié)果，讓用戶(hù)感受到一切都在掌握之中，不會(huì)出現(xiàn)斷裂感，交互很友好；

(1) 彈窗

雖說(shuō)設(shè)計(jì)上對(duì)彈窗的使用都是持謹(jǐn)慎態(tài)度的，但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶(hù)更聚焦，且不用離開(kāi)當(dāng)前頁(yè)面就能更快速更容易完成任務(wù)。

其實(shí)該使用彈窗的時(shí)候也是要用的，特別是在B端，如果彈窗能解決的問(wèn)題，不建議頻繁的跳頁(yè)面去操作。如下例：下單錄入涉及添加產(chǎn)品，而產(chǎn)品信息字段又很多，不是一個(gè)模糊搜索就能解決的，此時(shí)建議使用彈窗而不是跳頁(yè)面去操作。來(lái)回跳頁(yè)面頻繁刷新，不如用彈窗選擇操作更為簡(jiǎn)單，在當(dāng)前頁(yè)的彈窗選擇產(chǎn)品，再將產(chǎn)品信息帶入當(dāng)前錄入頁(yè)面，此流程更符合用戶(hù)操作時(shí)的心理預(yù)期。

使用場(chǎng)景：所有頁(yè)面均可，3個(gè)以上的錄入項(xiàng)即可使用彈窗；需要注意保持交互一致性（例如：在列表“新增會(huì)員”點(diǎn)擊觸發(fā)是彈窗，在其他頁(yè)面也同樣要是彈窗）；當(dāng)然也有特殊情況，例如：快捷新增時(shí)只需錄入一個(gè)名稱(chēng)，可以先使用快捷操作添加極少的信息，后續(xù)在編輯頁(yè)面進(jìn)行補(bǔ)充；

與頁(yè)面的親密度：可以有強(qiáng)關(guān)聯(lián)，也可以沒(méi)有關(guān)聯(lián)。有強(qiáng)關(guān)聯(lián)指的是，比如說(shuō)：點(diǎn)擊“新增會(huì)員”按鈕彈出來(lái)的此彈窗，在其他也要用這個(gè)“新增會(huì)員”名稱(chēng)，避免用戶(hù)迷茫（當(dāng)然了，很多新增和編輯其實(shí)用的同一個(gè)彈窗，這個(gè)特殊情況除外）。沒(méi)有關(guān)聯(lián)是指，可以在列表頁(yè)面使用“新增會(huì)員”彈窗，也可以在工作臺(tái)或者其他有需求的頁(yè)面去使用“新增會(huì)員”彈窗。

(2) 抽屜

抽屜彈窗也被稱(chēng)為側(cè)彈窗，彈窗抽屜和彈窗很類(lèi)似，使用場(chǎng)景和親密度都是一樣的。相比彈窗，抽屜的側(cè)邊彈出的交互方式，其操作成本和用戶(hù)使用心理負(fù)擔(dān)會(huì)小很多。

注意事項(xiàng)：如果系統(tǒng)大部分用的彈窗，就優(yōu)先選用彈窗，如果表單內(nèi)增加了更多字段，可以換成抽屜彈窗；

使用場(chǎng)景：超出了彈窗/抽屜的承載量，就要用到頁(yè)面跳轉(zhuǎn)了，一般一級(jí)模塊的設(shè)置項(xiàng)也會(huì)用到頁(yè)面跳轉(zhuǎn)，因?yàn)闀?huì)牽一發(fā)動(dòng)全身。還有初始化入駐也需要跳轉(zhuǎn)頁(yè)面進(jìn)行操作，不光因?yàn)樾枰峤淮罅啃畔ⅲ€因?yàn)楦鞣N認(rèn)證審核需要一項(xiàng)一項(xiàng)進(jìn)行，此時(shí)用抽屜和彈窗承載內(nèi)容顯然不合適，因?yàn)閺棿昂统閷?，代表著快速完成?

與頁(yè)面的親密度：跳轉(zhuǎn)了頁(yè)面，不管是新開(kāi)頁(yè)面還是刷新原頁(yè)面，與原頁(yè)面的關(guān)聯(lián)性已經(jīng)沒(méi)那么強(qiáng)了，只能說(shuō)他們屬于同一條路徑下不同頁(yè)面。

根據(jù)內(nèi)容的多少及親密程度來(lái)決定，我們?cè)O(shè)計(jì)時(shí)應(yīng)選用哪種交互方式，或者可以直接根據(jù)內(nèi)容承載量做判斷也是可以的，從少到多依次此為：氣泡卡片-原位編輯-彈窗-抽屜-頁(yè)面跳轉(zhuǎn)。

排版布局的方式有四種：平鋪、分組、標(biāo)簽頁(yè)、分步驟。根據(jù)內(nèi)容項(xiàng)的多少及實(shí)際需求相應(yīng)合理的布局。

輸入信息的分類(lèi)，是有效的減少用戶(hù)操作疲勞度的方法。分類(lèi)的維度有多種，根據(jù)表單輸入內(nèi)容的相關(guān)性、內(nèi)容的所屬類(lèi)別，可以將同類(lèi)型的數(shù)據(jù)統(tǒng)一輸入，減少用戶(hù)輸入信息的跨度，提高輸入效率。

使用場(chǎng)景：平鋪顧名思義就是指表單項(xiàng)不做分組，全部平鋪展開(kāi)，很多注冊(cè)和登錄都是這種布局。適用于表單項(xiàng)少，或者多但表單項(xiàng)之間親密性很強(qiáng)，就無(wú)需額外分組，直接將表單項(xiàng)平鋪開(kāi)展示，簡(jiǎn)單明了。

對(duì)于內(nèi)容過(guò)多的表單輸入頁(yè)面，分組、分模塊的排版方式讓用戶(hù)感覺(jué)更友好，不是密密麻麻一大片，讓人喘不過(guò)氣來(lái)，而是有條理的布局，張弛有度，疏密有致。用戶(hù)可以在填寫(xiě)好一段內(nèi)容后進(jìn)行心理上停頓休息，減少視覺(jué)疲勞和心理壓力。

(1) 標(biāo)題分組

使用場(chǎng)景：超過(guò)了7個(gè)設(shè)置項(xiàng)，且較為復(fù)雜的表單，標(biāo)題分組之間的關(guān)聯(lián)性較弱，就可以去分類(lèi)歸納表單信息，位的是降低用戶(hù)的認(rèn)知負(fù)擔(dān)，提高用戶(hù)體驗(yàn)。注意：分組內(nèi)組內(nèi)設(shè)置項(xiàng)要有強(qiáng)關(guān)聯(lián)性，否則不能歸為一組，不能因?yàn)樽侄味啵瑸榱朔纸M去分組。

(2) 卡片分組

使用場(chǎng)景：7-15個(gè)設(shè)置項(xiàng)，用標(biāo)題分組不足以給信息做層級(jí)區(qū)分，為了讓用戶(hù)在操作時(shí)更聚焦，也需要給用戶(hù)更明確的操作引導(dǎo)，即可使用卡片分組。

卡片分組之間關(guān)聯(lián)性更弱，分類(lèi)更明確，多個(gè)設(shè)置項(xiàng)，多個(gè)分類(lèi)。需要注意，一個(gè)表單項(xiàng)不要分過(guò)多的卡片分組，不能每?jī)身?xiàng)做一個(gè)分組，這反而會(huì)造成用戶(hù)視覺(jué)壓力和操作負(fù)擔(dān)。

使用場(chǎng)景：當(dāng)標(biāo)題分組和卡片分組都不足以對(duì)表單進(jìn)行分組時(shí)，就可以考慮用tab切換了。每個(gè)設(shè)置都包含多個(gè)錄入，且使用了標(biāo)簽。

注意事項(xiàng)：tab標(biāo)簽的填寫(xiě)沒(méi)有先后順序的規(guī)則，標(biāo)簽頁(yè)彼此之間沒(méi)有特定的關(guān)聯(lián)性，可獨(dú)立去設(shè)置。也就是說(shuō)先填寫(xiě)tab1還是先填寫(xiě)tab2，對(duì)表單的其他tab項(xiàng)沒(méi)有任何影響，不存在聯(lián)動(dòng)關(guān)系。

標(biāo)簽頁(yè)對(duì)應(yīng)的詳情展示：一項(xiàng)一項(xiàng)上下鋪出來(lái)，但如果表單詳情信息過(guò)長(zhǎng)，可以考慮將錨點(diǎn)定位，點(diǎn)擊錨點(diǎn)定位的標(biāo)題即可自動(dòng)定位到該區(qū)域，方便用戶(hù)快速定位瀏覽位置。

使用場(chǎng)景：對(duì)輸入表單進(jìn)行分步驟的處理，可以降低用戶(hù)的操作頻率，給與用戶(hù)一定的休息空間，用戶(hù)會(huì)有階段性的成就感，同時(shí)分步驟的輸入還有利于減少信息的錯(cuò)誤率。如果輸入表單的內(nèi)容較多，同時(shí)輸入內(nèi)容有邏輯上的先后順序，此時(shí)可以考慮將輸入表單進(jìn)行分步驟處理。

利用步驟條，將大型、復(fù)雜任務(wù)拆解為多個(gè)部分，并按照相關(guān)性分組，可以提高用戶(hù)處理的專(zhuān)注度，降低頁(yè)面的復(fù)雜性，減輕用戶(hù)操作負(fù)擔(dān)，降低用戶(hù)出錯(cuò)率，提高用戶(hù)體驗(yàn)。

根據(jù)內(nèi)容關(guān)聯(lián)性的強(qiáng)弱程度來(lái)決定，我們?cè)O(shè)計(jì)時(shí)應(yīng)選用哪種布局方式，或者可以直接根據(jù)復(fù)雜程度做選擇也是可以的，從弱到強(qiáng)依次此為：平鋪-標(biāo)題分組-卡片分組-標(biāo)簽頁(yè)/分步驟轉(zhuǎn)。

提高易用性的方式有以下四種分別為：視覺(jué)清晰、信息降噪、智能、準(zhǔn)確易懂，每個(gè)表單，每個(gè)頁(yè)面都要應(yīng)用這四項(xiàng)準(zhǔn)則，不光是在表單頁(yè)面，所有頁(yè)面都適用。

布局方式-單列布局：常見(jiàn)的表單布局為單列信息展示布局，比如：蘋(píng)果、飛書(shū)、釘釘、有贊、微盟等首選使用單列布局進(jìn)行頁(yè)面排版。設(shè)計(jì)中盡量采用單列布局，是為保證用戶(hù)的視覺(jué)動(dòng)線(xiàn)流暢，不容易遺漏信息；

在輸入項(xiàng)較多時(shí)，每次填寫(xiě)完一項(xiàng)都要鼠標(biāo)選中下一個(gè)輸入框，很容易讓用戶(hù)失去耐心，而單列布局恰好能解決這個(gè)問(wèn)題并提高用戶(hù)體驗(yàn)，輸入完一項(xiàng)按enter鍵可快速切換至下一項(xiàng)，提高用戶(hù)操作效率。

當(dāng)然了按Tab鍵也是一樣的效果，只是，一般情況下，大眾都更習(xí)慣也更熟悉回車(chē)鍵的位置，需要注意的是，長(zhǎng)文本輸入框的屬性里回車(chē)鍵是文本換行的意思，需要區(qū)別設(shè)置兩者的操作機(jī)制。

布局方式-橫向布局：橫向布局也是單列布局，是它的發(fā)散版本。如果出于業(yè)務(wù)方復(fù)雜需求的考慮，必須在橫向增加內(nèi)容，那增加的表單項(xiàng)一定要和前表單項(xiàng)有關(guān)聯(lián)，才可作為分組橫向排列，還需注意不能出現(xiàn)Y軸平行豎向分組（如下圖），避免用戶(hù)迷?；蜻z漏信。

(1) 合理設(shè)置必填項(xiàng)

正常情況下，我們標(biāo)示“*”標(biāo)就是為了提示用戶(hù)此項(xiàng)必須要填寫(xiě)方能提交單據(jù)。

但當(dāng)一個(gè)編輯頁(yè)面的必填項(xiàng)非常多時(shí)，就可以無(wú)需標(biāo)注必填，只標(biāo)明哪些是非必填項(xiàng)就行。

當(dāng)編輯頁(yè)全部都是必填項(xiàng)時(shí)，可在大標(biāo)題處用標(biāo)示必填即可。

(2) 折疊不重要非必填信息

在能完整獲取需要信息的前提下，輸入項(xiàng)越少越好，當(dāng)表單頁(yè)很長(zhǎng)，且有些信息非必填，或者說(shuō)填寫(xiě)后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起，點(diǎn)擊“展示更多”下拉展開(kāi)全部表單項(xiàng)，讓用戶(hù)可以選擇性錄入不重要的信息。

(1) 智能填寫(xiě)

根據(jù)上下文信息可自動(dòng)獲取的，無(wú)需用戶(hù)再次填寫(xiě)。如下例：通過(guò)客戶(hù)名稱(chēng)數(shù)據(jù)庫(kù)可自動(dòng)匹配客戶(hù)手機(jī)號(hào)，或者通過(guò)手機(jī)號(hào)匹配客戶(hù)名稱(chēng)。填寫(xiě)郵寄信息的時(shí)候，只需選擇省市區(qū)，郵政編碼便自動(dòng)填充，減少了用戶(hù)查找郵政編碼的繁瑣（甚至可以提議“郵政編碼”字段直接去掉）。而生日和性別都可以在身份證號(hào)內(nèi)提取。

(2) 智能排序

默認(rèn)高頻：當(dāng)選擇器內(nèi)容超過(guò)5個(gè)選則項(xiàng)時(shí)，可以對(duì)內(nèi)容選項(xiàng)進(jìn)行一定排序規(guī)則（首字母排序、數(shù)字排序或設(shè)置默認(rèn)高頻選項(xiàng)等），方面用戶(hù)提前預(yù)知選項(xiàng)的大致位置，檢索找到相應(yīng)的選項(xiàng)。

(3) 智能聯(lián)想

智能聯(lián)想是給予用戶(hù)鍵入字段的聯(lián)想功能，用戶(hù)少量輸入后進(jìn)行選擇。錄入方式由原來(lái)的輸入變成半輸入后選擇，減少用戶(hù)的輸入成本，提高用戶(hù)操作效率。

自動(dòng)搜索：當(dāng)下拉選項(xiàng)超過(guò)16個(gè)時(shí)，建議加入輸入選擇功能，用戶(hù)可使用下拉選擇，也可以輸入關(guān)鍵字后智能匹配顯示對(duì)應(yīng)的選項(xiàng)?；蛘呖梢栽偌由闲畔⑴判?，根據(jù)點(diǎn)擊頻次進(jìn)行排序，高頻選項(xiàng)前置。

后綴聯(lián)想：一般用于郵箱信息的錄入，當(dāng)輸入內(nèi)容后，自動(dòng)將默認(rèn)高頻的郵箱后綴作為補(bǔ)充數(shù)據(jù)填充在后方，減少用戶(hù)的輸入。

操作直觀(guān)：去除冗余且無(wú)用的部件：切換“開(kāi)關(guān)”操作后會(huì)立即生效展示結(jié)果，無(wú)需與操作按鈕搭配使用，避免造成用戶(hù)的誤解，導(dǎo)致體驗(yàn)不友好。

準(zhǔn)確的錯(cuò)誤提示：反饋提示是頁(yè)面系統(tǒng)對(duì)用戶(hù)的輸入的內(nèi)容進(jìn)行的校驗(yàn)，并對(duì)校驗(yàn)結(jié)果予以展示的提示形式?？煞譃榍岸诵ｒ?yàn)和后端校驗(yàn)兩種。

錯(cuò)誤提示的時(shí)候要給用戶(hù)錯(cuò)誤的具體內(nèi)容，而非簡(jiǎn)單粗暴的錯(cuò)誤提示。例如：登錄時(shí)不能單純?nèi)ヌ崾尽澳斎氲男畔⒂姓`”，需準(zhǔn)確提示是賬號(hào)信息錯(cuò)誤，還是密碼校驗(yàn)錯(cuò)誤。

前端校驗(yàn)：也被稱(chēng)為“即時(shí)校驗(yàn)”，一般是校驗(yàn)顯現(xiàn)的數(shù)據(jù)內(nèi)容，比如字符長(zhǎng)度、格式（是否包含非法字符）、是否為空等。該方式的校驗(yàn)條件多在本地，無(wú)需實(shí)時(shí)向服務(wù)器發(fā)命令而得到反饋。

后端校驗(yàn)：包含“局部校驗(yàn)”和“全局校驗(yàn)”，局部校驗(yàn)：在注冊(cè)賬號(hào)時(shí)，輸入完整用戶(hù)名以后，提示用戶(hù)名是否可用，則為局部校驗(yàn)反饋。全局校驗(yàn)反饋：多指在輸入完成提交或者階段性完成（分步驟跳轉(zhuǎn)下一步）時(shí)，系統(tǒng)給出的校驗(yàn)反饋。在用戶(hù)操作反饋動(dòng)作按鈕后，界面在相應(yīng)位置（一般為單個(gè)輸入框的下方或右側(cè)）一次性給出對(duì)應(yīng)的錯(cuò)誤提示。