web表單設(shè)計(jì)

時(shí)間：2023-10-04 21:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-04 21:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web表單設(shè)計(jì)：表單是橫在企業(yè)和用戶(hù)之間的一道阻礙，沒(méi)有人喜歡表單，但是表單卻是系統(tǒng)獲取用戶(hù)數(shù)據(jù)的重要手段，所以，讓用戶(hù)快速并輕松地完成表單是設(shè)計(jì)表單的基礎(chǔ)要求。

好的表單設(shè)計(jì)可以大幅度提升用戶(hù)數(shù)據(jù)轉(zhuǎn)化率，給企業(yè)帶來(lái)巨大的利潤(rùn)，是“由內(nèi)而外”設(shè)計(jì)出來(lái)的。要讓用戶(hù)在填完表單后知道他們獲得了什么，也就是要做到系統(tǒng)與用戶(hù)之間的平衡。

要做到平衡，在內(nèi)容的選擇上要達(dá)到無(wú)論增加還是減少都會(huì)給用戶(hù)帶來(lái)疑惑的程度。比如：當(dāng)用戶(hù)在網(wǎng)上購(gòu)物，自始至終都沒(méi)有填寫(xiě)過(guò)自己的收貨地址，那就會(huì)給用戶(hù)帶來(lái)疑惑，用戶(hù)會(huì)想，他們?cè)趺茨玫絼倓傎I(mǎi)的東西。所以收貨地址是必不可少的表單信息，只是獲取用戶(hù)地址的時(shí)間節(jié)點(diǎn)需要多考慮一下了。

在設(shè)計(jì)表單的時(shí)候，除了滿(mǎn)足以上條件外，我們還需要保證表單能傳達(dá)給用戶(hù)清晰的完成路徑信息。比如：表單的動(dòng)作按鈕始終保持可見(jiàn)。

總結(jié)一下，在設(shè)計(jì)表單時(shí)，大體我們要遵循以下3個(gè)原則：

1. 減少痛苦，保持表單簡(jiǎn)潔容易

2. 清晰的完成路徑

3. 平衡用戶(hù)和系統(tǒng)的需求

接下來(lái)詳細(xì)介紹一下表單詳細(xì)內(nèi)容的設(shè)計(jì)。

一、 選內(nèi)容

在選擇表單的內(nèi)容時(shí)，我們要反復(fù)推敲每一個(gè)問(wèn)題是否都是必不可少的？那些問(wèn)題能不能通過(guò)自動(dòng)獲?。磕懿荒軗Q個(gè)時(shí)間節(jié)點(diǎn)或者場(chǎng)景詢(xún)問(wèn)用戶(hù)（用戶(hù)需要的時(shí)候）？

二、 表單結(jié)構(gòu)與元素規(guī)范

l 名稱(chēng)和動(dòng)作按鈕保持一致

l 瀏覽線(xiàn)清晰、簡(jiǎn)單、順暢（對(duì)于表單來(lái)說(shuō)，標(biāo)簽、輸入框、動(dòng)作按鈕構(gòu)成垂直軸，形成單一的路徑，可以有效提高用戶(hù)的填表速度）

l 保證用戶(hù)注意力集中

l 當(dāng)分為多個(gè)頁(yè)面展示時(shí)，要有對(duì)應(yīng)的進(jìn)度提示

l 用tab鍵控制光標(biāo)有序在各輸入框間移動(dòng)

三、 標(biāo)簽對(duì)齊

1. 頂對(duì)齊

l 優(yōu)點(diǎn)：處理速度快（比左對(duì)齊快接近10倍，比右對(duì)齊快接近2倍）；標(biāo)簽與輸入框距離接近，相關(guān)性強(qiáng)；視覺(jué)流單一（垂直向下）；節(jié)省橫向空間，適用于標(biāo)簽較長(zhǎng)或輸入內(nèi)容較長(zhǎng)的情況。

l 缺點(diǎn)：占用大量的垂直空間

l 注意：相鄰輸入框的間距最好設(shè)置在輸入框高度的45%~75%

2. 右對(duì)齊

l 優(yōu)點(diǎn)：標(biāo)簽和輸入框鄰近，處理速度較快（比左對(duì)齊快2倍左右）；節(jié)省了縱向空間。

l 缺點(diǎn)：左側(cè)不齊，當(dāng)用戶(hù)有只瀏覽標(biāo)簽的需求時(shí)，瀏覽速度較慢；左側(cè)標(biāo)簽的靈活度不夠（當(dāng)標(biāo)簽很長(zhǎng)折行顯示時(shí)，會(huì)加大填寫(xiě)表單的速度）

3. 左對(duì)齊

l 優(yōu)點(diǎn)：快速瀏覽標(biāo)簽（當(dāng)表單包含不等的必填項(xiàng)和選填項(xiàng)時(shí)適用）；節(jié)省縱向空間；適用于不常見(jiàn)標(biāo)簽或需要用戶(hù)提供準(zhǔn)確數(shù)據(jù)的標(biāo)簽。

l 缺點(diǎn)：標(biāo)簽和輸入框間距較大，增加了用戶(hù)填寫(xiě)表單的困難度。

4. 輸入框內(nèi)標(biāo)簽

l 優(yōu)點(diǎn)：節(jié)省了大量空間，適用于只有一兩個(gè)輸入框的情況

l 缺點(diǎn)：用戶(hù)輸入數(shù)據(jù)時(shí)，標(biāo)簽就會(huì)消失；不適用中/廠(chǎng)表單

四、 輸入框

l 當(dāng)需要輸入框?qū)斎雰?nèi)容進(jìn)行暗示時(shí)，需要采用適宜的長(zhǎng)度，否則保持長(zhǎng)度一致

l 根據(jù)輸入內(nèi)容選擇合適的輸入框類(lèi)型

l 根據(jù)需求適當(dāng)利用彈性輸入框

五、 動(dòng)作按鈕

l 保證主動(dòng)作始終可見(jiàn)

l 盡量避免出現(xiàn)次動(dòng)作

l 動(dòng)作按鈕的文案要與表單的目標(biāo)一致

l 慎用元素的屬性變化

l 給予用戶(hù)及時(shí)的反饋，避免重復(fù)點(diǎn)擊等操作

l 保證動(dòng)作按鈕的位置與表單的整體視覺(jué)流一致，如下所示：

要注意的是，當(dāng)變化取消按鈕的屬性時(shí)（形狀或顏色），測(cè)試結(jié)果顯示（Luke Wroblewski和他的團(tuán)隊(duì)做的基于23人測(cè)試的實(shí)驗(yàn)），用戶(hù)完成表單的速度不如沒(méi)有差異的快，雖然被測(cè)試人員都提出了增加主動(dòng)做與次動(dòng)作的差異的優(yōu)化意見(jiàn)。