如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切發(fā)布者：本站     時(shí)間：2021-12-21 15:12:06

大部分人不喜歡填表單，因?yàn)槿藗儊?lái)到網(wǎng)站，主要目的不是填表，而是瀏覽或者購(gòu)買(mǎi)。精心設(shè)計(jì)的表單，使輸入變得流暢讓人心情愉悅，而糟糕的設(shè)計(jì)讓人扶墻吐血。那怎樣才是優(yōu)秀的表單呢?頁(yè)面的布局、邏輯組織、視覺(jué)樣式等都是值得關(guān)注的細(xì)節(jié)，其中簡(jiǎn)化輸入是最近常被提及的，在這里我分享下自己工作中的心得。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

1、 更高大的輸入框

增加輸入框高度，加粗字體，可以讓網(wǎng)頁(yè)上的輸入框看起來(lái)更容易填寫(xiě)和閱讀。隨著電腦顯示器尺寸變大，這樣的輸入框也顯得更大氣。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

2、 添加選取器

與其讓人輸入不如提供選擇，選取內(nèi)容只要點(diǎn)幾下，就自動(dòng)填充進(jìn)輸入框，不但可以減少輸入障礙，還能預(yù)防出錯(cuò)?？梢园讶魏蜗Ｍ臄?shù)據(jù)做成選取器，比如日期、顏色、地址或者歷史記錄等等。

舉個(gè)例子：前面的“對(duì)方開(kāi)戶姓名”輸入框，需要填寫(xiě)對(duì)方的姓名，如果對(duì)方名字里有漢字不認(rèn)識(shí)該怎么辦呢?于是我們可以加上一個(gè)生僻字的選取器，如圖：

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

打開(kāi)字庫(kù)，可以根據(jù)模糊讀音選取漢字填入輸入框。另外，姓名輸入框有校驗(yàn)，選取完成后不要忘記對(duì)輸入框內(nèi)容進(jìn)行再一次校驗(yàn)。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

3、 預(yù)置文字

采用預(yù)置文字來(lái)簡(jiǎn)化輸入經(jīng)常在手機(jī)上看到，現(xiàn)在在網(wǎng)頁(yè)上也常使用。比如微博上發(fā)言的輸入框，會(huì)保留你上一次未發(fā)出的內(nèi)容，可以重新編輯。

在網(wǎng)上也會(huì)看到把“輸入提示”與“預(yù)置文字”混用。當(dāng)然，你怎樣稱呼他們都是可以的，但要明白這是兩種交互方式。輸入提示的目的是指導(dǎo)填寫(xiě)的，聚焦輸入框后文本消失;而預(yù)置文字是屬于待修改的正式內(nèi)容，字體樣式應(yīng)與正式輸入的樣式相同，聚焦后文本是不會(huì)消失的。

當(dāng)表單輸入遇到選填與必填難以抉擇時(shí)，考慮預(yù)置文字會(huì)是一個(gè)不錯(cuò)的折中方案。比如在一個(gè)申請(qǐng)付款的表單中，對(duì)用戶來(lái)說(shuō)主要需填寫(xiě)的是“對(duì)方賬號(hào)”和“付款金額”，付款說(shuō)明是一個(gè)選填項(xiàng)。但對(duì)系統(tǒng)來(lái)說(shuō)，又必須采集付款說(shuō)明，作為交易憑據(jù)之一，這個(gè)付款說(shuō)明怎樣處理呢?比較下面3個(gè)方式，顯然復(fù)選框的方式不適合，因?yàn)橛脩羧舨惶顚?xiě)我們就無(wú)法收集到數(shù)據(jù)，而輸入提示的方式還是需要用戶去填寫(xiě)，所以意義也不大。折中了業(yè)務(wù)和用戶兩方面，預(yù)置“轉(zhuǎn)賬”兩字還是不錯(cuò)的，不想填寫(xiě)的人完全可以跳過(guò)它。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

4、 設(shè)備讀取

攝像頭讀取、語(yǔ)音輸入……最近，各種智能錄入方式在手機(jī)上甚是流行，網(wǎng)頁(yè)上也不甘心示弱，紛紛添加了這些功能~還有人臉識(shí)別，不知道不久后會(huì)不會(huì)流行起來(lái)呢?

5、 設(shè)置輸入屬性

現(xiàn)在比較靠譜的還是Html5提供的一些表單類型屬性。除了限制輸入類型之外還有一些有意思的設(shè)置。拖放屬性，可以從桌面上直接拖進(jìn)相應(yīng)的輸入框里。在郵箱中拖入附件，若主題為空還可自動(dòng)填寫(xiě)主題。而range和number屬性，可以直接替換掉輸入框，對(duì)數(shù)值輸入很有用，在chrome里顯示如圖：

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

6、 額外輸入漸進(jìn)展開(kāi)

當(dāng)遇到需要增加高級(jí)或額外的選項(xiàng)時(shí)，可以采用即時(shí)添加刪除的方式。不需要填寫(xiě)時(shí)，可以完全忽略，需要填寫(xiě)時(shí)點(diǎn)擊一下就會(huì)顯示。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

7、 利用輸入反饋

除了校驗(yàn)填寫(xiě)是否正確，輸入反饋也可以幫助簡(jiǎn)化用戶填寫(xiě)，其中有不少竅門(mén)。

比如在手機(jī)充值表單里，需要重復(fù)輸入一遍號(hào)碼才能確認(rèn)提交。再重復(fù)輸入一次，好像認(rèn)定你肯定會(huì)出錯(cuò)。增加了號(hào)碼歸屬地的反饋(配合歷史記錄)可以避免這種讓人有點(diǎn)煩躁的方式。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

下面這個(gè)例子將校驗(yàn)獲得的推薦郵政編碼填寫(xiě)到輸入框中，讓電腦變得更聰明一些。推薦的內(nèi)容減少了思考和填寫(xiě)過(guò)程。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

在反饋的顯示方式上，也值得挑剔一下。比如數(shù)值輸入框里被輸入了字母，格式錯(cuò)誤。如果對(duì)最簡(jiǎn)單的提供錯(cuò)誤提示不滿意，可以試試讓輸入的字母先顯示1秒，然后即被刪除，這樣比單純的限制輸入類型要更容易理解。另外，還可以自動(dòng)修改顯示格式：號(hào)碼輸入完成后，自動(dòng)增加空格，可以方便閱讀。在需要強(qiáng)調(diào)時(shí)這樣使用還可以提示用戶進(jìn)行檢查，但是在普通的輸入框中就不需要那么復(fù)雜了。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

給金額自動(dòng)補(bǔ)全小數(shù)，比如下面的例子服務(wù)費(fèi)是有小數(shù)的，自動(dòng)補(bǔ)全金額的小數(shù)，可以消減顧慮，而且挺有趣。

如何簡(jiǎn)化輸入讓網(wǎng)頁(yè)表單變得更親切,PS教程,

講到這里，您是否對(duì)看似普通的表單設(shè)計(jì)產(chǎn)生了興趣呢?輸入框是最基礎(chǔ)的人機(jī)交互，每個(gè)人都有不同的理解，以上拋磚引玉，感謝您的閱讀，期待更多的分享和探討。