用App時每次遇到填寫表單都會是一件頭疼的事情，所以作為設(shè)計師，每次設(shè)計表單界面時也不可以忽略她的重要性，我們需要先了解表單的基本組件樣式和使用場景，然后運(yùn)用到設(shè)計當(dāng)中，在不同的情境下適應(yīng)最合理的組件來搭建表單，讓表單填寫變更輕松。

目錄：

• 第一部分：什么是表單？
• 第二部分：表單中的基本樣式及使用場景
• 第三部分：如何提升用戶信息錄入效率

一、什么是表單？

表單的定義：表單中的內(nèi)容有很多，例如：復(fù)選框、單選框、輸入框、下拉選擇、開關(guān)、分段控等元素。表單對于用戶而言是數(shù)據(jù)的錄入和提交的界面；對于網(wǎng)站而言是獲取用戶信息的途徑。表單的出現(xiàn)可以幫助我們通過采集更多的用戶信息，來給用戶提供更貼切的服務(wù)。

二、移動端表單中的基本組件及使用場景

正確設(shè)計表單的前提則是了解表單中常用的組件以及他們的特性，在不同場景下如何選擇表單組建的使用，這里再次強(qiáng)調(diào)下，下面的組件講的都是在表單中的運(yùn)用。

1. 文本框

接受用戶主動輸入文本的區(qū)域，當(dāng)用戶主動點(diǎn)擊輸入?yún)^(qū)域時，會喚起鍵盤。輸入完畢后，點(diǎn)擊鍵盤的確認(rèn)鍵，應(yīng)用會自動根據(jù)輸入的信息顯示給用戶所對應(yīng)的內(nèi)容。當(dāng)然，相比那些只需要點(diǎn)擊或者滑動的組件來說，輸入框?qū)τ脩魜碚f是比較繁瑣的。

所以我們在選擇用輸入框時，應(yīng)該考慮還有其他組件能否代替，例如：下拉菜單，可以直接選擇其中的內(nèi)容。

如圖：

2. 分段控件

分段控件來源于iOS規(guī)范，通常在單選項(xiàng)為2-5個的場景下使用。（如圖）在界面中分段控件，起到分割和篩選同類數(shù)據(jù)的作用。另外它可以把所有的選項(xiàng)都呈現(xiàn)給用戶，用戶可以快速的做出選擇。交互部分，分段控件只能通過點(diǎn)擊控件本身的分段來進(jìn)行操作，不可橫滑切換。

3. 狀態(tài)切換器

狀態(tài)切換器又稱開關(guān)，是仿照真是的開關(guān)理念而形成的。選擇開關(guān)的前提是需要兩種簡單且直接對立的選項(xiàng)。例如：“開”和“關(guān)”、“顯示”和“隱藏”。（如圖）使用狀態(tài)切換器的項(xiàng)目通常重要性相對較低，都是附加功能，不會影響表單的提交流程。

4. 滑動控制器

當(dāng)表單中存在選擇一個值或一個范圍時，可以舍棄復(fù)雜的下拉菜單或者系統(tǒng)默認(rèn)的選擇控件改用滑動控制器。即減少用戶的操作，又增加界面的設(shè)計感。（如圖）滑動控制器在表單中的應(yīng)用常出現(xiàn)于調(diào)整額度，相對輸入和步進(jìn)器來說更加方便，但占據(jù)界面中的空間比較大。

當(dāng)然其他產(chǎn)品中也有用到滑動控制器的，例如：keep，京東金融，不過都不是在表單中的運(yùn)用這里就不一一列舉了。

5. 數(shù)字步進(jìn)器

可以被用在只能遞增/遞減其數(shù)量的選項(xiàng)上，以便讓用戶能便捷地微調(diào)數(shù)值，使用步進(jìn)設(shè)計代替下拉列表，既可以降低操作失誤率，也在一定程度上減少點(diǎn)擊次數(shù)。（如圖）在產(chǎn)品中經(jīng)常出現(xiàn)在購物列表中，相比單純的選擇數(shù)字和輸入數(shù)字，這種數(shù)字不進(jìn)器當(dāng)大數(shù)額時用戶可以手動輸入，當(dāng)小數(shù)額變化時又可以通過點(diǎn)擊逐步增減。

三、如何提升用戶信息錄入效率

1. 防止輸入框的遮擋（案例：掌上生活A(yù)pp）

• 錯誤示例：當(dāng)我們要輸入最下面“親友公司名稱”時，鍵盤被喚醒，同時遮擋了所以需要填寫的表單組件，我們需要滑動底層界面才能繼續(xù)填寫，這種體驗(yàn)是十分糟糕的。
• 正確示例：我們在用戶輸入完當(dāng)前表單的某一段落時，底層界面位置應(yīng)該自動往上移動，顯示當(dāng)先該填寫的項(xiàng)目且完整的輸入框，確保表單在填寫時無任何元素的遮擋，方便用戶的輸入。

2. 實(shí)時校驗(yàn)（案例：阿里賣家）

• 錯誤示例：每次需要用戶填完了所有信息提交時，才反饋存在很多錯誤，用戶需要根據(jù)系統(tǒng)所給出的提示再次修改提交，我認(rèn)為此時心情應(yīng)該不是很好。
• 正確示例：如果優(yōu)化為每當(dāng)用戶離開當(dāng)前輸入時，系統(tǒng)根據(jù)用戶輸入的信息進(jìn)行判斷并及時告知用戶輸入的正確性，甚至還能引導(dǎo)用戶進(jìn)行接下來一系列有關(guān)聯(lián)性的輸入。就會減少用戶的反復(fù)操作，表單也會變得更容易讓用戶接受。

3. 鍵盤匹配（案例：火槍買手、豆瓣）

在App中通常會出現(xiàn)不同的輸入方式，有需要輸入文字的，有需要輸入英文的，有需要輸入數(shù)字的，屆時我們應(yīng)該對不同的輸入需求去匹配不同樣式的鍵盤，減少用戶的切換操作，提高用戶的輸入體驗(yàn)。

例如：輸入電話號碼時就可以只存在數(shù)字鍵盤，省去了用戶對鍵盤的切換操作。例如：輸入郵箱時不需要拼音，我們的鍵盤就只保留英文和數(shù)字即可。

4. 智能預(yù)設(shè)（案例：每日優(yōu)鮮）

• 錯誤示例：用戶填寫表單這個事件本身對用戶來說就是一件很頭痛的事情，如果每次表單中的信息我們都需要重新填寫，不僅增加了用戶的操作，出錯了也會相對提升。
• 正確示例：每日優(yōu)鮮中第一次添加收貨地址時，由于產(chǎn)品不了解我們的個人信息所以所有項(xiàng)目都需要我們自己手動完成，但當(dāng)我們再次添加地址時，產(chǎn)品會自動默認(rèn)當(dāng)前我的姓名、電話、城市等信息的預(yù)設(shè)，這就減少了我的填表時間。用戶一定會對此感激不盡。

總結(jié)

通過明確表單中組件的運(yùn)用以及在不同場景的使用，讓表單的設(shè)計變得清晰易懂，提高用戶的填寫率。同時我們應(yīng)該思考如何優(yōu)化用戶在使用時的交互效果，別面造成反復(fù)的操作。

作者：小溜Epik，公眾號：海鹽社

本文由 @小溜Epik 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議