怎樣才能在網站建設中使網頁表單更親切？

作者：龍 時(shí)間：2018-07-28 浏覽：

怎樣才能在網站建設中使網頁表單更親切？

大(dà)部分(fēn)人(rén)不喜歡填表單，因爲人(rén)們來(lái)到網站，主要目的(de)不是填表，而是浏覽或者購(gòu)買。精心設計的(de)表單，使輸入變得(de)流暢讓人(rén)心情愉悅，而糟糕的(de)設計讓人(rén)扶牆吐血。那怎樣才是優秀的(de)表單呢(ne)？頁面的(de)布局、邏輯組織、視覺樣式等都是值得(de)關注的(de)細節，其中簡化(huà)輸入是最近常被提及的(de)，在這(zhè)裏我分(fēn)享下(xià)自己工作中的(de)心得(de)…

1、 更高(gāo)大(dà)的(de)輸入框

增加輸入框高(gāo)度，加粗字體，可(kě)以讓網頁上的(de)輸入框看起來(lái)更容易填寫和(hé)閱讀。随著(zhe)電腦(nǎo)顯示器尺寸變大(dà)，這(zhè)樣的(de)輸入框也(yě)顯得(de)更大(dà)氣。

2、 添加選取器。

與其讓人(rén)輸入不如提供選擇，選取内容隻要點幾下(xià)，就自動填充進輸入框，不但可(kě)以減少輸入障礙，還(hái)能預防出錯。可(kě)以把任何希望的(de)數據做(zuò)成選取器，比如日期、顔色、地址或者曆史記錄等等。

舉個(gè)例子：前面的(de)“對(duì)方開戶姓名”輸入框，需要填寫對(duì)方的(de)姓名，如果對(duì)方名字裏有漢字不認識該怎麽辦呢(ne)？于是我們可(kě)以加上一個(gè)生僻字的(de)選取器，如圖：

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

3、 預置文字。

采用(yòng)預置文字來(lái)簡化(huà)輸入經常在手機上看到，現在在網頁上也(yě)常使用(yòng)。比如微博上發言的(de)輸入框，會保留你上一次未發出的(de)内容，可(kě)以重新編輯。

在網上也(yě)會看到把“輸入提示”與“預置文字”混用(yòng)。當然，你怎樣稱呼他(tā)們都是可(kě)以的(de)，但要明(míng)白這(zhè)是兩種交互方式。輸入提示的(de)目的(de)是指導填寫的(de)，聚焦輸入框後文本消失；而預置文字是屬于待修改的(de)正式内容，字體樣式應與正式輸入的(de)樣式相同，聚焦後文本是不會消失的(de)。

當表單輸入遇到選填與必填難以抉擇時(shí)，考慮預置文字會是一個(gè)不錯的(de)折中方案。比如在一個(gè)申請付款的(de)表單中，對(duì)用(yòng)戶來(lái)說主要需填寫的(de)是“對(duì)方賬号”和(hé)“付款金額”，付款說明(míng)是一個(gè)選填項。但對(duì)系統來(lái)說，又必須采集付款說明(míng)，作爲交易憑據之一，這(zhè)個(gè)付款說明(míng)怎樣處理(lǐ)呢(ne)？比較下(xià)面3個(gè)方式，顯然複選框的(de)方式不适合，因爲用(yòng)戶若不填寫我們就無法收集到數據，而輸入提示的(de)方式還(hái)是需要用(yòng)戶去填寫，所以意義也(yě)不大(dà)。折中了(le)業務和(hé)用(yòng)戶兩方面，預置“轉賬”兩字還(hái)是不錯的(de)，不想填寫的(de)人(rén)完全可(kě)以跳過它。

4、 設備讀取。

攝像頭讀取、語音(yīn)輸入……最近，各種智能錄入方式在手機上甚是流行，網頁上也(yě)不甘心示弱，紛紛添加了(le)這(zhè)些功能~還(hái)有人(rén)臉識别，不知道不久後會不會流行起來(lái)呢(ne)？

5、 設置輸入屬性。

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

6、 額外輸入漸進展開

當遇到需要增加高(gāo)級或額外的(de)選項時(shí)，可(kě)以采用(yòng)即時(shí)添加删除的(de)方式。不需要填寫時(shí)，可(kě)以完全忽略，需要填寫時(shí)點擊一下(xià)就會顯示。

7、 利用(yòng)輸入反饋。

除了(le)校驗填寫是否正确，輸入反饋也(yě)可(kě)以幫助簡化(huà)用(yòng)戶填寫，其中有不少竅門。

比如在手機充值表單裏，需要重複輸入一遍号碼才能确認提交。再重複輸入一次，好像認定你肯定會出錯。增加了(le)号碼歸屬地的(de)反饋（配合曆史記錄）可(kě)以避免這(zhè)種讓人(rén)有點煩躁的(de)方式。

下(xià)面這(zhè)個(gè)例子将校驗獲得(de)的(de)推薦郵政編碼填寫到輸入框中，讓電腦(nǎo)變得(de)更聰明(míng)一些。推薦的(de)内容減少了(le)思考和(hé)填寫過程。

在反饋的(de)顯示方式上，也(yě)值得(de)挑剔一下(xià)。比如數值輸入框裏被輸入了(le)字母，格式錯誤。如果對(duì)最簡單的(de)提供錯誤提示不滿意，可(kě)以試試讓輸入的(de)字母先顯示1秒，然後即被删除，這(zhè)樣比單純的(de)限制輸入類型要更容易理(lǐ)解。另外，還(hái)可(kě)以自動修改顯示格式：号碼輸入完成後，自動增加空格，可(kě)以方便閱讀。在需要強調時(shí)這(zhè)樣使用(yòng)還(hái)可(kě)以提示用(yòng)戶進行檢查，但是在普通(tōng)的(de)輸入框中就不需要那麽複雜(zá)了(le)。

給金額自動補全小數，比如下(xià)面的(de)例子服務費是有小數的(de)，自動補全金額的(de)小數，可(kě)以消減顧慮，而且挺有趣。

講到這(zhè)裏，您是否對(duì)看似普通(tōng)的(de)表單設計産生了(le)興趣呢(ne)？輸入框是最基礎的(de)人(rén)機交互，每個(gè)人(rén)都有不同的(de)理(lǐ)解，以上抛磚引玉，感謝您的(de)閱讀，期待更多(duō)的(de)分(fēn)享和(hé)探討(tǎo)！