整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
單設計不僅僅是把不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了，也需要有需求的支撐、嵌套使用情境、考慮用戶的心理模型。我們將在本系列文章中了解到從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互該如何思考。先進入到上篇：聊聊關于表單的基礎內容。
表單作為B端產品中最基礎通用組件，也是在各個B端產品中出現頻率最高的元素之一。表單的設計特別考驗設計師綜合能力和設計細節的。一定程度上，表單設計的好壞也決定了產品的成敗。
當我被陷入一堆表單設計中時，我開始思考，表單設計到底要遵循什么樣的規律，在設計上如何去做取舍？表單該怎么布局？表單的組成元素有哪些？表單有什么交互規范？超長表單該怎么設計？
接下來跟大家聊一聊我對表單設計的研究及日常工作經驗總結。將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設計師，對表單能有一個更好的了解，從而避免在工作中進入誤區，也希望能給PM們提供一些思路。
如果你認為表單就是指的把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了。
其實不是，表單設計遠遠不止這些，表單本身也是一個小產品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。
表單的概念并非互聯網原創，在傳統行業中，紙質化的表單就占據了非常重要的工具地位；
B端產品通過為表單增加屬性，使得一個個任務表單能夠在動作——狀態機中流轉，就能夠實現業務的線上化開展和管理。
從廣義的定義來講，表單是指用于數據錄入的一切形式。
從狹義上來講，表單在大家更廣泛的認知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。
表單的本質核心是提交數據，所以凡是具備采集數據并完成采集后提交數據的交互形式均可稱之為表單。
在B端產品中，表單是用戶向系統傳遞和修改數據信息的主要方式，同時也是系統獲取用戶數據、響應反饋結果的主要方式，可以說表單是人機交互中重要的數據媒介。
想要做好表單設計首先要搞清楚表單的應用場景，在商業產品應用的平臺上，表單使用場景可以粗略的歸為3大類：數據錄入、數據校驗反饋、數據展示。
1、表單設計目標
表單的設計必須優先考慮為用戶減負，提高效率并簡化填寫流程。
另外表單中組件的選擇需要依據具體的數據類型和具體的業務場景進行合理正確的選用，為用戶提供高效的數據錄入表單，降低用戶操作成本、認知負擔，并提高數據采集效率才是表單設計的根本目的。
賈里德·斯普爾曾經有一個經典案例：修改按鈕為網站年收入增加3億美元。聽起來好像是天方夜譚的事情，但是它確實是事實。
良好的設計如何能為商業創造價值，這是設計團隊一直在思考的問題。有一點是可以肯定的，我們用客觀的數據與嚴謹的實驗，去證明我們設計原則與設計模式，讓它們的設計價值最大化，達到為商業創造價值的目標。
a、減少操作，效率為先
為用戶減負為目標，在完成數據采集任務的時候盡量給用戶帶來最小的操作負擔；表單效率是衡量表單設計優劣的重要指標，通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務。
b、準確傳達，目標明確
表單能夠讓用戶快速定位重要信息和目標選項，表單標題、選項和提示等內容準確傳達含義，表意明確；不要讓你傳達的信息產生歧義。
c、保持對話，及時反饋
信息反饋與提示對表單來說是一種很重要的保證用戶正確填寫數據的方式，對用戶的輸入及時給予反饋，及時告知用戶行為的結果，讓用戶及時感知不同操作的前因后果，并及時響應相關操作；
d、安全可靠，操作可控
表單需要有一定的容錯性，對用戶的錯誤操作具備一定的包容性，有合理的操作后果保證機制，不至于由于意外的錯誤操作造成不可控的嚴重后果，針對復雜表單提供分布或即時保存機制，對不同場景任務提供返回、重置、取消、清空、撤銷等容錯性功能；
表單在設計上的結構有：
1、標題
表示用戶錄入和編輯信息的所屬層級，主要位于表單的左上方或者居中位置。
關于標題的設計，分為三種樣式：
標簽指每個數據輸入域前的解釋文本，用于告知用戶相對應的數據輸入字段的具體含義；
注意點：文字上要求盡量簡潔明了，避免出現有歧義、冗長且難以理解的標簽，用詞方面盡量貼近用戶的使用場景或業務場景，在同一個產品系統內或業務系統內盡量保持相同標簽的一致性。
在做標簽的時候，我們需要給標簽的行高和寬度統一。因為開發在寫這個頁面的時候，是把每一個元素放在一個class統一的div或者span標簽內。因此我們在做設計稿的時候，需要把換行元素考慮進去，即使只有一個字，避免以后二次設計和開發。
對標簽的對齊方式又包含：頂對齊，左對齊，右對齊，這個部分后面會詳細地展開說明。
可交互輸入域，是構成表單的核心內容，是表單用來采集數據的入口。輸入區是用戶交互最多也是最能影響使用體驗的區域，不同類型數據選擇與之相應的錄入方式，對提高表單操作效率和用戶體驗大有裨益。
3.1 文本錄入
文本錄入是表單中最常見的和最基礎的信息輸入方式，為用戶提供提供自定義文本信息的輸入接口。
依據文本內容長度可以分為單行文本框和多行文本域，前者適用于輸入文本字符總數較少的場景，后者適用于輸入文本字符總數較多或者不確定的場景。
3.1.1 文本框
結合不同業務場景及相關經驗，文本輸入在不同的業務場景下有一些注意點：
a、選擇適合的長度
輸入框的大小應該向用戶暗示所需輸入內容的長度，所以長度和內容長度需要相匹配，一定程度上可以減輕用戶的操作負擔；
b. 復合輸入框
輸入內容需帶單位，或可以選擇單位，使用特定前/后綴的復合輸入框。
c. 特殊格式自動匹配
對于某些特有格式的輸入內容，自動匹配內容的特有格式，例如電話號碼、密碼和銀行卡號等；
根據米勒定律（對短時記憶能力進行了定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯），通過用戶的記憶結構來提升用戶的閱讀體驗。
d.特殊數值自動提示
對于金融類產品，在輸入金額數字的時候，當數據較大的時候，建議自動提示數量級及單位，能夠方便用戶識別數值，降低出錯率。
e. 智能補全
對于一些關聯性很強的文本輸入，可以通過智能補全的方式來減少用戶不必要的文字輸入，提高填寫速度又能減少出錯，例如地址輸入。
3.1.2 文本域
多行輸入框在 Ant design 中被定義為文本域。結合不同業務場景及相關經驗，文本域在不同的業務場景下有一些注意點：
a、明確提示限制條件
對于有輸入限制的文本輸入，給予用戶明確的輸入提示，增加用戶感知，降低用戶出錯率；
b、文本域自適應
對于多行文本框建議使用可拉伸的自適應高度的文本域，比固定高度的內滾動文本域要好，
從用戶體驗講，可變化的文本框適用于各種用戶的閱讀習慣。同時，因為固定文本框常常會出現滾動條，會使頁面出現多個滾動條，給用戶的使用操作上帶來一定困擾。
在做表單域的行內信息換行時，我們需要給出橫向字數寬度，和上下左右的間距。超出部分是自適應高度，還是顯示滾動條，需要標注出來，并且要指定最小行數，和最大行數。
3.2 選擇錄入
選擇錄入是為用戶預先提供了一定的選擇范圍，指定范圍中選擇目標選項進行錄入，依據選項類型可分為：
單選、多選、選擇器（常用的有下拉單選/多選）、級聯選擇（多層級聯動選擇）、樹選擇、穿梭框、開關。
a、單選框、復選框
一般用于選項不多且相對固定的情況，選項控制在6個以內為宜，用戶可以一眼看到所有內容。
單選框只能是其中一個選項，一般會默認一個選項選中。多選框則可以選擇其中一個或多個選項。
b、開關
使用開關控件的條件是選項的性質互斥（例如：是和否、打開和關閉、開啟和禁用等）；
c、選擇器
根據選擇類型，可以分為單選擇器、多選擇器、級聯選擇器以及樹選擇器4種類型。
優勢：占用空間小，在展開所有選項后，可以按重要程度排列。
劣勢：當選項過多時需要滾動，會放慢用戶輸入速度；不點擊下拉，用戶不知道選項都有什么，不方便比較。
適用場景：適用于選項個數較多（5個以上）的場景和有默認選項的場景；
3.2.1 下拉選擇
即下拉列表，其允許用戶從預定的列表中選擇一個或多個選項，為用戶在選項的數量上提供更多的可能性。這里注意一些 特殊類型的選擇器。
a、自定義多選選擇器
允許用戶自定義添加選項，例如在允許用戶添加自定義標簽類場景中使用。
b、彈框型選擇器
列表選項過多，在下拉面板中展示體驗感差，那么就可以選擇彈框型選擇器的彈框來承載更多的數據信息。
c、搜索型選擇器
用戶的記憶程度不同，一部分用戶可以通過主動搜索獲取選項，一部分用戶可以通過在彈窗中直接選擇獲取選項。
d、表格選擇器
單一維度信息無法讓用戶做出選擇，需要為用戶呈現更多的數據信息才能讓用戶做出合理判斷時，使用可以展示更多數據信息的表格選擇器。
對于選擇錄入，結合不同業務場景及相關經驗，選擇錄入在不同的業務場景下有如下設計要點和使用建議：
避免默認：盡量避免列表設置默認值，除非業務場景中絕大部分用戶將選擇該默認選項，尤其是必填字段，因為有默認值的表單，用戶一般會快速掃描瀏覽，過程中可能會跳過默認項，進而增加犯錯幾率；
多項搜索：當下拉選項列表中選項較多的時候建議增加關鍵字聯想檢索功能，方便查找目標選項；
提示明確：提示信息要明確，避免模糊的提示文本，讓用戶明確知道自己選擇的是什么；
3.2.2 日期/時間/日期時間選擇器
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區間；
日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
時間段選擇：為用戶提供了一種可視化的方式去瀏覽和選擇一個日期、一個時間、一個日期時間或日期范圍。
3.2.3 級聯選擇、樹選擇
二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：廣東省/廣州市市/天河區，不能選擇廣東省，因為前面的選項只為導航至最子集）
而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如：天河區）
如何選擇呢？
3.2.4 滑塊選擇
滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。
滑塊選擇這種交互特點使得在設置音量、亮度等某一個維度的強弱等級的時候是一個比較好的方案，依據數值特點可以分為三種類型，分別為單點連續滑塊、區間連續滑塊和單點間續滑塊。
優勢：便于用戶快速瀏覽大量的選項，提供流暢的用戶體驗。
劣勢：數值選擇具有較強的不準確性，難以精準操作
使用場景：適用于輸入結果相對模糊或不準確的業務場景。
用戶可以在一個連續或非連續的區間內，通過滑動錨點來選擇一個合適的數值或范圍。需求精度要求不高的場景下使用「連續滑塊」可得到更靈活便捷的操作；需求精度要求高的場景下可配合「數字輸入」使用。
3.3 步進器
也稱為計數器，僅允許輸入自定義范圍內標準的數字值，上下按鈕也不是每點擊一次數值±1，可以設置每點擊一次±N，N可以為任何數字，也可以為小數。
3.4 穿梭框
穿梭框較列表選擇的區別在于其將備選和已選分別置于選擇面板的左右兩欄，能夠以很直觀的方式在兩欄中移動元素完成選擇行為。
兩種特殊類型的穿梭框：
3.5 評分
當需要為內容進行評分時使用。
文件上傳為用戶提供將本地文件上傳到系統服務器上的入口，依據上傳方式可劃分為點擊上傳、縮略圖上傳、拖拽上傳三種形式
1、直接上傳
即點擊后通過桌面系統彈窗選擇文件并上傳，多用于EXCEL數據表文件、WORD文件等形式；一般用于不需要預覽效果的文件上傳，文件上傳需要提供明確的文件大小和文件格式。這種情況是上傳圖片和文件合在一個上傳控件里。
分為需要手動點擊頁面上的上傳按鈕才能完成上傳動作和自動上傳兩種
2、顯示縮略圖上傳
一般用于需要顯示預覽效果的文件上傳，同時選擇文件后直接完成上傳動作。文件上傳需要提供明確的文件大小和文件格式，多用于圖片、PDF等文件，一般還可以直接在縮略圖片上賦予其他的交互 (查看、刪除等)。
3、拖拽上傳
用戶拖拽文件到指定區域即可完成上傳，也支持點擊上傳。文件上傳需要提供明確的文件大小和文件格式。
1、選擇框優于輸入框
選擇框為用戶提供了備選的選項，用戶只需要點擊即可完成數據錄入，而輸入框則需要用戶手動自定義輸入，操作復雜度和成本明顯高于選擇框，所以優先考慮選擇代替鍵盤輸入，一方面簡化操作，另一方面也減輕用戶認知和記憶負擔；
2、量少對比優選單/復選框
單/復選框較適用于選項較少（5個以內），同時選項之間較為類似需要強調對比時，可以優先選擇單/復選框，此外當選項能見度和要求快速響應的時，也可以優先考慮單/復選框，能夠直白地提供待選選項，直接選中目標選項，提升輸入效率；
3、量大優先下拉選擇
當選項較多的時候，超過10個，甚至更多的時候，無法直接下拉展示的時候建議提供模糊匹配和排序規則，方便用戶提前預知選項位置或通過關鍵字模糊檢索目標選項；
提示信息是指在用戶輸入信息的過程中提示用戶輸入狀態的輔助信息，提示信息的設計原則：先預防、后糾錯
根據輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個階段，依據用戶信息輸入階段，可以將提示信息分為三類：輸入前的引導類提示信息、輸入中/后的反饋類提示信息，前者則包括幫助性提示、輸入性提示，后者則包括錯誤性提示、反饋性提示。
1、輸入前-引導信息
一般是在用戶輸入數據之前就給予用戶的信息，目的是幫助和引導用戶完成數據輸入，防止用戶在輸入時出錯。
1.1 幫助性提示
在用戶填寫表單前對表單填寫內容進行解釋說明的提示信息，并將其置于表單或者某一個輸入域的前面，一般分為全局提示與單項提示。
需要注意的是，表單中應盡量減少幫助文字內容，不要依賴幫助文字來彌補表單難以理解的缺點，也避免稀釋表單重要信息。幫助文字最適合解釋用戶不熟悉或者需要特定的操作和內容。放置的位置通常在毗鄰輸入框的位置。
① 全局提示
全局提示一般位于整個表單的最開始，是對整個表單的解釋說明，包括信息的用途、安全性、保密性等，以此消除用戶不信任。
② 單項提示
單項提示對應單個輸入域，只對此項輸入域進行解釋說明，根據格式塔原理，定位精準便于用戶理解。
單項提示也可以選用不同的布局，分別有提示圖標在鼠標haver時氣泡提示、輸入框下方文字提示、輸入框后方文字提示、單機輸入框氣泡提示4種提示布局。
1.2 輸入性提示
輸入性提示信息即占位符，直接展示在輸入項中，是對某一個輸入域的內容進行提示，當用戶輸入時文本框在獲取焦點后提示文本隱藏，如果是大篇幅的解釋性內容應放在幫助性文字中。
有示例型占位符和通用型占位符兩種。屬于是一種輕量化的提示信息，與其他提示信息相比，視覺負擔較小，占用空間更小，與輸入內容的關聯性更強。
占位符設計時，需要注意的：
注意1：有效提示
提示文字最好能簡潔明了給出有效的提示信息。讓用戶能在上下文中獲取信息，幫助他完成輸入。
用戶填寫表單時最容易出現的問題就是不知道填寫什么格式，例如民族填寫“漢族”還是“漢”；生日填寫“1997-06-11”還是“199年6月11日”這里可以提示具體的填寫示例幫助用戶理解。
注意：必不可少
長期的占位符已經給用戶培養了使用習慣，沒有占位符，用戶在輸入的時候會抱著試一試的心態去點擊，會疑惑是不是應該在這里輸入，不夠直接清晰，對用戶來說是很不友好的。
2、輸入后-反饋信息
反饋提示是在用戶輸入時或輸入后對輸入內容進行的反饋，提示當前輸入域所填寫的內容是否符合填寫規則。
系統狀態的可見性 包括“用戶知道自己在做什么”、“系統在做什么”、“系統進行到了哪一步”、“用戶當前所處環節”等。應當始終為用戶提供適當且及時的反饋，避免用戶執行錯誤操作。
反饋機制的設計原則：預先提示，減少出錯；
①輕量。遵循【告知但不打擾】的基本原則；
②清晰的文案。反饋內容需要明確表達目的及操作后果，錯誤提示需要說清錯誤原因及改正方式；
③保持系統中所有相同事件反饋方式一致，利于培養用戶使用習慣和心理預期。
④就近原則。反饋出現在操作點最近的地方時，最容易被注意到且容易被操作的。
反饋類提示信息包括錯誤性提示和反饋性提示，前者專指錯誤類的信息提示，后者既可以包括錯誤類的反饋提示，也可以包括警告或者正確類的反饋提示。
2.1、錯誤性提示
在填寫表單時，用戶免不了出錯。錯誤消息讓用戶知道無法繼續進行，并且告知如何改正。
2.2、反饋類提示信息
反饋提示一般有正確、錯誤、警告三種狀態。其中，正確狀態通常不給予任何提示，也可采用圖標進行反饋，讓用戶感受更加直觀；反之當用戶錄入的內容與規則不符時，給予錯誤提示信息。警告狀態往往與文本框相結合，當字數超過規則的限制時，給出相對應的反饋。
2.3、校驗形式
在產品設計中我們還需要了解反饋信息的校驗方式，校驗方式主要分為：前端校驗、后端校驗。
2.4、觸發條件
觸發條件是說檢驗的提示信息在什么節點（填寫時、失焦時、點擊提交時）進行提示，這里分為單項觸發、提交觸發。
單項觸發-即時報錯
觸發提示的條件是每填寫完一項時，校驗用于輸入項較多，且某個輸入項有先決條件，會對接下來的輸入產生影響；
提交觸發-輸入完成后報錯
觸發條件是填寫完表單點擊“提交”時統一校驗，用于表單體量較小出錯率較低的表單頁面，給出所有不合規則的表單信息，根據具體的提示內容可以是單項提示也可以全局提示；
關于反饋信息的如何選擇位置，我們下一篇詳細聊聊。
操作按鈕常規意義上指的是“完結”表達操作的按鈕，常見在一些較簡單的表單場景，是對表單內容的反饋，包括提交或不提交。
關于按鈕的分類及各種狀態：
并且對于每一種按鈕，都可以分為常規和禁用兩種狀態。禁用狀態的出現一般是表單所呈現的內容未達到能夠觸發按鈕點擊。同時注意一個頁面只保留一個主按鈕。
1、按鈕位置
在復雜些的表單中，分別會在header區、body區、footer區放置影響全局屬性、僅影響跟隨對象、有“完結流程”屬性的按鈕。
1.1 表單頂部/表單底部
用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現的條件不同。默認顯示表單頂部按鈕，目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。
1.2 跟隨表單項
需要滾動條滾動到底部顯示操作按鈕，一般用于大部分表單都可以一頁顯示的情況，為了避免編輯后忘記點確定就跳轉頁面，會給表單有修改是否保存的提示彈窗。
1.3 分組底部
對每個分組表單進行的操作按鈕，常用于只需要查看不需要經常編輯的表單。
2、主按鈕禁用策略
對于主按鈕是否采用默認禁用取決于表單的表單項數量，有兩種策略：禁用策略和校驗策略，
當表單項較少的時候，一般在3個以下時，主按鈕采用禁用策略，當有數據錄入的時候則啟用主按鈕，一來便于用戶理解，二來也是對用戶操作的一種反饋；
當表單項比較多的時候，一般超過5項，或者有必填項（必填和非必填同時存在）時，主按鈕建議采用校驗策略。
因為表單項較多的情況下，往往是必填和選填同時存在，若采用禁用原則，則必須是所有必填項全部非空才能啟用主按鈕，這時主按鈕的啟用條件不易被用戶察覺，容易造成用戶困惑，不知道該如何填寫才能啟用主按鈕，采用校驗原則可直接告知不具備操作的原因，因此采用提交時校驗反饋的做法更合適這種多表單項的場景。
3、按鈕的主次按鈕如何設計
表單的動作分為主動作和次動作。例如提交、保存或者繼續等完成表單填寫的動作屬于主動作，取消、重置等允許撤銷輸入的屬于次動作。
如果無法移除表單中的次動作，我們在設計時進行視覺區分，盡量弱化次級動作按鈕的樣式，需要注意的是，在《web表單設計》一書中，測試了幾種主動作和次動作的組合。
從閱讀順序、按鈕層級、對齊方式綜合測試，結果表明在幾種設計方案中，方案A的眼球固定時間較短，完成任務效率更高。方案B，人們的眼球定位時間最長，這是因為人們期望按鈕按照垂直視線左側排列，而不是四處尋找按鈕。方案C中，很多人誤點擊了取消按鈕。
可以發現，說明完成的路徑很重要。主動作和輸入框對齊會減少填寫表單的時間。所以若無特殊考慮，方案A是最佳選擇。
另外，表單中的微文案也很重要，無論是標簽、還是占位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時需要消除用戶的疑慮，在整個流程中，做出更快更準確的抉擇。
文章很長，感謝您的耐心閱讀。表單系列第一篇，我們主要聊聊關于表單的基礎內容，希望對你有所幫助。
因為篇幅過于長，剩下的三個部分我們留在下一篇。
下期預告：表單基礎知識之：表單常見的布局樣式和交互形式
參考文獻：
1、《web表單設計》
2、來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
3、表單設計需要注意 http://t.cn/EhMmZPf
4、表單設計http://www.woshipm.com/pd/4147841.html
5、《Ant Design表單設計》
本文由 @三原設計 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
表單是一個包含表單元素的區域，使用表單標簽（<form>）定義。
表單元素是允許用戶在表單中輸入信息的元素，主要負責數據采集功能。
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背后的工作流程。——ANT Design
五大要素：標簽，輸入框，輸入反饋，動作，幫助信息
在填寫表單之前：
給用戶明確期望的進程提示，表單起始頁提示用戶要做什么準備，比如身份證、駕照、護照、銀行卡等，不要等到后期發現缺失必要信息而無法繼續。
宏觀排序：
1. 避免將標簽作為占位符，占位符不可替代字段標簽，建議使用浮動（或自適應）標簽floating labels，占位符文本（提示文本）一般來說它弊大于利。標簽作為占位符文本，輸入時提示文本自動消失，容易造成用戶短期記憶的壓力以及錯誤；
NN Group的研究表明空字段對比有文字的字段更吸引用戶注意，用戶更可能跳過那些有提示文本的字段，因為掃描式的瀏覽很容易誤會框內已經被輸入了文字。
占位符文本可以使用比普通的文本更淺的顏色，但容易導致對比度不符合W3C Web內容的可訪問性指南（正常文本比4.5:1）。此外，占位符文本不支持輔助殘疾人的設計（如屏幕閱讀器），這會讓這部分用戶填寫表單變得很困難。
（浮動標簽樣式）
2.標簽的命名要易于用戶閱讀和理解，避免模糊的描述給用戶造成困擾；正確區分必填字段和選填字段；
3.選擇合適的對齊方式；
右對齊方式標簽的表單瀏覽時間僅次于頂部對齊標簽的表單，網頁高度有限的話推薦這種對齊方式。采用左對齊標簽方式的表單是三者之中瀏覽時間最長的，卻能放慢用戶的速度閱讀，讓其仔細考慮。
（對齊方式概覽）
Tips：
1. 關聯標簽和輸入框，給出具體的輸入要求或特殊格式規范；內容長度和輸入框長度保持對應，利用可供性暗示填寫方式，為用戶提供有意義的暗示；更大的文字輸入框、適度的留白空間會讓人更有填寫的欲望。避免一些不必要的輸入，減少用戶對不必要問題的反感，提高用戶滿意度，降低操作的錯誤率。
2. 自由填寫支持靈活多樣的格式，提高容錯率。
輸入字段（Input Fields）觸發對應鍵盤類型，如手機號、日期、郵編、卡號等彈出數字鍵盤
（自動編排數字組合）
3. 選擇填充的表單格式（除了常規的文字框Text Field輸入）可提供搜尋功能的下拉式選單，輸入內容即時進行篩選、智能聯想，輸入與點選結合，快速方便。
TAB選項一次點選，效率高，選項低于6個可全部呈現；選擇值只有2-3個時避免使用下拉框，建議使用單選樣式。下拉框操作需點擊兩次，但包含多項選擇時更節省空間。
（時間選擇器）
4. 填寫效率：自動填充 > 選擇填充 > 自由填充
預填充（Pre-Fills）設計時可考慮：默認值、可選值、常用值、歷史值、上次填充值
智能默認，設置滿足多數人需要的默認選擇，能為用戶節省時間，提供參考意見保證默認選項符合大多數用戶利益，比如默認用戶同意條款。
（默認勾選）
（主、次動作區隔）
作用：有效說服用戶填寫表單，剔除負面干擾，消除用戶疑問，在隱私保密或安全方面獲取信任
（簡潔的幫助提示文本）
1.給予恰當的輸入限制，限制用戶的行為（如在預定機票時返回時間無法選擇出發時間之前的日期，出發城市不能跟到達城市一樣等），將表單填寫規則標注在明顯區域，或提供自動修正來預防犯錯；
2.用戶填寫完后即時校驗，進行有效的拼寫檢查，名稱，地址等特殊字段忽略此功能；指明出錯的內容，讓用戶能及時修改、補充缺漏的信息，采用高亮且精準的錯誤呈現形式，如粗邊框、粗體文字提醒、下劃線、斜體，不局限于色彩這一元素；若包含多個錯誤反饋，可另外在頂部增加橫幅統一列出全部提示；
（錯誤反饋）
3. 可將動作按鈕、跳轉過程、出錯提示/完成狀態提醒設計成合一的多態按鈕，簡潔實用。
表單內容設計之后:
（背景干擾）
保存表單進度。當表單過長，一些特殊原因導致表單關閉，如網頁崩潰、用戶誤操作，提供保存表單進度功能，再訪問表單時保留上一次的填寫進度。
本文由 @倒爺001 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
TML是什么？HTML能干什么？HTML怎么用？
C認證今天為你帶來（1）HTML常用到的知識點的使用規則；（2）獨立開發一個簡單的響應式的頁面，零基礎介紹HTML，讓你從入門到精通輕松掌握web開發語言，玩轉HTML！
C站（CSDN）軟件工程師能力認證上線47天，來自全國130所高校，自發組建的學習小組當前已破百！114個學習小組，基于“明確路徑+任務領取+刻意練習+小組學習+大咖指導”的學習模型，實現了面向實踐、任務驅動、共同成長的目標。
越來越多的同學已加入學習小組的大家庭，百舸爭流，團戰群雄，我們一直在等你！
你的努力+C站的陪伴=pass卡！
現已有四所高校的6位同學通過C1認證考試，在此C站為通過考試的同學頒發證書：
南開大學濱海學院的郭同學、吳同學、朱同學，河北工程大學的趙同學，河南大學的崔同學，長春大學的董同學
下面分享這些同學的高光時刻，也祝愿大家順利通過接下來的C4考試！
新人榜
今日新建9個學習小組，組名分別是：101、后援團、我要進華為、汪汪隊、鎮站之寶、C站1組、Dream Team、天天向上、奇思妙想，歡迎各位新同學加入C站學習小組大家庭！
照例分享新建小組群內互動精彩瞬間，小組成員共同制定學習目標和學習任務，互相督促、取長補短，從而快速掌握任務核心知識點。
小組成員遇到困難尋求組內大神的幫助，對于創建的程序提出問題，在群內實時獲得解答，最終促成任務的順利完成~
成果榜
今天也有組長帶頭學習、主動完成任務來展示本組的學習成果哦~ 這次是IT小團隊的張組長與允異組的艾組長發布博客：
富文本編輯器實現音頻視頻的插入以及表格隔行換色
HTML和CSS——初步認知
問答官
今天，金剛葫蘆娃隊小組的劉同學就【HTML】提出相關的問題，為了解答同學們的疑惑，小編特地聯合業界專家整理了關于【HTML】的精選文章40篇，快來查收吧！
【HTML零基礎入門教程（詳細）】
·【Html入門練習 】
· 【HTML所有知識點全面復習】
·【HTML入門與進階以及HTML5】
·【HTML 網頁制作特殊符號代碼大全】
·【HTML簡單網頁代碼大全，實用！】
·【HTML全部標簽簡介】
·【html字體顏色】
·【html網頁字體顏色代碼大全】
·【HTML圖像標簽、文本、表格的顏色及其背景色】
·【HTML——tab標簽】
·【HTML速寫之Emmet語法規則】
·【Html獲取Url參數】
·【HTML網頁調用本地Python程序】
·【如何讓在Html中特殊字符不被轉義（源碼輸出）】
·【HTML簡單登錄頁面代碼】
·【HTML5表單中password輸入框的文字顯示與隱藏實現】
·【HTML中讓表單input等文本框為只讀不可編輯的方法】
·【在html頁面實時顯示系統時間】
·【HTML5新控件 - 日期和時間選擇輸入】
·【HTML實現獲取驗證碼功能】
·【HTML表格制作】
·【HTML表格跨行、跨列操作(rowspan、colspan)】
·【html實現動態在線預覽word、excel、pdf等文件】
·【html頁面實現文件上傳】
·【HTML頁面實現自動刷新的2種方式】
·【HTML中有一個button,如何讓它點擊后跳轉到指定頁面或動作】
·【HTML頁面-------3秒之后自動跳轉的3種常用的實現方式】
·【HTML導航欄的四種制作方法】
·【html怎么在網頁標題欄上添加圖標】
·【html頁面引入公共頭部和尾部】
·【純HTML——寫一個簡易的搜索框】
·【HTML中下拉框的簡單介紹＜Select＞＜option＞】
·【html實現彈窗】
·【HTML5----響應式（自適應）網頁設計（自動適應屏幕大小）】
·【Html設置網頁背景圖片】
·【Html筆記——實現一組圖片循環且首尾相連的滾動效果】
·【html5視頻作為頁面背景】
·【在html中添加背景音樂】
·【html聊天界面】
————————————————
版權聲明：本文為CSDN博主「高校俱樂部」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
