開始的時(shí)候我寫了個(gè)標(biāo)題：輸入框的高度，再一想單講輸入框的高度實(shí)際上是沒法限定的，輸入框的高度取決于需要輸入的文本的多少、輸入框的寬度這2個(gè)因素。
　　我簡(jiǎn)單的把輸入框歸為以下幾類：搜索、表單、地址欄、狀態(tài)欄類；微博、IM工具聊天輸入域、短評(píng)輸入域、自我介紹；博客文章編輯、大段文字輸入。

　　對(duì)于第一類這樣的輸入框似乎是沒有什么規(guī)則可依的，google.com、g.cn、baidu.com等等這些搜索引擎的輸入框貌似都是隨性而為的？
　　好事的對(duì)比了一下：google最多允許輸入2048個(gè)字符而百度最多只能輸入100個(gè)字符，這也導(dǎo)致了google的輸入框要明顯比較百度寬許多；g.cn的輸入框高度現(xiàn)在已經(jīng)調(diào)整到和百度一致了而google.com還是系統(tǒng)默認(rèn)的25px。
　　 我的猜想是這樣的：g.cn的調(diào)整在于在同等px下漢字要比英文略高一點(diǎn)，因而google.com采用了系統(tǒng)默認(rèn)的25px高度，而g.cn后來意識(shí)到 這個(gè)問題調(diào)整到了跟百度一樣的28px？但是就搜索引擎而言，關(guān)鍵詞一般都不會(huì)太長(zhǎng)為什么google.com的限度是2048個(gè)字符呢？木有想明白
　　對(duì)于第三類大段文本的輸入框?qū)嶋H上也沒有什么可說的，簡(jiǎn)單說就是刨去必要的功能按鍵之后其他的區(qū)域都是為輸入服務(wù)的，如果文本長(zhǎng)度再大的話就采用下拉條的方式。這個(gè)新紙模型大概是來源于我們的紙質(zhì)筆記本了。

　　想說一說第二類短文本的輸入框現(xiàn)象。

　　微博類產(chǎn)品中twitter的輸入框是長(zhǎng)而矮的而國(guó)內(nèi)的類twitter產(chǎn)品是相對(duì)較寬較高的。這還是符合我之前的猜測(cè)，英文與漢字的區(qū)別。
　　關(guān)于輸入文字超出限制的處理上：twitter采用的是“報(bào)警”式，顯示目前可輸入字符數(shù)目為“-XX”，（很BT的測(cè)試了一下，這個(gè)XX應(yīng)該是可以無限大的，只是在超出10W字符之后，我的瀏覽器卡死…..）但是你仍舊可以繼續(xù)輸入；國(guó)內(nèi)的Ucenter采用的是“限制”式，當(dāng)字符達(dá)到上限后不允許再輸入任何字符。
　　個(gè)人覺得Twitter、meme等這樣的報(bào)警式做法相對(duì)ucenter而言欠妥，當(dāng)超過字?jǐn)?shù)限制的時(shí)候應(yīng)該果斷的限制用戶繼續(xù)輸入。相對(duì)而言Plurk采用的是改進(jìn)式的“報(bào)警”，plurk會(huì)把多出來的字符標(biāo)紅，并提示你需要?jiǎng)h除多少個(gè)。
　　在這所有的微博類產(chǎn)品中，plurk的輸入框我覺得是給我體驗(yàn)最好的。初始輸入框是系統(tǒng)默認(rèn)的34px，隨著輸入文本的增多輸入框的高度隨之提高，當(dāng)文本繼續(xù)增加到達(dá)限定的100px后出現(xiàn)下拉條。
　　后來MSN很聰明的選定了這個(gè)微博產(chǎn)品進(jìn)行山寨，不過很可惜的是沒有山寨到其精神，MSN聚酷的輸入框高度是固定死的，隨著內(nèi)容的增加框內(nèi)的文本根本無法再閱讀。

　　在IM方面，QQ采用的是類twitter的模式而Gtalk采用的是類plurk的模式，不過經(jīng)過測(cè)試發(fā)現(xiàn)，當(dāng)輸入的文本到達(dá)Gtalk允許的最高限度后，不會(huì)出現(xiàn)下拉條，這點(diǎn)上蠻意外的。
     
　　總結(jié)：
　　輸入框的高度應(yīng)該由系統(tǒng)規(guī)定用戶可輸入的文本來確定，不可能一個(gè)只允許輸入150個(gè)字的論壇介紹搞一個(gè)高的出奇的輸入框吧。
　　對(duì)于有字?jǐn)?shù)限制的輸入框，當(dāng)用戶輸入的字?jǐn)?shù)達(dá)到上限時(shí)應(yīng)該強(qiáng)制不允許用戶繼續(xù)再輸入或者警示出超過的字符內(nèi)容并告知?jiǎng)h除。
　　在英文界面和中文界面上，由于字體構(gòu)造的差異會(huì)導(dǎo)致UI設(shè)計(jì)的差異。而這差異往往就在一個(gè)象素之間，但是真正的用戶體驗(yàn)往往就在這一象素上！

　　原文： http://www.ikent.me/blog/2049#ixzz0XAJkQ0pP