好的表單設計依循什麼規則？（如何設計一份用戶體驗好的表單）
做Web產品中經常要用到設計表單，表單中可以用的元素文字有輸入框，勾選，點選，下拉等，如何選擇這些元素使表單設計友好，用戶體驗流暢吶
在表單設計中，每一個視覺元素都有其存在的意義。有時候為了深入理解其中某一元素在頁面中的意義，我會特意刪除這個元素然後研究界面產生了什麼樣的變化。有點類似於數理統計中的控制變數法。
在開始對錶單設計進行研究之前，在下面這個登錄界面的設計中，對其中各個視覺要素作如下命名：
以前在做表單設計的時候，經常糾結的一件事就是：標籤要去掉還是保留。因為所有做界面設計的同學都知道， 標籤和佔位符都提示了該輸入框輸入的欄位內容，有點重複啰嗦之嫌 ，所以覺得如果將標籤刪除掉也未嘗不可，如下圖所示：
因為輸入框在獲取焦點並有內容輸入的時候佔位符就會消失，如上圖中的用戶輸入到第五個欄位內容的時候，你真的還知道自己前面輸入的和即將提交到伺服器的都是些什麼鬼嗎？這個時候就會產生混亂，甚至有不得不回去重新刪除已經填寫好的東西以看到自己填寫了什麼。
這種現象從心理學的角度來看，是因為人類的短時記憶局限。
人短時間內只能記住4到6件東西，即是傳說中的 「五加減一」原則 。但因為在表單輸入的時候需要動用到記憶檢索，佔用了部分大腦功耗，「五加減一」將要大打折扣。所以 表單設計上更加適用的是「二加減一」的原則 ，即當用戶需要輸入欄位多於三個的時候，就有必要留下標籤一直給用戶提示。
所以有些時候標籤還是有必要留下的。因為 標籤會始終如一地說明你輸入的或者即將輸入的是什麼內容 。
雖然這麼說來，但佔位符與標籤重複累贅的問題又如何解決呢。其於控制變數法不妨簡單粗暴點將佔位符刪除掉試試。如下圖：
這樣看上去也不是不行，內容也能說清楚，不會重複累贅。
但是一直說有源設計，HTML5中特意加入的placeholder佔位符也一定有其原因的。事實上在做過很多的表單頁面之後就慢慢知道了，在很多社交網站平台里，用戶所擁有的可能不僅僅是用戶名，還有註冊郵箱、註冊手機號碼、昵稱等等，到底哪個才是可以用來登錄的？要讓用戶去猜，就是一份失敗的設計，所以這個時候佔位符就發揮作用了。佔位符起到進一步提示說明應該填寫什麼內容的作用，如下圖：
這樣的設計用戶一眼看上去就知道應該怎樣填寫，清晰明了。
只是如果同時保留標籤和佔位符又會重複累贅。特別是一些標籤長度長短不一的場景下作排版設計是件十分惱人的事，特別是到了移動端的時候就不知道排板得都是些什麼鬼，如下圖所示：
這樣的界面看上去既重複又累贅，還無法對齊。所以必須在內容的排版上再想一下辦法。
其中的一個設計方案是，將標籤往右上移，放在輸入框左上角，這樣的設計使得界面更加整齊，用戶的視線方向可以一直從上往下，而不需要左右來回移動，視覺體驗上也是一種優化。如下圖：
上圖的設計也算是其中一種解決方案吧，具體還是基於不同的場景再選擇不同的排版方式。只是不好的一點是你會發現整個版面看下來都是文字，界面死版，容易視覺疲勞。
我比較喜歡的一種設計方案是是將標籤設計成圖標，這樣一來畫面就顯得靈活而且更加簡潔。因為圖標的提示作用，輸入框已有輸入內容時用戶也能很清楚已經輸入的是什麼欄位的內容。如下圖所示：
表單設計中輸入框的設計也依然是十分煩惱的事。以前在看過很登錄界面的輸入框，矩形的、圓角矩形的、有邊框的、無邊框的、有底色的、虛線的、只有下劃線的等等，自己在做設計的時候也常常糾結於採用哪一種樣式。為了做出更合理的選擇，有必要深入理解一下輸入框在表單設計中的視覺意義。
還是那種方法（控制變數法），嘗試一下去掉輸入框，如下圖：
第一眼看到這個界面的時候，我的想法是「真不知道這個界面是做啥用的」。
雖然標籤有冒號引出還有佔位符的輸入說明，仔細研究一下還是能夠明白文本應該從何處開始輸入，但冒號引出加文字也可以看作是內容展示，給人的感覺是「不覺得那裡是個可以輸入文字的區域」也就是說，去掉輸入框之後不能說明輸入區域，同時缺失交互暗示。
其實輸入框在這裡並沒有很深層的心理模型，就像我們從小的考試試卷中「姓名：_______ 」 下劃線一樣，只是很簡單的告訴你，這個就是輸入區域。
我們這樣定義輸入框的作用 ：暗示交互、界定用戶輸入區域 。
所以在設計輸入框的時候首要讓用戶一眼就看明白那裡就是用來輸入資料的，並且就是那麼高，那麼寬。至於輸入框採用什麼樣式，具體看界面風格以及層次關係而定。倒是覺得一個表單界面存在的目的就是讓用戶填寫並提交，所以輸入框應該作為最主要的層次，一般情況下輸入框與背景拉開對比關係，重點突出。所以這個示例里的界面一開始就用了與背景色相對的白色輸入框。
第三 提交按鈕提交按鈕作為表單界面交互的最後一步，提交按鈕的作用是 提交表單內容到伺服器 。所以提交按鈕的設計最基本的是：
（1）.在視覺上你的按鈕要讓用戶有點擊的慾望；
（2）.暗示可點擊
在設計上你的銨鈕必須看上去像個按鈕，並讓用戶知道那個區域是可以點擊的，還得讓用戶知道按鈕有什麼作用。提示元素可以是文字或者圖形，例如「登錄」「註冊」「提交」「下一步」或者箭頭「→」等。
關係到表單界面的，我一直覺得提交是用戶填寫表單流程的最後一步，所以從表層意義上說，提交按鈕視覺層次應該排在文本框的後面，但事實恰恰相反，很多登錄界面的提交按鈕都給予了最顯眼的視覺層次。如下圖：
對於這種現象不得不細細研究一下其原因。以下面的圖作一個對比。
上圖中左邊的設計的視覺第一層次兩個輸入框，細看上去這樣的設計無可厚非，但從交互和用戶體驗上卻未必適用。第一層次是兩個同等重量的輸入框，用戶第一界接受到的是「這是個填寫的地方」卻未必知道「這個頁面的目的是什麼」。
右邊的界面雖然輸入框並不到第一層次，但是高亮的登錄按鈕讓用戶打開界面的瞬間就知道這個界面的目的和意義了。基於頁面交互的唯一性，界面2給人的感覺會清晰很多，也因此很多出色的表單設計都採用了提交按鈕高亮的做法。
倒是挺合理的。
第四 附加文本用戶在表單中輸入完畢，點擊提交，界面的使命就已經完成了。所以附加文本在表單設計中歸屬於次要內容，其主要目的是輔助主要交互，一般是根據界面交互要求而添加的導航連接，例如用戶協議、忘記密碼、轉向註冊界面的連接、指明必填項、表單錯誤輸入提示等等。
基於內容的次要性，附加文本在界面中一般弱化層級關係，所用顏色一般偏小，顏色偏淡，上面的界面可以優化設計成如下圖所示：
以上對錶單標籤、佔位符、輸入框、提交按鈕以及附加文本等視覺元素進行分析，可總結各要素的意義作用以及設計要點，如下
1.標籤
作用：指明輸入欄位內容
要點：
（1）.層級關係要高於輸入框佔位符
（2）.應避免與佔位符的提示功能重複累贅
（3）.可用文字或圖標表示
2.佔位符作用：暗示起始輸入位置，進一步提示輸入內容（樣式、規範等）
要點：只起提示作用，層級關係要低於標籤，一般要用淺色
3.輸入框作用：暗示可輸入性交互，界定輸入區域
要點：
（1）.輸入框的對齊方式影響界面的整潔和可讀性
（2）.底色與環境色的對比可以控制層級關係，一般來說輸入框以界定輸入區域為主要功能，層級關係在提交按鈕之後
4.提交按鈕作用：提交內容到伺服器
要點：
（1）.暗示可點擊性，必須讓用戶一眼看出這個是可點擊的交互區域
（2）.一般情況佔據最高的層次關係，暗示整個界面的唯一目的和操作
5.附加文本作用：輔助說明
要點：附加文本在表單中只起輔助作用，在界面中一般弱化層級關係，所用顏色一般偏小，顏色偏淡
一份完整的表單一般由以下五個部分組成：
輸入標籤、輸入框、幫助信息、操作動作、操作反饋。每一部分都有相應的使用場景與其一般性原則。展開來講的話，內容就非常多了。推薦去看《web表單設計》這本書。
- 儘可能減少輸入
- 專註於當前任務
- 需要時再顯示
- 合理組織信息
- 清晰的視覺線
- 情感化設計
儘可能減少輸入
檢查是否所有內容都必須填寫
儘可能的減少表單的輸入內容，首先我們要確保是否真的有必要填寫這份表單裡面的所有內容，有些問題是否可以在其他時間，或者其他位置提出，又或者是否可以自動推斷出答案。人本性懶惰，沒人願意填寫一大堆表單欄位。提出的問題越少，用戶能夠越容易的填完表單，表單中每一個欄位都可能會導致失去用戶。
舊版Apple ID註冊頁面
如上圖，是舊版和現網的Apple ID註冊頁面。從表單內容上來看，他們唯一的區別是，現網註冊頁面去掉了【郵寄地址】輸入項。
另外，就算是會在蘋果官網購買產品，那在用戶下單後，引導用戶填寫收貨地址，會比在註冊Apple ID時，要求用戶填寫，時機更恰當一些。盡量給每一個選項增加默認值對於大部分用戶會選擇相同的項，可設一個默認值，減少用戶填寫的負擔。
專註於當前任務
專註於當前任務
表單填寫本身就是一件負擔很重的事，因此在填寫表單的時候，儘可能去掉不必要的干擾，會好很多。如下左圖，就是一個體驗很好的註冊表單，而右圖則是一個反例，頁面充斥了太多與註冊表單無關的元素，不管對於用戶，還是我們的商業目標來說，頁面其他與註冊無關的元素，其實都是干擾項，註冊頁面的註冊成功率是我們最關注的一個指標，而太多無關的元素勢必會導致跳出率的提高。
如下左圖，是淘寶賬號的註冊成功頁面，右圖是好樂買註冊頁面，其左側有顯示新款的廣告圖片。而淘寶的做法是，在註冊完後，再顯示相關的購買推薦廣告。很顯然，淘寶的做法，更合適一些。
需要時再顯示
需要時再顯示（遞進顯示）
只顯示每項任務需要的工具和關鍵選項。在正確的時間顯示正確的工具。通過這個方式，完成任務所需要的步驟和用戶需要做出的決定都可以大大減少，這讓每一次交互都更容易執行了。如下圖，QQ瀏覽器登錄界面，在輸入完密碼後，再出現下一步操作按鈕，可以避免當前界面堆砌無關的控制項，干擾用戶的核心任務操作。
隱藏次要操作路徑
填寫表單的界面，應該減少其他非主要任務路徑，以減少用戶退出表單填寫的幾率。如果你只需要用戶填寫基本信息，那麼所有其他信息都可以隱藏在一個添加的入口裡，當用戶需要的時候，可以找到。如下圖，iOS新建聯繫人界面，除姓名、公司以外的【其他輸入】，都是隱藏的，當用戶需要時，再添加。因為對於一個聯繫人來說，除姓名以外的其他內容，都不是必填項。
合理組織信息
一個頁面只有一個重點
讓一個頁面只有一個重點，區分頁面信息的優先順序。用戶的主要操作理應只喲一個，非主線任務應該弱化。如下圖，登錄界面，主操作是登錄，【註冊】是一個應該弱化的操作。
操作項分組
表單的輸入框一般都存在自然結構，應該通過視覺方式（如分割線、間距、背景色等）將輸入框進行分組，並清晰傳達自然結構，這樣用戶在填寫的時候，可以一組一組的完成填寫，減輕用戶的心理負擔。
分步驟
如果表單的內容較多，則沒有必要強制在一頁完成，合理拆分步驟，重新組織內容，也可以減輕用戶填寫的心理壓力並專註於當下表單。當然，同時也需要設計清晰的引導線，讓用戶明白自己目前所處的位置。
清晰的瀏覽線
用戶在瀏覽信息的時候，如果沒有足夠多的強調元素，會從上至下，從左至右瀏覽。
如下右圖，是一個反例，舊版的PayPal購買頁面，瀏覽線就非常混亂。
如下右圖，是一個反例，用戶瀏覽線，是【Z】型，最後的操作，又跑到了右上角，體驗並不太好。
以上，則是我總結的關於設計一個體驗好的表單，應該遵循的幾條原則。我們在做設計時，要多思考，實現目的的手段有很多種，我們獲取用戶信息的方式中，讓用戶填寫表單只是達到目的的其中一種。可以多發散思路，多為用戶著想，或許能發現比表單能快捷有效的方式。
看上去題主是剛入門，建議買本《web表單設計——點石成金的藝術》系統地看看。 如果想直接用，自行多看案例吧
本文參考了網上多篇文章，以自己的理解根據表單的結構從5個維度對錶單設計進行剖析，依次為
- 表單內容展示方式
- 標籤的位置
- 提交按鍵的位置
- 表單內容的排列
- 表單文案的設計
下圖為表單設計的思維導圖
（表單設計思維導圖）
表單內容展示方式
**1.全部展示**
用一個界面將所有信息展示的方式，可以提高查找信息的效率，但是用戶一次性閱讀和理解信息的壓力比較大，容易造成跳出率高
**2.分組展示**
分組展示，首頁簡介清晰，分類明確，將填寫信息隱藏到下一級，但是用戶填寫時需來回跳轉，操作的負荷比較大，容易把用戶繞暈。
**3.分步展示**
分布操作，可以讓用戶掌握操作的進程，一個頁面的信息量也比較少，但是返回修改信息的成本比較高
標籤的位置
**1.標籤在左邊**
標籤置於頂部對界面尺寸的要求比較高，以手機屏幕為例，將標籤放在左邊會使得右側輸入框的尺寸縮小，在一些場景下會導致輸入框無法將信息展示完整
**2.標籤在頂部**
將標籤放在頂部的方式可以讓輸入框獨佔一行，使得信息的展示更加完整，但是在同一屏只能展示更少的列表
**3.標籤在內部**
行內標籤有助於節省移動端的頁面空間，但是在輸入的時候，標籤無法看到，容易造成輸入錯誤
提交按鍵的位置
**1.提交按鍵在頂部**
表單需要輸入內容區不會被鍵盤覆蓋，但是操作按鍵如果放在內容區則被覆蓋的時候，
例如朋友圈、QQ空間和新浪微博。可以減少操作。
**2.提交按鍵在內容區底部**
內容區操作按鈕不被鍵盤覆蓋，或者必填的表單超過一屏，建議按鈕放在內容區
**3.提交按鍵懸浮**
必填內容超過一屏且沒有文本輸入或者操作按鍵非常重要的時候，建議可使用底部懸浮按鍵
表單內容的排列
**1.盡量使用單排設計**
單排列表可以降低干擾，提高閱讀效率，減少視覺的移動
**2.頂部標籤對齊**
頂部標籤對齊，有助於高效閱讀，減少視線的移動
**3.關聯標籤和輸入框**
讓標籤靠近相關聯的輸入框，讓不同的分組保持一定的距離，減少用戶的迷惑
**4.複選框保持縱向排列**
縱向排列複選框讓用戶可以更快的掃視內容，便於進行選取。
**5.輸入內容和輸入框長度接近**
當輸入內容的長度可預知的時候，輸入框長度要和輸入內容的長度相關，可減少輸入內容和輸入框長度不匹配帶來的疑惑。
**6.注意分組**
對錶單內容按照一定的邏輯進行組合和分組，有助於降低用戶獲取信息的難度，提高閱讀的效率
**7.不問不需要問和不該問的問題**
填寫最主要的信息，減少用戶成本，有助於提高提交成功率
表單文案的設計
**1.避免字母全大寫**
全部字母大寫不利於閱讀和掃視內容。
**2.表述清晰的行動召喚按鍵**
行為召喚按鈕中的標籤上的文案要簡潔明確，讓用戶明確知道操作的結果。
**3.不要隱藏基本的幫助文案**
將基本的幫助文本直接展示出來，除非你的幫助文本超過100個單詞，信息量過大。如果幫助文本內容過長，建議置於靠近標籤或者輸入框的地方，游標懸停時展示。
**4.輸入錯誤之後不要急於清空**
很多場景下用戶只是輸入錯了一部分，保留輸入內容有助於用戶思考和減少輸入成本
**5.區分主次操作**
對操作進行區分，根據業務目標和使用場景，突出想引導用戶的操作
**6.正確區分選填欄位和必填欄位**
用「*」標誌或者文案來說明表單中哪些內容是選填的哪些內容是必填的（使用「*」的話請說明是表示必填還是非必填）
**7.減少輸入內容**
（1）運用滑塊
運用滑塊可以代替用戶輸自己入數字，減少用戶的輸入成本
（2）自動補充多餘內容
（3）設置默認值
合理的默認值可以節省用戶的操作時間。
謝謝閱讀
錯誤（或者說錯誤狀態）發生在app未能完成某個預期操作時，例如：
1、app不理解用戶的輸入
2、app出錯了
3、用戶試圖同時進行兩個矛盾的操作
無論是誰引起的，每一種錯誤對於用戶而言，都會成為一種阻礙。好在，設計良好的錯誤處理能減少這種阻礙。
預防用戶錯誤
設計過app的同學，應該很熟悉各種限制條件。例如網路狀況差的情況下，很難填寫表單，而且幾乎沒法同步數據。要考慮到這些限制，設計更易使用的app，將錯誤減到最少。換句話說，應該提供建議、加上限制、保持靈活，第一時間預防用戶犯錯。
http://980.so/4zOcET
首先遵循可用性三原則:
1.別讓用戶思考2.點擊多少次都沒關係，但是每次點擊都要是明確無誤的選擇3.精簡文字在這些原則的基礎上，不僅要保證加的每一個元素都是有意義，沒有冗餘，不越界，不存在任何毫無意義且讓用戶反感的東西，還要保證清晰的流程，不讓用戶迷茫。推薦閱讀：
※網民喜歡更有互動性、參與性的網路內容么？
※怎麼引導用戶升級應用？
※廣深地區ofo、摩拜bike、bluegogo，小鳴的用戶體驗比較？
※中國內地有沒有趕超海底撈服務的，哪些服務好到變態？
※評論被點贊是什麼體驗，這樣的評論點贊機制合理嗎？