年夜部門人不喜歡填表單，因為人們來到網(wǎng)站，首要目的不是填表，而是瀏覽或者采辦。精心設(shè)計的表單，使輸入變得流利讓人神色愉悅，而糟糕的設(shè)計讓人扶墻吐血。那若何才是優(yōu)異的表單呢?頁面的結(jié)構(gòu)、邏輯組織、視覺樣式等都是值得關(guān)注的細節(jié)，此魷蛤化輸入是比來常被說起的，在這里我分享下自己工作中的心得…
1、 更高峻的輸入框
增添輸入框高度，加粗字體，可以讓網(wǎng)頁上的輸入框看起來更輕易填寫和閱讀。跟著電腦顯示器尺寸變年夜，這樣的輸入框也顯得更年夜氣。
2、 添加拔取器。
與其讓人輸入不如供給選擇，拔取內(nèi)容只要點幾下，就自動填充進輸入框，不單可以削減輸入障礙，還能預防犯錯。可以把任何但愿的數(shù)據(jù)做成拔取器，好比日期、顏色、地址或者歷史記實等等。
舉個例子：前面的“對方開戶姓名”輸入框，需要填寫對方的姓名，如不美觀對方名字里有漢字不熟悉該怎么辦呢?于是我們可以加上一個生僻字的拔取器，如圖：
打開字庫，可以按照恍惚讀音拔取漢字填入輸入框。此外，姓名輸入框有校驗，拔取完成后不要健忘對輸入框內(nèi)容進行再一次校驗。
3、 預置文字。
采用預置文字來簡化輸入經(jīng)常在手機上看到，此刻在網(wǎng)頁上也常使用。好比微博上講話的輸入框，會保留你上一次未發(fā)出的內(nèi)容，可以年夜頭編纂。
在網(wǎng)上也會看到把“輸入提醒”與“預置文字”混用。當然，你若何稱號他們都是可以的，但要年夜白這是兩種交互體例。輸入提醒的目的是指導填寫的，聚焦輸入框后文本消逝蹤;而預置文字是屬于待改削的正式內(nèi)容，字體樣式應與正式輸入的樣式不異，聚焦后文本是不會消逝蹤的。
當表單輸入碰著選填與必填難以抉擇時，考慮預置文字會是一個不錯的折中方案。好比在一個申請付款的表單中，對用戶來說首要需填寫的是“對方賬號”和“付款金額”，付款聲名是一個選填項。但對系統(tǒng)來說，又必需采集付款聲名，作為生意憑證之一，這個付款聲名若何措置呢?斗勁下面3個體例，顯然復選框的體例不適合，因為用戶若不填寫我們就無神通集到數(shù)據(jù)，而輸入提醒的體例仍是需要用戶去填寫，所以意義也不年夜。折中了營業(yè)和用戶兩方面，預置“轉(zhuǎn)賬”兩字仍是不錯的，不想填寫的人完全可以跳過它。
4、 設(shè)備篡奪。
攝像頭篡奪、語音輸入……比來，各類智能錄入體例在手機上甚是風行，網(wǎng)頁上也不甘愿寧可示弱，紛紛添加了這些功能~還有人臉識別，不知道不久后會不會風行起來呢?
5、 設(shè)置輸入屬性。
此刻斗勁靠譜的仍是Html5供給的一些表單類型屬性。除了限制輸入類型之外還有一些有意思的設(shè)置。拖放屬性，可以年夜桌面上直接拖進響應的輸入框里。在郵箱中拖入附件，若主題為空還可自動填寫主題。而range和number屬性，可以直接替代失蹤輸入框，對數(shù)值輸入很有用，在chrome里顯示如圖：
6、 額外輸入漸進睜開
當碰著需要增添高級或額外的選項時，可以采用即時添加刪除的體例。不需要填寫時，可以完全忽略，需要填寫時點擊一下就會顯示。
7、 操作輸入反饋。
除了校驗填寫是否正確，輸入反饋也可以輔佐簡化用戶填寫，其中有不少橋縵閂。
好比在手機充值表單里，需要一再輸入一遍號碼才能確認提交。再一再輸入一次，仿佛認定你必定會犯錯。增添了號碼歸屬地的反饋(配合歷史記實)可以避免這種讓人有點焦躁的體例。
下面這個例子將校驗獲得的舉薦郵政編碼填寫到輸入框中，讓電腦變得更聰明一些。舉薦的內(nèi)容削減了思慮和填寫過程。
在反饋的顯示體例上，也值得抉剔一下。好比數(shù)值輸入框里被輸入了字母，名目錯誤。如不美觀對最簡單的供給錯誤提醒過錯勁，可以試試讓輸入的字母先顯示1秒，然后即被刪除，這樣比純摯的限制輸入類型要更輕易理解。此外，還可以自動改削顯示名目：號碼輸入完成后，自動增添空格，可以便利閱讀。在需要強調(diào)時這樣使用還可以提醒用戶進行搜檢，可是在通俗的輸入框中就不需要那么復雜了。
給金額自動補全小數(shù)，好比下面的例子處事費是有小數(shù)的，自動補全金額的小數(shù)，可以消減記掛，而且挺有趣。
講到這里，您是否對看似通俗的表單設(shè)計發(fā)生了樂趣呢?輸入框是最基本的人機交互，每小我都有分歧的理解，以上拋磚引玉，感謝感動您的閱讀，等候更多的分享和切磋!
來歷：http://uedc.163.com/8957.html
推薦閱讀
網(wǎng)址導航發(fā)展分析：我們需要什么樣的導航網(wǎng)站？
一、什么是導航網(wǎng)站? 導航網(wǎng)站又稱網(wǎng)址導航，網(wǎng)址導航就是一個集結(jié)較多網(wǎng)址，并按照必然前提進行分類的一種網(wǎng)址站。網(wǎng)址導航便利網(wǎng)友們快速找到自己需要的網(wǎng)站，而不用去記住各類網(wǎng)站的網(wǎng)址，就可以直接進到所需的網(wǎng)>>>詳細閱讀
本文標題：<b>用戶體驗分析：簡化輸入 讓網(wǎng)頁表單更親切</b>
地址：http://www.sdlzkt.com/a/22/20120309/38817.html
網(wǎng)友點評
精彩導讀
科技快報
品牌展示