设计理论:网页输入框的大小

     开始的时候我写了个标题:输入框的高度,再一想单讲输入框的高度实际上是没法限定的,输入框的高度取决于需要输入的文本的多少、输入框的宽度这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设计的差异。而这差异往往就在一个象素之间,但是真正的用户体验往往就在这一象素上!

时间: 2024-10-27 15:17:37

设计理论:网页输入框的大小的相关文章

网页设计理论:网页设计风格

文:Jeffrey Zeldman 我的父亲是个业余画家,我的童年就是被他的那些美术书籍塑造的.跟很多小孩一样,我对「纯粹的再现」十分着迷.那些巨细无遗的版画--搏斗中的角斗士,风景如画的村庄,日出时的罗马废墟--每每让我瞠目结舌.口不能言.当时我对艺术的理解就是「画功好」.在那年幼而懵懂的日子里,细节越丰富.蚀刻的线条越密集.树叶越多,这艺术家就越棒.稍后我邂逅了漫画,再往后是美术馆.麦菲·派瑞(Maxfield Parrish)让我想嗑药,也让我明白自己永远当不了画家.保罗·克利(Paul

设计理论:网页设计中的垂直韵律

原文:http://ued.taobao.com/blog/2009/03/31/vertical-rhythm-and-the-incremental-leading/ 准备工作 去年的时候,青云发表过关于栅格系统的文章  . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描.阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.但是大部分栅格系

设计理论:网页中文字体排版设计

TeX 排版中文字体嵌入问题,兼谈不拘小节的中文字体设计 原文:http://yulewang.spaces.live.com/blog/cns!5C815C994ABB661E!262.entry 低于 18 周岁的小朋友们请不要看此文,会被吓到的.如果你和中国的字体公司有联系,请把我所描述的问题转告给他们. 考完作文后,在上海小歇,除了吃喝玩乐加上逛街还有被导师虐着写文章,自己看两眼G词以外,就是在尝试解决中文 TeX 用户几年来一直抱怨的关于 TeX 产生的 pdf 文档中文字体看上去太细

设计理论:网页像素误差的解决方法

像素误差 看自己设计好上线的网站,偶尔会发觉像素行间出现了弹性空间,总在不经意间蹦出一定的差距.有些页面很难发现,比如活动类页面,这类页面多呈不规则造型,在设计上也更加灵活多变.但在portal类的页面设计上,像导航.登录框.行距等,几个像素的误差可能就会影响到用户的感受.这时,像素误差问题就很直观了. 面对不断成长的用户,Qzone的平台.活动等不断的推陈出新,新的视觉观感.新的操作方式.新的体验等等都在追求尽善尽美.但由于时间进度和对界面的不同理解,以及上线前开发联调等原因,导致线上的页面和

设计理论:网页气球状提示用户体验设计

Balloons(气球状提示) 问题摘要 气球状提示(Balloon)是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况. 实例 图1 注:气球状提示由图标.标题.正文文本组成,且所有这些部分都是可选的. 注:当用户试图提交操作的时候,任何未处理的问题都必须由其所有者用户界面来处理. 注:气球状提示通常与文本框或其他使用文本框来改变值的控件一起使用,如组合框.列表视图.树形视图等等. 注:保持控件之间的一致性.当发现不一致性出现时,气球状提示不再适用. 注:如果其他类型的控

设计理论:如何设计活动类网页

在WEB2.0 网页充斥的年代,身边无时无刻都听到这样的声音:"拒绝海报式设计,要做有用的设计,要简洁,要清爽,要大气"产品经理如是传达.而活动类网页听上去和这些词语又那样的格格不入,另一种市场声音:"做活动,我们可以不同 ,我们要视觉冲击强的,要吸引眼球"活动网页的设计处于一种尴尬的境地,曾经一度,拿到活动的项目设计,不知道该如何下手. "矛盾是事物发展的根本动力" 有矛盾才有发展,我们才有进步.WEB2.0时代活动网页在夹缝中怯生生一路走来,

网页设计帮助:网页字体大小数据参考

内容转自网络,我也忘了是哪个角落中找过来的东西,实在不好意思. 对于页面来说,字体的大小设置是比较重要的,网上搜集了一些关于网页中字体大小的数据对比,在这共享出来给大家一起看看,希望对大家在页面制作过程中有所帮助! Points   Pixels       Ems            Percent 6pt        8px          0.5em        50% 7pt        9px          0.55em      55% 7.5pt     10px  

网页设计中文本输入框一些参数说明

  在一般的留言本,论坛等地方都要用到文本输入框,也就是html语言中的textarea,textare包含有众多的参数,学会运用这些参数,就可以随意修改文本输入框的大小和外观,达到你想要的效果,下面就来介绍这些参数,以及如何使用这些参数. 1.cols,垂直列.在没有做样式表设置的情况下,它表示一行中可容纳下的字节数.例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字.另外要注意的是,文本框的宽度就是通过这个来调整,输入好cols的数值,然后再定义输入文字字体的大小(不定义的

网页设计理论:纹理

  纹理在网页设计中已经成为一个不可或缺的元素.它不仅仅是个趋势,更是个增加网页深度的快捷方法.设计师学会使用纹理,就能强化网页感染力,可谓是网页设计中必然要掌握的功法.而纹理本身就能通过引导用户的视线来展示网页的关键内容. 然而,一直以来纹理似乎都被误解为"GRUNGE"风格设计,想了解GRUNGE可以去GRUNGE系列(一)--网页设计中的GRUNGE看看.在许多网页中我们可以看到,为了突出酷炫的效果时,被大量使用,甚至有滥用的嫌疑.滥用的结果就是它真正带来的好处被埋没.纹理的确可