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

表單(forms)是什么？

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

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

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

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

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

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

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

1，因為在上一個頁面，用戶的意圖是要登錄Gmail，因此你可以看到google的logo以及標題為登錄，首先建立信任關(guān)系。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

單選按鈕(radio button)

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

復(fù)選按鈕(checkboxes)

常用于選擇多個選項，例如完成待辦事項清單。

下拉式選單(dropdown)

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

切換(toggle)

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

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

永遠顯示輸入框標簽

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

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

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

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

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

表單中的錯誤信息

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

兩種錯誤信息

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

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

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

上下左右要放哪里

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

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

為什么在右邊是最好的？因為在西方的閱讀系統(tǒng)是由左至右(當(dāng)然中文也因此受到影響)，當(dāng)用戶從欄位移動到錯誤信息，很自然的會將眼睛移到右方，看到錯誤信息后再將輸入的部分修正。

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

作者：Jeremy?

插畫：Joyce