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