用戶體驗(yàn)早已成為互聯(lián)網(wǎng)公司的金科玉律，貫穿在一款產(chǎn)品的設(shè)計(jì)、運(yùn)營(yíng)的全過(guò)程中。而用戶在互聯(lián)網(wǎng)上總會(huì)遇到各類表單，這一環(huán)節(jié)注重用戶體驗(yàn)無(wú)疑非常重要。下面將從表單元素、如何有效提高表單可用性幾方面分析：在表單設(shè)計(jì)中，怎樣創(chuàng)造更好的用戶體驗(yàn)。

一、表單元素

1. 標(biāo)簽

告訴用戶表單需要填什么。

對(duì)齊方式是最重要的問(wèn)題。選擇左對(duì)齊、右對(duì)齊還是頂對(duì)齊？這是表單設(shè)計(jì)中經(jīng)常遇到的問(wèn)題。前人的研究發(fā)現(xiàn)了這樣的規(guī)律：就觀看時(shí)間、填寫速度來(lái)說(shuō)，頂對(duì)齊快于右對(duì)齊快于左對(duì)齊。

頂對(duì)齊的好處是處理快速，缺點(diǎn)是增加了垂直空間的占用。

右對(duì)齊的優(yōu)點(diǎn)是垂直占用空間減少，缺點(diǎn)是可讀性相較于頂對(duì)齊更差。

左對(duì)齊的好處是標(biāo)簽容易瀏覽，缺點(diǎn)是標(biāo)簽與輸入框間距增加，瀏覽變慢。

標(biāo)簽的文字風(fēng)格也越來(lái)越被人們重視，標(biāo)榜與用戶友好的企業(yè)在語(yǔ)氣口吻上會(huì)更加清楚明確、平易近人。例如“希望內(nèi)容來(lái)自：”和“我更希望內(nèi)容來(lái)自：”，似乎后者更站在用戶的立場(chǎng)上考慮；還有修改術(shù)語(yǔ)，用普通人理解的詞語(yǔ)把問(wèn)題解釋清楚。這些小技巧對(duì)一些用戶來(lái)說(shuō)非常受用。

2. 輸入框

（1）輸入框類型

輸入框一般包括文本框、單選鈕、復(fù)選框、下拉菜單、列表框等。綜合問(wèn)題本身、界面設(shè)計(jì)、用戶填寫習(xí)慣等因素選擇合適的輸入類型。

（2）輸入框長(zhǎng)度

一些人認(rèn)為輸入框的長(zhǎng)度提供了暗示，比如郵政編碼、電話號(hào)碼的輸入框采取固定的長(zhǎng)度，可以幫助用戶了解是否填寫了正確的位數(shù)。這不失為一個(gè)好辦法，但是在美觀上需要做出平衡。

上圖為一款語(yǔ)言學(xué)習(xí)網(wǎng)站，你需要對(duì)照給的中文含義在輸入框內(nèi)填寫英文單詞，輸入框會(huì)根據(jù)單詞長(zhǎng)度而變化，提供了正確與否的暗示。

（3）必填項(xiàng)與選填項(xiàng)的問(wèn)題

很多表單上習(xí)慣在輸入框旁邊加上星號(hào)*來(lái)表示必須填寫，熟練的用戶一看便知。

基于這并不是既定的規(guī)則，有的表單出于穩(wěn)妥起見會(huì)在下面添加說(shuō)明。在輸入框旁邊添加“（可選項(xiàng)）”的說(shuō)明也是一個(gè)好辦法，看起來(lái)更加清晰，尤其當(dāng)可選項(xiàng)較少時(shí)。

（4）關(guān)于彈性輸入框

希望用戶按照某種格式填寫時(shí)，如“請(qǐng)采用XXX-XXX-XXXX的格式”，記住一定不要麻煩用戶。為什么不直接把輸入框設(shè)置成那種格式，用戶只要輸入其他都不用管？事實(shí)上，更好的方式是直接放寬對(duì)用戶輸入的要求，包括格式、大小寫等。讓你的系統(tǒng)更靈活，而非讓用戶為了你改變他們的輸入習(xí)慣。

3. 動(dòng)作

用戶提交表單，即點(diǎn)擊一個(gè)按鈕或鏈接，執(zhí)行一個(gè)操作。

一般動(dòng)作分為主動(dòng)作和次動(dòng)作，主動(dòng)作是最重要的行為（提交表單），次動(dòng)作則是返回、取消等。主動(dòng)作和次動(dòng)作需要有嚴(yán)格的視覺區(qū)分，防止發(fā)生用戶不小心點(diǎn)擊了取消按鈕，輸入的數(shù)據(jù)全部清空的狀況。

上面這個(gè)登錄界面用截然不同的顏色突出了登錄按鈕，取消按鈕的存在感變得很小，誤按可能性極低。

4. 幫助文字

告訴人們?nèi)绾位卮饐?wèn)題。

自動(dòng)即時(shí)幫助：在幫助信息最合適的時(shí)間和位置顯示幫助信息，如點(diǎn)擊激活輸入框時(shí)，幫助文字就出現(xiàn)在輸入框的旁邊。

用戶激活的幫助：在人們需要的時(shí)候提供幫助，這種方式強(qiáng)調(diào)用戶的主動(dòng)性，通常采用圖標(biāo)、按鈕、圖片或文本鏈接，便于人們知道有幫助可以使用。常見的是一個(gè)“？”的符號(hào)，如A站登錄頁(yè)，點(diǎn)擊問(wèn)號(hào)即可跳轉(zhuǎn)到幫助手冊(cè)頁(yè)面。

但是，不要依賴幫助文字。要盡量減少幫助文字，創(chuàng)造簡(jiǎn)潔干凈的設(shè)計(jì)。

5. 輸入反饋

輸入正確還是錯(cuò)誤。

反饋是必要的，無(wú)論是填寫提交錯(cuò)誤還是正確，反饋能讓用戶感到安心，而不是煩躁地重復(fù)點(diǎn)擊。

如果用戶填寫錯(cuò)誤，應(yīng)該明確說(shuō)明是什么問(wèn)題。如下圖Facebook的用戶名輸入框，為空時(shí)會(huì)顯示用戶名無(wú)效，和應(yīng)滿足的要求。

但是下面Facebook注冊(cè)頁(yè)的反饋看起來(lái)就有點(diǎn)鬧心了，剛點(diǎn)擊“姓”輸入框準(zhǔn)備填寫，后面其他還沒(méi)填寫的輸入框都默認(rèn)為填錯(cuò)了。設(shè)置錯(cuò)誤反饋需要注意這樣的問(wèn)題，反饋應(yīng)當(dāng)是在每一項(xiàng)填寫完畢時(shí)出現(xiàn)。

如果表單填寫成功，也應(yīng)該用成功消息清晰傳達(dá)，突出提交成功的結(jié)果。至少不能什么都沒(méi)有吧，那樣看起來(lái)就會(huì)像一直沒(méi)刷新的網(wǎng)頁(yè)，只會(huì)引起用戶的反感。一句“您的表單已提交成功！”就會(huì)讓事情好得多，刷新到新的網(wǎng)頁(yè)也是常見的做法。

二、有效提高可用性的方法

1. 合理地組織信息

可利用框線、空間間隔、顏色差異，還可按不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊劃分。

（1）分組

首先需要在邏輯上進(jìn)行分組，如按重要程度劃分成基本信息（必填/重要）和附加在信息（選填）；按主題歸類劃分，如面試題填寫表單分成填寫說(shuō)明、個(gè)人信息、題目回答幾大板塊。

用分隔線來(lái)劃分是常見的分組方法。

（2）色彩區(qū)分

根據(jù)人類色彩感知心理，一般通知用藍(lán)色，警告用黃色（如黃牌警告），錯(cuò)誤為紅色，成功確認(rèn)為綠色。

（3）分步指示

分出步驟展現(xiàn)給用戶，提供清晰的路徑步驟，明確高效

2. 簡(jiǎn)化表單，突出重點(diǎn)

簡(jiǎn)化如收起用戶不常用的部分，當(dāng)用戶需要時(shí)通過(guò)點(diǎn)擊某塊區(qū)域再顯示出來(lái)。

突出重點(diǎn)則表現(xiàn)在表單中重要的按鈕等一定要凸顯出來(lái)。這已經(jīng)成為設(shè)計(jì)中共識(shí)的一部分，絕大部分網(wǎng)站都會(huì)凸顯提交按鈕，比如下面的登錄頁(yè)，將登錄按鈕用鮮艷的顏色凸顯了出來(lái)。

個(gè)人覺得這種對(duì)比和凸顯應(yīng)該是明顯的，所以上圖這種輸入框和登錄按鈕顏色的相似個(gè)人并不提倡，而且這個(gè)登錄按鈕的灰色看起來(lái)就像是不可用狀態(tài)。

3.清晰的瀏覽線

主要是在對(duì)齊和空隙的設(shè)置上，使之形成清晰的瀏覽線，便于用戶迅速觀看。F型的眼動(dòng)軌跡圖（熱點(diǎn)圖）眾所周知，提示我們用戶傾向于觀看有清晰瀏覽脈絡(luò)（如垂直對(duì)齊）的內(nèi)容。

4.選擇合適的標(biāo)簽對(duì)齊方式

（1）有標(biāo)簽

請(qǐng)參考上文“表單元素”中“標(biāo)簽”部分。

（2）無(wú)標(biāo)簽

常見的情況是標(biāo)簽放在輸入框的里面，可以節(jié)省空間。但是會(huì)帶來(lái)一個(gè)問(wèn)題，當(dāng)用戶輸入時(shí)標(biāo)簽消失，用戶常常會(huì)在輸入到一半時(shí)忘記自己要輸入什么（不要驚訝，這就是用戶，每個(gè)人都會(huì)犯這樣的毛?。?，或者是想再次看到標(biāo)簽里的信息。

為了解決這個(gè)問(wèn)題，浮動(dòng)標(biāo)簽應(yīng)運(yùn)而生。你或許已經(jīng)看到過(guò)這種效果，在一個(gè)input輸入框中有一個(gè)占位文本，當(dāng)你用鼠標(biāo)點(diǎn)擊或用手觸摸輸入框準(zhǔn)備輸入時(shí)，展位文本以動(dòng)畫的方式移動(dòng)到別的地方，這時(shí)你可以在原來(lái)占位符的地方開始輸入文字。

上圖是一個(gè)登錄頁(yè)未填寫和準(zhǔn)備填寫時(shí)，當(dāng)焦點(diǎn)集中到輸入框里時(shí)，輸入框里的標(biāo)簽文字變小，并且跑到了輸入框上方。

就個(gè)人使用過(guò)程來(lái)看，浮動(dòng)標(biāo)簽并未大規(guī)模普及，標(biāo)簽直接在輸入框里比浮動(dòng)標(biāo)簽出現(xiàn)的更多。也許是技術(shù)實(shí)現(xiàn)上更為復(fù)雜，也許界面更為花哨并不是一種好事，也許并不符合品牌氣質(zhì)……

簡(jiǎn)而言之，選擇哪種需要根據(jù)自己的情況。

5. 智能默認(rèn)

（1）通用智能默認(rèn)：智能默認(rèn)的作用是在滿足多數(shù)人需要的地方放置選擇，來(lái)簡(jiǎn)化選擇。一組單選按鈕預(yù)先選擇了一項(xiàng)，是一種最簡(jiǎn)單的默認(rèn)形式，如性別一欄，系統(tǒng)自動(dòng)為你選好一個(gè)值。商家可能會(huì)把智能默認(rèn)設(shè)置得更利于自身利益，例如，用戶經(jīng)常下載軟件時(shí)常默認(rèn)下載一些其他軟件。這是很惱人的，我們應(yīng)該確保默認(rèn)選項(xiàng)符合客戶的利益。

（2）個(gè)性化默認(rèn)：指保持選項(xiàng)的“粘性”，即保持用戶之前的選擇。例如你在淘寶上買東西，每次地址都會(huì)自動(dòng)默認(rèn)你常用的那個(gè)，而不用你再自己選擇。

6. 給用戶填寫的理由

事實(shí)上，這是我們一開始就要考慮的事情。

尤其在涉及一些較隱私的問(wèn)題時(shí)，為了打消用戶的質(zhì)疑，你需要給出原因，說(shuō)明讓他填寫某項(xiàng)信息是出于怎樣的考慮；說(shuō)明你不會(huì)泄露和非法使用用戶的信息。

以及一些其他說(shuō)明，告訴用戶填寫表單能獲得什么好處；貼心的提醒（如填寫完表單大致需要的時(shí)間）。

三、關(guān)于登錄/注冊(cè)

1. 要不要登錄或注冊(cè)？

很多產(chǎn)品其實(shí)是不需要登錄注冊(cè)的，比如地圖類APP，大多數(shù)用戶是即用即走。即使作為產(chǎn)品開發(fā)者你希望用戶能夠注冊(cè)，以掌握用戶信息、帶來(lái)深入的互動(dòng)、便于盈利等，也應(yīng)當(dāng)克制自己，把用戶的需要放在第一位。

2. 什么時(shí)候？

如果要登錄/注冊(cè)的話，建議在需要的時(shí)候出現(xiàn)相應(yīng)界面。一上來(lái)就出現(xiàn)登錄/注冊(cè)頁(yè)面，而且不注冊(cè)就無(wú)法使用的APP對(duì)所有的用戶都是個(gè)困擾，很多人會(huì)選擇放棄。

3. 驗(yàn)證問(wèn)題

驗(yàn)證碼是最常用的一種驗(yàn)證方法，當(dāng)用戶輸入自己的郵箱或手機(jī)號(hào)來(lái)注冊(cè)時(shí)，手機(jī)或郵箱會(huì)收到發(fā)過(guò)來(lái)的驗(yàn)證碼，填入驗(yàn)證碼后說(shuō)明你的郵箱或手機(jī)號(hào)沒(méi)有填錯(cuò)，注冊(cè)成功。不過(guò)這樣也很費(fèi)時(shí)，所以很多網(wǎng)站，在填寫注冊(cè)表單時(shí)都不要求用戶確認(rèn)密碼。有的網(wǎng)站甚至都不需要用戶填寫，而是將密碼直接發(fā)送至用戶的郵箱。我們可以更好利用驗(yàn)證碼，比如微信提供驗(yàn)證碼登錄這樣的功能，方便永遠(yuǎn)記不得密碼的用戶。

在網(wǎng)頁(yè)端常看到為防止機(jī)器人而設(shè)置的驗(yàn)證碼，有的和12306的驗(yàn)證碼類似，非常“反人類”，這種驗(yàn)證碼應(yīng)該是盡量避免的。而且讓用戶點(diǎn)擊（如按順序點(diǎn)擊圖像處出現(xiàn)的文字）比讓用戶輸入更加方便。

四、關(guān)于密碼

1. 密碼用不用顯示

密碼隱藏會(huì)帶來(lái)這樣的問(wèn)題：提高用戶輸錯(cuò)率；用戶修改不順暢；進(jìn)而降低用戶體驗(yàn)。不顯示容易出錯(cuò)，顯示又會(huì)讓用戶不安，如何權(quán)衡？

下面列舉了幾種控制密碼顯隱的方式：

（1）文字說(shuō)明控制顯隱

（2）圖標(biāo)點(diǎn)擊控制顯隱：只是把文字改成了圖標(biāo)，而圖標(biāo)可以跨越語(yǔ)言障礙，具有形象生動(dòng)的特點(diǎn)。

（3）按住圖標(biāo)控制顯隱：按住圖標(biāo)不放可以顯示密碼，較少見到。

（4）單選框控制顯隱

（5）選中可見

（6）干脆直接顯示密碼：增加一個(gè)選框說(shuō)明可以隱藏密碼

（7）關(guān)于安全問(wèn)題：很多表單都有密碼保存的功能，這是為了用戶使用方便，但可能會(huì)帶來(lái)安全問(wèn)題。如果其他人拿到了你的設(shè)備，而你的密碼是保存著的，那么就會(huì)登錄上你的賬號(hào)；更甚一步，如果有顯示密碼的選項(xiàng)，那么他人就會(huì)看到你的密碼。所以即使是保存密碼，也最好不要能夠顯示出來(lái)。

（8）換種思路，不用密碼：用指紋？發(fā)送密碼到用戶郵箱/手機(jī)？

上圖密碼在填寫過(guò)程中只顯示正在輸入的那一位，輸入下一位時(shí)自動(dòng)隱藏，這是一種比較好的方式，既能夠看到自己填的密碼，又不用擔(dān)心他人窺視。

2.密碼需不需要很復(fù)雜

設(shè)置密碼、記住密碼、忘記密碼、找回密碼…然后忘記密碼，密碼的復(fù)雜性安全性與易用性的矛盾始終沒(méi)有解決，已經(jīng)嚴(yán)重地影響到了用戶體驗(yàn)。

高強(qiáng)度密碼的“復(fù)雜性”受到了人們的反思，過(guò)去專家們建議的“復(fù)雜密碼”通常是包含大小寫、數(shù)字、字符的亂序密碼，這種復(fù)雜帶來(lái)的往往是不斷地找回密碼。

長(zhǎng)密碼作用得到了凸顯。理論上，密碼越長(zhǎng)，安全性也就越強(qiáng)。一個(gè)長(zhǎng)密碼段落和一個(gè)帶有數(shù)字和符號(hào)的短密碼一樣安全，但是更容易記住。這種長(zhǎng)密碼可以是一句話的拼音、英文單詞句子，所以可以選擇自己容易記住的話，最好是奇怪的話，比如“woxihuanchiyuanweishupian”。

這就是斯坦福大學(xué)現(xiàn)在推薦使用的“通行短語(yǔ)”，一個(gè)通行短語(yǔ)基本上是一系列單詞，可以包括空格。通行短語(yǔ)長(zhǎng)度至少應(yīng)為16到25個(gè)字符（空格計(jì)為字符），而且越長(zhǎng)越好，因?yàn)殡m然通行短語(yǔ)看起來(lái)很簡(jiǎn)單（如果你明白它的意思的話），但是增加的長(zhǎng)度提供了許多可能的排列，使得標(biāo)準(zhǔn)密碼破解程序?qū)o(wú)效。

那么問(wèn)題來(lái)了，我們?cè)诰W(wǎng)絡(luò)上的密碼那么多，即使是有涵義的句子也不可能一一記住吧。

密碼問(wèn)題仍然需要探索。

五、總結(jié)

在學(xué)習(xí)表單設(shè)計(jì)知識(shí)之前，也許你很快就能上手一個(gè)表單，但隨著深入挖掘，你會(huì)發(fā)現(xiàn)哪怕只是一個(gè)小小的表單，背后都有很大的學(xué)問(wèn)。每個(gè)看似簡(jiǎn)單的背后，都是產(chǎn)品設(shè)計(jì)人員再三的斟酌與思考。而這一切，都是為了更好的用戶體驗(yàn)。

雖然或許挖掘這么多后，重新設(shè)計(jì)出的表單與最開始設(shè)計(jì)的可能并無(wú)太大的差異，但是實(shí)際上并不是，你已經(jīng)明白了每一步設(shè)計(jì)的意義。而這正是產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)人員要思考的問(wèn)題。

關(guān)于表單設(shè)計(jì)，還有很多沒(méi)有提到的內(nèi)容。

關(guān)于提高用戶體驗(yàn)，還有很漫長(zhǎng)的路要走。

主要參考資料：

1.《Web Form Design:Filling the Blanks》（Luke Wroblewski）

2.《表單設(shè)計(jì)的思考》（騰訊ISUX）

本文由 @金山時(shí)雨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。