亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

Ouch.pics的插畫(huà)

表單是任何網(wǎng)站的必要組成部分；無(wú)論是聯(lián)系人表單、支付細(xì)節(jié)表單、帳戶(hù)創(chuàng)建表單、潛在客戶(hù)表單等，用戶(hù)在使用您的產(chǎn)品時(shí)肯定是需要與某種表單進(jìn)行交互的。本文的目的是提出在設(shè)計(jì)更好的表單時(shí)遵循的一些準(zhǔn)則。

保持表單簡(jiǎn)短

沒(méi)人喜歡冗長(zhǎng)的表單。在設(shè)計(jì)中“定義范圍”的步驟里，花一些時(shí)間來(lái)詢(xún)問(wèn)用戶(hù)是否需要回答每一個(gè)問(wèn)題來(lái)達(dá)成他們的目標(biāo)。這可能需要更多的時(shí)間，但是相信我，減少用戶(hù)的工作將會(huì)吸引更多的用戶(hù)提交您的表單。

ASOS注冊(cè)表單很冗長(zhǎng)，并且包含多余字段。

～～～

可視化地分組字段及標(biāo)簽

標(biāo)簽應(yīng)該靠近它們各自的字段。特別是當(dāng)標(biāo)簽位于字段上方時(shí)，使用空白來(lái)分隔它們。

始終將標(biāo)簽放在更靠近關(guān)聯(lián)字段的位置，而不是其他字段。這是因?yàn)槿祟?lèi)會(huì)把緊密結(jié)合在一起的事物建立聯(lián)系——格式塔原則。

Amazon 注冊(cè)表單在每個(gè)字段之間使用足夠的空白，以便于清楚得看懂。

～～～

清楚地展示你的需求

告訴用戶(hù)他們需要什么，不要等到他們完成表單后才顯示錯(cuò)誤信息——這是一種消極強(qiáng)化的形式。如果沒(méi)有明確的驗(yàn)證規(guī)則指示，用戶(hù)不知道從這些規(guī)則中得到什么。這特別適用于“密碼”字段，因?yàn)椴煌漠a(chǎn)品有不同的要求。

Mailchimp的不僅減輕了密碼錯(cuò)誤的可能，而且為用戶(hù)創(chuàng)建新帳戶(hù)提供了積極的動(dòng)力。

～～～

避免使用占位符文本作為字段標(biāo)簽

占位符通常用于提示特定輸入字段需要什么類(lèi)型的信息。但一些設(shè)計(jì)師使用它來(lái)取代字段標(biāo)簽，以減少混亂和更簡(jiǎn)約的外觀。

問(wèn)題是一旦用戶(hù)輸入字段，占位符就會(huì)消失。如果用戶(hù)忘記了字段的用途，必須單擊字段外才能再次看到占位符，這可能會(huì)令人很煩躁。

谷歌使用智能微交互來(lái)解決這個(gè)問(wèn)題。

當(dāng)用戶(hù)單擊輸入字段時(shí)，占位符文本將淡出，并成為左上角的一個(gè)迷你字段標(biāo)簽。

～～～

使用自動(dòng)對(duì)焦

我非常喜歡表單自動(dòng)聚焦第一個(gè)輸入字段，因?yàn)槲抑恍枰斎搿⒒剀?chē)、輸入、回車(chē)便可以了。雖然它只為我節(jié)省了一次額外的點(diǎn)擊，但確實(shí)以一種微妙的方式提升了整體體驗(yàn)。

當(dāng)允許自動(dòng)對(duì)焦時(shí)，也要突出顯示活動(dòng)字段，以通知用戶(hù)第一個(gè)字段已經(jīng)被選中，他們可以繼續(xù)填寫(xiě)它。

高亮活躍的區(qū)域
這通常是改變邊框的顏色和大小來(lái)提供更強(qiáng)的視覺(jué)提示。確保所選字段的顏色從表單的其他部分中突出出來(lái)，以便潛意識(shí)地幫助用戶(hù)關(guān)注活動(dòng)字段。同樣的概念也可以用于錯(cuò)誤提示，通常情況下，如果出現(xiàn)錯(cuò)誤文本字段將用紅色突出顯示。

通過(guò)高亮顯示活動(dòng)字段，可以很容易地關(guān)注到它。

～～～

通知用戶(hù)大寫(xiě)鎖定已打開(kāi)

這是一個(gè)如此簡(jiǎn)單的特性，但并沒(méi)有很多產(chǎn)品實(shí)現(xiàn)它。有些時(shí)候，我沒(méi)有意識(shí)到大寫(xiě)鎖定是打開(kāi)的，當(dāng)我不斷被拒絕時(shí)感到很沮喪。更糟糕的是，錯(cuò)誤信息甚至沒(méi)有告訴我大寫(xiě)鎖定打開(kāi)了，它只是不停地說(shuō)我的密碼錯(cuò)了。這對(duì)用戶(hù)來(lái)說(shuō)真的很煩人。

Mac OS在通知用戶(hù)大寫(xiě)鎖定是否開(kāi)啟方面做得很好。

～～～

使用視覺(jué)的限制

視覺(jué)約束有助于增強(qiáng)用戶(hù)所需的信息。例如，如果“月”字段只需要兩個(gè)字符，那么它就不需要與“名字”字段一樣長(zhǎng)，否則可能會(huì)引起用戶(hù)的混淆。

可以根據(jù)所需的信息提供不同的字段長(zhǎng)度大小。

～～～

不要隱藏錯(cuò)誤消息

使用一些提示來(lái)傳遞錯(cuò)誤消息。通過(guò)在文本字段旁邊放置一個(gè)警告圖標(biāo)，當(dāng)用戶(hù)將鼠標(biāo)懸停在該圖標(biāo)上時(shí)，將出現(xiàn)錯(cuò)誤消息的提示。這是個(gè)非常糟糕的交互，因?yàn)樗枰脩?hù)付出更多的努力來(lái)糾正他們的錯(cuò)誤。有些用戶(hù)甚至不知道他們需要執(zhí)行額外的操作（將鼠標(biāo)懸停在圖標(biāo)上）來(lái)查看錯(cuò)誤消息。

只在文本字段底部顯示錯(cuò)誤提示不是更好嗎?

～～～

清楚地標(biāo)記選項(xiàng)字段

如果您忽略了第一個(gè)技巧（保持表單簡(jiǎn)短），請(qǐng)確清楚地標(biāo)記出可選字段。它將提供一個(gè)更強(qiáng)的視覺(jué)提示，用文本“可選”標(biāo)記字段，而不只是使用星號(hào)。有些用戶(hù)可能也不理解星號(hào)的含義，因?yàn)樗袝r(shí)用來(lái)表示驗(yàn)證錯(cuò)誤。

標(biāo)記處可選字段比使用星號(hào)標(biāo)記更清楚。

～～～

使用圖片來(lái)增強(qiáng)理解力

當(dāng)需要有含義時(shí)，可以使用圖像來(lái)選擇以改善用戶(hù)體驗(yàn)。如果您想更好地使用文本、圖標(biāo)或圖像解釋每個(gè)選擇，這是很好的選擇。

谷歌使用圖像來(lái)描述他們的廣告類(lèi)型。

～～～

盡可能使用預(yù)測(cè)搜索

這主要適用于要求用戶(hù)輸入具有許多預(yù)定義選項(xiàng)信息時(shí)，比如他們的度假目的地，允許用戶(hù)只輸入幾個(gè)字母來(lái)找到他們的目的地城市，而不是輸入整個(gè)城市的名字——這是一項(xiàng)非常煩人的任務(wù)。

它還降低了搜索失敗的幾率，因?yàn)橛脩?hù)不太可能拼錯(cuò)他們的搜索詞。

Airbnb使用預(yù)測(cè)性搜索幫助用戶(hù)輕松找到他們的度假目的地。

我知道表單設(shè)計(jì)可能是一個(gè)無(wú)聊的過(guò)程，大多數(shù)用戶(hù)總是討厭填寫(xiě)表單。但是按照上面的指導(dǎo)方法，并在交互中加入一些幽默，您可以改進(jìn)用戶(hù)的體驗(yàn)并引發(fā)情感反應(yīng)。

這樣做無(wú)疑會(huì)提高完成率，這也是用戶(hù)體驗(yàn)設(shè)計(jì)師的目標(biāo)之一。

感謝閱讀！

原文鏈接：https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414

作者鏈接：https://uxdesign.cc/@nataniellam