編輯導(dǎo)語(yǔ)：表單是用戶和應(yīng)用程序之間主要的溝通橋梁，一個(gè)合理、優(yōu)秀的表單模塊不僅能幫助用戶順暢的完成業(yè)務(wù)訴求，更能讓用戶體驗(yàn)到成功感、滿足感，從而提升用戶對(duì)產(chǎn)品滿意度。作者分享了18個(gè)提升表單設(shè)計(jì)效果的技巧，我們一起來(lái)看看吧。

一、表單始終使用標(biāo)簽

人都喜歡接受確定性的信息，面對(duì)不確定的信息，尤其是在輸入不確定的字段，如果用戶忘記了字段的用途并且必須在其外部單擊以再次查看占位符，此時(shí)的體驗(yàn)將是異常糟糕的。

二、避免用戶閱讀路徑呈“Z”字型

“Z”字型的閱讀路徑，是指用戶在閱讀表單的時(shí)候呈現(xiàn)從左到右，再?gòu)纳系较碌囊?guī)律，這樣閱讀模式的跳躍感較強(qiáng)，導(dǎo)致用戶閱讀的效率降低，表單數(shù)量過(guò)多的時(shí)候可能進(jìn)一步導(dǎo)致用戶的反感。

當(dāng)表單分布垂直線上時(shí)，用戶可以快速垂直瀏覽表單，從而更容易完成他們的任務(wù)。

三、表單標(biāo)簽選擇頂對(duì)齊

當(dāng)表單標(biāo)簽是左對(duì)齊 (右對(duì)齊)，有點(diǎn)像是“Z”字型閱讀路徑的一個(gè)擴(kuò)展，左對(duì)齊 (右對(duì)齊) 的表單會(huì)自動(dòng)創(chuàng)建一個(gè)“Z”閱讀模式，導(dǎo)致表表單閱讀效率的下降。當(dāng)表單標(biāo)簽字段非常短，左側(cè)的標(biāo)簽字段對(duì)閱讀影響不大。

四、使用右對(duì)齊標(biāo)簽

表單標(biāo)簽左對(duì)齊、右對(duì)齊相比較而言，右對(duì)齊使得標(biāo)簽和輸入域之間的距離固定，有明確的視覺(jué)關(guān)聯(lián)，可以讓用戶更輕松地瀏覽頁(yè)面，表單的視覺(jué)層次也更清晰。

五、親密性強(qiáng)的字段分組整合

較長(zhǎng)、平鋪的表單會(huì)增加用戶的填寫(xiě)壓力，降低用戶的填寫(xiě)意愿。將親密性強(qiáng)的相關(guān)表單組合成子模塊 (子流程)，不僅在視覺(jué)上降低長(zhǎng)表單帶來(lái)的壓力，還會(huì)使表單更具吸引力。

六、尊重用戶的操作習(xí)慣

按一定的邏輯順序一個(gè)接著一個(gè)地填寫(xiě)每個(gè)字段，然后提交表單，是一個(gè)用戶十分熟悉的操作習(xí)慣 (流程)，把操作按鈕放置表單末尾，是符合用戶認(rèn)知和尊重用戶操作習(xí)慣的。

七、表單之間留有足夠的空間

標(biāo)簽應(yīng)該靠近各自的表單輸入域，尤其是選擇標(biāo)簽頂對(duì)齊的時(shí)候，利用空間將相鄰表單分割開(kāi)來(lái)，適當(dāng)且合理的空間留白不僅會(huì)提高表單的閱讀效率，更會(huì)使表單更具有美感。

八、避免標(biāo)簽重復(fù)

一般用“*”標(biāo)記必填字段，有時(shí)候“*”是頁(yè)面中的標(biāo)簽還是用來(lái)描述標(biāo)簽的會(huì)造成一定的誤解，同時(shí)“*”的顏色有時(shí)候也會(huì)引起負(fù)面關(guān)聯(lián)，例如：紅色表示錯(cuò)誤。

對(duì)于表單來(lái)說(shuō)，省略不必要信息的字段信息會(huì)給表單起到視覺(jué)降噪的作用。

3個(gè)表單，其中有1個(gè)選填表單，2個(gè)必填表單，則可在選填表單標(biāo)簽處標(biāo)記選填；1個(gè)必填表單，2個(gè)選填表單，則在必選表單標(biāo)簽處標(biāo)記必填。

九、清晰的描述錯(cuò)誤信息

表單校驗(yàn)出現(xiàn)錯(cuò)誤時(shí)，不僅要給用戶提示到哪個(gè)表單填寫(xiě)錯(cuò)誤，還要給用戶提示到該表單填寫(xiě)錯(cuò)誤的原因以及如何快速改正錯(cuò)誤。

十、謹(jǐn)慎使用下拉菜單

當(dāng)已知的選項(xiàng)較少 (≤3)，建議使用單選按鈕，平鋪完全展現(xiàn)出來(lái)的選項(xiàng)會(huì)讓用戶心理更安全，用戶更能清晰的了解自己面對(duì)的選項(xiàng)，而不是面對(duì)未知的選項(xiàng)。較少平鋪的單選按鈕，也會(huì)提升用戶的操作效率。

十一、充分利用占位符

占位符不僅起到引導(dǎo)提示用戶填寫(xiě)表單的的用作，也可以讓表單字段格式更具有可預(yù)知性。示例型占位符，可以告訴用戶該字段的正確格式，減少用戶輸入錯(cuò)誤的幾率，通用型占位符，則不會(huì)為用戶提供有價(jià)值的格式信息。

十二、保證一個(gè)主操作按鈕

在一個(gè)表單模塊中，始終保持一個(gè)主操作按鈕，若存在多個(gè)按鈕的情況，則需要根據(jù)業(yè)務(wù)去作區(qū)分，嘗試一個(gè)主操作按鈕，其余幾個(gè)則是次級(jí)操作按鈕。

十三、更具操作性的按鈕文本

表單的提交按鈕，應(yīng)盡量避免使用“提交”、“下一步”、“繼續(xù)”之類(lèi)的通用型文本。嘗試使用更具有操作性、更能凸顯接下來(lái)即將發(fā)生動(dòng)作的文本，例如：“創(chuàng)建賬戶”、“加入團(tuán)隊(duì)”、“創(chuàng)建新賬號(hào)”之類(lèi)的文本。

十四、選擇正確的輸入類(lèi)型

不要對(duì)所有填寫(xiě)內(nèi)容都使用文本字段，字段的類(lèi)型應(yīng)該適應(yīng)其內(nèi)容，針對(duì)有特殊類(lèi)型的內(nèi)容對(duì)文本做特殊處理，使之符合用戶日常的使用習(xí)慣。例如：電話號(hào)碼（183 **** 0530）、銀行卡 （6222 **** **** 0000）。

十五、文本域顯示限制字符

表單字段有輸入限制的情況，要把限制條件顯現(xiàn)出來(lái)，給予用戶明確的提示，增加用戶感知，減少出錯(cuò)率。

十六、告知用戶已啟用大寫(xiě)鎖定

在用戶沒(méi)有意識(shí)到大寫(xiě)鎖定已經(jīng)開(kāi)啟，尤其在輸入密碼的時(shí)候，錯(cuò)誤消息甚至沒(méi)有告訴用戶大寫(xiě)鎖定已開(kāi)啟，一直提示用戶的密碼錯(cuò)誤，這是在一次次的挑戰(zhàn)用戶的極限。

十七、確定字符較短的表單使用視覺(jué)約束

視覺(jué)約束有助于強(qiáng)化用戶所需的信息。例如，如果“項(xiàng)目金額”字段需要的字符不如項(xiàng)目編號(hào)那樣長(zhǎng)，輸入域則不需要與“項(xiàng)目編號(hào)”字段一樣長(zhǎng)，否則可能會(huì)導(dǎo)致用戶混淆，同時(shí)也會(huì)增加用戶的錄入壓力。

十八、使用自動(dòng)完成功能

人都是有惰性的，表單錄入過(guò)程中能用選擇的就不用輸入的，自動(dòng)填充能使表單錄入速度提高30％，對(duì)提高用戶的使用體驗(yàn)來(lái)說(shuō)，自動(dòng)填充無(wú)疑是一個(gè)非常有益的選擇。

參考文獻(xiàn)：

https://medium.muz.li/15-tips-for-better-ui-forms-744febd107f9

本文由@小梗果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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