在線文案表單制作（在線文案編輯）
本篇文章給大家談談在線文案表單制作，以及在線文案編輯對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
今天給各位分享在線文案表單制作的知識，其中也會對在線文案編輯進行解釋，如果能碰巧解決你現在面臨的問題，別忘了關注本站，現在開始吧！
一、什么是表單？
表單在網頁中的主要功能是負責采集數據以及向服務器傳送數據的。表單是采集用戶信息數據重要的途徑。好的表單設計能提升信息采集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息采集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什么信息、該表單需要采集什么內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然后按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位于左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由于人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側并不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小伙伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入后。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮光標的設計、輸入文字信息的設計，信息提示等，在輸入后：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容后，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽采用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該采用哪種對齊方式。標簽的處理原則就是要要盡量對齊，采用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽采用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果采用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，采取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
采用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用于橫向寬度較窄的頁面。
?頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
?右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊右對齊左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對于全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作并點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對于主按鈕層級要弱一些，通常采用線性形式。在一個頁面中可以出現多個次按鈕。
對于局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至于應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易于理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶鼠標停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當鼠標停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由于按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對于純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息后，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
?及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對于簡單的表單設計過于細化的狀態是沒有必要的。
寫在最后的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什么規律嗎？按鈕的上下邊距與左右邊距有什么關系嗎？通過這些思考，然后去觀察總結，并轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法?? ?
Get點9切圖方法（內附切圖神器）
幾個高效實用的表單設計技巧:
1.表單設計盡量簡短， 避免使用長表單。
2.表單信息盡量分組、分類排列，提升用戶視覺體驗。
3.表單文案設計盡量簡潔易懂， 避免誤會。
4.添加自動設計，盡量減少手動輸入。
5.輸入框自動聚焦。
6.提供必要提示和操作反饋。
本文目錄一覽：
關于Web表單設計的經驗分享
表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關于表單設計的知識點分享給大家～一、什么是表單？
表單在網頁中的主要功能是負責采集數據以及向服務器傳送數據的。表單是采集用戶信息數據重要的途徑。好的表單設計能提升信息采集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息采集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什么信息、該表單需要采集什么內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然后按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位于左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由于人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側并不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小伙伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入后。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮光標的設計、輸入文字信息的設計，信息提示等，在輸入后：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容后，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽采用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該采用哪種對齊方式。標簽的處理原則就是要要盡量對齊，采用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽采用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果采用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，采取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
采用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用于橫向寬度較窄的頁面。
?頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
?右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊右對齊左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對于全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作并點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對于主按鈕層級要弱一些，通常采用線性形式。在一個頁面中可以出現多個次按鈕。
對于局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至于應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易于理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶鼠標停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當鼠標停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由于按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對于純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息后，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
?及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對于簡單的表單設計過于細化的狀態是沒有必要的。
寫在最后的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什么規律嗎？按鈕的上下邊距與左右邊距有什么關系嗎？通過這些思考，然后去觀察總結，并轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法?? ?
Get點9切圖方法（內附切圖神器）
有哪些網站留資表單設計優秀
Reverend Danger，Tim Biskup，Insite，Kettle。幾個高效實用的表單設計技巧:
1.表單設計盡量簡短， 避免使用長表單。
2.表單信息盡量分組、分類排列，提升用戶視覺體驗。
3.表單文案設計盡量簡潔易懂， 避免誤會。
4.添加自動設計，盡量減少手動輸入。
5.輸入框自動聚焦。
6.提供必要提示和操作反饋。
[交互設計]PC移動端表單設計
手機App為生活帶來巨大便利，多種多樣的移動表單設計形式進入我們的工作與生活。表單是移動應用中與用戶產生最多交互的地方，包括：用戶注冊、訂閱服務、用戶反饋、問卷表單、買賣交易等等。
一個優秀的表單設計有助于提升產品用戶體驗，提高轉化率，達到更好的營銷效果。
每個表單都有特定的目的，或吸引注冊，或達成交易。考慮不周或錯誤設計會導致用戶流失或交易失敗。
學習表單設設計，需要先了解表單設計的基本原則，避免做表單時進入雷區。
表單設計基本原則
1.?邏輯清晰
表單是產品與用戶溝通的語言，和對話一樣，表單應當符合邏輯，幫助雙方完成交流。
? 2.?盡量使用單列設計
多列表單容易讓用戶漏填，無法集中精力完成填寫。單列表單填寫路徑單一、直接、相比更為高效。?
3.?減少輸入
表單越長越復雜，用戶完成表單的意愿越低（尤其在移動端產品中）。最大限度減少輸入字段，使表單完成更快速，尤其向用戶索取大量信息時，更要注意表單簡潔。
4.?提供合適的輸入方式
輸入“賬號、密碼，郵箱，昵稱”時應提供不同鍵盤，減少輸入錯誤，幫助用戶快速完成填寫。?
5.?避免把標簽當占位符使用
有一種設計模式是讓標簽作為占位符置于輸入框中，用戶點擊輸入時自動消失。這種設計比較簡約，但用戶輸入時容易忘記需要輸入的字段是什么，從而產生問題。
優秀案例：移動端表單設計?
↘Dropbox?by Sam Atmore
交互設計分析?：
Sam的登陸/注冊表單中，登陸、注冊邏輯非常清晰。
1.使用單列二選一表單設計。用戶使用App前，只需要二選一隨標簽提示進行下一步操作。就是誤操作也可以用滑動回到另一選項。
2.登陸、注冊頁面的主按鈕明確，有強引導作用。?
↘Location Switching?- by Nimasha Perera
交互設計分析：關鍵詞“智能自動填充選項”
表單設計融入更多自動化元素。如：自動定位功能，根據當前位置智能填充信息。省去用戶地理位置選擇操作，貨幣轉化操作，省時省力
↘Form Validation?- by Emmanuel Torres
交互設計分析?：關鍵詞“明顯可見的提示信息”
用戶登陸、注冊過程，理想狀態是完成信息填寫并提交。
但實際操作中錯誤不可避免，表單設計要考慮有辨識度的信息提示，實時提醒用戶填寫錯誤。而不是全部完成后再告訴他。
拆解表單組件樣式
表單的主要特點是引導用戶填寫信息，設計上應考慮主要信息內容如何引導用戶瀏覽。表單中的信息內容包括：
1) 輸入字段： 包括文本字段、密碼字段、復選框、單選按鈕、滑塊和其他需要用戶輸入的字段；
2) 字段標簽： 說明用戶輸入字段的含義，如文本框前的“你的姓名”；
3) 外觀和結構： 包括字段順序、表單在界面中的樣式及不同字段間邏輯關系；
4) 動作按鈕： 至少有一個操作按鈕（如提交按鈕）；
5) 反饋信息： 將操作結果通知用戶。如：“謝謝，表單提交成功！”、“你提供的數字不正確”。
l主流表單樣式
↘上標題下提示內容的表單
優點：標題、提示內容可以很長，預覽速度快，可以加功能按鈕（如附件和照片添加）。
缺點：占據垂直空間較大。
多用于信息內容填寫和維修工單信息填寫，可以減少頁面跳轉。
↘左標題右內容（左右對齊）
優點：常用組件，前端可以直接套用，節省垂直空間，引導用戶視覺左右移動，增加用戶思考時間，對關鍵信息填寫更加安全。
缺點：相比上下結構表單，用戶視覺移動距離增加,行數量多，視覺會很亂。
適用于通用表單填寫場景。
↘左標題右內容（全部居左對齊）
優點：強暗示可輸入，視覺瀏覽速度快。
缺點：標題字段數量不能太過長短不一，會導致視覺不均衡。
主要適用場景：適合金額數字類和身份信息填寫。
↘歸類標題表單（內容歸屬一類）
將同類表單項合成小組內容，幫助用戶分類理解填寫內容。符合格式塔原理的相似性和封閉性原理。
多用于詳情信息展示。
↘僅提示內容表單
優點：信息少，不需要思考。
缺點：當內容一多很容易出現用戶“不知道產品要做什么”的困惑（表單無標題）。
用于登錄頁或內容較少，如修改手機號/修改姓名/填寫備注等。
拆解表單組件交互
表單交互主要有兩個目標：引導操作和反饋。
交互操作時，表單有3個交互階段：輸入前、輸入中、輸入后
↘輸入前
引導用戶輸入內容，如：密碼設置場景
輸入框在默認狀態提示文案引導用戶輸入相應的內容；或輸入框外有提示，僅支持字母、數字、某某符號輸入
↘輸入中
點擊輸入框彈出鍵盤，光標閃爍，定位用戶當前位置。
表單內容一般有字符數量限制，輸入過程中超過字符限制實時報錯提示。
如下圖：聚焦請輸入原密碼時,線段顏色明顯加重，做為輸入中提示。
↘輸入后
web端
輸入框失焦即判斷輸入信息是否符合規則，不合規則報錯提示。例如：
玩家用戶名重復提醒，密碼首字母沒有大寫，密碼長度不符合要求；
輸入成功則成功反饋，例如：
輸入框右側圖標點亮
移動端
輸入所有內容，不即刻做規則判斷，先激活按鈕。例如：
發布、完成、下一步按鈕激活
用戶點擊操作按鈕再進行輸入信息合規判斷。
案例：提升用戶體驗和客戶轉化的最佳表單設計
填寫表單對于用戶來說是一道檻，下面就來看一看提升用戶體驗和客戶轉化的注冊、登錄表單中最佳設計模式時應注意哪些設計、交互細節：
1.說明注冊價值
用戶最不想做的事就是注冊。用明確的價值說明能激發注冊行為。表達的價值主張：在這里，連接世界。
2.設置醒目登陸輸入框
直接顯示輸入框，而不是設置“登錄”鏈接給用戶增加一次點擊。
3.允許使用第三方賬號注冊、登錄
允許用戶使用現有的第三方帳戶登錄產品能給用戶帶來便利，記很多密碼是令人頭痛的問題。
4.用戶名采用郵箱或手機號碼
使用電子郵件、手機號碼作為用戶名比起一個新名字讓用戶輕松很多，因為新起的用戶名往往已被占用。
5.登錄、注冊功能區分明顯
登錄（Sign in/Login）、注冊（Register/Sign up）鏈接放在一起，很容易使用戶混淆，盡可能將兩者區別表達
6.高亮顯示輸入框，允許記住用戶登錄信息
用戶在輸入框輸入內容時，文本框高亮顯示提示正在該框內工作。允許該表單記住本人登錄信息。
7.允許用戶查看密碼
密碼總是以圓點顯示，不能確認輸入的密碼是否正確，允許密碼明文顯示是充滿人性的設計。
8.必要的信息提示
輸入錯誤的信息提示，還包括一些重要的注意事項提示，例如以下三個表單：
9.顯示密碼強壯程度
10.少使用下拉選項
表單中某項目里只有3-4個參數要選擇，不要使用下拉框更有利于用戶體驗。不要要求用戶重復填寫Email地址。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
