近期我們發現，很多產品的手機號注冊頁，手機號輸入與驗證碼輸入/密碼輸入也進行了分頁，當這三個項目在一頁時，用戶需要在輸入手機號碼后進行等待，然后才能繼續輸入，讓用戶產生這個表單進展緩慢的感覺，分開后，用戶在一頁只需要填寫一個或兩個內容，跳轉的時間又掩蓋了一部分等待驗證碼的時間，會覺得進展更快更流暢。

△ KEEP

5. 選擇合理的標簽對齊方式

頂對齊 vs 左對齊 vs 右對齊

跟一般想法相反，在輸入框上面放置標簽并不是可用性最好的位置。你有時候希望用戶盡可能快地填寫表格，但有些時候你需要故意讓用戶慢下來，以便他們用心地留意并閱讀標簽。此外，把長表單設成一個長列，讓用戶向下滾動頁面。這比把表單分成列，每樣都雷同要好。每一種對齊方式都有它的優點和缺點。

△ Matteo Penzo根據表單標簽對齊方式研究出的時間表。

小結：

希望用戶快速掃描表單，把標簽放在輸入框上面，這種布局更便于眼睛向下掃描。

希望用戶仔細的閱讀，把標簽放在輸入框的左側，這個布局掃描較慢，向下向右(Z的形狀)的眼動。

6. 選擇合適的按鈕位置

表單里可能有很多種類的按鈕，我們在這里只說最重要的「下一步」、「完成/提交/保存」等提交表單類型的按鈕。

最常用的位置是右上角和下方。在右上角通常是文字按鈕，而在下方一般有：固定在屏幕底部、跟隨鍵盤移動、隨表單移動。

關于保存功能，阿里設計師總結了一份超全的干貨：《關于保存功能的設計，這篇可能是最全面的總結!》

右上角文字按鈕

右上角文字按鈕，最常見的一種按鈕形式。

△ 美團外賣/微信/Facebook

優勢：不影響用戶對表單內容的注意力;用戶在完成表單時，視線會從下向上轉移，有助于用戶作進一步檢查。

適用于：

表單項目少，在一屏內完全展示;

內容復雜且重要，需要用戶專注于表單本身，認證填寫。

固定在屏幕底部

△ 閑魚

優勢：

用戶在任何時間都可以點擊;

強烈吸引用戶的注意力，引導用戶點擊。

適用于：

表單內容重要性不高，不需要全部完成，也不需要過于仔細，需要促進用戶快速完成提交。

缺點：可能會被鍵盤阻擋。

隨鍵盤移動

△ Twitter

優勢：

距離鍵盤位置最近，方便輸入完立即提交;

不會被鍵盤阻擋。

適用于：

表單內容以輸入為主，簡單不易出錯，輸入后需要快速提交。

置于表單底部

△ Twitter/美團外賣

優勢：

符合用戶從上至下的閱讀方向;

可以促進用戶完成整個表單。

適用于：

表單內容少于一頁，按鈕最靠近表單;

表單內容很長，需要引導用戶全部填寫。

四種常見方式各有優勢，需要根據實際情況選擇最適合的方式。

7. 給表單的設計加入微交互

其實市面上已經有許多新的表單設計形式慢慢普及開來了，但是要在使用之前思考你正在為誰而設計，它們是否適合你的項目，你的表單是否確實需要使用微交互。

△ Health App Login by Jakub Antalík in Health app on Mar 10, 2016

這些例子中的微交互非常有趣，它們可以提起用戶的興趣，提升用戶注冊的轉化率。

總結

一個表單是否「好用」，視覺體驗只占了整體體驗一部分，初級設計師能很輕易的復制一個高級設計師設計出的表單的樣式，但是其中的思考卻無法直接拿來。作為UI設計師，我們需要謹記的是，通過優化視覺表現提升表單體驗只是表象，更多是要考慮到表單最終要幫用戶解決什么問題，表單對于你的產品或項目起到了什么作用。換言之，先想好為什么，再想怎么做。

以上是我個人的一些看法和總結，如有不對的地方歡迎指正和討論。

歡迎關注作者的微信公眾號：「海鹽社」