不論是 toB 還是 toC 的移動(dòng)端設(shè)計(jì)中，都會(huì)遇到一些表單填寫(xiě)和上傳證件信息的情況。面對(duì)移動(dòng)端要手動(dòng)填寫(xiě)的表單，用戶(hù)通常期待有高效的解決辦法可以立即完成填寫(xiě)任務(wù)。本文為你總結(jié)出了幾種移動(dòng)端表單設(shè)計(jì)的實(shí)用原則，可以有效解決表單不夠友好、用戶(hù)填寫(xiě)錯(cuò)誤、費(fèi)時(shí)費(fèi)力的問(wèn)題，希望對(duì)你有幫助。
一. 信息內(nèi)容層級(jí)化——信息分層次、分步驟、分頁(yè)面呈現(xiàn)
1 . 表單結(jié)構(gòu)分層
從表單結(jié)構(gòu)層面來(lái)看，內(nèi)容過(guò)長(zhǎng)的表單，信息可以分步驟、分頁(yè)面處理。
使用條件
- 表單內(nèi)容過(guò)長(zhǎng)，用戶(hù)填寫(xiě)有壓力
- 操作步驟較多，需要給用戶(hù)明確的步驟提示
- 中途需要多次跳轉(zhuǎn)，接入第三方服務(wù)的表單
案例分析
做企業(yè)認(rèn)證時(shí)，由于需要填寫(xiě)的項(xiàng)目較多，步驟繁雜，因此很多產(chǎn)品會(huì)采用分步驟的形式，提示用戶(hù)當(dāng)前進(jìn)度。
2 . 頁(yè)面內(nèi)容分層
每個(gè)頁(yè)面的信息內(nèi)容呈現(xiàn)，有層級(jí)，有重點(diǎn)
使用條件
- 表單填寫(xiě)內(nèi)容較多
- 頁(yè)面內(nèi)文字內(nèi)容較多
- 產(chǎn)品對(duì)于用戶(hù)填寫(xiě)的內(nèi)容有傾向（如對(duì)平臺(tái)來(lái)說(shuō)更有意義、更希望用戶(hù)填寫(xiě)的信息）
案例分析
大眾點(diǎn)評(píng)在設(shè)置用戶(hù)信息時(shí)，雖然要填寫(xiě)的內(nèi)容都是“設(shè)置”，但是重點(diǎn)需要設(shè)置的信息使用了鏈接顏色處理，做了強(qiáng)調(diào)。
二. 減少用戶(hù)輸入——用其他方式代替用戶(hù)手動(dòng)輸入
1 . 以選擇代替輸入
如果用戶(hù)可以做選項(xiàng)時(shí)，就不要使用輸入，可以充分利用移動(dòng)設(shè)備的性能，比如 GPRS 定位、通訊錄等，合理調(diào)用第三方或系統(tǒng)信息。
使用條件
- 填寫(xiě)的內(nèi)容邊界較為模糊，詞語(yǔ)不確定性較高
- 選項(xiàng)數(shù)量控制在 3-5 個(gè)之間
- 可以調(diào)用第三方或系統(tǒng)信息
案例分析
- 案例一：知乎 App 博主認(rèn)證 和 愛(ài)康國(guó)賓 App 個(gè)人信息都使用了部分選項(xiàng)替代填寫(xiě)：
- 案例二：淘寶 App 可以調(diào)動(dòng)系統(tǒng)定位，并提供幾個(gè)最有可能的選項(xiàng)，讓用戶(hù)選擇最佳定位。
2 . 提供默認(rèn)選項(xiàng)，替用戶(hù)做選擇
選取最大概率事件作為默認(rèn)選項(xiàng)，減少用戶(hù)的手動(dòng)調(diào)整
使用條件
- 系統(tǒng)能夠確定出符合用戶(hù)的較大概率選項(xiàng)
- 選項(xiàng)數(shù)量控制在 3-5 個(gè)之間
案例分析
螞蟻鏈實(shí)人認(rèn)證在上傳證件時(shí)會(huì)根據(jù)用戶(hù)所在國(guó)家和地區(qū)，幫助用戶(hù)默認(rèn)選擇概率最大的選項(xiàng)，不需要用戶(hù)自己操作。
三. 定義鍵盤(pán)類(lèi)型
根據(jù)調(diào)用內(nèi)容調(diào)動(dòng)不同的鍵盤(pán)類(lèi)型
根據(jù)表單輸入內(nèi)容的不同，調(diào)用出系統(tǒng)不同的鍵盤(pán)類(lèi)型。
使用條件
- 填寫(xiě)的內(nèi)容有明確的輸入語(yǔ)言要求
案例分析
航旅縱橫在航班查詢(xún)的時(shí)候，由于航班號(hào)都是大寫(xiě)字母和數(shù)字的組合，所以鍵盤(pán)會(huì)默認(rèn)調(diào)用出只有數(shù)字和字母的輸入法，同時(shí)默認(rèn)開(kāi)啟大寫(xiě)形式。螞蟻鏈實(shí)人認(rèn)證在用戶(hù)手動(dòng)填寫(xiě)身份證時(shí)也同理。
四. 避免重要信息被遮擋
重要的信息要始終可以被看到
需要避免輸入項(xiàng)被鍵盤(pán)遮擋，也要避免將重要的輸入提示作為占位符，不要在用戶(hù)填寫(xiě)時(shí)被輸入的內(nèi)容遮擋。
使用條件
- 表單的填寫(xiě)位置剛好會(huì)被彈出的鍵盤(pán)擋住
- 輸入提示很重要，需要用戶(hù)在輸入時(shí)隨時(shí)注意
- 輸入提示很長(zhǎng)，用戶(hù)短時(shí)間內(nèi)記不住
案例分析
大眾點(diǎn)評(píng)在寫(xiě)評(píng)論時(shí)，一些可以激勵(lì)用戶(hù)寫(xiě)點(diǎn)評(píng)的提示性文字，會(huì)在用戶(hù)輸入時(shí)始終存在。
五. 實(shí)時(shí)校驗(yàn)
重要的信息要始終可以被看到
當(dāng)輸入需要被判斷和檢驗(yàn)的信息時(shí)，系統(tǒng)最好可以針對(duì)信息做實(shí)時(shí)校驗(yàn)，避免用戶(hù)一直到最后提交表單時(shí)才發(fā)現(xiàn)填寫(xiě)問(wèn)題。
使用條件
- 輸入的信息需要判斷，并會(huì)影響最終的表單填寫(xiě)通過(guò)率
- 輸入內(nèi)容的質(zhì)量需要用戶(hù)知曉，如密碼的強(qiáng)度
案例分析
證件號(hào)碼輸入錯(cuò)誤時(shí)會(huì)給予相應(yīng)的提示。
原文鏈接：長(zhǎng)弓小子（公眾號(hào)）
作者：元堯
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》干貨｜移動(dòng)端·表單設(shè)計(jì)有方法！
文章來(lái)源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.newchinaweekly.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)