設(shè)計(jì)師在移動(dòng)端設(shè)計(jì)表單的歷史已經(jīng)超過(guò)十年。但是十年之間科技日新月異，我們對(duì)用戶的理解也不再停留在小學(xué)階段，對(duì)表單的設(shè)計(jì)也不再墨守陳規(guī)壹士，循規(guī)蹈矩顽染。設(shè)計(jì)師們需要探索新的方法以提供更加好的用戶體驗(yàn)款筑，本文介紹的這8種方式不妨一試。

為什么移動(dòng)端表單的設(shè)計(jì)永遠(yuǎn)充滿挑戰(zhàn)票摇，我想是因?yàn)橐韵逻@幾點(diǎn)：

? 狹小的顯示屏幕

??數(shù)據(jù)輸入的巨大負(fù)荷

??數(shù)據(jù)連接的不穩(wěn)定性

??后臺(tái)存儲(chǔ)問題

??不可預(yù)知的使用環(huán)境

??高成本的交互

很多企業(yè)為了設(shè)計(jì)一個(gè)優(yōu)秀的表單，依然花費(fèi)著大量的人力和物力砚蓬。eBay 每年要額外花費(fèi)5億美元矢门，只求在移動(dòng)端上設(shè)計(jì)合理的表單按鈕（Jessica Enders）。所以長(zhǎng)久以來(lái)存在的移動(dòng)端表單設(shè)計(jì)的局限性不斷迫使UX設(shè)計(jì)師發(fā)起革命性的創(chuàng)新灰蛙，如何使用戶高效率的輸入和快速的完成任務(wù)已成為了首要目標(biāo)祟剔。

盡量只做單一輸入框

對(duì)于移動(dòng)端，多樣式的輸入框是一個(gè)長(zhǎng)期存在的痛點(diǎn)摩梧，尤其是需要不斷轉(zhuǎn)換輸入模式的時(shí)候物延，例如需要使用鍵盤時(shí)。將數(shù)據(jù)沒有必要的拆散增加了用戶使用的挫折感仅父，同時(shí)也提高了用戶棄而不用的可能性叛薯。例如浑吟，Domino'sPizza需要用戶分別填寫姓和名，如圖：

也許這樣的設(shè)計(jì)也許符合商家的需求耗溜，但顯然給用戶造成了麻煩组力。而且，在不同文化中抖拴，這樣的設(shè)計(jì)也可能引起困惑燎字。例如在一些亞洲國(guó)家，姓和名的順序恰好與西方人的順序相反城舞。又比如在緬甸大約有三千六百萬(wàn)移動(dòng)端用戶的名字只有一個(gè)字轩触，不區(qū)分名和姓。所以為了確保不出現(xiàn)這樣的問題家夺，同時(shí)也是為了節(jié)省用戶的時(shí)間脱柱，盡量使用單一的輸入框，如圖：

創(chuàng)造不完全“自由”的對(duì)話式表單

Justin Mifsud 在2011年提出“表單應(yīng)該像一個(gè)對(duì)話拉馋，而不是審訊”榨为。因?yàn)榕c工作式和非工作式場(chǎng)景下使用移動(dòng)設(shè)備的界限已經(jīng)越來(lái)越模糊，在用戶和系統(tǒng)之間建立對(duì)話的感覺比以往更加強(qiáng)烈煌茴。例如Whatsapp現(xiàn)在不僅是聊天工具随闺，有時(shí)也充當(dāng)工作面試的工具。用戶已經(jīng)習(xí)慣日常與app和網(wǎng)頁(yè)的非正式的交互方式蔓腐，所以聊天式的交互將會(huì)越來(lái)越流行矩乐。例如withjack.com已經(jīng)在注冊(cè)過(guò)程中加入有趣的方式，如圖：

這樣的交互交互方式對(duì)信任度是一個(gè)考驗(yàn)回论，為了建立信任度散罕，需要遵循一下幾條建議：

? 幫助用戶輸入默認(rèn)值

? 將深入的問題和個(gè)人問題放在表單的最后，用戶更愿意在建立了足夠的“交情”后才回答這一類問題一次只解決一個(gè)主題

? 允許雙向通訊傀蓉。例如欧漱，一個(gè)“聯(lián)系我們”的按鈕可以使用戶實(shí)時(shí)溝通，同時(shí)為商務(wù)類app增信

然而葬燎，對(duì)話式并不意味著完全的自由误甚。eBay在創(chuàng)造ShopBot時(shí)，產(chǎn)品團(tuán)隊(duì)發(fā)現(xiàn)輕微的機(jī)器語(yǔ)言可以提高效率谱净。另外窑邦，用戶并沒有對(duì)ShopBot的能力有太多期許，所以對(duì)ShopBot提供的信息也更加認(rèn)可壕探。移動(dòng)端的表單設(shè)計(jì)應(yīng)該利用相同的原理奕翔。既不完全機(jī)器化語(yǔ)言也不完全人類語(yǔ)言，掌握良好的平衡可以提高信任度和轉(zhuǎn)化率浩蓉。（Mifsud）

自動(dòng)填寫預(yù)設(shè)值

在2016年AnswerLab的研究中派继，Google發(fā)現(xiàn)移動(dòng)端用戶的目標(biāo)趨勢(shì)性更強(qiáng)宾袜。因此，表單自動(dòng)填寫預(yù)設(shè)值是一個(gè)使用戶快速完成任務(wù)的設(shè)計(jì)驾窟。同時(shí)庆猫，移動(dòng)端設(shè)備的各種傳感器可以提供準(zhǔn)確的信息以降低用戶填寫表單的繁重負(fù)荷。例如绅络，Skyscanner使用GPS實(shí)時(shí)監(jiān)測(cè)位置月培，并且在app中自動(dòng)填寫當(dāng)前位置，如圖：

同時(shí)恩急，在電商類應(yīng)用里杉畜，利用GPS所提供的用戶當(dāng)前位置，可以在當(dāng)前瀏覽的商品頁(yè)面提示附近哪里有售衷恭，而不必再手動(dòng)輸入查找此叠。在最近Pew Research Center的研究中，64%的用戶依然更愿意在實(shí)體店購(gòu)物随珠。所以在宜家的移動(dòng)端我們可以看到這樣的設(shè)計(jì)灭袁，利用GPS告訴用戶當(dāng)前瀏覽的商品在最近的哪一家宜家可以購(gòu)買，如圖：

當(dāng)然這樣的預(yù)設(shè)值并不能夠達(dá)到完全正確窗看，所以通常只會(huì)自動(dòng)寫入100%正確的預(yù)設(shè)值茸歧，試想Skyscanner使用于宜家同樣的設(shè)計(jì)，只允許用戶在最近的機(jī)場(chǎng)預(yù)定機(jī)票显沈。毫無(wú)疑問软瞎，這將是一個(gè)糟糕的體驗(yàn)，甚至?xí)绊懙缴虡I(yè)利益拉讯。所以對(duì)于沒有把握的預(yù)設(shè)值涤浇，依然需要用戶手動(dòng)輸入，但是自動(dòng)填寫預(yù)設(shè)值已經(jīng)大大降低了用戶輸入表單的負(fù)荷遂唧。

確保表單的可訪問性

根據(jù)2013年Wireless Rehabilitation Engineering Research Center的研究調(diào)查芙代，91%的殘疾人會(huì)使用移動(dòng)設(shè)備吊奢。先進(jìn)的移動(dòng)技術(shù)已經(jīng)帶給殘疾人與這個(gè)世界溝通的機(jī)會(huì)盖彭，但是如何利用這樣的科技卻取決于設(shè)計(jì)的可訪問性。

有視覺障礙或認(rèn)知障礙的用戶在使用表單的時(shí)候面臨巨大的挑戰(zhàn)页滚。設(shè)計(jì)師應(yīng)該根據(jù)已有的可訪問性原則降低特殊人群的使用障礙召边。當(dāng)然這樣的原則對(duì)于正常用戶也同樣適用。例如裹驰，清晰直觀的設(shè)計(jì)和用戶邏輯隧熙。

對(duì)于有視覺或認(rèn)知障礙的用戶，以下這些建議將對(duì)你的設(shè)計(jì)有所幫助：

? 優(yōu)化屏幕的窗體控件

? 設(shè)計(jì)高對(duì)比度的界面

? 啟用窗體的鍵盤控制

? 支持語(yǔ)音輸入和語(yǔ)音輸出

Web Accessibility Initiative為移動(dòng)端提供了更多的可訪問性原則幻林，這其中也包括表單設(shè)計(jì)贞盯。其中最有效的幾項(xiàng)已經(jīng)在上文中提及音念。

按步驟分解復(fù)雜表單

并不是每一個(gè)表單都是簡(jiǎn)單輸入一兩項(xiàng)。有很多表單需要輸入繁瑣的信息躏敢，例如銀行信息闷愤，政府程序或在線購(gòu)物應(yīng)用。對(duì)于這樣的復(fù)雜表單件余，讓用戶知道下一步是什么以及還需要幾步可以完成表單是很重要的讥脐。Autoglass將表單流程放置于頁(yè)面頂部是一個(gè)有效的設(shè)計(jì)，如圖：

這樣的設(shè)計(jì)不僅可以降低用戶漏填的風(fēng)險(xiǎn)啼器，同時(shí)也緩解了用戶對(duì)復(fù)雜表單的恐懼感旬渠。

精簡(jiǎn)表單，只保留必要問題

在常見的移動(dòng)設(shè)備使用環(huán)境中端壳，例如在室外告丢，在擁擠的環(huán)境，或者在嘈雜的環(huán)境里更哄，復(fù)雜的表單會(huì)迫使用戶放棄使用同時(shí)也會(huì)使錯(cuò)誤率上升芋齿。因此只保留必要項(xiàng)是提高完成率的一個(gè)方式。

對(duì)于設(shè)計(jì)師成翩，一些問題完全可以被精簡(jiǎn)觅捆，例如你是從何處知道我們，你是否會(huì)向朋友推薦我們麻敌，請(qǐng)?zhí)峁﹤溥x郵箱等等栅炒。盡管這些問題可能對(duì)運(yùn)營(yíng)團(tuán)隊(duì)有所幫助，但是更有可能嚇走用戶术羔。所以這些問題需要在移動(dòng)端舍棄赢赊，但是可以保留在PC端。

即使需要對(duì)復(fù)雜表單精簡(jiǎn)级历，但仍需保留必要問題释移。來(lái)自于Unbounce的Michael Aagaard提供了一個(gè)有趣的例子，?當(dāng)被要求精簡(jiǎn)復(fù)雜表單以提高完成率時(shí)寥殖，他只保留了三項(xiàng)問題玩讳，結(jié)果竟然發(fā)現(xiàn)完成率反而降低了14%。原因竟然是他刪除了大量用戶感興趣的問題嚼贡，卻保留了一個(gè)用戶反感的問題熏纯。所以精簡(jiǎn)表單并不是要保留最少的問題，而是一個(gè)合適的數(shù)量粤策。

友好地顯示錯(cuò)誤信息

讓我們從錯(cuò)誤驗(yàn)證這方面來(lái)看表單設(shè)計(jì)樟澜。優(yōu)秀的錯(cuò)誤提示能幫助用戶降低錯(cuò)誤帶來(lái)的挫敗感，同時(shí)提升正確率。相反秩贰，平庸的的錯(cuò)誤提示會(huì)大大降低表單的完成率霹俺。

錯(cuò)誤提示必須是清晰的，簡(jiǎn)明的毒费，同時(shí)應(yīng)該具有解釋性質(zhì)吭服，這一點(diǎn)同樣適用于PC端。設(shè)計(jì)師Nick Babich認(rèn)為優(yōu)秀的錯(cuò)誤提示具有以下特征：

? 實(shí)時(shí)驗(yàn)證

? 錯(cuò)誤信息可見蝗罗，并且相應(yīng)提示應(yīng)靠近錯(cuò)誤項(xiàng)艇棕。并且指出覆蓋式提示并不是好的解決方式

? 恰當(dāng)?shù)念伾x，例如紅色代表錯(cuò)誤串塑，琥珀色代表警告

根據(jù)錯(cuò)誤類型提示錯(cuò)誤信息沼琉，MailChimp不僅提示“密碼錯(cuò)誤”，同時(shí)還提供解決方案桩匪，如圖：

通常移動(dòng)端用戶存在易分心或者多任務(wù)操作的現(xiàn)象打瘪，利用圖標(biāo)和插圖進(jìn)行交流式的錯(cuò)誤提示可以盡可能的傳遞有效的信息。Azendoo在簡(jiǎn)潔的解釋錯(cuò)誤的同時(shí)還做了品牌宣傳傻昙，如圖：

Babich認(rèn)為需要避免不明確的提示闺骚，例如“輸入錯(cuò)誤，請(qǐng)重試”妆档。這一點(diǎn)對(duì)于移動(dòng)端尤其重要僻爽，因?yàn)镻C端可以更便捷的進(jìn)行刷新、后退和重試贾惦。

避免使用下拉菜單和列表

冗長(zhǎng)的下拉菜單和列表有時(shí)會(huì)給移動(dòng)端表單帶來(lái)很多麻煩胸梆。為了防止用戶頻繁滾動(dòng)頁(yè)面，一些移動(dòng)端采用了折疊或下拉菜單和列表去展示選項(xiàng)须板，例如ASOS的設(shè)計(jì)碰镜，如圖：

然而來(lái)自于Google的Luke Wroblewski將下拉菜單視為“最后的UI設(shè)計(jì)”。因?yàn)橛脩舯仨毑聹y(cè)下拉菜單是如何組織信息的习瑰，是字母順序還是受歡迎程度绪颖？同時(shí)用戶還需要將手指作為鼠標(biāo)指針在狹小的屏幕上進(jìn)行精細(xì)操作。因此下拉菜單所造成的錯(cuò)誤率是十分高的甜奄。

為了避免這個(gè)問題柠横，可以采用一些替代方案。例如贺嫂，一組單選框可以代替5個(gè)以下選項(xiàng)的菜單滓鸠⊙阆纾或者將下拉菜單中的選項(xiàng)分解為幾個(gè)類別以提高可用性第喳。對(duì)于很冗長(zhǎng)的菜單，例如選擇國(guó)家踱稍，可以采用自動(dòng)完成框曲饱，即用戶可以輸入一個(gè)字符悠抹，由系統(tǒng)自動(dòng)匹配國(guó)家。又或者日期選擇扩淀，盡量使用彈框樣式的日歷設(shè)計(jì)來(lái)代替冗長(zhǎng)的下拉列表楔敌。

盡管移動(dòng)端的表單設(shè)計(jì)看似乏味，但是卻決定了用戶能否順利完成表單輸入驻谆。優(yōu)秀的表單設(shè)計(jì)可以幫助用戶和企業(yè)達(dá)成各自目標(biāo)卵凑，平庸的表單設(shè)計(jì)可能會(huì)“盡失人心”。希望通過(guò)以上這8個(gè)建議胜臊，設(shè)計(jì)師可以創(chuàng)造出可用性更高勺卢，更高效的表單。

原文：www.uxmatters.com/mt/archives/2017/02/8-best-practices-for-mobile-form-design.php

?轉(zhuǎn)載要記得標(biāo)明出處哦象对！

也歡迎大家掃描下方二維碼關(guān)注我的微信公眾號(hào)Yinteraction黑忱，一起交流關(guān)于交互的問題