2024-5-15 資深UI設(shè)計(jì)者
走進(jìn)一家商店，我往購(gòu)物籃里塞滿了東西，卻找不到收銀臺(tái)。我可能會(huì)一分不花的離開。猶如在支付過程中遇到糟糕的表單設(shè)計(jì)一樣。
想象一下，你走進(jìn)一家商店，往購(gòu)物籃里塞滿了東西卻找不到收銀臺(tái)的感覺。最后你可能會(huì)放下所有東西一分錢沒花極其失望地離開了。同樣，這種情況也會(huì)在網(wǎng)絡(luò)支付體驗(yàn)或者在表單設(shè)計(jì)中遇到。
哈哈，糟糕的表單會(huì)替我們省去好幾百美元。冗長(zhǎng)、繁瑣的表單可能會(huì)嚇跑你的顧客，你的公司也因此流失幾千美元。
表單看起來確實(shí)是最簡(jiǎn)單的UI組件，然而卻處理產(chǎn)品中最重要的交互體驗(yàn)。它們引導(dǎo)你的用戶去注冊(cè)和支付。
我不需要告訴你這些步驟在精細(xì)化運(yùn)作的企業(yè)中扮演的多么重要的角色。我想告訴你一個(gè)好消息：做好表單設(shè)計(jì)不是那么艱難。
在這篇指南里，我收集了33個(gè)我們可以立即應(yīng)用的最佳實(shí)踐方法。找到對(duì)你有用的且適合的方法，在測(cè)試方案作為非常棒的出發(fā)點(diǎn)。
我會(huì)介紹以下幾個(gè)方面的內(nèi)容：
提示詞
移動(dòng)端
輸入方式
使用技術(shù)
合理布局
細(xì)節(jié)之處
讓機(jī)器像人一樣對(duì)話，提示詞是非常重要的。只要增加或者調(diào)整表單設(shè)計(jì)周圍的微文案，就能大大的提高轉(zhuǎn)化率。
UX Microcopy（交互微文案）：專業(yè)術(shù)語，應(yīng)用程序和產(chǎn)品上發(fā)現(xiàn)的微小復(fù)制品。這些簡(jiǎn)短的句子告訴用戶該怎么做，解決用戶的疑慮，提供有關(guān)情況的上下文信息，并幫助講述有關(guān)您的品牌，產(chǎn)品和經(jīng)營(yíng)方式的更多故事。
“在業(yè)余時(shí)間，我喜歡填寫不同的線上表單。我就是喜歡填！”從來沒人這樣說。用戶需要明確的知道把他們的時(shí)間投入到這樣一個(gè)不合理的活動(dòng)里有什么好處。
在結(jié)賬過程中，好處非常明顯，但是注冊(cè)呢？在表單的頂部突出顯示他們一旦注冊(cè)完能做什么。他們可以訪問獨(dú)家內(nèi)容，社區(qū)或者免費(fèi)試用。不要回避這些，讓他們?yōu)榇伺d奮。
Marvel 顯示他們的大客戶和用戶數(shù)來展示他們的社會(huì)認(rèn)同
我們每個(gè)人都希望歸屬于某個(gè)地方。需要知道一個(gè)產(chǎn)品是否值得我們投入時(shí)間、金錢和精力。并證明其他人和我們加入了這個(gè)俱樂部一樣喜歡這里，這對(duì)你的項(xiàng)目是巨大的幫助的。
你的產(chǎn)品上有大牌嗎？在注冊(cè)表單的旁邊就展示這些品牌。你已經(jīng)擁有了多少用戶？它會(huì)讓原本猶豫的訪客對(duì)注冊(cè)感到安心。
“發(fā)生了錯(cuò)誤”。好吧，謝謝，我發(fā)現(xiàn)了...但是，我已經(jīng)看了很多遍了？這讓我非常受挫，沒有提示我哪里出錯(cuò)了。是有人占用了我的用戶名嗎？還是密碼強(qiáng)度設(shè)置的不夠？給你的用戶錯(cuò)誤的指示盡可能的明確。
細(xì)節(jié)詳情是什么呀？
發(fā)生出錯(cuò)。哪里錯(cuò)了，就顯示在哪里。假設(shè)用戶提交了表單，有三處錯(cuò)誤，然后全都顯示在頂部。這種情況下，用戶需要重新瀏覽整張表單，找出需要注意的地方。
在上下文顯示錯(cuò)誤提示，不要忘記考慮色盲的用戶。不僅只使用紅色文字強(qiáng)調(diào)錯(cuò)誤字段。圖標(biāo)是萬無一失的選擇。推薦讀者閱讀更多關(guān)于易訪問性的文章。
用戶應(yīng)該對(duì)他們的接下來的操作所會(huì)產(chǎn)生的結(jié)果一清二楚。棄用那些常規(guī)的行動(dòng)按鈕文案吧，比如“提交”、“確定”、“繼續(xù)”。描述用戶將采取的操作指示，可以考慮比如“注冊(cè)”、“立即付款”、“創(chuàng)建賬戶”。
你可能認(rèn)為當(dāng)用戶按下“下單”后，整個(gè)表單的設(shè)計(jì)工作此就結(jié)束了。并沒有！用戶還需要清楚已操作成功的明確反饋。并且還要讓他們知道接下來的還有步驟和引導(dǎo)。
例如，有用戶在你的網(wǎng)店里下了單，顯示支付成功和訂單頁(yè)面。其實(shí)還可以提供預(yù)期下一步的時(shí)間提示，比如產(chǎn)品什么時(shí)候發(fā)貨等。
優(yōu)化移動(dòng)端表單有兩個(gè)方面：
1、我們需要額外的注意某些事情
2、手機(jī)有很多功能，會(huì)讓填寫表單變得簡(jiǎn)單些
在你的設(shè)計(jì)上多花點(diǎn)心思。這個(gè)章節(jié)提供一些的實(shí)用案例，專門用于改進(jìn)移動(dòng)設(shè)備的表單設(shè)計(jì)。
周日晚上，我很喜歡在電視上看NFL比賽。球員的運(yùn)動(dòng)能力總是能讓我驚訝，就像他們的接球技術(shù)一樣。他們需要一雙大手去接球。這些橄欖球運(yùn)動(dòng)員可能是你下一個(gè)客戶。
這些家伙看起來很強(qiáng)壯，所以你不希望你表單上的小小點(diǎn)擊框讓他們生氣。谷歌建議最小區(qū)域?yàn)?8x48px，這是一個(gè)很好的標(biāo)準(zhǔn)。
在用手機(jī)填寫表格的時(shí)候，大約99%的用戶都有可以正常的使用相機(jī)。你有沒有考慮過利用它？
只需點(diǎn)擊一下按鈕，他們就可以掃描身份證或信用卡上的信息，否則填寫這些信息是需要花費(fèi)更長(zhǎng)的時(shí)間。更進(jìn)一步，再進(jìn)一步，可以考慮一下使用GPS或人物特征識(shí)別。
如果你希望用戶填寫郵箱地址，激活輸入文本的時(shí)候，打開文本模式的鍵盤狀態(tài)，如果他們需要輸入電話號(hào)碼，應(yīng)該顯示數(shù)字鍵盤。
這只需要花一點(diǎn)心思，就能節(jié)省用戶寶貴的時(shí)間，不需要他們自己來回切換鍵盤。這還有助于他們了解您期望的輸入類型。
谷歌和蘋果在設(shè)計(jì)UI界面控件方面投入了大量的研究。多數(shù)用戶養(yǎng)成了習(xí)慣，因此除非你有充分的理由反對(duì)他們不這樣做，否則請(qǐng)堅(jiān)持使用本機(jī)控件。
看上去這個(gè)不值一提，但實(shí)際上最好并那么容易。不要讓用戶從200多個(gè)下拉列表中選擇一個(gè)國(guó)家，或者從下拉列表中選擇“是/否”，這會(huì)讓你的用戶陷入困境。
復(fù)選框、單選按鈕、下拉菜單、短文本和長(zhǎng)文本輸入——在表單世界里都有自己的位置。要確保在適當(dāng)?shù)臅r(shí)候使用它們。
節(jié)假日即將要結(jié)束，你很有可能網(wǎng)上訂購(gòu)了一些禮物送給好友。你要選擇發(fā)貨到某個(gè)國(guó)家和地區(qū)。這個(gè)時(shí)候，卻需要從滾動(dòng)條里200多個(gè)國(guó)家里找到你所需要的那個(gè)，這個(gè)真的很惱火。
再設(shè)計(jì)表單的時(shí)候，最好讓用戶從預(yù)設(shè)列表里輸入并選中國(guó)家。這需要研發(fā)多做一些額外的工作，但是你的用戶會(huì)為此感謝你。
為什么不讓提示更進(jìn)一步呢？花點(diǎn)時(shí)間思考用戶可能遇到的場(chǎng)景。
一個(gè)居住在英國(guó)的用戶可能下意識(shí)的輸入“蘇格蘭”，然而理想中也應(yīng)該可以看到“英國(guó)”作為一個(gè)建議條目出現(xiàn)。
考慮這些場(chǎng)景并花些時(shí)間開發(fā)這種邏輯，這樣用戶就不用去猜測(cè)準(zhǔn)確的措辭了。
Liligo符合用戶期望，即使查詢標(biāo)簽是“Scotland”，也會(huì)顯示“United Kingdom”的結(jié)果
下拉菜單對(duì)于長(zhǎng)表單還是短表單都不是最佳的解決方案。為什么要讓用戶每次填寫是或否的時(shí)候，需要點(diǎn)開一個(gè)下拉框呢？
少于6個(gè)條目的時(shí)候，使用經(jīng)典的單選按鈕就好了。一個(gè)好的用戶體驗(yàn)，用戶掃描一次排列會(huì)感到更輕松。過多的下拉框可能變得更糟糕。
很多表單還在使用錯(cuò)誤的日期輸入方式（最常被請(qǐng)求的信息之一），有多少次選擇年齡的時(shí)候，預(yù)設(shè)初始狀態(tài)在1900年？
這些網(wǎng)站要么認(rèn)為他們的大多數(shù)用戶是100歲以上，要么他們根本就是不在乎。我傾向于后者。在移動(dòng)端設(shè)備上，使用默認(rèn)的時(shí)間選擇器或者使用格式輸入。
請(qǐng)注意預(yù)期日期的格式，根據(jù)國(guó)家/地區(qū)而異。在數(shù)字鍵盤上（甚至移動(dòng)設(shè)備上）輸入8個(gè)數(shù)字都能比3個(gè)下拉框滾動(dòng)要快得多。如果堅(jiān)持使用原生iOS或Android日期選擇器，請(qǐng)確保有一個(gè)實(shí)際的默認(rèn)日期，而不是1900年或當(dāng)前年份。除非你在為百歲老人協(xié)會(huì)的年度晚會(huì)設(shè)計(jì)申請(qǐng)表。
你可能想犧牲輸入框的長(zhǎng)度，但請(qǐng)記住，短的輸入框?qū)τ卩]編或CVV代碼來說更好用。
當(dāng)你希望用戶鍵入更長(zhǎng)的答案時(shí)，請(qǐng)使用更大的文本框。有時(shí)把這些長(zhǎng)短不一的輸入框放在一起，要設(shè)計(jì)的很漂亮是個(gè)挑戰(zhàn)。但是，嘿，我們喜歡挑戰(zhàn)！我們成為了設(shè)計(jì)師，不是嗎?
在手機(jī)上輸入密碼尤其煩人，所以不要讓用戶重復(fù)輸入。為什么要讓他們確認(rèn)密碼呢？想要確保他們的密碼沒有打錯(cuò)嗎？
在輸入框旁邊放一個(gè)小眼睛圖標(biāo)(或“顯示密碼”文本)，這樣他們就可以看到自己輸入的信息。越來越多的網(wǎng)站使用這樣的解決方案。
設(shè)計(jì)表單的時(shí)候，第一個(gè)要注意就是：不要偷懶！仔細(xì)考慮開發(fā)表單可以節(jié)省很多時(shí)間。
想一想當(dāng)讓用戶無需輸入信息，從已有的信息中能獲取什么。有些解決方案肯定會(huì)占用更多的開發(fā)資源，但是你的用戶會(huì)因此更滿意。
如果用戶試圖使用已獲取的郵箱地址注冊(cè)，這可能意味著他們以前已經(jīng)注冊(cè)過。為什么不給他們提供一個(gè)快速登錄的方法呢？預(yù)填好郵箱地址，這樣他們只需要輸入密碼。
這個(gè)有些籠統(tǒng)，其實(shí)這個(gè)實(shí)際要取決于你什么時(shí)候使用智能默認(rèn)值。你可以根據(jù)IP地址、設(shè)備語言甚至某些情況下的設(shè)備位置進(jìn)行猜測(cè)。每次設(shè)計(jì)表單時(shí)，都花幾分鐘仔細(xì)考慮所有這些項(xiàng)目。
當(dāng)在開發(fā)我們的產(chǎn)品UXfol.io時(shí)，我們的開發(fā)人員代替我們的用戶來做繁重的工作
有時(shí)驗(yàn)證碼讓人感到很厭煩，但我們?nèi)匀恍枰盟鼇肀苊鈹?shù)據(jù)庫(kù)中沉積數(shù)千個(gè)虛假賬戶。然而，一些更好的、不那么煩人的解決方案也可以做到這一點(diǎn)。當(dāng)考慮使用驗(yàn)證碼時(shí)，在實(shí)行最懶的開箱即用的想法之前，考慮一些替代方案。（總結(jié)了9個(gè)不會(huì)破壞用體驗(yàn)的驗(yàn)證碼替代品方案）
電商店主需要獲取用戶收獲地址?？赡苄枰層脩糨斎胨袃?nèi)容，然后在末尾輸入郵政編碼。或者，先從國(guó)家開始(因?yàn)猷]政編碼在全球并不是唯一的)，然后自動(dòng)填充州、城市，在某些情況下甚至街道信息。所以，你可能需要一個(gè)第三方插件。
電話號(hào)碼填寫就是一個(gè)很好的示例：我們必須確保以正確的格式儲(chǔ)存數(shù)據(jù)。從用戶那里接受多種格式的電話號(hào)碼（包括其他信息），然后自行標(biāo)準(zhǔn)化。如果做不到，至少提供一個(gè)你期望的清晰的格式示例。
這聽起來很簡(jiǎn)單，但仍有很多表單忽略了這一點(diǎn)。如果用戶輸入了錯(cuò)誤的郵箱地址，請(qǐng)?jiān)谔峤槐韱沃帮@示錯(cuò)誤。
注意了，不要驗(yàn)證得太快——當(dāng)你還在打字，但是表單“大喊”你輸入了一個(gè)無效的郵箱地址時(shí)，驗(yàn)證會(huì)變得非常煩人。“嗯，好的，你能等我打完字可以嗎？謝謝！”
以下技巧會(huì)更為通用，在收集用戶數(shù)據(jù)時(shí)，基本上可以在任何情況下使用它們。與上面的一些技巧不同，它們不需要太多研發(fā)的能力，只需要好的設(shè)計(jì)。精心設(shè)計(jì)的表單總是從精心選擇的布局開始。
近年來，使用表單標(biāo)簽作為占位符文本變得非常流行。在許多情況下，它很好用，因?yàn)樗_實(shí)使設(shè)計(jì)更干凈。但是想象一下，一旦您的用戶填寫了這些輸入框，他們就不知道每個(gè)輸入框應(yīng)該包含什么信息了。
在某些情況下，比如電子郵件地址，可能看起來很明顯，但是容易把姓和名搞混。所以即使你決定使用標(biāo)簽作為占位符，也要在字段被填充時(shí)讓它們還是依稀可見，就像谷歌建議的那樣。
谷歌展示標(biāo)簽的建議(Material設(shè)計(jì)規(guī)范)
“市場(chǎng)部讓我這么做的！” 是的，我知道我們可能會(huì)被施加很大的壓力，甚至要求用戶提供鞋碼。我們擁有的信息越多，我們就能更好地細(xì)分我們不同的信息等等。
但是，填寫一張滿是不必要的信息的巨大表單不僅讓人感到沮喪和恐懼，還會(huì)讓用戶產(chǎn)生不信任。想象一下，你剛剛在酒吧里遇到一個(gè)人，簡(jiǎn)單聊了30秒，他們開始問你一些私人的問題。
不要詢問一些你不需要的東西，或者至少讓它成為可選的。如果您真的需要這些信息，請(qǐng)與用戶溝通你的理由，并告訴他們這會(huì)如何改進(jìn)他們的體驗(yàn)。
漸進(jìn)式分析提供了另一種選擇，當(dāng)您在用戶更加關(guān)注您的產(chǎn)品之后，再收集額外的數(shù)據(jù)。
無需使用星號(hào)來標(biāo)記必填項(xiàng)，而是明確的標(biāo)識(shí)可選項(xiàng)。
長(zhǎng)表單設(shè)計(jì)確實(shí)面臨更多挑戰(zhàn)。不管你怎么努力，有些情況下你不得不要處理很長(zhǎng)的表格。在這種情況下，有兩件事可以幫助獲得更好的完成率。
首先，可以按照相關(guān)字段分組。一組是個(gè)人信息，另一組是地址。
還可以考慮將表單拆分為多個(gè)步驟，這樣就不會(huì)在開始時(shí)有大量輸入框嚇到用戶。如果這樣操作，請(qǐng)確保使用進(jìn)度條來顯示剩余的進(jìn)度。
研究表明，標(biāo)簽在輸入框左側(cè)，用戶在填寫表單會(huì)變慢。想象一下，當(dāng)你填寫表格的時(shí)候，你的視線會(huì)關(guān)注整個(gè)地表單（視錯(cuò)覺了）。垂直地堆疊所有的標(biāo)簽會(huì)增加表單的高度，所以使用標(biāo)簽作為占位符，只有在填充字段時(shí)移到頂部。就像谷歌建議的那樣。
表單的總體布局也是如此。如果輸入的字段是多列的，用戶的視覺也會(huì)受到干擾。只有輸入單列的字段就會(huì)快得多。當(dāng)然也會(huì)有例外，當(dāng)一行中需要多個(gè)字段的時(shí)候（比如姓和名），通常輸入時(shí)單列會(huì)增加高度，讓它也能更好的體驗(yàn)。
除了嚇到用戶的表單之外，可能還包含不同類型的數(shù)據(jù)，其中的某些數(shù)據(jù)更敏感復(fù)雜。從用戶覺得容易的常見的開始填寫，讓他們放松下來，然后去做那些需要更多參與的事情。
做到這一步，可以表明你有心致力于改進(jìn)表單的用戶體驗(yàn)。其實(shí)并不是每個(gè)人都會(huì)做這些，這些可以錦上添花，它可以讓用戶尖叫。如果你的目標(biāo)是打造最好的表單設(shè)計(jì)，請(qǐng)繼續(xù)閱讀。讓我們繼續(xù)，好嗎?
這可能是我最喜歡的一條，也是我的一個(gè)項(xiàng)目，執(zhí)行起來并不復(fù)雜。許多網(wǎng)站對(duì)于密碼應(yīng)該包含的不同字符有嚴(yán)格的規(guī)則。一些網(wǎng)站在提示框里顯示了這些規(guī)則。這不是最好的做法。
用戶只有在輸完常用密碼之后，才會(huì)知道密碼的強(qiáng)弱。更好的是，在用戶輸入時(shí)，實(shí)時(shí)更新它們。這樣就更容易發(fā)現(xiàn)用戶缺少什么的字符。
Mailchimp在用戶鍵入時(shí)主動(dòng)更新列表，幫助用戶輸入足夠強(qiáng)度的密碼
當(dāng)你試圖提交一個(gè)表單時(shí)卻發(fā)現(xiàn)沒有填寫所有必需的字段，這非常令人沮喪。如果你正確地標(biāo)記了必填和選填框，你可能可以避免這種情況。
禁用“提交”按鈕（你不會(huì)給它標(biāo)記成“提交”，對(duì)嗎？），直到他們填完所有內(nèi)容，這是另一種方法將焦點(diǎn)轉(zhuǎn)移到剩下部分。
如果你的業(yè)務(wù)中包含在線表單，那你的客戶很可能非常多樣化。你不想讓他們中的任何一個(gè)感到被排斥？我們可以就此主題寫一篇完整的文章，所以讓我快速地給你一些提示。
首先，不要驗(yàn)證名稱 —— 系統(tǒng)讀取一個(gè)無效的名稱，你會(huì)有什么感覺?
性別是另一個(gè)敏感話題。在你的公司里，至少有一個(gè)人可能會(huì)說，要準(zhǔn)確定位客戶這些信息是絕對(duì)必要的。但這是真的嗎？
越來越多的APP和產(chǎn)品已經(jīng)停止詢問了。所以，建議一：不要問。如果你這樣做了，讓它成為可選的。對(duì)于后者，為那些既不是男性也不是女性的人提供一種選擇。你可以很容易地使用“其他”選項(xiàng)（盡管這個(gè)標(biāo)簽也可能冒犯）。
更進(jìn)一步，可以像Facebook那樣添加一個(gè)自定義輸入框。最后但并非最不重要的是，不要忘記可訪問性。確保用戶可以使用鍵盤瀏覽表單，并找到足夠大且具有足夠?qū)Ρ榷鹊臉?biāo)簽。
我非常喜歡MacOS的這個(gè)功能。為什么不把它也用在你的表格上呢?當(dāng)輸入密碼時(shí)，我們有時(shí)會(huì)不小心按下大寫鍵。我們都會(huì)遇到，為什么不提前提示用戶，為用戶節(jié)省幾秒鐘呢?
最后，如果你閱讀到了這一點(diǎn)，那么你已經(jīng)邁出了第一步：承諾在產(chǎn)品中設(shè)計(jì)體驗(yàn)好的表格。
其中一些技巧可以提高表格的完成率，或者只是減少用戶填寫表格的時(shí)間。有的是一些細(xì)微的調(diào)整，這些細(xì)微的調(diào)整顯示了你的關(guān)心和共情。除了讓他們看到你珍惜他們的時(shí)間之外，還有什么能使用戶更愛你呢？
我已經(jīng)介紹了33個(gè)技巧-讓我知道最讓你興奮的一個(gè)嘗試是哪個(gè)！在下面發(fā)表評(píng)論。我們總是喜歡聽聽這些小指南如何幫助你改善產(chǎn)品的體驗(yàn)。
翻譯作者：大蛤蜊
編輯審核：TCC翻譯情報(bào)局
藍(lán)藍(lán)設(shè)計(jì)(www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com