你還不知道表單怎么設(shè)計嗎？看這里！
時間：2023-09-14 16:36:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-14 16:36:01 來源：網(wǎng)站運(yùn)營
你還不知道表單怎么設(shè)計嗎？看這里?。罕韱问请娮由虅?wù)、社交互動和大多數(shù)基于生產(chǎn)力應(yīng)用類型的網(wǎng)站的關(guān)鍵。盡可能簡單，微小的變化都有可能極大的提高用戶體驗。
一、設(shè)計原則
- 盡量減少痛苦 填寫過程盡量簡潔、容易。
- 說明填寫完成路徑 清晰的告訴人們?nèi)绾瓮瓿蛇@一目標(biāo)。
- 考慮情境 表單并非憑空存在。受眾群體、業(yè)務(wù)決定了如何使用表單。
- 確保一致溝通 表單是顧客和公司對話的中間人。多個團(tuán)隊參與對話，但表單只能用一種聲音發(fā)聲。
二、表單結(jié)構(gòu)
- 構(gòu)建對話 考慮如何以對話形式而不是盤問的形式組織表單，試著討好客戶。
- 內(nèi)容組織 為了保證對話流暢，可以將對話分為有意義的組。根據(jù)問題數(shù)量和情境，將表單分放到多個的網(wǎng)頁或單個網(wǎng)頁的不同位置。
- 表單命名 表單名稱和客戶采取的行動一致。
- 清晰的瀏覽線 客戶迅速對問題做出答復(fù)，減少客戶完成表單的時間成本。
三、表單元素
頂對齊標(biāo)簽：標(biāo)簽和相關(guān)輸入框相鄰；用戶只需要在一個方向（向下移動），為填寫表單提供了清晰的完成路徑。缺點是垂直空間增加。
右對齊標(biāo)簽：標(biāo)簽和相關(guān)輸入框相鄰，能快速填充；左側(cè)不齊，降低快速瀏覽表單問題的效率，標(biāo)簽長度和輸入框組合彈性較小。
左對齊標(biāo)簽：標(biāo)簽長度和輸入框組合彈性較小，填寫速度最慢。
輸入框內(nèi)標(biāo)簽：節(jié)省屏幕空間；填寫時標(biāo)簽消失，檢查困難。
總結(jié)：
如果要減少填寫時間，或者出于本地化原因，標(biāo)簽長度需要靈活多變，可采用頂對齊標(biāo)簽；
如果與上述目標(biāo)類似，但垂直屏幕空間有限，可采用右對齊標(biāo)簽；
如要求人們?yōu)g覽表單標(biāo)簽，知道必填問題或者回答多個問題中的若干特定問題，可采用左對齊標(biāo)簽；
如果表單非常短，屏幕空間極度有限，可采用輸入框內(nèi)標(biāo)簽，同時應(yīng)當(dāng)確保合適的交互和情境。
- 輸入框 有文本框、單選按鈕、復(fù)選框、下拉菜單等。
合理設(shè)置輸入框的長度；
設(shè)置默認(rèn)值；
區(qū)分必填項和可選項，關(guān)注必填項與可選項的標(biāo)注方式與位置；
進(jìn)行合理的分組；
如果答案有多種格式，應(yīng)該考慮彈性輸入框。
- 動作 完成表單的最終動作，如：提交、保存、繼續(xù)等動作被稱為主動作?？赡芤鹭?fù)面結(jié)果，如取消，成為次動作。
盡量避免表單中出現(xiàn)次動作，應(yīng)當(dāng)提供完成表單的單一路徑。想象一下，你填完了全部表單，正要提交時，不小心碰到了取消按鈕；
主動作與輸入框?qū)R，能提供清晰路徑完成表單；
有次動作時，確保主動作與次動作的視覺差異清晰。
不要依賴幫助文字來彌補(bǔ)表單的缺點。盡量減少表單中幫助文字，以促成更好的設(shè)計方案；
輸入框內(nèi)的幫助文字只能用于提供回答問題的方式；
如果人們知道幫助問題答案，但不確定如何回答或者為什么回答，應(yīng)當(dāng)考慮自動即時幫助系統(tǒng)；
簡單的幫助文字毗鄰問題是最清晰的方式；
如果有錯誤阻礙人們完成表單，應(yīng)該明確告訴人們。錯誤消息是表單中最重要的元素，確保以最重要的形式表現(xiàn)錯誤！
在線咨詢