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

表單結(jié)構(gòu)

表單的結(jié)構(gòu)由表單的基本樣式和基本內(nèi)容組成，表單的內(nèi)容都居中布置。表單的基本樣式分為單行表單、多行表單、少數(shù)情況下表單作為標(biāo)題存在的組合。

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

輔助信息文字通過是否為流程的必要內(nèi)容來區(qū)別對(duì)應(yīng)使用不同的字號(hào)，重要內(nèi)容或需要突出對(duì)待的內(nèi)容可以相應(yīng)的搭配組合圖標(biāo)。

表單常用控件

常用設(shè)計(jì)原則

1. 如果5個(gè)以下內(nèi)容，全部放出來，而不是折疊

在單選方案中，有2-5個(gè)選項(xiàng)可用，使用分段控件而不是下拉列表。主要是因?yàn)榉侄慰刂苾?nèi)容可見，并且可以通過單個(gè)交互完成任務(wù)，而不是多步（點(diǎn)擊打開，選擇，點(diǎn)擊）。

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

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

3. 使用開關(guān)而不是下拉列表

如果只有2個(gè)選項(xiàng)，如顯示或隱藏，打開或關(guān)，這種情況使用開關(guān)來提升操作效率。

4. 滑塊

通過滑動(dòng)控件，將單調(diào)的下拉式操作調(diào)整為用戶易于掃描的視覺體驗(yàn)，可以使用滑塊定義好范圍內(nèi)的一個(gè)或多個(gè)值。

5. 避免多列表單

移動(dòng)端都是小屏幕，需要讓用戶重點(diǎn)放在內(nèi)容上，保持從上而下的閱讀視線，避免過于復(fù)雜的表單。

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

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

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

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

8. 對(duì)信息進(jìn)行分組

對(duì)相同內(nèi)容信息進(jìn)行分組，方便用戶快速準(zhǔn)確的掃描查找。

設(shè)計(jì)策略

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

歡迎關(guān)注作者的微信公眾號(hào)：我們的設(shè)計(jì)日記，每周分享最新設(shè)計(jì)趨勢(shì)和設(shè)計(jì)經(jīng)驗(yàn)，科學(xué)設(shè)計(jì)方法。

「表單設(shè)計(jì)自學(xué)技巧」

• 《如何做好表單設(shè)計(jì)？這兒有3個(gè)通用的注意要點(diǎn)》
• 《16個(gè)優(yōu)點(diǎn)告訴你，為什么表單設(shè)計(jì)應(yīng)該用這個(gè)方法？》
• 《表單經(jīng)典原則是錯(cuò)的？來看這5個(gè)表單設(shè)計(jì)新規(guī)則》

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com