表單設計（html表單設計）
本文目錄一覽：
釘釘如何表單設計？
1/9 分步閱讀
表單建立方法，來到了APP，點下【工作】，如圖。
2/9
【工作】界面，我們接著來點擊下【表單大師】，如圖。
3/9
【表單大師】頁面，我們接著可以點下【創建表單】，如圖。
4/9
【創建表單】界面，輸入表單標題，如圖。
5/9
創建標題后，我們可以選擇模板，也可以選擇非模板，小編就選擇模板了，接著點下【選好了】，如圖。
6/9
這些模板有設置好了的，不好，可以刪除，不夠，點下【添加組件】，如圖。
7/9
選擇要添加的組件就好了，如圖。
8/9
我們接著建立好了，點下【保存】，如圖。
9/9
保存成功就可以使用了，如圖。
航天橋北大青鳥分享提高用戶體驗的八種表單設計技巧？
表單功能無論是在網頁設計還是app軟件開發領域都得到了大量的使用。
今天航天橋北大青鳥就一起來了解一下，符合用戶體驗的表單設計需要滿足哪些條件。
1、表單標簽需采用合適的展現形式根據表單的運用場景，標簽應采用對應的展現形式，常見的展現形式有以下三種：左標簽、頂部標簽、行內標簽。
A.左標簽在一些網頁表單當中，標簽局左是常見的一種形式。
左標簽的展示形式給人一種秩序感，也便于用戶在填寫表單的過程中快速的辨別標簽內容。
左標簽的這種形式一般用于網頁當中，不適合在手機端或者小屏下的移動端出現，因為小屏幕的尺寸有限，標簽居左會占用較大的空間，輸入框就會受限。
B.頂部標簽頂部標簽指的是標簽位于輸入框上方，這種形式一般出現在一些移動端當中。
頂部標簽可以使輸入框的寬度變大，用戶在填寫信息也可以比較得到完整的展示。
但這種布局方式也有一個缺不好的點，就是這個表單可能需要滾屏，用戶才可以看完。
C.行內標簽行內標簽常常出現在手機端的注冊界面當中，這樣的設計可以節省頁面空間，所以大部分app的界面設計都采用這樣的設計。
當然，部分網站pc端的表單設計中也會用到這種設計。
2、英文標簽避免全部大寫一些英文界面的表單設計，我們要避免標簽的全大寫。
全部大寫的標簽容易造成閱讀和瀏覽上的困難。
3、特殊標簽需使用合適的輸入框長度對于特定的標簽，像驗證碼、郵編這樣的標簽，在設計的時候需要采用合適的輸入框長度。
畢竟這樣的輸入框是用戶可預見的，所以輸入框的長度可以不需要太長。
4、復選框排列需注意在表單中常出現復選框的設計，這樣的情況需要特殊處理。
比如在注冊的過程中，會有性別的選擇，所以通常設計該表單的時候我們會將男女橫排在一行。
但是對于內容多的情況下，就建議采用豎排的排序方式。
5、主按鈕和輔按鈕需要明確的區分在表單提交的時候，出現多個按鈕的情況下，需要做明確的區分，這樣有利于用戶在操作過程中方便辨別操作步驟。
表單設計的基本原則-1
我們知道，表單至少有三個基本要素：標簽、輸入框和動作。每一個要素的設計好壞都會對表單產生影響。本文先來說說設計一個簡單、易用、高效的表單的基本原則。
用戶在填寫表單時，無論操作后成功與否，都應當及時告知用戶。
1. 成功反饋
常見的成功反饋有非模態彈框和落地頁兩種。
需要注意的是：成功反饋不要阻礙用戶進程，而是鼓勵用戶采取更多行動。
可以采用非模態彈框形式給予用戶輕量型的提示。如下圖是喜馬拉雅APP的登錄表單，當用戶輸入正確的驗證碼后，toast提示正在登錄，登錄成功后toast提示登錄成功并引導用戶設置密碼。
成功反饋最好能明確告知用戶下一步操作是什么。這樣能夠幫助整個流程形成閉環，降低用戶跳出率。下圖是人人貸APP申請貸款額度表單：
由于完成申請需要經歷5步操作，因此必須提供清晰的引導和積極的反饋才能幫助用戶順利完成，人人貸在這里做的比較好：通過“識別成功，快點擊下一步吧“的反饋和引導激勵用戶完成表單。這也是另一種常見的成功反饋——落地頁的好處之一。它將提示融入到流程中，能夠更好的引導用戶進行下一步操作。
綜上，toast較適用于單一的表單給予輕量的提示，落地頁較適用于多個表單分步驟展示時，引導和激勵用戶繼續下一步操作。
2. 錯誤提示
用戶在操作時出現錯誤是在所難免的，我們可以用更友好的方式幫助用戶發現“錯誤”，改正“錯誤”：
（1）明確告知用戶出現錯誤的位置及解決辦法
如果用戶在填寫表單的過程中出現錯誤，則必須明確告知出現錯誤的位置，錯誤的原因及解決辦法。試想，你花費好長時間填寫完一個長表單，正當你覺得勝利在望準備提交時，忽然告訴你出錯了無法提交，但是你不知道哪里出錯了，你不得不從頭到尾檢查一遍，如果還沒有找到錯誤的話，那簡直要崩潰了。如果表單出現錯誤，則要明確告知用戶錯誤的位置、原因及解決辦法。下圖網易云課堂的例子就比較好：
將錯誤消息放到相關元素旁，幫助用戶快速定位錯誤的位置；同時告知用戶錯誤原因，便于用戶及時改正錯誤。這里需要注意，如果出現錯誤的輸入框在一屏以外，則應跳到表單出現錯誤的位置。如下圖：
還是剛才的表單，點擊按鈕后，頁面定位到出現錯誤的位置，幫助用戶在長表單中快速找到錯誤并改正。
（2）采用“雙重視覺強調”幫助用戶發現錯誤
我們的設計應該考慮到一些特殊用戶比如色盲人士，如果只改變標簽文字的顏色，可能不足以引起他們的注意，為了確保用戶能夠發現錯誤，建議采用雙重視覺強調，即：輸入框紅色+紅色文字提示；標簽紅色+輸入框下方紅色指導文字；圖標+紅色文字；背景色+指導文字。下圖是錯誤提示采用不同類型的雙重視覺強調：
這里需要說明，錯誤提示也可以用模態彈窗的形式，但不是好辦法，也不適合表單。因為如果使用模態彈窗，錯誤消息無法與輸入框聯系在一起，且關閉彈窗后用戶必須要記住彈窗內容才行。
（3）盡量避免用戶犯錯
除了幫用戶盡快修正錯誤之外，我們還可以通過一些方式避免用戶出現錯誤，讓表單填寫更順暢。比如：把輸入項改成選擇項；減少輸入項；帶默認值的輸入項……等，此處暫不具體介紹，詳見下文第三條“減少多余輸入”。
1. 當問題的 “ 答案 ” 不止一個時，應當為用戶提供建議以幫助用戶確認答案
我們在設計表單時，有些問題的答案是不唯一的，比如用戶注冊時需要設置昵稱，雖然答案是不唯一的，但依然要遵守一定的規則。因此，用戶在操作時對答案進行即時校驗同時提供建議，能夠幫助用戶盡快確認答案，減少不必要操作。
下圖是的注冊頁面，當用戶輸入一個已被占用的昵稱時，給出了錯誤提示，雖然提示及時且明顯，但忽略了一點——為用戶提供建議。由于設置昵稱這個問題的答案是開放性的，因此應當為用戶提供建議以幫助其更快地確認答案，否則用戶需要不斷的嘗試才有可能找對一個未被使用的昵稱，無形中增加了用戶的操作負擔。
再看下圖是百度貼吧的注冊頁面：
同樣是設置昵稱被占用，在提示錯誤的同時，基于用戶已經輸入的內容給出建議答案，用戶可以選擇重新輸入，也可以直接使用建議答案，無需不斷嘗試就可以快速找到滿意的昵稱，提高了注冊表單的填寫效率。
2. 即時驗證，時機是關鍵
前文說過，用戶填寫表單時給予及時驗證和反饋是比較好的體驗，但是驗證和反饋的時機很關鍵。
下圖是人人貸申請出借的表單，未輸入金額時提示輸入1000元的整數倍，當用戶剛輸入1時就給出錯誤提示，這樣分散了注意力，容易使用戶有挫敗感。
正確的做法應該是選擇合適的時機給予用戶及時的反饋。如果是長表單則可以在焦點離開輸入框后進行校驗和提示；如果是短表單則可以通過按鈕或技術來實現，比如：未輸入正確金額，按鈕不可點擊，或者技術限制用戶不允許輸入小數點等方法。
3. 如果有輸入限制，應當采用實時、動態更新的方法傳遞輸入限制
表單設計中，有些問題沒有明確的答案，但是有明確的限制規則，比如：限制用戶輸入內容的字符數，用戶設置密碼的長度和安全性提示等。此時采用即時驗證，能夠避免由于限制而產生的潛在錯誤。
如下圖是美團提交意見反饋的表單，問題描述限定在200字以內，當用戶輸入內容后，右下角的計數器會實時更新顯示當前已輸入和限制字數。
另一個常見的限制就是注冊表單的設置密碼功能，下圖是新浪微博的注冊頁面，在用戶輸入密碼的過程中即時驗證，提示用戶密碼的正確性及安全性。
1. 基于已有內容進行智能判斷
根據用戶已經輸入的內容智能判斷其他相關內容，從而減少用戶輸入，降低出錯率。
下圖是百度錢包和恒昌財富開通銀行存管的表單對比：
百度錢包在用戶輸入銀行卡號后直接識別出所屬銀行，而右側產品輸入卡號后需要用戶手動選擇開卡行，增加操作成本。類似的還有根據生日判斷年齡，根據手機號碼判斷所屬運營商等。
減少多余輸入對用戶來說固然是好的，但是我們在運用該方法時需要注意，如果不能準確的判斷相關內容，或者相關內容很重要，那么請允許用戶自行修改。如下圖：
用戶申請貸款額度時需要進行身份認證，利用OCR技術掃描身份證減少用戶輸入，但是由于身份認證的信息很重要，需要用戶反復核對，且無法保證技術0差錯，所以在掃描身份證后自動帶出掃描的信息同時提示用戶可手動修改。這樣既減少了用戶輸入又避免了錯誤。
再來看一個例子，下圖是百度錢包提現頁面：
提現時可以選擇手動輸入金額也可以點擊“全部提現”，點擊“全部提現”后，賬戶內所有可提現余額自動填寫到輸入框內。這也是減少用戶輸入的一個貼心的設計細節。
再看一個長表單，是金融類產品坤元資產的信息認證表單：
我們看到，需要填寫的項有出生地和居住地，那如何盡可能的減少用戶輸入呢？考慮到目標用戶中大部分人的出生地與居住地是相同的，所以在設計時提供給用戶一個“同出生地”的按鈕，用戶不必重復填寫相同內容，只需要點擊“同出生地”，就會把出生地的內容全部帶入到居住地輸入框，極大的方便了用戶，提高了表單的完成效率。
2. 提供默認選項
若問題為選擇項，則為用戶提供默認選項也是一個好方法。如下圖某OA系統，根據公司人事提供的信息，公司內請假申請類型最多的是調休假，因此在設計時將休假類型的默認選項設置為調休假，減少大部分用戶的不必要輸入。
這里需要說明的是，由于大部分用戶會保持默認選項，所以要注意，默認的選項要復合大部分用戶的目標。另外，如果你不能確定初始默認選項是什么，是否符合大多數填寫表單者的需求，那么最好不要提供默認選項，不然反而會弄巧成拙。
3. 根據用戶之前的操作設置個性化默認項
若表單為可重復使用的表單，當用戶再次使用時，默認記住用戶之前填寫的內容，也是減少用戶輸入的另一種形式。
如下圖，百度地圖搜索路線的表單，起點默認為當前定位的位置，輸入終點時（右圖）在輸入框下方有一個“家”，點擊“家”之后直接將家的位置帶入終點輸入框，這就是根據用戶之前的操作設置了個性化默認，值得我們借鑒。
幫助文字不是組成表單的必要元素，但有些情況需要提供幫助文字才能順利完成表單填寫：
1. 用戶不熟悉標簽含義時
如圖，是微信公眾平臺的注冊表單：
我們看郵箱驗證碼標簽，如果不做解釋說明的話可能會引起用戶歧義：什么是郵箱驗證碼？如何獲取郵箱驗證碼……等一系列問題。因此設計師在輸入框下方給出了幫助文字，詳細說明了如何回答郵箱驗證碼這一問題。
2. 需要向用戶說明為什么要問這個問題時
如上圖，還是剛才的微信公眾平臺，再看下“郵箱”這個標簽，下方的幫助文字說明了為什么要填寫郵箱——作為登錄賬號。向用戶解釋說明了為什么要問這個問題，能夠減少用戶的擔憂，促成表單的填寫。
3. 涉及到安全或隱私問題時
下圖是百度云平臺創建工單頁面，可以看到“機密信息”標簽在輸入框內給出了幫助文字，告知用戶填寫的內容會在后臺做加密處理，確保信息安全。當表單涉及到用戶的安全或隱私信息時，或者隱私信息可能會引起用戶擔憂時，應當提供幫助文字排除用戶的擔憂。
4. 建議回答問題的方式
這種情況一般是問題有特定的格式或特殊的要求，此時提供幫助文字能夠使用戶盡快確認正確答案。如下圖的設置密碼、填寫工單標題、上傳附件要求等例子，都有明確的幫助文字說明回答問題的方式和要求。
通過上面的例子，我們了解了幫助文字出現的時機，下一步我們該如何展現幫助文字呢？一般地，我們可以把幫助文字分成2種：自動即時幫助和用戶激活的即時幫助。
1. 自動即時幫助
指幫助文字是自動出現的，直接在頁面中展示出來，不需要用戶主動獲取。通常如果人們知道表單問題答案，但不確定如何回答或為什么回答時，可以考慮使用自動即時幫助。
上文的微信公眾平臺填寫郵箱和密碼都是使用自動即時幫助的例子。
2. 用戶激活的即時幫助
指不直接將文字展示出來，當用戶需要幫助時可自己主動獲取。如果表單所含問題復雜，或者表單會被相同的人重復使用時適合用該方法。
下圖是宜人貸的申請表單，在出借人適當性管理告知后面有一個問號樣式的圖標，鼠標懸停時會出現相關的解釋說明文字。由于適當性管理告知是一個專業詞匯，除專家用戶外的其他用戶很難理解。因此提供用戶激活的即時幫助顯得很有必要，無論何種用戶，無論什么時候，只要用戶需要幫助就可以主動獲取。
另外，必要時為用戶提供幫助文字還有兩點需要注意：
1.如果你選擇了使用幫助文字，請一定要讓它真的能夠“幫助”用戶
上圖是恒易貸的登錄表單改版前后對比，我們發現改版后的幫助文字清晰的告訴用戶：賬號是手機號碼，登錄密碼的規則。布局、視覺都沒有變化，僅僅是文案的變化就能減輕用戶負擔，提升用戶體驗。因為每個用戶都在使用很多不同的app，賬戶和密碼的格式也各不相同，這樣的提示就能很好的“幫助”用戶快速正確的完成登錄并使用產品。
2.用戶激活的即時幫助，注意出現的時機
如果是鼠標懸停時顯示幫助文字，則要擴大懸浮激活區域，方便用戶操作；且要懸停5s以上再顯示，來確認用戶是真的需要幫助，而不是因為鼠標偶然通過觸發區。
通過以上的總結能夠發現很多都是細節的設計，細節能夠打動人心，細節能夠決定成敗。一個優秀的體驗設計師，一定是在意細節又不拘泥于細節的人。
本篇文章就到這里吧，下一篇我將從表單的基本要素說起，談談各要素的設計要注意哪些問題。更多精彩，敬請期待！
推薦閱讀書籍：《Web表單設計：點石成金的藝術》、《Web表單設計：創建高可用性的網頁表單》
有哪些表單設計的注意事項?
一、表單設計的注意事項——保持秩序
1. 單柱瀏覽
表單的主要功能是向用戶清楚地傳達信息。保持單列表單的順序更有利于用戶的瀏覽。它幫助用戶識別和填寫內容。但是，多列表單會破壞用戶填寫規則，影響效率。
2. 垂直布局
當表單中有多個選項供用戶選擇時，將每個選項垂直放置在每個選項下會使用戶更容易閱讀和瀏覽。
3.一致的操作
填寫表單時，避免在填寫過程中更改按鈕的樣式和顏色。一致的操作行為需要用戶的確認，可以有效減少用戶在操作時的困惑和猶豫，保證用戶在填寫表單過程中的順暢體驗，從而實現最終的業務交易結果。
二、表單設計的注意事項——描述很清楚
1. 標題不可替換
雖然使用占位符而不是標題擴展了表格的填充空間并減少了視覺干擾，但這種方法不利于用戶的短期記憶。一旦用戶觸發輸入并且占位符消失，用戶可能會對這里要填寫的內容感到困惑。您必須刪除所有輸入，然后才能再次顯示標題。顯然，這是違反人性的。
2. 輸入字段符合預期
輸入字段的長度與預期的輸入內容成比例，以保證輸入字段的長度符合用戶的心理期望，并能在形式上得到充分的體現。
3.不要隱藏基本的幫助信息
用戶在購買過程中有明確的需求確認和信息收集。因此，在設計過程中，應強調或顯示用戶填寫表單的基本幫助信息，避免因隱藏幫助信息而引起客戶投訴。
以上便是關于表單設計的注意事項介紹了，希望它能幫助我們開拓，并確定屬于我們自己的設計風格，這一點非常重要。如果您想了解更多關于ui設計的相關設計技巧及素材等，也可以點擊本站的其他文章進行學習。
提高用戶體驗的八種表單設計技巧
表單功能無論是在網頁設計還是app軟件開發領域都得到了大量的使用。今天昆明北大青鳥就一起來了解一下，符合用戶體驗的表單設計需要滿足哪些條件。
1、表單標簽需采用合適的展現形式根據表單的運用場景，標簽應采用對應的展現形式，常見的展現形式有以下三種：左標簽、頂部標簽、行內標簽。
A. 左標簽在一些網頁表單當中，標簽局左是常見的一種形式。左標簽的展示形式給人一種秩序感，也便于用戶在填寫表單的過程中快速的辨別標簽內容。左標簽的這種形式一般用于網頁當中，不適合在手機端或者小屏下的移動端出現，因為小屏幕的尺寸有限，標簽居左會占用較大的空間，輸入框就會受限。
B. 頂部標簽頂部標簽指的是標簽位于輸入框上方，這種形式一般出現在一些移動端當中。頂部標簽可以使輸入框的寬度變大，用戶在填寫信息也可以比較得到完整的展示。但這種布局方式也有一個缺不好的點，就是這個表單可能需要滾屏，用戶才可以看完。
C. 行內標簽行內標簽常常出現在手機端的注冊界面當中，這樣的設計可以節省頁面空間，所以大部分app的界面設計都采用這樣的設計。當然，部分網站pc端的表單設計中也會用到這種設計。
2、英文標簽避免全部大寫一些英文界面的表單設計，我們要避免標簽的全大寫。全部大寫的標簽容易造成閱讀和瀏覽上的困難。
3、特殊標簽需使用合適的輸入框長度對于特定的標簽，像驗證碼、郵編這樣的標簽，在設計的時候需要采用合適的輸入框長度。畢竟這樣的輸入框是用戶可預見的，所以輸入框的長度可以不需要太長。
4、復選框排列需注意在表單中常出現復選框的設計，這樣的情況需要特殊處理。比如在注冊的過程中，會有性別的選擇，所以通常設計該表單的時候我們會將男女橫排在一行。但是對于內容多的情況下，就建議采用豎排的排序方式。
5、主按鈕和輔按鈕需要明確的區分在表單提交的時候，出現多個按鈕的情況下，需要做明確的區分，這樣有利于用戶在操作過程中方便辨別操作步驟。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
