雖然表單類型多樣，有不同目的的、收集不同內容的、不同尺寸的，但是卻有一些共同的基本的元素可以幫你的用戶快速且順利地填寫它。
【亞馬遜創建賬戶的表單】
- 1. 類別或者條目（Category or Section）：它可以幫助用戶快速理解表單的作用，同時，當你要收集的數據多于一個類別時，比如：個人信息、職業信息、財務信息等……對數據歸類整理具有很大的幫助作用。
- 2. 標簽（Label）：它的作用主要是告訴用戶，在這一欄需要填寫什么。
- 3. 占位符（Placeholder）：對于標簽下需要填寫內容的額外注釋。
- 4. 出錯信息（Error Message）：當用戶填寫的信息無法被錄入時給予反饋。
- 5. 提交操作的主按鈕（Primary CTA button）：放置于表單底部，用戶用來提交填寫好的表單的按鈕。
表單狀態
基本上來講，
你的表單在用戶使用過程中存在三種狀態：
- 1. 默認狀態：就是用戶在填寫前表單的狀態。
- 2. 焦點狀態：在用戶正在填寫的欄目上做著重提醒，這樣可以幫助用戶聚焦正在填寫的欄目，哪怕他的注意力離開了屏幕一會兒，回來后也能馬上找到剛剛正在填寫的欄目。
- 3. 反饋狀態：這種狀態一般是給用戶一些反饋信息（大多數是出錯信息）。一般情況下，這種狀態會出現在用戶移至下一個填寫區域的時候。另外，當用戶提交表單時，如果系統無法馬上驗證信息，也會出現這種狀態。
【表單的默認狀態，焦點狀態，反饋狀態】
好的案例
1.表單要盡量簡單
盡量讓你的表單短且簡單。收集必要的數據，避免重復的輸入。比如，把“再次輸入你的密碼”這一欄去掉，而是在“輸入密碼”區域增加一個“密碼可視”的按鈕，讓用戶可以選擇看到自己輸入的密碼內容。
【Jumia和亞馬遜不同的用戶密碼驗證方式】
2.使用框內提醒
向用戶反饋“輸入錯誤”提示時，最好把錯誤提醒放在對應的輸入框內。
【Facebook和亞馬遜不同的“錯誤提醒”方式】
3.將相關信息分組
這一點很重要，把相關的信息分組，并將這些組按序列排列。這樣可以幫助用戶減少認知負荷，并能更加專注地填寫當下的信息。
【hotels.ng結賬頁面截圖，一個很好的將信息分組的例子】
4.正確使用標簽，并將其左對齊
標簽要放在填寫框的上方，最好不要把標簽替換掉。如果沒有標簽，用戶在提交表單之前很會反復確認他們填寫的內容是否正確，這個過程會非常艱難，最直接的結果是就用戶需要思考很多，導致提交率下降。而使用標簽時，我們習慣于將標簽放在填寫欄的左上方，具體原因可以參看下面這篇論文，里面綜合講述了為什么這種方式對用戶提交信息轉化更有效。《Label Placement in Forms》
5.輸入框的大小要與輸入內容的長度和尺寸相匹配
簡單來講，要確保輸入框的區域能夠完美匹配輸入內容的長度，比方說輸入地址的區域長于輸入郵政編碼的長度。
【Flutterwave 登錄表單的填寫區域長度剛剛好】
【Payporte的登錄表單填寫區域長度就不太合適了】
6.CTA（提交操作） 按鈕
所有的表單在最后都應該有一個“提交表單“的按鈕，或者一個“下一步”按鈕。如果一個頁面里不止一個按鈕，那么需要把重點放在主要的提交按鈕上，另一個按鈕需要稍微削弱一些存在感。
【亞馬遜將主要提交按鈕突出得很好】
如果使用彈窗狀態來收集數據，那么次重點按鈕通常是關閉彈窗的按鈕。我們一般會在彈窗右上角使用“X”按鈕來關閉彈窗，而不是專門設計一個“關閉表單”的按鈕。
【Medium的登錄頁面使用“X”而不是使用一個“關閉按鈕” 來關閉窗口】
7.搜索區域
不要隱藏你的搜索框，尤其當你的網頁的內容非常多的時候，搜索會是用戶的有限選擇操作。
【亞馬遜的搜索框十分明顯】
另外，當一個用戶提交一個搜索任務后，不要清除搜索框的內容，這樣方便用戶能很快且清晰地看到自己最初的搜索詞是什么。
【Medium在搜索結果出來后不會清除搜索框里的內容】
8.清晰
將信息清晰地傳達給用戶，盡可能清晰地告訴用戶什么內容是被需要的，不要給出讓用戶誤解的信息。沒人喜歡填寫表單，所以避免讓用戶填寫第二次。
【Cowrywise的標簽短小精煉、信息清晰，甚至按鈕上的文本表達也很到位】
小小聲明一下：
以上的所有案例在這里沒有任何褒義和貶低的含義，僅僅是為了舉例教學。希望此篇文章能給你帶來幫助，謝謝觀看。
原文鏈接：《Creating User-friendly forms》
譯文地址：藍湖產品設計協作 (公眾號)
原文作者：Momoh Silm
譯者：藍湖產品設計協作
]]>
每個步驟（寄送地址、寄送選項、信用卡詳細信息）都收在一個手風琴面板中。而每個面板都通過AJAX提交。提交成功后，這個面板就會收起，并且通過滑動動畫展開下一個面板。
看起來就像這樣：
Boots的單頁結賬頁面，使用了手風琴面板展現每一個步驟。
用戶千辛萬苦才完成了下單過程。錯誤難以更正，因為上下滾動并不方便。手風琴面板讓人非常痛苦和分心。不可避免地，客戶要求我們作出改變。
我們進行了改版，讓每個面板單獨成為一個頁面，也就不需要手風琴和AJAX了。不過，我們還是保留了客戶端驗證，防止不必要的服務器請求。
看起來就像這樣：
Boots的結賬頁面：每一步都是單獨的一個頁面。
這個版本的轉化率好多了。雖然我不記得具體數字了，我知道客戶比較滿意。
6年后（2014年），我在*Just Eat*工作，發生了同樣的事情。我們設計了一個單頁結賬流程，其中每個部分都有獨立頁面。這一次，我記下了相關數據。
結果是每年能增加2百萬訂單。要清楚，這是訂單量，不是利潤。這個數據是基于新版本至少一周后，結賬轉化率提升的比例得出的。這部分轉化成了訂單，數量激增52倍。
這是我們的移動端優先的設計：
Just Eat的結賬分為多個頁面。我們還在設計中進一步簡化了支付頁面：用戶先選擇“現金支付”或“銀行卡支付”，然后才會轉到相關的頁面。可惜我們并沒有對這項優化進行測試。
兩年后（2016年），GDS的Robin Whittleton告訴我，把每一步分為單獨頁面，是一種獨立的設計模式，叫做“一頁只做一件事”。除了它產生的數據效果，這種模式的背后還有充分的合理性，這部分我們很快就會講到。
不過在這之前，我們來仔細看看這種模式到底是什么。
“一頁只做一件事”到底是什么意思？
一頁只做一件事，并不是一定要在一個頁面上只展示單一的元素或組件（雖然也可以這么做）。比如說，很可能仍然會保留頁頭和頁尾。
類似的，也不是說每個頁面上只能有一個輸入框（當然，這么做也是可以的）。
這種模式是指把復雜的流程分解成多個小碎片，把每個小碎片獨立一頁展示。
比如說，與其把地址輸入表單放在寄送選項和支付表單頁面，倒不如把地址輸入放在一個專用頁面。
地址輸入表單有許多輸入框，但它對于用戶來說，實際上是個單一的、獨立的問題。在專用頁面里回答這個問題是有道理的。
我們看看這種模式到底好在哪里。
好在哪里？
雖然這種模式常常能結出碩果（其實就是指訂單和轉化率了），我們最好還是要了解它背后的原理。
1. 減少認知負荷
正如Ryan Holiday在《The Obstacle Is The Way》中所說：
回想一下你第一次看到復雜代數式時的情景。這整個就是一團混亂的未知符號。但是當你將它分解，獨立成各個部分，答案便水落石出。
一步步分解等式，就能輕松解決問題。
用戶在填寫表單時也是一樣的道理，或者其他任何重要的事情都一樣。如果屏幕上元素減少，只有唯一的選擇，阻礙就降到最低。因此，用戶會專注于完成任務。
2. 處理錯誤更容易
當用戶填寫小型表單時，錯誤可以很容易被發覺，并盡早呈現出來。如果只有一個錯誤要修正，那就很容易，能降低用戶放棄的可能性。
即使有多個錯誤，Kidly的地址填寫表單也很容易更正。
3. 頁面加載更快
如果頁面的設計很簡單，加載就會更快。更快的加載速度能降低用戶離開的風險，為我們的服務建立起信任。
4. 易于追蹤行為
一頁上內容越多，就越難以了解用戶因為什么離開。不要誤會我的意思：頁面數據分析不能左右設計，但這是個很不錯的副產品。
5. 易于追蹤過程和返回上一步
如果用戶需要頻繁提交信息，我們可以把它們以更細的顆粒來保存。舉個例子，如果用戶中途退出，我們還可以發送郵件，鼓勵他們完成訂單。
6. 滾動操作減少，甚至被消滅
不要誤會我的意思：滾動不是什么大問題——用戶的期望中，網頁就是這么用的。但如果頁面短小，用戶就沒必要滾動了。主操作項就更容易出現在屏幕視野內，能強調它的重要性，易于任務完成。
7. 容易產生分支
有時候，我們需要根據之前的答案，給用戶提供一條不同的路徑。舉個簡單的例子，兩個聯動的下拉菜單，用戶在第一個菜單里的選擇，會影響第二個菜單中的內容。
一頁只做一件事可以輕松處理這種情況：用戶作出選擇并提交，服務器來決定用戶接下來看到什么——天然具有簡單和包容的特點。
我們也可以用JavaScript。不過無論是構建還是確保界面的可用性，都需要更高的成本。如果JavaScript出錯，用戶的體驗也就被破壞了。而且，根據所有這些排列組合選項來加載頁面，會顯著加重頁面負擔。
或者，我們可以使用AJAX，但這并沒有避免渲染新頁面（或者部分）。更關鍵的是，它并沒有減輕服務端的數據往返壓力。
還不止這些。我們需要發送更多代碼量，并且發起AJAX請求，還要處理錯誤、顯示加載指示器。這又讓頁面加載變慢了。
自定義加載指示器是有問題的，因為它們并不準確，不像瀏覽器的原生加載進度。用戶也不熟悉它們——相對于整個網站來說，它們是特殊的存在。無論如何，相似性是用戶體驗的慣例，除非真有必要，否則不要打破它。
而且，頁面上有兩個動態更新的聯動輸入項，這會需要用戶按照一定順序來操作。我們也可以通過可用/禁用和顯示/隱藏來控制這些輸入項，但這樣也更加復雜。
最后，用戶的某些更改，可能會導致隨后的元素消失或者變化，這也讓人迷惑。
8. 對使用屏幕閱讀器的用戶更友好
如果頁面上內容減少，屏幕閱讀器就不必長途跋涉穿過許多多余的次要信息。用戶可以直接前往第一個標題，然后迅速開始操作表單。
9. 易于更改細節
想象一下某人正要確認訂單。關鍵時刻，他發現支付信息里有一處錯誤。此時回到專用頁面比找到頁面*當中*的某個部分更容易。
用戶點擊“編輯”，會前往支付信息頁面，里面有專用的標題和相關的表單項目。
深陷一個長頁面中是會令人迷失方向。記住，用戶點擊鏈接代表他們要執行特定的操作——頁面上的其他東西都是干擾信息。
長頁面還可能會加重工作量。比如說，如果想要在一個頁面中展開和收起面板，你就需要更多額外的邏輯思考。
一頁只做一件事，這些問題都得到了解決。
10. 用戶對數據更有掌控力
用戶不會只加載一半的頁面。要么全部，要么沒有。如果他們需要更多信息，就會點擊鏈接，他們有選擇能力。只要每一步都更接近目標，用戶并不介意點擊。
11. 解決了性能問題
如果每件事都復雜無比——單頁應用就是一個極端例子——性能問題就很難解決。是因為執行時間問題？內存泄漏？還是AJAX請求導致的？
人們很容易認為AJAX能提升用戶體驗，但增加代碼量很少情況能創造更快的體驗。
復雜性轉移到客戶端，會掩蓋服務端的根本問題。但如果頁面只做一件事情，性能問題就不容易產生。如果真發生了問題，排查原因也很容易。
12. 它有一種在前進的感覺
因為用戶在不停地前往下一步，會產生一種正在前進的感覺，在用戶填寫表單時給他們一種積極的感受。
13. 降低丟失信息的風險
長表單需要更長時間來完成。如果所花時間太長，頁面超時可能導致信息丟失，產生嚴重的挫敗感。
又或者，電腦可能卡死，*《我是布萊克》*里的主角Daniel就是這樣的例子。他的健康每況愈下，而且第一次用電腦就遇到了死機，然后數據丟失。最終他放棄了。
14. 第二次使用的體驗更順暢
比如，假設我們儲存了用戶的支付信息，我們可以直接跳過那一頁，直接帶他們去“結賬確認”頁面。這會減少阻礙，提升轉化率。
15. 這是移動優先設計的一種補充
移動優先的設計，提倡在小屏幕上只呈現最重要的信息。一頁只做一件事，也遵循著相同的方式。
16. 設計過程很簡單
當我們設計一套復雜流程時，分解成細小頁面和組件，可以讓人更容易理解這些問題。
還可以方便地調換頁面來改變順序。我們一次只研究一件事，這點和用戶一樣，能讓我們更輕松地分析問題。
這可以減輕設計負擔——這種模式讓用戶受益的同時，還能有這樣的附加福利。
這種模式適合所有情況嗎？
也不完全是。Caroline Jarrett在2015年寫過一篇文章《一頁只做一件事》，里面講得很清楚。她解釋道，用戶調研“會告訴你某些問題組合起來放在長頁面里更合適”。
但是反過來，她也提到了“對于設計師來說‘屬于一組’的問題……對于用戶而言，并不一定要放在一個頁面上”。
她提出了一個頗具啟發性的例子，GOV.UK的驗證頁面中，他們嘗試把“創建用戶名”和“創建密碼”先后放在兩個頁面上。
就像許多設計師所認為的，Caroline覺得把這兩者放在不同頁面有點太過了。實際上，用戶對此一點也不介意。
關鍵在于，以一頁只做一件事為出發點，然后通過用戶研究，驗證把其中一些項目編組合并，是否能進一步改善用戶體驗。
這并不代表最終結果一定是把頁面合并——在我經驗中，最好的結果往往是把事情拆分開來，僅此而已。當然，我也希望聽聽你的經驗。
總結
這種低調不起眼的用戶體驗設計模式很靈活、高性能、有包容性。這是真正擁抱互聯網的方式，對于自信滿滿和小心翼翼的用戶而言都很簡單。
一個頁面上展現很多（或者全部）內容可能會營造一種簡單的幻象，但就像代數式問題一樣，除非把它們分解，否則很難處理。
如果把任務看作是用戶想要完成的一筆交易，把它分解為多個小步驟很有必要。這就像我們在用網頁的一磚一瓦來搭建漸進式表單。每一頁背后的隱喻，都給潛意識營造一種正在前進的感覺。
我還沒有遇到過哪種其他的設計模式，能具備這么多的優點。這就是那種真理時刻——答案總是最簡單的。
作者信息：Adam Silver
原文鏈接：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
]]>
每天我們都使用表單進行基本的網上操作。網上購物、注冊郵箱、社交網絡甚至參與討論、描述美味的午餐等等都需要我們填好表單。不夸張地說，表單是數字信息分享的生命根基。然而多年以來，表單的體驗鮮有提升，僅僅停留在功能足夠好卻達不到體驗上的優秀。然而現在，在使用恰當技術的幫助下，我們可以設計出更快、更簡單、更有成效的表單體驗。
在表單體驗中一條經典的原則是“越短越好”。耗費用戶更少的精力可以帶來更高的轉化率，這當然看起來符合邏輯，但是這條原則沒有考慮到很多因素，比如應用場景，設計方式、表單體驗的吸引力等等。
舉個例子，我發現一個被引用的次數遠超其它的報告，它的測試成果被多篇文章和言說提及并被當做“真理”，而可怕的是這個研究成果其實是相當有局限性的。這個報告是Imaginary Landscape(一個開源的網絡開發機構）近十年前的一次實驗，試驗中當表單從11個字段減少到4個字段，轉化率增加了160%。但這只是一個頁面，一次測試，兩個變量得到的實驗結果，假設他們進行了多組4個字段的實驗，或者做10個字段與11個字段的表單作對比，4個與5個字段表單做對比，也會令實驗更加值得信服。然而他們沒有，這只能說明僅在這一個特定的情況下，確實減少表單64%的字段能使表格更容易填寫。
在Call To Action 2015的演講上,來自Unbounce 的Michael Aagaard分享了類似的案例。以提高一個特定表單的商業轉化率作為任務，他首先將表單的字段數從9削減到6，轉化率下降了14%。深入研究后他發現，表單中那些被刪除的字段構成了一個不太引人注目的體驗，而這恰恰是最吸引用戶的部分。在第二次實驗，他調整了原始表單的組織結構和清晰度，并保持9個字段不變，轉化率增加了19%。事實證明，短的表單不總是更好。
所以如果不是通過簡單的使表單更短，我們怎樣用現代技術來設計最好的表單呢？讓我們來考慮一些新原則：
－優先保證表單的可瀏覽性
－提供更易填寫的表單格式
－給予恰當的輸入限制
－利用定位
1.優先保證表單的可瀏覽性
很早之前Jakob Nielsen的研究告訴我們，用戶通常只是快速瀏覽網頁而不是細致地從上到下閱讀。在填寫表單的時候也是這樣，盡管設計者希望填寫者全心全意，用戶也未必如你所愿。讓用戶能夠高效的瀏覽表單，對避免錯填漏填至關重要，尤其是當表單是用戶只能填寫一次的時候（比如電子商務地址表單，注冊表單等等）。
－標簽位置
關于標簽的位置已經有了很多研究，然而這場辯論還在繼續。表單大師Luke Wroblewski在研究中確定，用戶對標簽頂部對齊的表單完成時間最短，因為此種方式減少了眼球運動的需要量。在通常意義的表單標簽中，右對齊的方式能讓用戶第二快的完成表單，尤其建議在當頁面高度有限時使用這種方式。雖然左對齊標簽的表單用戶完成的最慢，但是當表單需填寫的數據不太常見時，這種方式能提高理解。
－提示文字
如果將標簽作為框內提示文字，幫助性也不大。一旦表單獲取點擊焦點，提示文字就消失了，用戶不再能看見它。這會讓用戶產生短期記憶的壓力而增加錯誤的機率。
即使把標簽分開，另外增加框內提示文字，用戶乍一看上去也會覺得像已經填寫了的樣子。舉個例子，Nielsen Norman Group曾做過的一項眼球追蹤研究就說明，空的輸入框比有提示文字的輸入框更能引起用戶的關注，而且與空的輸入框相比，用戶更容易忽略有提示文字的輸入框。換句話說，被認為是有用的表單提示文本其實弊大于利，尤其是對習慣大致瀏覽的用戶。
好的：空的表單字段
不好的：被提示文字掩蓋的表單字段
在某些情況下，提示文字比普通文本的顏色較輕，這可能緩解上述問題。然而這種技術產生了一個對比度的問題，在白色背景下配淺灰色文本通常不符合被普遍接受的網絡可訪問性指南（正常文本對比4.5:1）。此外，根據W3C，提示文字也不支持殘疾人的輔助設計（如屏幕閱讀器，見https://www.w3.org/WAI/tutorials/forms/instructions/），這使得這些殘疾人用戶更難準確填寫表單。
－浮動的標簽
浮動標簽是一個迅速獲得普及的新的交互設計方式。在它的設計中，標簽文字開始作為提示文字，然后一旦用戶開始填寫，標簽將升到上面，解決了上述提示文字消失的問題。
雖然這種方式還可以幫助減少頁面長度，在移動端特別有幫助。但是它不能解決上述文本框看上去已經被填補的問題。因此，Nielsen Norman Group不建議這種做法，還是應該保持標簽在上面，除非頁面長度是最重要的設計關注點。
2.提供更易填寫的表單格式
以前，在填寫表格時用戶有很多的猜測。“我的電話號碼應該是哪種格式？我的信用卡有沒有少輸一位？這個鍵盤上的符號“@”在哪里？” 新技術使我們能夠不讓用戶被這些疑慮困擾，提供更清爽的體驗。
－輸入掩碼
幫助用戶格式化輸入文本的輸入掩碼，雖然在外觀上與提示文字類似，其實有明顯的不同。首先，掩碼只出現在用戶點擊輸入框的時候，避免了上述瀏覽障礙的問題。其次，輸入的文字自動應用正確的文本格式，讓用戶將填充字段時的焦點放在所需的數據上，這樣更容易注意到錯誤。在下面的例子中，填寫電話號碼時括號和破折號自動填充。
在填寫手機號、信用卡、貨幣等等的時候，這種簡單的技術可以節省我們的時間和精力。
－輸入字段的HTML屬性
設計師知道對于輸入特定的數據需要展示正確的移動鍵盤，但是對究竟哪種才是正確的鍵盤類型有些疑慮。
舉個例子，對于最常用的“數字”類型屬性的輸入框，常常不會觸發數字小鍵盤，觸發的是普通的帶有數字區域的鍵盤，數字鍵的大小遠小于小鍵盤。
“數字”鍵盤和“電話”小鍵盤
對于只包括數字的字段，比如日期，郵編，信用卡等等。使用數字小鍵盤可以有更大的點擊目標，從而使用戶用更小的精力輸入。（為了使其展示，前端中可用“tel”作為type值或者添加屬性“pattern＝［0-9]* ”。）然而，為數字狀態設置全鍵盤，對如街道地址等以數字作為開始的混合字段依然有用。
這里有其他的幾種可以被加入輸入框的屬性，從而可以消除額外的點擊和錯誤。
- 自動填寫：利用瀏覽器可以保存并列舉用戶以前填寫過的值。對敏感數據應關閉此功能。
- 自動更正：更正輸入的拼寫錯誤。對名稱，地址等特殊字段應該關閉此功能。
- 自動首字母大寫：自動大寫輸入的第一個字母。這適用于填寫姓名，而不可用于電子郵件地址。
- 拼寫檢查：用紅色下劃線標出拼寫錯誤的單詞。對名稱，地址等特殊字段應該關閉此功能。
3.限制輸入
如今越來越多的人用小屏的移動設備，我們需要考慮到小屏的使用場景，避免用戶不必要的輸入，在提高用戶滿意度的同時還可以減少錯誤率。
－地址預填充
在網上注冊表單中地址的填寫常常是最麻煩的，因為包括多個字段，長長的地址名。通過把長地址拆解為單個字段，不僅有助于讓用戶聚焦在輸入上（是的他們總是會頻繁切換頁面），也削減了大量的輸入。
在下面的例子中輸入谷歌總部的地址（街道，城市，州，郵編，國家），完整的輸入過程只需鍵入10個字母，而如果不用自動填充的話，用戶需要手動輸入50多次。
上面使用谷歌API的解決辦法可以在大多數情況下表現良好，但是對于輸入標志性建筑和公寓號的適用性有限，因為這些也許不包括在API提供的反饋之中。
而ThinkGeek的方法，由軟件即服務（SaaS）供應商提供，稱為PCA預測，初始搜索時允許輸入公寓號碼，輸入后將地址正確的格式化。
THINKGEEK.COM
－郵箱預填充
另一種減少輸入的方法就是在郵件地址字段中提供一個常見郵箱域名的列表。列表在用戶輸入了“@”按鈕時出現，主要就是使用了一個預填充的解決方案，這樣每次輸入郵件地址最多可以節省12次按鍵。
注意輸入框文本 “郵箱地址” 已經消失
4.利用定位
雖然調用定位數據常用在移動應用程序中，但是我們不能忘記在所有的平板電腦和臺式機上也可以使用。特別是當在觸摸屏上打字很麻煩時，基于位置的信息預填充可以節省用戶寶貴的時間并提高轉化率。
諾德斯特龍百貨網站的產品詳情頁就是這種技術的一個很好的例子，產品利用定位完全跳過了表單填寫。頁面調用定位信息，并在最接近的商店自動查找項目的庫存，而不是要求用戶輸入郵政編碼來獲取地址。這樣不僅僅節省了用戶的時間，還可以讓用戶直接看到“最近店面地址”這個有用的信息。
NORDSTROM.COM
雖然由于精度問題，預填充一個完整的地址可能是有困難的。通過谷歌的Places API，可以同時使用地理位置信息和地址預填充兩種方式以達到最好的效果，根據用戶的實時位置給出更為精確的位置填寫參考。
ZUPPLER.COM
當然，因為不能保證準確性，所以需要允許用戶可以對自動生成的位置數據進行手動修改。
總結
總之，遵循這些原則可以幫助設計出易用的表單并創造愉悅的表單體驗：
- 優先保證表單的可瀏覽性，設計易于閱讀的標簽，并避免無關的內容妨礙用戶瀏覽。
- 提供更易填寫的表單格式，為每個輸入條目的類型設計輸入掩碼，并使用適當的鍵盤（以及其他HTML屬性）。
- 給予恰當的輸入限制，使用預填充
- 利用定位，無需再次點擊添加。
以上說明我們在不斷變化的數字時代中總是有更多可以學習的東西。另附一些高質量的表單設計資源：
- Luke Wroblewski的書《Web表單設計》，還有他的博客（http://www.lukew.com/ff/），里面涵蓋了各種UX的話題
- W3C的表單指導方針（https://www.w3.org/WAI/tutorials/forms/）
- Amanda Cheung寫在UX Booth的文章：“如何使表單風格通俗易懂”（http://www.uxbooth.com/articles/styling-forms-accessibly/）
英文原文：MIKE MADAIO, THE NEW RULES OF FORM DESIGN.
原文地址：HTTP://WWW.UXBOOTH.COM/ARTICLES/THE-NEW-RULES-OF-FORM-DESIGN/
譯文地址：http://ddc.dianrong.com/?p=2531
]]>
Pricing
Pricing
Pricing Plan
Pricing page
Pricing
Pricing Table
Product Plans
Upgrade page
Pricing page
Sign Up UI
Modal
Freelance Website
Sign Up
Daily UI #1
Sign Up Modal
Sign Up
Flocabulary
To Do App Concept
DailyUI
p.s.我們簡單說說表單中含有哪些元素：
標簽（Label）告訴用戶該表單需要填寫什么類型的信息，通常放置在表單文本框之外。
表單字段（Form field）則是用來收集用戶輸入的信息，在我們平常使用的表單之中，每個字段包含著某一類型的信息（如姓名、性別等）。
占位符文本（Placeholder text），又叫提示文本，位于表單文本框里面，一般用于提示用戶填寫。在大多數的做法中，當用戶開始輸入，這些提示文本會自動消失。
一條經典的表單設計原則是表單越短越好。這條法則看上去似乎有理有據，但是它卻沒給我們帶來預期高的用戶轉化率。這條指導原則錯就錯在沒有考慮其他因素，如用戶輸入，它們該如何設計、如何影響表單的體驗。
舉個例子，在我的研究中發現這篇文章被設計師們引用的次數遠遠超過其他文章，被大多數人奉為經典，想想就可怕。這篇文章來源于Imaginary Landscape(一個開源的網絡開發社區)將近10年前的一次報告，文章里面提到如果將一個11個字段的表單減少至4個字段，那么轉化率就會提升160%。但這份報告只給出了一個頁面、二個變量和一次測試的結果，他們沒有做更多的測試，比如對比不同的4個字段表單之間的測試結果，對比10和11個字段以及5和4個字段表單之間不同的結果，所以這份報告存在很明顯的漏洞，根本不能令人信服。
來自Michael Aagaard在Call To Action 2015分享的一個與上面類似的案例。案例中，他負責提升某表單的用戶轉化率。他一開始的做法是將原本表單的字段從9個減少至6個，但是轉化率沒有提升反而降了14%。后來經過研究，他發現原本表單中最吸引用戶注意的恰好是被刪除的字段，結果顯而易見，表單對用戶的吸引力變弱了。發現問題后，Michael Aagaard進行了第二次測試，他在保持9個字段不變動的情況下調整了表單的結構使之更清晰，結果轉化率提升了19%。事實證明，減少表單字段不一定能提升用戶轉化率。
所以，我們該如何設計出好的表單？這里有一些新的設計原則也許適用：
1.優先考慮用戶瀏覽方式
2.能夠輕松填寫的格式
3.限制輸入
4.利用定位
（1）優先考慮用戶瀏覽方式：
來自Jakob Nielsen很早之前的研究：用戶瀏覽網頁是通過眼睛快速掃描的方式瀏覽，而不是從上往下逐字地閱讀。即使是在填寫表單上面，用戶也是如此。考慮到表單輸入的效率，用戶有效的掃描網頁對于減少錯誤或錯失字段的情況至關重要，尤其是當表單只能填寫（提交）一次的時候（電商地址填寫，注冊帳號等等）。
表單標簽的位置
雖然已經有了大量關于表單標簽位置的研究，但仍然存有爭議。表單方面的專家Luke Wroblewski有一篇研究明確了表單標簽采取頂部對齊的方式能讓用戶更快完成瀏覽，原因是這種對齊方式對眼球移動的需求比其他對齊方式要更少。其中采用右對齊方式標簽的表單瀏覽時間僅次于頂部對齊標簽的表單，如果你的網頁高度有限的話推薦這種對齊方式。采用左對齊標簽方式的表單是三者之中瀏覽時間最長的，但是，這種對齊方式能夠在你想要用戶放慢速度閱讀，仔細考慮的時候使用（如一些重要的輸入）。
提示
占位符文本（又叫提示文本）。關于提示文本，一般來說它對用戶來說弊大于利。其中包括把標簽作為占位符文本來使用的情況，這樣的話當我們在表單里面添加內容的時候，提示文本會自動消失。這種做法雖然可以讓用戶不再看到提示文本，但是這很容易造成用戶短期記憶的壓力以及增加犯錯的機會。
即使標簽不作為提示文本，另外添加一個提示文本。用戶這種掃描式的瀏覽很容易造成框內已經被輸入了文字的誤會。來自NN Group的研究，研究中表明了空字段對比有文字的字段更吸引用戶注意，以及用戶更多的會跳過那些有提示文本的字段。換句話說，被認為對用戶有利的提示文本其實對用戶來說弊大于利，尤其會對用戶瀏覽網頁方面造成困難。
Good: 一個空的表單字段
Bad: 表單字段里的幫助文本令人費解
在某些情況下，為了減輕上面所說的問題，占位符文本可以使用比普通的文本更淺的顏色。然而這種方法容易導致一個對比度的問題，白色背景上的淺灰色文本不符合W3C Web內容的可訪問性指南（正常文本比4.5:1）。此外，根據W3C，占位符文本不支持輔助殘疾人的設計（如屏幕閱讀器），這會讓這部分用戶填寫表單變得很困難。
浮動標簽（Floating Labels）
這是一個現在很受歡迎的新穎的交互設計方式：浮動（或自適應）標簽。整個交互過程，一開始標簽文本作為占位符文本，之后一旦用戶開始填寫它就會移動到表單字段的上方。這種方式很好的解決了上面所說關于標簽消失的問題。
而且這種方式應用在移動端上還能幫助我們減少頁面長度。但是，它還是沒有解決上面所講的一個很重要的問題：用戶掃描式的瀏覽很容易誤會框內已經被輸入了文字。因此，NN Group建議還是避免這種交互方式，仍然采用標簽在字段上方的做法，除非頁面長度是現階段你需要解決優先級最高的問題。
(2)能夠輕松填寫的格式
以前，我們填寫表單是需要靠猜的，比如我的手機號碼應該用哪種格式？信用卡號碼填寫有沒有遺漏？“@”符號在鍵盤的哪個位置？現在，新的表單設計能夠幫助用戶做出判斷，提高表單使用體驗。
輸入掩碼（Input Masks）
字段掩碼，能幫助用戶輸入的文本編排格式。首先，用戶填寫一個字段的時候只能出現一種掩碼，以免出現上述問題。其次，當用戶填寫時自動為文本編排格式，讓用戶將關注的重點放在所需要填寫的信息以及更容易被發現的錯誤上面。在下面的例子中，括號、破折號和間隔被應用于電話號碼的輸入上面。
當我們填寫電話號碼、信用卡號、貨幣等等的時候，這個簡單的方法能夠節省我們的時間和精力。
輸入字段（Input Fields）的HTML屬性
現在設計師們已經知道如何正確調用手機上的小鍵盤，但實際上仍有很多人不會使用正確的鍵盤類型。
“數字（Number）”鍵盤vs.“電話號碼（tel）”小鍵盤
對于僅包含數字的字段，如日期、郵編、信用卡號等，使用“電話號碼”樣式的小鍵盤因為觸發面大的原因能讓用戶輕松的輸入數字。（前端的實現方式， 標簽的type屬性里使用“tel”或者添加屬性 “pattern=”[0-9]*”）。
這里還有其他幾個屬性，將它們添加到文本字段里面也能幫助我們消除多余的按鍵以及錯誤。（注：以下建議需考慮中文適用性）
自動填寫：利用瀏覽器顯示用戶之前填寫的數值。但需要將敏感數據設置為“關閉”。
自動更正：當用戶出現文字拼寫錯誤的時候自動更正。但要注意如果是姓名、地址等特殊字段的時候需要關閉此功能。
自動大寫：第一個字母大寫。
拼寫檢測：用紅色強調拼寫錯誤的單詞。但也需要注意如果是姓名、地址等特殊字段的時候需要關閉此功能。
（3）限制輸入
如今越來越多人使用手機去處理生活中各種各樣的事情，考慮到手機的使用場景以及它本身屏幕小的情況，我們需要讓用戶在填寫表單的時候避免一些不必要的輸入，這樣不僅能夠提高用戶滿意度還可以降低操作的錯誤率。
地址預填充（Pre-Fills）
地址的填寫是任何注冊表單中最麻煩的部分，里面含有多個字段。通過調整表單字段至單個字段，我們發現用戶不僅僅能保持在當前輸入的狀態（不需要頻繁的切換），還可以削減大量的用戶輸入。
在下面的例子我們試著填寫了谷歌總部的地址（街道、城市、州、郵編、國家）。整個表單我們只用了不到10次按鍵就完成了填寫。這看似簡單的輸入背后隱藏了超過50次的潛在手動輸入。
郵件地址預填充
另一種減少輸入的方法就是在郵件地址字段中提供常見的域名。當用戶開始輸入@鍵的時候就會出現這些常見的域名。
利用定位
在移動端APP里面調用地理位置信息是很常見的做法，但也別忘了這種做法同樣適用于平板電腦和臺式電腦。特別是觸摸屏，眾所周知，在觸摸屏上填寫表格特別麻煩。使用基于地理位置信息的預填充方式剛好能幫助用戶節省寶貴的時間，同時提高用戶轉化率。
Nordstrom網站的產品詳情頁就是個很好的例子，該頁面調用了位置信息來自動搜尋離用戶最近的店鋪。這樣做除了節省時間外，用戶不需要花費精力就能得到可能對其有用的信息。
Nordstrom.com
但是，由于精度問題，想要通過預填充填寫一個完整的地址是很困難的。谷歌的Places API基于用戶位置，通過使用地理位置信息和地址預填充兩種方式來解決這個問題，為用戶提供準確的位置參考。
zuppler.com
當然，因為不可能完全準確，所以需要允許用戶對這些自動生成的位置信息進行修改。
總結
總之，遵循這些設計原則能幫助大家設計出更易用的表單以及創造更好的表單體驗：
1.優先考慮用戶瀏覽方式，設計易于用戶閱讀的“標簽（labels）”，并避免無關緊要的信息干擾用戶瀏覽；
2.提供能夠輕松填寫的格式，考慮每一種字段類型，為其提供掩碼（masks）以及合適的鍵盤輸入；
3.限制用戶輸入，使用預填充的方式；
4.利用定位，節省用戶時間。
原文作者：Mike Madaio
譯文鏈接：UI中國
]]>網站是企業宣傳和展示其產品的一個非常好的媒介，同時也是收集用戶建議和評價的最佳途徑。作為網站最重要的組成部分之一，聯系表單是用戶反饋信息的重要窗口。聯系表單的設計應該具有創意性，能夠吸引用戶的注意力，還要讓用戶能夠簡單快速的提交信息。在今天這篇文章中，我向和大家分享19個與眾不同的網頁聯系表單設計，相信能夠帶給你滿滿的設計靈感。
01. Manhattan
02. Mario Petrone
03. Waves of Ideas
04. Motion Kandy
05. Ripcord Graphics
06. Lasabree
07. Hippy Hippy Cakes
08. Sick Designer
09. Pearman
10. Cleek
