揭秘一個(gè)普通的輸入框背后驚人的秘密。

某月某日，某項(xiàng)目某頁(yè)面，需要一個(gè)價(jià)格區(qū)間篩選功能，需求合理，所以設(shè)計(jì)做上去。

這是一個(gè)無(wú)比普通的輸入框。在以往的項(xiàng)目中，一般都會(huì)直接由工程師和前端直接應(yīng)有現(xiàn)有的校驗(yàn)框架，即由產(chǎn)品經(jīng)理來(lái)規(guī)定這個(gè)輸入框里“不規(guī)范的字段類型”，然后一旦用戶輸入不規(guī)范的字段類型后，若是后臺(tái)頁(yè)面，就會(huì)在輸入框下方出現(xiàn)紅色的提示。如果是前臺(tái)的頁(yè)面，就會(huì)彈出一個(gè)alert box——這個(gè)輸入框如果這樣處理，也沒(méi)什么。

可是，這個(gè)頁(yè)面是非常重要的前臺(tái)頁(yè)面，我是不希望彈出alert box的，如果使用頁(yè)面提示，也會(huì)影響頁(yè)面結(jié)構(gòu)。

——當(dāng)然，我也考慮過(guò)單純改進(jìn)一下提醒的樣式，比如將alert box改成一個(gè)浮出層（是ppt簡(jiǎn)單示意一下）：

可是我當(dāng)時(shí)想，這個(gè)前臺(tái)的頁(yè)面，要體驗(yàn)好一些，能不能包容性一些，比如用戶輸入前大后小，能不能不提示出錯(cuò)，而自動(dòng)轉(zhuǎn)換為前小后大呢？若兩個(gè)輸入框一個(gè)留空，能不能也繼續(xù)執(zhí)行呢？若用戶輸入字母，能不能自動(dòng)清除呢？若用戶輸入了多個(gè)小數(shù)位，能不能自動(dòng)四舍五入呢？

于是，糾結(jié)的惡夢(mèng)從此開(kāi)始了。

剛開(kāi)始，我想得簡(jiǎn)單，寫(xiě)了幾個(gè)case要求：

Case 1：B,C(A是前面的起訂量，本文為了力求簡(jiǎn)單，忽略此項(xiàng)) 輸入框都不填或清空時(shí)點(diǎn)擊GO——頁(yè)面刷新，執(zhí)行在現(xiàn)有篩選條件上應(yīng)用價(jià)格從0到無(wú)窮大的篩選。

Case2：B,C三個(gè)輸入框中任何一個(gè)填寫(xiě)非數(shù)字及小數(shù)點(diǎn)的字符時(shí)——自動(dòng)清空，不彈出任何提示。

注意：只清除非規(guī)范填寫(xiě)字符，保留符合要求的字符（數(shù)字和小數(shù)點(diǎn)）。舉例，用戶粘貼7a7到B或C輸入框，自動(dòng)清楚中間的a。

Case3：在B和C輸入框里輸入前大后小數(shù)字，點(diǎn)擊GO，頁(yè)面刷新后，輸入框數(shù)字自動(dòng)調(diào)整為前小后大。

Case4：B填寫(xiě)正常數(shù)字如100，C留空，點(diǎn)擊GO——頁(yè)面刷新，結(jié)果數(shù)為大于或等于100的結(jié)果。

Case5：B留空，C填寫(xiě)正常數(shù)字，如100，點(diǎn)擊GO——頁(yè)面刷新，結(jié)果數(shù)為小于或等于100的結(jié)果。

可是到了測(cè)試的階段，才發(fā)現(xiàn)測(cè)試MM才是最變態(tài)的，她們總是能夠找出更變態(tài)的Case，發(fā)現(xiàn)漏洞，于是，多虧了我們非常牛的前端工程師，體現(xiàn)了什么是見(jiàn)招拆招——Nothing is impossible～

補(bǔ)充了case：

Case6：B和C兩個(gè)輸入一樣的數(shù)字（如100），前端自動(dòng)轉(zhuǎn)換為0到100，點(diǎn)擊go后，提取價(jià)格小于或等于100的產(chǎn)品結(jié)果。

Case8: 輸入框如果只輸入小數(shù)點(diǎn)，執(zhí)行同Case1.

某天，前端又提出一個(gè)問(wèn)題：允許輸入小數(shù)點(diǎn)，如果輸入兩個(gè)小數(shù)點(diǎn)怎么辦？

繼續(xù)咬牙補(bǔ)充：

小數(shù)位只允許輸入2位，比如用戶輸入6.678，會(huì)自動(dòng)清除8。

小數(shù)點(diǎn)若輸入兩個(gè)，自動(dòng)保留第一個(gè)，清除第2個(gè)。比如輸入6.6.，會(huì)清除第二個(gè)小數(shù)點(diǎn)——變成6.6。

測(cè)試MM又問(wèn)了：如果粘貼6.6.6怎么辦？是呀，粘貼怎么辦呢？我都快要放棄了，咱還是整個(gè)彈出框警告一下用戶吧。不過(guò)，那不就功虧一簣了嗎？所以，后來(lái)變成了66.60。

最后，經(jīng)過(guò)很多次的測(cè)試和各種變態(tài)的想法，此輸入框終于檢測(cè)通過(guò)。

背后則是前端工程師付出心血——代碼，神奇的代碼……將在續(xù)篇中由前端來(lái)繼續(xù)揭秘。

作為交互設(shè)計(jì)師的心得：

其實(shí)開(kāi)始想法挺簡(jiǎn)單的，就是想讓校驗(yàn)親和一些，不要?jiǎng)虞m提示用戶出錯(cuò)而是潤(rùn)物細(xì)無(wú)聲，幫用戶糾錯(cuò)完成任務(wù)。

隨著項(xiàng)目的進(jìn)行和更多人的加入，發(fā)現(xiàn)要想周全考慮各種情況，是很難的事情。

而且，自己也開(kāi)始反思，這種強(qiáng)制替用戶做主，是不是一件好事，或者本身就不該這么做。用戶輸入錯(cuò)了，就干脆提示他錯(cuò)了，讓他自己有意識(shí)去修改，讓出錯(cuò)顯性和透明化，會(huì)不會(huì)更加好一些？

另外，這些變態(tài)的輸入用戶畢竟是極少數(shù)，為了這極少數(shù)的人太糾結(jié)，雖然是照顧到了設(shè)計(jì)的各個(gè)微笑的細(xì)節(jié)，但是如果考慮投入產(chǎn)出比，可能會(huì)有些因小失大。除非以后能夠?qū)⑦@些已經(jīng)開(kāi)發(fā)出來(lái)的控件標(biāo)準(zhǔn)化，以應(yīng)用到以后的項(xiàng)目里。

也想聽(tīng)聽(tīng)大家的討論。

相關(guān)的文章:面對(duì)無(wú)理取鬧的用戶：http://heidixie.blog.sohu.com/117779486.html

原文：http://ucdchina.com/snap/4771