把一個表單設計到極致是怎樣一種體驗？

對於表單大家可能都不陌生，我們每天都會接觸到各式各樣的表單，比如：註冊登錄、填寫信息、發布信息、等等，表單是頁面設計中十分重要的組成部分，也是用戶體驗設計中很容易被我們忽視的一塊區域，複雜繁瑣的表單設計很容易造成用戶中途放棄操作而流失掉。那麼如何設計一款有著不錯用戶體驗的表單呢？針對這一問題，本文列舉移動端和PC端表單設計的幾種案例和方法，希望對大家能夠有所幫助。

簡單清晰的信息層級

面對複雜的表單信息，首先需要對其進行必要的信息排序和整理歸納，有意識的利用線條和顏色對不同類型的表單進行區分，從而降低複雜表單對用戶操作可能帶來的麻煩，使用戶不排斥我們的產品，願意去輸入我們想得到的信息，快速準確的進入下一步操作。比如在用戶註冊頁面，僅保留必要信息的錄入框，剔除掉其餘非必要的信息。其他信息可以在使用過程中引導用戶完善，有效簡化了用戶的註冊流程，降低了用戶的使用負擔。下圖是兩種註冊表單，設想一下你是用戶，你更喜歡哪一種呢？我想大多數同學肯定會和我一樣，選擇左邊的表單。左圖中的表單只需要用戶填寫必要的信息即可完成註冊，而右圖中的表單則需要用戶填寫出生年月、身份證號碼這些非必要的註冊信息，增加了用戶的操作時間，而且身份證號碼對於用戶來說涉及到了相關隱私，會給用戶帶來安全性的擔憂。表單的填寫可以根據不同的維度進行分組，從而提高註冊效率。

PC端註冊頁面

用戶沒有我們想的那麼勤奮

很多時候，我們總會將自己假想成為用戶，把用戶想像的過於完美，但現實卻與我們想像的截然不同，用戶並沒有我們想像的那麼勤奮，因此就需要在我們的界面設計上下足功夫。要知道，用戶在使用我們的產品時，一定是遇到了某些問題或想做某些事，需要我們做的就是，幫助用戶快速的、有效的、不出錯的完成想要完成的事。舉個栗子，我們常用的手機充值界面。左圖在充值時輸入號碼後會自動彈出售價，而右圖則需要手動填寫充值數量。很顯然，這種條件下讓用戶手動輸入，無疑是給用戶製造了麻煩，用戶很可能在中途就放棄了充值，而左圖中為用戶提供了多種充值額度的選擇，幫助用戶節省時間，1秒鐘的等待都可能造成用戶流失，所以在這個問題上就要做到能夠讓用戶選擇完成的就不要讓用戶去輸入完成。

移動端話費充值頁面

為用戶提供必要的幫助

在填寫表單時，大多數用戶會很順利的完成填寫，但是還會有一小部分用戶，在填寫中出現錯誤，這就需要我們要在必要的時候，及時的出現一些提示性的信息，指導並幫助用戶順利的完成填寫，目前最常見的提示方式我歸納為以下兩種分別是直接展現形式和觸發展現形式。直接展現形式是指用戶不需要進行任何操作，提示信息自動出現在相關的區域內，目前最常見的就是出現在輸入框的內部或右側。例如我們常用的登錄頁面，在為輸入用戶名時會提示你請輸入郵箱/用戶名/已驗證手機的提示信息，幫助用戶儘快完成操作。觸發展現形式是指用戶觸發操作後，展現出相關提示內容，提示用戶該如何進行下一步操作、判斷用戶當前的操作是否正確。

提示信息

最後

設計師應該是一個有靈魂的職業，我們為世界的一切變得更美好而生。設計師的靈魂在於創造力，而創造力源自生活的方方面面。

好了，就寫這麼多吧，希望能夠對各位小夥伴有所幫助，表單設計雖然在頁面設計中佔得比例不是那麼大，但我認為，它的用戶體驗好與壞能夠直接導致用戶的去留，我們做任何設計都是一樣，設計出來的內容是幫助用戶解決問題，而不是為用戶製造麻煩，表單雖小，但我們在平時的設計中也要重視起來，把不可能變成可能，把平凡做到極致這才是一個設計師應該具有的職業精神。由於自己的能力水平還比較有限，如果在文中出現哪些不妥的地方，還請各位老師及時的批評指正。

我的微信公眾號，有興趣的可以關注一下。

請您繼續閱讀更多來自 推酷 的精彩文章:

※一個把摺疊玩到極致的設計師
※一個鞋櫃都能設計成這樣，設計師們真是蠻拼的！
※命中注定的另一半是怎麼樣的？原來一切都是設計好的！
※這個才叫版式設計，你那個只是堆疊！
※數屏美：這個世界做設計的有兩種工作方式，一種是用一個屏幕的！
※名片設計成這樣，價值才和掃微信不一樣｜這個設計了不起
※設計師裝 B 成功是種什麼樣的體驗？
※全球首款電子墨水時鐘是一種什麼樣的設計體驗？
※找個學設計的女朋友是種怎樣的體驗 酸爽！
※書房只有一種模樣？9種令人驚艷的風格設計
※這些工具，想讓你在下廚時多一份樂趣｜這個設計了不起
※這些辣眼睛的設計，看到第二個就不忍細看了
※這樣一位老外設計師，竟將東方禪意做到了極致！
※沒想到你是這樣的設計師
※沒有一種快樂，是專為我們設計的，沒有一種痛苦，是單為我們預留的
※把碗設計成這樣，你咋不上天？
※陽台設計風格多種多樣，想不到這樣的效果就是炫
※你家有幾個？這樣不合理的裝修設計
※那些令人崩潰的反人類設計，你最有感觸的是哪一個？