話說,移動端表單你真的了解嗎?

6 評論 10826 瀏覽 89 收藏 9 分鐘

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

目錄:

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

一、什么是表單?

表單的定義:表單中的內容有很多,例如:復選框、單選框、輸入框、下拉選擇、開關、分段控等元素。表單對于用戶而言是數據的錄入和提交的界面;對于網站而言是獲取用戶信息的途徑。表單的出現可以幫助我們通過采集更多的用戶信息,來給用戶提供更貼切的服務。

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

正確設計表單的前提則是了解表單中常用的組件以及他們的特性,在不同場景下如何選擇表單組建的使用,這里再次強調下,下面的組件講的都是在表單中的運用。

1. 文本框

接受用戶主動輸入文本的區域,當用戶主動點擊輸入區域時,會喚起鍵盤。輸入完畢后,點擊鍵盤的確認鍵,應用會自動根據輸入的信息顯示給用戶所對應的內容。當然,相比那些只需要點擊或者滑動的組件來說,輸入框對用戶來說是比較繁瑣的。

所以我們在選擇用輸入框時,應該考慮還有其他組件能否代替,例如:下拉菜單,可以直接選擇其中的內容。

如圖:

2. 分段控件

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

3. 狀態切換器

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

4. 滑動控制器

當表單中存在選擇一個值或一個范圍時,可以舍棄復雜的下拉菜單或者系統默認的選擇控件改用滑動控制器。即減少用戶的操作,又增加界面的設計感。(如圖)滑動控制器在表單中的應用常出現于調整額度,相對輸入和步進器來說更加方便,但占據界面中的空間比較大。

當然其他產品中也有用到滑動控制器的,例如:keep,京東金融,不過都不是在表單中的運用這里就不一一列舉了。

5. 數字步進器

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

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

1. 防止輸入框的遮擋(案例:掌上生活App)

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

2. 實時校驗(案例:阿里賣家)

  • 錯誤示例:每次需要用戶填完了所有信息提交時,才反饋存在很多錯誤,用戶需要根據系統所給出的提示再次修改提交,我認為此時心情應該不是很好。
  • 正確示例:如果優化為每當用戶離開當前輸入時,系統根據用戶輸入的信息進行判斷并及時告知用戶輸入的正確性,甚至還能引導用戶進行接下來一系列有關聯性的輸入。就會減少用戶的反復操作,表單也會變得更容易讓用戶接受。

3. 鍵盤匹配(案例:火槍買手、豆瓣)

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

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

4. 智能預設(案例:每日優鮮)

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

總結

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

 

作者:小溜Epik,公眾號:海鹽社

本文由 @小溜Epik 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很有用,學習了。

    移動表單的細節確實需要我們注意。

    來自廣東 回復
  2. 學習了,很棒

    來自江蘇 回復
    1. 感謝支持 :mrgreen:

      來自北京 回復
  3. 很不錯

    來自浙江 回復
    1. 感謝,支持 ??

      來自北京 回復