歡迎來戳個(gè)人微信公眾號(hào)：大刀的創(chuàng)想X
2018來了，其實(shí)感覺也沒什么不一樣，無非是又老了一歲，各種事情什么過年啦、日常催婚啦、日常催生啦、職業(yè)瓶頸啦、對(duì)象難找啦、等等等等都會(huì)變得越發(fā)的嚴(yán)重......聽起來好像還是蠻不一樣的??，開個(gè)玩笑。好了但是，雖然心里可能有各種不痛快，還是希望小伙伴們都可以臉上笑嘻嘻的面對(duì)新年，畢竟所有的困難都會(huì)慢慢慢慢慢慢慢慢慢慢慢慢被解決的。
新年，期待其實(shí)不多，現(xiàn)在非常想做到的就兩條：1. 工作和日常上：做更少的事，把重點(diǎn)放在精和深（已在嘗試中）；2. 精神上：情緒控制，希望自己可以變得更理性一點(diǎn)吧（好難=。=）。
好啦瞎扯結(jié)束，進(jìn)入譯文~
本文共總結(jié)了優(yōu)化商品結(jié)算表單（也適用于其他所有類型表單）的16條要素，同時(shí)我們也能從文中了解到為什么需要掌握這些要素。
1. 丟最少的問題給用戶
永遠(yuǎn)記住：在特定的某個(gè)步驟里，只問與此步驟相關(guān)性最強(qiáng)的內(nèi)容。舉栗子??，假如你是表單設(shè)計(jì)者，而對(duì)你來說，用戶的電話號(hào)碼或家庭住址在目前的這個(gè)步驟中，并不是那么那么需要的話，那就直接不要問！在這種情況下“少就是多”（Less is more）原則完美適用。
這樣一來，能夠盡量減少問題的數(shù)量，從而：
1. 減少完成該表單的時(shí)間；
2. 減少用戶瀏覽頁面時(shí)的精神負(fù)荷。
2. 盡可能多的 預(yù)先填寫/自動(dòng)識(shí)別
一定記住：永遠(yuǎn)為你的客戶考慮，盡可能的幫助他們。如果你本來就已經(jīng)預(yù)先知道一些關(guān)于該客戶的信息，那么就直接自動(dòng)幫他/她把這些信息填了就好，或者也可以干脆不展示出來。
舉栗子??：
絕大多數(shù)情況下，我們是可以預(yù)先通過IP地址獲取某個(gè)用戶所在的國(guó)家和城市的；
如果某個(gè)用戶是通過郵件訂閱進(jìn)入該表單流程，那么他的郵箱地址肯定是已經(jīng)被獲取過的了。所以郵箱那一欄我們就可以自動(dòng)幫他填上了。
再比如“Fluix”這個(gè)網(wǎng)站的結(jié)賬流程，15個(gè)問題中就有5個(gè)（1/3）可以被預(yù)先填寫好，這是因?yàn)榇吮韱吾槍?duì)的是產(chǎn)品試用結(jié)束后的訂閱注冊(cè)用戶。對(duì)于這類用戶，在他們注冊(cè)試用賬戶時(shí)就已經(jīng)提供了部分信息，我們就可以幫他們提前把這些信息自動(dòng)填好即可。
但同時(shí)也必須考慮到，在B2B市場(chǎng)中，使用結(jié)賬系統(tǒng)的人和實(shí)際付款的人可能并不是同一個(gè)人。因此，我們應(yīng)該將預(yù)先填好的區(qū)域仍保留為可編輯模式。另外也要注意用戶信息安全的問題。有很多預(yù)先填好的信息內(nèi)容，可能看上去會(huì)給用戶一種我們?cè)诟Q探隱私的感覺。
3. 使用自動(dòng)對(duì)焦
因此，我們應(yīng)該自動(dòng)激活第一個(gè)填寫區(qū)域（或是需要的某個(gè)區(qū)域）。如此一來，相當(dāng)于給了用戶一個(gè)引導(dǎo)，明確指示他該從哪里開始填起，從而提高效率，并免去了用戶的額外點(diǎn)擊動(dòng)作和一系列不必要的思考過程。
4. 使用單列設(shè)計(jì)
設(shè)計(jì)表單時(shí)最好使用單列的形式，視線順序呈自然的方向——從上至下一條線。若使用多列的形式，視線就會(huì)隨著填寫的過程開始歪歪扭扭（“Z”型），這會(huì)極大增加用戶的填寫時(shí)間，也會(huì)增加視線聚焦的次數(shù)和壓力，體驗(yàn)很不好。
并且，這種設(shè)計(jì)方式（單列設(shè)計(jì)）不會(huì)引起某些不必要的疑問，比如，“我應(yīng)該從哪里開始填起？”、“哪個(gè)格子是第一個(gè)？哪個(gè)又是第二個(gè)：是底部的還是最右側(cè)的？”、“左邊那一列的問題和右邊那列性質(zhì)上是一樣的嗎？還是說他們是獨(dú)立的？為啥要把它們分開？”，等等。
另外這里可能有幾個(gè)例外，就是那種常常被寫在一行里的信息，比如：
名字，中間名，姓氏：Sebasteean van Derlot
日期和時(shí)間：2017年，2月21日, 16:30
城市和州：San-Francisco, CA
5. 按照語義劃分區(qū)域
如果表單里的填寫項(xiàng)很多，那么可以試著按照語義/類型劃分為幾個(gè)組，在組與組之間加上一些空格或者組名來實(shí)現(xiàn)分隔。這種方式會(huì)給人一種循序漸進(jìn)，一步一步去填寫的感覺，避免用戶覺得內(nèi)容繁瑣從而離開當(dāng)前頁面的風(fēng)險(xiǎn)。
這和寫文章分段落是一樣的道理。分段能讓讀者一點(diǎn)一點(diǎn)的去閱讀，而不是整個(gè)內(nèi)容都混在一段里，讓人覺得雜亂無章，無從讀起。銀行卡數(shù)字“4-4-4-3”的分隔也是同樣的道理。
6. 為每個(gè)輸入框設(shè)置限制條件
為了盡量減少 出現(xiàn)錯(cuò)誤、反復(fù)修改 等情況，我們應(yīng)該給每個(gè)輸入框設(shè)定一些限制：
字段長(zhǎng)度的最小值和最大值（例如：字符的個(gè)數(shù)）；
內(nèi)容格式的限制；
數(shù)值上的、字母上的、數(shù)字和字母結(jié)合上的，等等關(guān)于字符上的限制；
每個(gè)輸入框附屬的一些其他限制
比如，卡號(hào)會(huì)是由字母或什么別的符號(hào)組成的嗎？顯然不會(huì)。卡號(hào)一定只能是由數(shù)字組成的，因此輸入卡號(hào)時(shí)沒有必要允許輸入除數(shù)字之外的字符。同理，如果是在手機(jī)上輸入卡號(hào)，并且沒有對(duì)輸入做任何限制的話，就等于強(qiáng)迫用戶手動(dòng)在文字鍵盤和數(shù)字鍵盤之間做切換。這個(gè)規(guī)則也同樣適用于其他很多情況。
7. 通過視覺設(shè)限
在輸入框的設(shè)計(jì)上，利用視覺上的處理來體現(xiàn)對(duì)框里內(nèi)容長(zhǎng)度的限制。例如，“州”（State）的輸入框里只需要填入兩個(gè)字母（美國(guó)的每個(gè)州的縮寫都是兩個(gè)字母），那么就沒有必要把該輸入框設(shè)計(jì)的過長(zhǎng)。
另外，輸入框?qū)挾鹊牟煌谝曈X上也增加了辨識(shí)度，起到快速導(dǎo)視的作用。相反，如果所有輸入框都是相同寬度，在視覺上會(huì)比較難區(qū)分，造成更高的識(shí)別成本。
8. 錯(cuò)誤提示信息必須準(zhǔn)確清晰
當(dāng)用戶輸入錯(cuò)誤時(shí)，最好使用內(nèi)嵌提示——將錯(cuò)誤提示緊跟著展示在錯(cuò)誤內(nèi)容旁邊，而不是頁面上其他地方，這樣有利于用戶快速準(zhǔn)確地定位錯(cuò)誤信息并根據(jù)提示進(jìn)行修改。
更重要的是，一定要將這類錯(cuò)誤提示的描述語言做得精確到位，把問題的根源向用戶描述清楚，避免使用泛泛而談的句子，比如“輸入出錯(cuò)了，請(qǐng)稍后重試”，或“錯(cuò)誤999”，這種描述對(duì)用戶來講難以理解，等于沒說。我們應(yīng)該嘗試用更人性化、更好理解的語句去解釋：1. 用戶具體哪里做錯(cuò)了/系統(tǒng)怎么出了錯(cuò)； 或者 2. 用戶應(yīng)該具體怎樣解決這個(gè)錯(cuò)誤/問題（2優(yōu)于1）。
9. 使用內(nèi)嵌式實(shí)時(shí)反饋的表單驗(yàn)證
告知用戶輸入有誤的最佳方法，就是在他輸入錯(cuò)誤后，實(shí)時(shí)將輸入框用不同顏色圈出高亮，并在其旁邊顯示出錯(cuò)誤提示的具體信息。
現(xiàn)在的在線服務(wù)會(huì)使用很多不同類型的驗(yàn)證方式（或者什么驗(yàn)證都不用）。
· 有一些表單，只有在用戶填完所有內(nèi)容，并點(diǎn)擊“繼續(xù)”/"提交"按鈕之后，才會(huì)顯示填寫有誤的提示。這? ? ? 種叫做：Control Version。
· 還有一些表單，使用內(nèi)嵌驗(yàn)證，以輸入框?yàn)閱挝?，在用?b>輸入中，甚至輸入之前，就顯示填寫有誤的提? ? ? 示。
以上兩種會(huì)帶來非常不好的用戶體驗(yàn)，其中更不好的是第二種，因?yàn)椋?/p>
對(duì)于在“輸入時(shí)”就提示錯(cuò)誤的驗(yàn)證方式來說，用戶每打一個(gè)字，提示就出現(xiàn)一遍，會(huì)造成干擾/困擾；
對(duì)于在“輸入之前”就提示錯(cuò)誤的驗(yàn)證方式來說，在輸入框還未被填充的狀態(tài)下就顯示錯(cuò)誤提示，本身在邏輯上就是錯(cuò)誤的。
在用戶每填完一個(gè)輸入框后，立刻調(diào)用“內(nèi)嵌式實(shí)時(shí)反饋的表單驗(yàn)證”有諸多好處。以下是Luke Wroblewski（Google產(chǎn)品總監(jiān)）的一次調(diào)查中的一些數(shù)據(jù)（這項(xiàng)調(diào)查早在8年前就完成了?。?/p>
表單填寫成功率——提高22%
錯(cuò)誤率——降低22%
用戶滿意度——提高31%
填寫時(shí)間——減少42%
修改次數(shù)——減少47%
10. 將輸入框名稱標(biāo)簽置于框外。如有需要，設(shè)置框內(nèi)提示文本。
這里的主要規(guī)則是：當(dāng)用戶在輸入信息時(shí)，不要讓他們找不到該輸入框的名稱標(biāo)簽，這樣可確保用戶不會(huì)忘記自己在填什么東西。所以我們最好將名稱標(biāo)簽放在輸入框外，而不是里面。并且如果空間足夠，可在輸入框和名稱標(biāo)簽之間加少許空格，讓排版顯得更加清晰。
如果是做手機(jī)端的設(shè)計(jì)，可能會(huì)受限于屏幕尺寸，這時(shí)可將名稱標(biāo)簽放在輸入框上方。這樣做確實(shí)會(huì)讓表單變得更長(zhǎng)，但更長(zhǎng)總比更寬要好的多，因?yàn)榇怪钡囊暰€順序?qū)ξ覀兊拇竽X來說負(fù)擔(dān)是更小的。
如果要用名稱標(biāo)簽在輸入框內(nèi)的形式，我們可采用下圖方式——對(duì)于指針?biāo)诘妮斎肟?或者是已經(jīng)輸入完成的輸入框，將原本置于框內(nèi)的名稱標(biāo)簽稍微縮小并移動(dòng)至輸入框的左上角。這種方式現(xiàn)在還比較流行，而且對(duì)于手機(jī)端的設(shè)計(jì)也很實(shí)用！
我們還可以為用戶提供額外的幫助，例如在輸入框內(nèi)用淺色字寫出提示文本，提示用戶填寫時(shí)應(yīng)該采用什么樣的格式、結(jié)構(gòu)，等。
以下是比較好且簡(jiǎn)明的提示案例??：（英文）
the date（日期）: DD/MM/YYYY
phone number（電話號(hào)碼）: +1(___)___-___
exp. date（過期日期）: MM/YY
以上案例在提示的同時(shí)，也起到了格式和字符限制的作用，所有應(yīng)該怎樣去填的指導(dǎo)都躍然眼前，非常好理解。
但我們?cè)谶@樣設(shè)計(jì)的同時(shí)，一定要做到視覺上的明顯區(qū)分（我們?cè)O(shè)置的框內(nèi)提示 vs 用戶實(shí)際輸入的文字）。如果區(qū)分不夠明顯，用戶可能會(huì)誤認(rèn)為我們?cè)O(shè)置的提示文本是已經(jīng)填好的內(nèi)容。
11. 標(biāo)記出可選填的輸入框
關(guān)于這一點(diǎn)，業(yè)內(nèi)爭(zhēng)議諸多。Baymard研究機(jī)構(gòu)認(rèn)為，應(yīng)該把必填項(xiàng)和選填項(xiàng)都做上相應(yīng)標(biāo)記。但我個(gè)人更傾向于Nielsen Norman研究小組（兩家都是做UX研究的機(jī)構(gòu)）的說法。他們的建議來源于做設(shè)計(jì)的首要原則之一——問題問得越少越好。按這個(gè)原則來考慮的話，其實(shí)在一個(gè)表單中，最好沒有選填項(xiàng)，這樣就做到了極簡(jiǎn)。所以按照這個(gè)思路，我認(rèn)為的最好做法是：必填項(xiàng)和選填項(xiàng)中，哪個(gè)占少數(shù)，就標(biāo)記哪個(gè)。舉個(gè)栗子??，如果10個(gè)輸入框內(nèi)有9個(gè)都是必填項(xiàng)，那我們就應(yīng)該去標(biāo)記選填項(xiàng)。
對(duì)于Fluix（作者參與設(shè)計(jì)的產(chǎn)品）的表單來說，現(xiàn)在并沒有任何的選填項(xiàng)，因?yàn)槲覀冎粏栒嬲枰男畔?，避免去提額外的問題。所以我的決定是，一個(gè)都不作標(biāo)記。但其實(shí)這樣的設(shè)計(jì)也存在一定的問題，因?yàn)橛脩艨赡懿⒉荒馨俜职俅_定是否所有的輸入框都是必填項(xiàng)。因此我決定等完整版的表單設(shè)計(jì)完成后，再去做一些對(duì)比測(cè)試。
12. 結(jié)算流程中，切勿分散用戶注意力
盡量避免結(jié)算頁面（表單）出現(xiàn)鏈到其他地方的鏈接，確保用戶能夠完全集中精神在表單的填寫上。不然用戶很有可能去到別的頁面后就忘了填寫表單這回事兒了。
最好只在某些緊急情況下，或是在我們需要借助外部網(wǎng)站來對(duì)頁面上的某些重要信息作出解釋時(shí)，再使用外鏈。舉個(gè)栗子，如果你使用的是第三方服務(wù)，那么最好提供一個(gè)官方原始頁面的鏈接，讓用戶有渠道去了解這個(gè)系統(tǒng)到底是怎樣運(yùn)作的。
13. 只在表單完全填寫完成后，亮起“下一步”按鈕
在用戶填完所有必填項(xiàng)并且沒有任何錯(cuò)誤的情況下，再激活“下一步”按鈕。很顯然，只有當(dāng)我們使用的是內(nèi)嵌式實(shí)時(shí)反饋驗(yàn)證時(shí)，這個(gè)規(guī)則才適用。這個(gè)規(guī)則能夠讓用戶集中在填寫表單上，避免錯(cuò)過重要信息。更重要的是，自動(dòng)激活“下一步”按鈕也有刺激視覺，引導(dǎo)視線的作用，能夠讓用戶的視焦在對(duì)的時(shí)間迅速跳至按鈕處。但如果要讓這個(gè)做法達(dá)到預(yù)期效果，我們需要把按鈕的可點(diǎn)擊狀態(tài)和不可點(diǎn)擊狀態(tài)在視覺上做出更明顯的區(qū)分。
14. 注意地區(qū)差異
做設(shè)計(jì)時(shí)，必須考慮國(guó)家/地區(qū)差異。例如??：
不同的電話號(hào)碼格式；
不同的語言表達(dá)方式（如，美國(guó)的郵編習(xí)慣寫作“zip code”，而英國(guó)則習(xí)慣“postal code”）
只有美國(guó)會(huì)出現(xiàn)“州”這一欄，等
15. 詢問某些具體數(shù)據(jù)時(shí)，解釋清楚為什么以及作何用處
上圖右為Facebook的注冊(cè)頁面，他們?cè)谟脩糇?cè)-填寫生日日期時(shí)具體解釋了為什么需要這條數(shù)據(jù)。
一定要記時(shí)刻記住，我們向用戶提出的所有問題對(duì)他們本人來說，其實(shí)都是非常隱私、敏感的內(nèi)容，包括了他本人的生活、家庭、財(cái)務(wù)狀況，等。因此為了避免不必要的疑惑，我們必須向用戶解釋清楚，為什么向他們要這些信息/數(shù)據(jù)（比如電話號(hào)碼、生日日期、體重、配偶名字，等）。
16. 考慮色盲/色弱人群
如果在設(shè)計(jì)中（前景和背景）顏色對(duì)比度比較低，那么易讀性就會(huì)受到影響，尤其是對(duì)于色盲/色弱人群，而且現(xiàn)在仍然有些手機(jī)/顯示器還是特別老式、本身精度就不高的那種，對(duì)易讀性的要求會(huì)比較高。
很多設(shè)計(jì)師/服務(wù)商經(jīng)常會(huì)遺漏（色盲/色弱人群）這一點(diǎn)，但是這部分人其實(shí)還是相當(dāng)多的（僅僅在英國(guó)就有大約4.5%，也就是270萬人是色盲/色弱！）。
這里提供兩個(gè)工具，可幫助檢測(cè)我們所使用的對(duì)比度是否達(dá)到標(biāo)準(zhǔn)：（可以自己去搜下看哈）
· Colorable
· Color Contrast Check
如果你使用的是Photoshop，可以試試?Bjango?這個(gè)插件（可搜: “Bjango Actions”），里面有色盲/色弱測(cè)試（Color Blindness Testing，如下圖）。
使用Sketch的同學(xué)可以試試用?Stark Plugin（可搜:?“getstark”）。
雖然這些插件并不可能完全準(zhǔn)確，但足夠讓我們對(duì)色盲/色弱人群眼中的顏色是怎樣的 有一個(gè)正確的認(rèn)知。
好啦，到這里16點(diǎn)就全部說完啦，這些規(guī)則基于了一些日常觀察，也參考了很多設(shè)計(jì)行業(yè)大公司/知名設(shè)計(jì)師的研究，希望對(duì)小伙伴們有點(diǎn)兒用?。海?/p>
本文經(jīng)原作者授權(quán)翻譯.
原作者: Dmitry Kovalenko?(Readdle首席產(chǎn)品設(shè)計(jì)師, 參與設(shè)計(jì)Fluix, SparkMaillApp, PDF Expert, Calendars, 等產(chǎn)品)
原文:?《16 Tips that Will Improve Any Online Form》
原文地址:?https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
