在產品設計里面，用戶的注冊流程、輸入界面、設置頁面、操作的頁面，表單都是產品設計中最重要的組件之一。填寫表單并不是所有人都喜歡做的事情，但是有時候要用戶必須注冊完成，所以表單設計原則一定要高效簡單。

表單結構

表單的結構由表單的基本樣式和基本內容組成，表單的內容都居中布置。表單的基本樣式分為單行表單、多行表單、少數情況下表單作為標題存在的組合。

表單的內容作用是信息查看、信息入口、信息操作以及內容輸入，表單的內容分主要是信息文字和輔助信息文字。

輔助信息文字通過是否為流程的必要內容來區別對應使用不同的字號，重要內容或需要突出對待的內容可以相應的搭配組合圖標。

表單常用控件

常用設計原則

1. 如果5個以下內容，全部放出來，而不是折疊

在單選方案中，有2-5個選項可用，使用分段控件而不是下拉列表。主要是因為分段控制內容可見，并且可以通過單個交互完成任務，而不是多步（點擊打開，選擇，點擊）。

2. 多個選擇的功能，收納在一個選擇容器里

一般日期由年、月、日三個部分組成，如果使用下拉列表會有9步操作，對于這種功能接近的可以整合到一個設計組件里。

3. 使用開關而不是下拉列表

如果只有2個選項，如顯示或隱藏，打開或關，這種情況使用開關來提升操作效率。

4. 滑塊

通過滑動控件，將單調的下拉式操作調整為用戶易于掃描的視覺體驗，可以使用滑塊定義好范圍內的一個或多個值。

5. 避免多列表單

移動端都是小屏幕，需要讓用戶重點放在內容上，保持從上而下的閱讀視線，避免過于復雜的表單。

6. 使用增加或減少按鈕而不是下拉

當用戶需要通過增加或減少時，避免自由表單輸入和下拉列表，用按鈕幫助最大限度的減少錯誤。

7. 盡量避免顯示不需要的字段

盡量避免顯示不需要的字段，使表單更短，不要把必填和非必填的內容混在一起。

8. 對信息進行分組

對相同內容信息進行分組，方便用戶快速準確的掃描查找。

設計策略

• 如果5個以下內容，全部放出來，而不是折疊。
• 多個選擇的功能，收納在一個選擇容器里。
• 如果只有2個選項，如顯示或隱藏，打開或關，這種情況使用開關來提升操作效率。
• 通過滑動控件，將單調的下拉式操作調整為用戶易于掃描的視覺體驗。
• 避免多列表單，保持從上而下的閱讀視線，避免過于復雜的表單。
• 當用戶需要通過增加或減少時，避免自由表單輸入和下拉列表，用按鈕幫助最大限度的減少錯誤。
• 盡量避免顯示不需要的字段，使表單更短，不要把必填和非必填的內容混在一起。
• 對相同內容信息進行分組，方便用戶相更快地掃描查找，不要內容都混在一起。

歡迎關注作者的微信公眾號：我們的設計日記，每周分享最新設計趨勢和設計經驗，科學設計方法。

「表單設計自學技巧」

• 《如何做好表單設計？這兒有3個通用的注意要點》
• 《16個優點告訴你，為什么表單設計應該用這個方法？》
• 《表單經典原則是錯的？來看這5個表單設計新規則》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com