產(chǎn)品設(shè)計(jì)是一門雜學(xué)，牽涉的東西多如牛毛，從最基本的美學(xué)、人因工程學(xué)，商業(yè)思考到行為經(jīng)濟(jì)學(xué)、心理學(xué)。今年年初在諸多的因素影響下，想將自己在工作上的經(jīng)驗(yàn)分享給大家。

表單(forms)是什么？

表單在數(shù)字產(chǎn)品設(shè)計(jì)里面，想必是每個(gè)產(chǎn)品設(shè)計(jì)師一定會(huì)碰到的設(shè)計(jì)樣式(UI pattern)。常用于登入，用戶回饋，填寫用戶資料等以及任何需要組織整理數(shù)據(jù)的手段。

在表單設(shè)計(jì)當(dāng)中，已經(jīng)有許多已被A/B 測試驗(yàn)證過可以有效增進(jìn)易用性(usability)并進(jìn)而增加轉(zhuǎn)換率(conversion rate)，在設(shè)計(jì)任何表單之前，我們可以通過接下來要介紹的方法，去評估自己所設(shè)計(jì)的表格。

如何設(shè)計(jì)良好的表單？

在設(shè)計(jì)表單之前，我們可以把表單想成是一段對話，一段你跟用戶之間的互動(dòng)。假設(shè)你是一位銷售員，在賣的商品的時(shí)候，第一個(gè)要建立的是什么？建立信任關(guān)系，有了信任關(guān)系之后，才會(huì)有后續(xù)的事情發(fā)生。

而設(shè)計(jì)表單也是一樣的，表單的設(shè)計(jì)第一件事情就是要提供情境給用戶，讓用戶覺得可以信任目前所看到的資訊，進(jìn)而將自己的資訊提供給我們。尤其是現(xiàn)在個(gè)人資安問題日益嚴(yán)重，提供足夠的理由及意圖給用戶，是設(shè)計(jì)表單的第一步。

接下來要做的事情就是，你要怎么去架構(gòu)你的對話，舉個(gè)最常見的例子Gmail 登入頁面：

當(dāng)用戶點(diǎn)“登錄 ”之后，會(huì)被帶來這個(gè)畫面，看似簡單的畫面，其實(shí)里面卻暗藏了需多需要注意的部分，姑且分為九個(gè)部分去看。

1，因?yàn)樵谏弦粋€(gè)頁面，用戶的意圖是要登錄Gmail，因此你可以看到google的logo以及標(biāo)題為登錄，首先建立信任關(guān)系。

2，建立完信任關(guān)系之后，接下來就是提供用戶情境。繼續(xù)使用Gmail則是讓用戶的意圖獲得足夠的驗(yàn)證。

3，確認(rèn)以上兩項(xiàng)之后，用戶就可以填入自己的信息。此時(shí)會(huì)發(fā)生許多有趣的事情，稍后在表單設(shè)計(jì)最佳典范會(huì)提到。

4，如果在當(dāng)下用戶沒有辦法獲得或是忘記自己的信息，在此情境中，我們就必須提供足夠的信息或是動(dòng)作(Call to action)讓用戶可以重新取得所想要的信息。

5，第五點(diǎn)也是在傳達(dá)Google這家公司是注重信息安全，也是建立信任的一環(huán)。當(dāng)然還有其他意圖，我們在這邊就不細(xì)談。

6，防止錯(cuò)誤發(fā)生也是一個(gè)在表單設(shè)計(jì)中很常見的設(shè)計(jì)思維。用戶在登錄頁面時(shí)，有可能不一定是想要登錄，而是注冊，此時(shí)我們就需要提供另外一個(gè)連結(jié)(entry point)，防止他迷失在流程中，同理在注冊頁面也時(shí)常提供登錄的連結(jié)。

7，在這表單最重要的兩個(gè)動(dòng)作是1)填入email. 2)繼續(xù)。因此我們可以看到繼續(xù)是采用主要?jiǎng)幼?primary action)的表現(xiàn)手法，都是以次要?jiǎng)幼?secondary action)去表達(dá)。

8，這邊提供可以快速切換語言的功能，以免當(dāng)下你所用瀏覽的語言并非你常用的語言。當(dāng)我們?yōu)樘峁┒鄧Z言的平臺做表單設(shè)計(jì)時(shí)，時(shí)常要考慮的就是多國語言的限制，比方說：俄羅斯文有時(shí)會(huì)比英文長很多，中文是方塊字型因此排版上比較不會(huì)有過長的情況，但是字體、字距等等的其他變數(shù)也需要考慮的比較多。

9，尤其是在登錄頁面，很多隱私條款或是需要尋求協(xié)助，因?yàn)榉ㄒ?guī)或法律的因素，會(huì)將這些資訊放在最下方以第三級動(dòng)作(tertiary action)的方式呈現(xiàn)（是說大概也不到5 %的人會(huì)去仔細(xì)看條款）。在同一個(gè)畫面中，最好不要超過三種層級的動(dòng)作，來有效的降低視覺噪音(visual loudness)的比例。

短短的一張表單，竟然有那么多小細(xì)節(jié)必須被注意，可見產(chǎn)品設(shè)計(jì)師每天都在跟那么多小細(xì)節(jié)在戰(zhàn)斗（淚）。

接下來為了讓大家少走冤枉路，整理了一些**最佳范例(Best practices)**供大家參考。

設(shè)計(jì)表單的最佳范例(Best practices)

以下要分享的Best practices，是我認(rèn)為產(chǎn)品設(shè)計(jì)師每天工作上常會(huì)碰到的問題。這些案例是由各家平臺自行測試過后所呈現(xiàn)出來的結(jié)果，但不代表這就是對你的產(chǎn)品最好的了解，每一個(gè)產(chǎn)品特征都是需要被經(jīng)過驗(yàn)證的，但是也因?yàn)橛羞@些前車之鑒，讓產(chǎn)品設(shè)計(jì)師在每天的工作中少走了一些冤枉路。

去除所有非必要的輸入框：

Expedia 在經(jīng)過測試后，發(fā)現(xiàn)加了一個(gè)額外的輸入框(公司名稱)在訂購表單中，讓expedia每年損失了一千兩百萬美元；Marketo也發(fā)現(xiàn)一些沒必要的輸入框，讓他們的花費(fèi)增加約25%。

當(dāng)我們在設(shè)計(jì)表單時(shí)，要避免提供多余的輸入框或是過長的表單，但萬一我們?nèi)匀幌胍占绞褂谜叩馁Y料，那可以使用條件式邏輯或是非必填的選項(xiàng)來增加完成率。

條件式邏輯是當(dāng)用戶回答某個(gè)問題在你預(yù)期的狀況下，你可以顯示后續(xù)你想要了解的問題，常用于滿意度調(diào)查的表格。

上方置左的標(biāo)簽(Top-left aligned labels)可最佳化可閱讀性及完成度：

Google的UX研究員發(fā)現(xiàn)將標(biāo)簽放在欄位的左上方優(yōu)化了表單的完成時(shí)間，這是因?yàn)樗枰^少的視覺專注?？梢钥吹阶筮叺膱D中，有較多的視覺往返，而改善后的表單中，是較為垂直的掃描。

現(xiàn)今已經(jīng)很少看到左手邊的表單設(shè)計(jì)，但是我們依然可以記住一件事情，就是如何降低阻力，在使用者經(jīng)驗(yàn)里，是非常重要的一件事情。

何時(shí)使用單選按鈕(radio button)、復(fù)選按鈕(checkboxes)、下拉式選單(dropdown)、切換(toggle)。

哇！講到這邊，估計(jì)都可以另外寫一集來分享四個(gè)之間的不同。今天就從概論的方式來說明，這四個(gè)控制界面元件(control UIs)為表單設(shè)計(jì)中最常用的四種。

單選按鈕(radio button)

一般來說，單選按鈕常用于在一群選項(xiàng)中只能選一個(gè)的情況下作使用，這種情況下也可以使用小圖示來表示：

復(fù)選按鈕(checkboxes)

常用于選擇多個(gè)選項(xiàng)，例如完成待辦事項(xiàng)清單。

下拉式選單(dropdown)

下拉式選單較前兩個(gè)復(fù)雜，可以做為多選或單選使用。如果可能的話，盡量使用單選或復(fù)選按鈕來減少認(rèn)知負(fù)荷和點(diǎn)擊次數(shù)。

切換(toggle)

切換通常用于只有二選一的狀態(tài)，例如：開與關(guān)。

知道這些控制元件之后，就可以更有效地選擇哪一個(gè)最符合表單情境中的需求。

永遠(yuǎn)顯示輸入框標(biāo)簽

如上文所說，輸入框標(biāo)簽通常位于欄位的左上方，而這些標(biāo)簽應(yīng)該永遠(yuǎn)顯示在同一個(gè)位置而不該被預(yù)留的文字(placeholder)所取代，原因是當(dāng)用戶開始輸入時(shí)，預(yù)留文字將會(huì)消失，用戶必須使用他們的記憶去回想剛剛的標(biāo)簽是什么。

看到這邊應(yīng)該會(huì)有一些朋友開始質(zhì)疑「剛剛google的登錄表格不就是這樣用的嗎？」沒錯(cuò)，當(dāng)然也有特例，而這個(gè)特例是最近兩三年蠻常用的一個(gè)手法—? 文中標(biāo)簽(inline label )或是浮動(dòng)標(biāo)簽。

當(dāng)你在跟欄位互動(dòng)時(shí)，預(yù)留文字會(huì)變成輸入框標(biāo)簽，此用意是為了不要讓表單占用太多垂直空間，尤其是在手機(jī)優(yōu)先(mobile-first)的時(shí)代，垂直空間的運(yùn)用一直是被關(guān)注的重點(diǎn)。

使用預(yù)測及自動(dòng)填寫

當(dāng)用戶在選擇他們的地址時(shí)，最好的方式不是讓他們把完整的地址一一的打出來，而是當(dāng)用戶開始輸入地址時(shí)，預(yù)測他們實(shí)際的地址并且自動(dòng)填寫。這可以有效地減少多余的輸入還有認(rèn)知負(fù)荷。

表單中的錯(cuò)誤信息

人非圣賢，孰能無過。但要預(yù)防錯(cuò)誤的發(fā)生，便是產(chǎn)品設(shè)計(jì)師的使命，尤其是在表單設(shè)計(jì)當(dāng)中，接下來就要看看如何在表單設(shè)計(jì)中有哪些錯(cuò)誤信息及擺放位置。

兩種錯(cuò)誤信息

通常的情況下，錯(cuò)誤信息有分兩種，第一種是系統(tǒng)錯(cuò)誤，第二種是驗(yàn)證錯(cuò)誤。

系統(tǒng)錯(cuò)誤是用于資料在傳輸過程中發(fā)生錯(cuò)誤，其中有很多種可能性，像是突然沒網(wǎng)絡(luò)，或是服務(wù)器掛掉等等。而最常見到的信息就是「something went wrong, please try again」，通常這類的錯(cuò)誤會(huì)顯示在操作端附近或是用戶可以馬上看到的位置。

而驗(yàn)證錯(cuò)誤，則是在輸入結(jié)束后(少量用在輸入過程中)，偵測到異常后所產(chǎn)生的回饋，也是我們妥善地使用進(jìn)而引導(dǎo)用戶走向正確的道路。

上下左右要放哪里

你希望用戶會(huì)在欄位的哪個(gè)地方看到顯示的錯(cuò)誤信息？如果錯(cuò)誤信息沒有擺放在正確的地方，你可能會(huì)讓用戶無法完成你的表單。當(dāng)錯(cuò)誤產(chǎn)生時(shí)，他們需要知道如何去修正并重新送出。

研究指出將錯(cuò)誤信息放置在欄位的周圍可達(dá)到最佳的效果。尤其是右邊以及下方更為直覺。

為什么在右邊是最好的？因?yàn)樵谖鞣降拈喿x系統(tǒng)是由左至右(當(dāng)然中文也因此受到影響)，當(dāng)用戶從欄位移動(dòng)到錯(cuò)誤信息，很自然的會(huì)將眼睛移到右方，看到錯(cuò)誤信息后再將輸入的部分修正。

由于我們現(xiàn)在是處于手機(jī)優(yōu)先的時(shí)代，手機(jī)上并沒有太多的水平空間可以讓我們運(yùn)用，因此我們大多數(shù)看到的錯(cuò)誤信息是顯示在下方的。

作者：Jeremy?

插畫：Joyce