表單是什么？是用戶和app之間的對話。作為人機交互的一種重要入口，一個好的數(shù)據(jù)輸入方式是很有必要去考慮的。但現(xiàn)實中，我們大多設(shè)計師和產(chǎn)品經(jīng)理前期設(shè)計的時候就沒有太多的考慮，到最后開發(fā)的時候就會發(fā)現(xiàn)問題，然后就草草了事了。那么我們今天就來好好探究下表單設(shè)計時要注意的事項。

一、標(biāo)簽的設(shè)置

標(biāo)簽的設(shè)置，我們有時候會很糾結(jié)。移動端的興起在pc之后，所以很多pc的使用方法就應(yīng)用在移動端設(shè)計上。首先，我們要知道標(biāo)簽的作用是什么，它是對輸入數(shù)據(jù)的歸類，對用戶輸入的一種提示。標(biāo)簽分為圖標(biāo)標(biāo)簽和文字標(biāo)簽，圖標(biāo)標(biāo)簽多用在登錄等容易理解的場景，用戶對這些圖標(biāo)的感知度非常高了，但是也要結(jié)合后面的提示文字使用，沒有提示文字，用戶也會一臉懵逼。

但是，在表單內(nèi)容過多的時候，文字標(biāo)簽更常用。要知道，文字的識別度是遠高于圖標(biāo)的識別的。常見的標(biāo)簽有頂對齊、右對齊、左對齊。

馬泰奧·彭佐在2006年7月的眼動研究發(fā)現(xiàn)，標(biāo)簽如果采用頂對齊方式，用戶的視線從標(biāo)簽移動到輸入框只需要50毫秒，右對齊方式需要240毫秒，左對齊方式需要500毫秒。

如果從高效上講，應(yīng)該是優(yōu)先考慮標(biāo)簽頂部對齊。但是，我們使用的時候要注意場景，不管是移動端還是pc端，如果全部采用頂對齊的方式，就會占用更多的垂直空間，一旦表單項過多，對表單頁的操作也會造成不便。移動端的尺寸很小，尤其需要注意。

所以，單從馬泰奧·彭佐來看，如果表單項不多，優(yōu)先考慮標(biāo)簽頂部對齊；要兼顧高效和頁面的垂直空間，則選擇右對齊方式。那是不是左對齊標(biāo)簽無用呢？其實并不是，研究也有表明，在涉及到專業(yè)性過強，用戶不熟悉的表單，需要更長時間理解的標(biāo)簽項時，則可以考慮左對齊方式。

我們試著想下50毫秒、240毫秒、500毫秒，對我們的輸入影響真那么大么。一個表單頁面的效率可不僅限于讀取標(biāo)簽的速度，它還受到輸入形式，表單多少，表單布局等各種因素的影響。

然而，移動端中的表單，我們經(jīng)常看見的是標(biāo)簽左對齊，其原因也以想象：節(jié)約空間、統(tǒng)一布局。其實我們在考慮標(biāo)簽的對齊方式的時候，也需要考慮輸入內(nèi)容的對齊方式。常見的內(nèi)容對齊方式有：左對齊、右對齊。

如果標(biāo)簽采用頂對齊，毫無疑問，輸入文字做對齊。若標(biāo)簽采用右對齊，輸入文字則采用左對齊。若標(biāo)簽采用左對齊，則輸入文字可以采用左對齊或右對齊。

除了上面所說的標(biāo)簽樣式外，浮動標(biāo)簽是一個迅速獲得普及的新的交互設(shè)計方式。在它的設(shè)計中，標(biāo)簽文字開始作為提示文字，然后一旦用戶開始填寫，標(biāo)簽將升到上面，解決了上述提示文字消失的問題。

雖然這種方式還可以幫助減少頁面長度，在移動端特別有幫助。但是它不能解決文本框看上去已經(jīng)被填補的問題。(Nielsen Norman Group曾做過的一項眼球追蹤研究就說明，空的輸入框比有提示文字的輸入框更能引起用戶的關(guān)注，而且與空的輸入框相比，用戶更容易忽略有提示文字的輸入框。換句話說，被認(rèn)為是有用的表單提示文本其實弊大于利，尤其是對習(xí)慣大致瀏覽的用戶。)因此，Nielsen Norman Group不建議這種做法，還是應(yīng)該保持標(biāo)簽在上面，除非頁面長度是最重要的設(shè)計關(guān)注點。

二、輸入注意

移動端表單輸入，是一個我們非常容易忽略的一個地方。輸入方式的不同也是移動端和pc端非常大的一個區(qū)別，pc端我們是采用大鍵盤輸入，而移動端是虛擬小鍵盤。實體鍵盤輸入速度要比虛擬小鍵盤快很多。由于使用場景不同，很多公司都是電腦網(wǎng)頁和移動app同時開發(fā)的，然后把pc端的所有功能都移植到移動app上，表單也全部挪到移動端，造成app體量非常龐大，功能也臃腫，用戶使用起來非常不便。

我們在做設(shè)計的時候，要多問自己“為什么”，采用5W2H法(what、who、when、where、why、how、how much)來審視一個表單的設(shè)計，這樣我們就能充分考慮設(shè)計的各種需求和場景了。

1.減少輸入

移動端表單的設(shè)計，我們首先要考慮是否有必要輸入這個數(shù)據(jù)，這個數(shù)據(jù)對我們的影響大么；如果沒有什么作用，我們是否應(yīng)該刪除它；如果pc端也有該功能，我們是否可以讓用戶在pc端進行這些操作。所以常見的方式有下面這幾種：

• 減少文字
• 變輸入為選擇
• 新開頁面輸入

減少文字－考慮這個字段是否有必要，如果對我們沒有任何作用，那我們刪除它吧。移動不是pc，動不動就輸入幾百上千字那是不可能的，所以在輸入文字的時候可以做個限制，讓用戶輸入重要的信息即可。對于輸入框，我們應(yīng)該直接告訴最多輸入多少個文字，讓用戶有心理預(yù)期。

變輸入為選擇－選擇很多情況下比輸入是更快的，而且這樣也能規(guī)范我們錄取的數(shù)據(jù)，這樣也能快速篩選我們的數(shù)據(jù)，前端和后端也更容易識別讀取。

新開頁面輸入－有時候我們一個表單的內(nèi)容很多，輸入和選擇混雜在一起，輸入的文字也非常多，那我們可以可以考慮在當(dāng)前頁面展示，輸入則進到新開頁面進行。

2.默認(rèn)文字

我們在錄入表單的時候，通常會有默認(rèn)提示文字，幫助我們更好的理解需要錄入的內(nèi)容。一旦表單獲取點擊焦點，提示文字就消失了，用戶不再能看見它。所以這樣其實是有個缺陷的，這會讓用戶產(chǎn)生短期記憶的壓力而增加錯誤的機率。在移動端這種缺陷是被大多數(shù)忽略的，因為多數(shù)情況下默認(rèn)文字是非常簡單易理解的，如果出現(xiàn)非常復(fù)雜的提示，則我們應(yīng)該增加說明文字進行說明。

默認(rèn)文字需要注意的幾個地方

• 文字不要太多，盡量控制在一定范圍內(nèi)
• 不要把默認(rèn)提示展示的像輸入的內(nèi)容(默認(rèn)文字是輔助內(nèi)容，不要搶風(fēng)頭)
• 需要掩碼的就采用掩碼輸入方式(常用于電話號碼，銀行卡號等數(shù)字的輸入。讓用戶方便記憶和錄入，減少錯誤)

3.區(qū)分標(biāo)簽、默認(rèn)文字、錄入內(nèi)容、不可更改內(nèi)容

我們在做表單的時候，一定要注意表單的層級，不要讓用戶在這里迷失。常用的方式就是以字體大小和顏色來區(qū)分標(biāo)簽、默認(rèn)文字、錄入內(nèi)容、不可更改內(nèi)容。至少采用三個文字顏色來區(qū)分這個層級，常見的是深色(標(biāo)簽)、中灰色(輸入內(nèi)容)、淺色(默認(rèn)提示)或者是中灰色(標(biāo)簽)、深色(輸入內(nèi)容)、淺色(默認(rèn)提示)

4.鍵盤選取

鍵盤，是很容易忽視的一個地方，很多情況下不去定義鍵盤類型，最后導(dǎo)致我們用戶體驗較差。但是有的使用場景用戶體驗的等級是較低的，比如銀行，他的安全等級是最高的，所以很多銀行的鍵盤采用的是打亂的鍵盤。所以，即使是為了安全性，相對于用戶輸入體驗差，我們也更應(yīng)該考慮鍵盤的選取類型。所以在交互稿或者是產(chǎn)品文檔中應(yīng)該注明鍵盤的類型，以免開發(fā)工程師采用默認(rèn)的類型，造成用戶體驗差。

iOS、Android提供多種鍵盤類型布局，常用的鍵盤類型布局有：(參考https://www.uisdc.com/soft-keyboard-design-element#)

• 默認(rèn)鍵盤：常規(guī)的全鍵盤，不做任何限制。
• 文本鍵盤：相比默認(rèn)鍵盤取消了表情符號，適合輸入密碼。
• 整數(shù)鍵盤：只能輸入數(shù)字0-9。
• 浮點數(shù)鍵盤：在整數(shù)鍵盤基礎(chǔ)上增加了小數(shù)點。
• 電話號碼鍵盤：在數(shù)字鍵盤基礎(chǔ)上增加了“*” 和 “#” 。
• 郵箱地址鍵盤：在常規(guī)全鍵盤基礎(chǔ)上增加了“@”和“.”。
• URL鍵盤：輸入網(wǎng)址用的，在常規(guī)全鍵盤上增加或突出“.com”、“.”和“/”等。
• 數(shù)字和符號鍵盤：相比數(shù)字鍵盤多了很多標(biāo)點符號。

5.數(shù)據(jù)兼容鍵盤

鍵盤選擇好后，也應(yīng)該考慮鍵盤彈出時，頁面的展示方式。有的app在這里沒有考慮太多，彈出的鍵盤直接把輸入文本框擋住，造成用戶體驗非常差。所以，當(dāng)你的輸入框在鍵盤的下面的時候，應(yīng)該將輸入框推到鍵盤上面，保證用戶輸入的可見性。

6.文字高度自適應(yīng)

在輸入文字的時候，我們應(yīng)該明確表單輸入的文字的最小值與最大值，然后根據(jù)最大值和最小值來確定最后的展示方式。對于輸入文字較少的，我們可以一行展示，比如姓名，通常一行可以展示完整，給個最大限制就行。當(dāng)你的文字大于一行所承受的范圍時，你就要考慮是否要自適應(yīng)高度顯示文本內(nèi)容了。

如果在設(shè)計的時候不考慮這些，開發(fā)很容易忽略這些問題，然后你就可以看到一大堆文字蓋在標(biāo)簽上了。最好的方式就是把輸入的文字全部展示出來，如果你為了節(jié)約空間，也可以一行展示，多余的用”…"表示。我們還可以采用新頁面來專門輸入，這樣就解決了這個問題，也不怕文字過多了。

對于備注或者反饋等大量文字輸入時，我們需要給文字輸入框更大的高度，保證在大多數(shù)情況下能正常展示。通常是有限制字?jǐn)?shù)的(微博的140字)，如微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字。采用這種方式，告知用戶還可輸入多少，以免造成不好的體驗。

三、告知必選

為什么會出現(xiàn)選填和必填呢，很多情況下是為了讓用戶快速完成操作，就把不是必須的選項采用可選的方式進行操作。尤其是在b端設(shè)計中，需要錄入用戶或者商家的信息非常多，很多時候為了讓商品信息更加全面，所以會把所有規(guī)格參數(shù)一股腦的展示出來，這個時候用戶就懵了。在移動端，使用場景也不固定，用戶很難會有大量時間來錄入更多信息，所以區(qū)分出選填和必填是非常有必要的，然后用戶可以在有空的時候完善信息。

那如何區(qū)分選填和必填呢，常見的有

• 文字標(biāo)明必填和選填(二者選其一)
• 以＊代替
• 以●代替

這樣就能最高效率區(qū)分出來必填字段和選填字段，但現(xiàn)在大部分互聯(lián)網(wǎng)用戶對于「*」就代表必填這都已領(lǐng)會，所以筆者還是推薦在表單中盡可能用「*」去區(qū)分必填和選填，畢竟這屬于最通用的方案。但是，當(dāng)一個表單都是必填時，就沒必要全部標(biāo)記出來了，比如登錄表單，大家都知道登錄表單中的標(biāo)簽項都為必填，同時也可以根據(jù)標(biāo)簽項是否輸入的狀態(tài)來激活「登錄」按鈕。

四、合理組織信息

組織是簡化設(shè)計的一個重要策略，尤其是大批量錄入表單的時候，我們更應(yīng)該合理組織信息。移動端表單過多的時候，用戶很難定位到需要更改或者注意的地方。通常采用下面的方式來合理組織表單信息：

• 標(biāo)簽分類－通過添加標(biāo)題，區(qū)分表單模塊
• 功能分類－根據(jù)同等層次、同類數(shù)據(jù)分類
• 合理的間距－用間隔來區(qū)分，避免擁擠
• 分頁錄入 －當(dāng)一頁的表單過多的時候，給用戶造成密集恐懼的感覺。我們可以分頁錄入，一步步的完成要錄入的表單

五、及時反饋

及時反饋，這也是我們?nèi)菀缀雎缘牡胤健：芏鄷r候，用戶在完成所有表單填寫后，提交的時候，我們才給錯誤提示，這樣會讓用戶去重新修改所填內(nèi)容，如果所填內(nèi)容過多，用戶修改起來就非常麻煩，造成很不好的用戶體驗。比如選擇時間的時候，如果過去的時間無效，那么我們就可以讓過去的時間不可選，直接定位到當(dāng)前時間，當(dāng)前和后面的時間就可以選擇，這樣就避免選擇了過去時間造成的錯誤。或者有的情況下，部分狀態(tài)是不能選擇的，那我們也應(yīng)該告知用戶哪些不可用。再或者，輸入的號碼格式，數(shù)字明顯錯誤，我們也應(yīng)該及時告知用戶......

每個表單所承載的功能是不同的，我們要根據(jù)具體功能具體設(shè)計。總之，有一點我們要注意的是：在做設(shè)計的時候應(yīng)該考慮更多的場景，多問為什么。前期我們踩的坑多了，后面開發(fā)和測試踩的坑就少了，用戶體驗也會更好了。

在這里我相信有很多想要學(xué)習(xí)UI設(shè)計的朋友，我是一名從事了五年UI設(shè)計私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的學(xué)習(xí)干貨及教程，從最基礎(chǔ)到，各種框架都有整理，送給每一位UI設(shè)計取的可以關(guān)注我并在后臺私信我：學(xué)習(xí)，即可免費獲取

總結(jié)

以上是生活随笔為你收集整理的怎么改变表单option标签直接字体大小_不起眼却非常重要的表单交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。