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