中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

你知道如何設(shè)計(jì)出用戶友好型表單嗎？你知道其中需要掌握什么技巧嗎？筆者將為你仔細(xì)介紹其中的要點(diǎn)。

在開始這篇譯文之前，先普及下什么是表單。表單在網(wǎng)頁或 app 中主要負(fù)責(zé)數(shù)據(jù)采集的功能。也就是說，大部分起到了數(shù)據(jù)采集功能的模塊，我們都可以稱其為表單。

表單作為平臺與用戶聯(lián)系最為緊密的一環(huán)，也是影響商業(yè)交易成功與否的重要分水嶺。那么在設(shè)計(jì)過程中，需要怎樣規(guī)避風(fēng)險，提升表單頁面的產(chǎn)品體驗(yàn)?zāi)?？作者會從幾個案例具體分析，歸納了11個表單設(shè)計(jì)中的常見注意事項(xiàng)。當(dāng)然，這些規(guī)則都是在表單設(shè)計(jì)中的一般準(zhǔn)則，每條準(zhǔn)則都有例外。

表單的構(gòu)成要件：標(biāo)題、標(biāo)簽、輸入字段、幫助提示、占位符、反饋、操作。

亞馬遜的注冊頁面

1 保持簡短

沒有用戶會喜歡填寫很長的表單，我知道花一些時間來詢問每個字段是否對于用戶實(shí)現(xiàn)其目標(biāo)是必要的，這需要很多時間，但是相信我，減少用戶填寫的工作量將會使更多用戶填寫表單。

譯者注：必要而不是全部，簡化表單，或許是優(yōu)化表單的最大建議。簡化的辦法之一就是追溯每個字段為什么需要，是否是當(dāng)前最相關(guān)的信息，如果它是可選的，最好不要顯示。

ASOS的注冊步驟沒有必要這么長，它包括了很多多余的字段

2 可視化組字段及其標(biāo)簽

標(biāo)簽需要緊密挨著輸入框，利用空白分割上下的距離，尤其是標(biāo)簽的位置在輸入框的上邊。

一定要緊密將標(biāo)簽與輸入框組合在一起，因?yàn)槿藗儩撘庾R中會認(rèn)為緊密聯(lián)系的組合是一個整體—格式塔原理。

譯者注：標(biāo)簽告訴用戶需要輸入什么。這里作者強(qiáng)調(diào)了位于輸入字段頂部的標(biāo)簽要緊密挨著輸入字段，牢記設(shè)計(jì)中的格式塔原理。

亞馬遜注冊頁面，充分利用了空白讓上下的輸入框分割從而更容易瀏覽

3 清楚地顯示你的要求

告訴用戶你們需要什么，不要等到用戶填完表單之后才反饋錯誤信息，這是一種非常不友好的負(fù)面強(qiáng)化形式。如果不明確提示用戶怎么填，用戶將不知道他填寫的內(nèi)容是否正確，這尤其適用于“密碼”字段，因?yàn)椴煌漠a(chǎn)品有不同的要求。

譯者注：幫助提示在表單中是必不可少的組成部分。作用在于說明要求，解釋原因。根據(jù)產(chǎn)品的不同需求，存在的形式有2種：

1. 常駐（比如密碼要求可以一直顯示在頁面中）
2. 按需提供（針對部分用戶的低頻需求，比如對字段的解釋，鼠標(biāo)懸停在幫助圖標(biāo)上才顯示說明）

這種提示不僅降低了用戶填錯密碼格式的概率，而且為用戶創(chuàng)建新賬戶提供了積極的動力

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

占位符，標(biāo)簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類型和格式提示，但是有一些設(shè)計(jì)師卻用占位符替代了字段標(biāo)簽，從而使得整體看起來更簡約。

這樣做的問題是，一旦用戶輸入字段交互，占位符文本就會消失，如果用戶忘記了字段的用途，必須在其外部單擊以再次查看占位符，這可能會很煩人。

谷歌使用智能微交互來克服這個問題，當(dāng)用戶點(diǎn)擊輸入框的時候，占位符文本會縮小到左上角變成小標(biāo)簽。

譯者注：以上谷歌的注冊頁面的標(biāo)簽形式即“內(nèi)聯(lián)標(biāo)簽”，多數(shù)情況下謹(jǐn)慎使用內(nèi)聯(lián)標(biāo)簽，在用戶輸入后，內(nèi)聯(lián)標(biāo)簽會消失，用戶無法判斷輸入的內(nèi)容是否符合。不過在用戶熟悉且簡單的字段下可采用，比如登錄表單只有賬號和密碼。針對以上問題，可以采用內(nèi)聯(lián)浮動標(biāo)簽。即作者列舉的谷歌注冊頁面的例子。

5 使用自動對焦

當(dāng)進(jìn)入表單頁面，自動對焦第一個輸入字段可以引導(dǎo)用戶開始進(jìn)行輸入，我非常喜歡它，因?yàn)槲抑恍桄I入，制表，鍵入，制表和完成。雖然它只為我節(jié)省了一次額外的點(diǎn)擊，但它確實(shí)以一種微妙的方式增強(qiáng)了整體體驗(yàn)。

當(dāng)允許表單自動對焦時，還要突出顯示活動的字段以通知用戶第一個字段已被選中，并且可以填寫它。

6 突出顯示活動字段

這通常通過改變邊框顏色和大小來完成，以提供更強(qiáng)的視覺提示。確保所選字段的顏色從表單的其余部分突出，下意識地幫助用戶專注于活動字段。同樣的概念也可用于錯誤反饋，如果出現(xiàn)錯誤，通常文本字段將以紅色突出顯示。

通過突出顯示活動字段，讓用戶更容易聚焦它

7 告知用戶大寫鎖定已開啟

這是一個非常簡單的功能，但很多產(chǎn)品沒有實(shí)現(xiàn)它。有時我沒有意識到大寫鎖定已經(jīng)開啟，并且在我不斷被提示輸入錯誤時感到沮喪。最糟糕的是，錯誤消息甚至沒有提示我大寫鎖定已打開，它只是一直說我的密碼錯誤。這對用戶來說真的很煩人。

蘋果系統(tǒng)很好地通過告知用戶大寫鎖定已開啟

8 使用字段視覺約束

字段視覺約束有助于強(qiáng)化用戶所需的信息。例如，如果“日期/月”字段只需要兩個字符，則不需要它與“名稱”字段的輸入框一樣長，否則可能會導(dǎo)致用戶混淆。

Invision根據(jù)所需信息提供不同的字段長度

9 不要隱藏你的錯誤信息

一些設(shè)計(jì)將錯誤信息隱藏起來。通過在輸入框末端顯示警報(bào)圖標(biāo)，讓用戶將鼠標(biāo)懸停在圖標(biāo)上時，才會顯示錯誤消息。這是非常糟糕的用戶體驗(yàn)，因?yàn)樗枰脩舾嘁徊降牟僮鞑胖浪e在哪里。有些用戶可能甚至不知道他們需要采取額外步驟（將鼠標(biāo)懸停在圖標(biāo)上）以查看錯誤消息。

譯者注：我們不僅僅需要視覺上的區(qū)別（請考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡單的「輸入錯誤」。

在輸入框的底部顯示錯誤消息不是更好嗎？

10 明確區(qū)分可選填字段

如果您忽略了第一個提示（保持表單簡短），并使用了可選填字段，請確保它們明確標(biāo)記為可選填。它將提供更強(qiáng)的視覺提示，在標(biāo)簽后邊標(biāo)明（可選填），而不是僅使用星號。有些用戶可能也不理解星號的含義，因?yàn)樗袝r用于表示驗(yàn)證錯誤。

譯者注：如上所述，盡量避免可填字段。如果不可避免，應(yīng)該做明確區(qū)分。根據(jù)經(jīng)驗(yàn)，可填和必填的數(shù)量少的做標(biāo)記說明。

常規(guī)做法：必填，使用「*」星號符；可填，使用「選填」

11 使用圖片來增加用戶參與度

如果有意義，請使用圖像作為選項(xiàng)，改善用戶體驗(yàn)。利用圖標(biāo)或者圖像和文本進(jìn)行組合，有時候可以更好地解釋每個選項(xiàng)。

谷歌廣告使用圖片來描繪廣告系列類型

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

這主要適用于要求用戶輸入具有許多預(yù)定義選項(xiàng)的信息，例如他們的假日目的地。允許用戶只輸入幾個字母來查找他們的目的地城市，而不是輸入整個名稱。

它還降低了搜索失敗的幾率，因?yàn)橛脩舨惶赡芷村e他們的搜索詞。

愛彼迎用了搜索預(yù)測幫助用戶更快捷地尋找到他們的假期目的地

總結(jié)

我知道設(shè)計(jì)一個表單可能是一個無聊的過程，大多數(shù)用戶總是不喜歡填寫他們。但是遵循上述指南，可以很好地提升用戶的體驗(yàn)。

這樣做無疑可以提高用戶填寫的完成率。作為UX設(shè)計(jì)師，這也是你的目標(biāo)之一。

原文作者：JeremiahLam

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

編譯作者：許忙忙，公眾號：許忙忙

本文由 @許忙忙 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議