输入框的大小

曾经西湖

开始的时候我写了个标题：输入框的高度，再一想单讲输入框的高度实际上是没法限定的，输入框的高度取决于需要输入的文本的多少、输入框的宽度这2个因素。



      我简单的把输入框归为以下几类：搜索、表单、地址栏、状态栏类；微博、IM工具聊天输入域、短评输入域、自我介绍；博客文章编辑、大段文字输入。



      对于第一类这样的输入框似乎是没有什么规则可依的，google.com、g.cn、baidu.com等等这些搜索引擎的输入框貌似都是随性而为的？



      好事的对比了一下：google最多允许输入2048个字符而百度最多只能输入100个字符，这也导致了google的输入框要明显比较百度宽许多；g.cn的输入框高度现在已经调整到和百度一致了而google.com还是系统默认的25px。



      我的猜想是这样的：g.cn的调整在于在同等px下汉字要比英文略高一点，因而google.com采用了系统默认的25px高度，而g.cn后来意识到这个问题调整到了跟百度一样的28px？但是就搜索引擎而言，关键词一般都不会太长为什么google.com的限度是2048个字符呢？木有想明白



      对于第三类大段文本的输入框实际上也没有什么可说的，简单说就是刨去必要的功能按键之后其他的区域都是为输入服务的，如果文本长度再大的话就采用下拉条的方式。这个新纸模型大概是来源于我们的纸质笔记本了。



      想说一说第二类短文本的输入框现象。



      微博类产品中twitter的输入框是长而矮的而国内的类twitter产品是相对较宽较高的。这还是符合我之前的猜测，英文与汉字的区别。



      关于输入文字超出限制的处理上：twitter采用的是“报警”式，显示目前可输入字符数目为“-XX”，（很BT的测试了一下，这个XX应该是可以无限大的，只是在超出10W字符之后，我的浏览器卡死…..）但是你仍旧可以继续输入；国内的Ucenter采用的是“限制”式，当字符达到上限后不允许再输入任何字符。



      个人觉得Twitter、meme等这样的报警式做法相对ucenter而言欠妥，当超过字数限制的时候应该果断的限制用户继续输入。相对而言Plurk采用的是改进式的“报警”，plurk会把多出来的字符标红，并提示你需要删除多少个。



      在这所有的微博类产品中，plurk的输入框我觉得是给我体验最好的。初始输入框是系统默认的34px，随着输入文本的增多输入框的高度随之提高，当文本继续增加到达限定的100px后出现下拉条。



      后来MSN很聪明的选定了这个微博产品进行山寨，不过很可惜的是没有山寨到其精神，MSN聚酷的输入框高度是固定死的，随着内容的增加框内的文本根本无法再阅读。



      在IM方面，QQ采用的是类twitter的模式而Gtalk采用的是类plurk的模式，不过经过测试发现，当输入的文本到达Gtalk允许的最高限度后，不会出现下拉条，这点上蛮意外的。

      

      总结：

      输入框的高度应该由系统规定用户可输入的文本来确定，不可能一个只允许输入150个字的论坛介绍搞一个高的出奇的输入框吧。



      对于有字数限制的输入框，当用户输入的字数达到上限时应该强制不允许用户继续再输入或者警示出超过的字符内容并告知删除。



      在英文界面和中文界面上，由于字体构造的差异会导致UI设计的差异。而这差异往往就在一个象素之间，但是真正的用户体验往往就在这一象素上！