手机文本输入框的设计方法介绍(图文)

所属分类: 网页制作 / CSS 阅读数: 838
收藏 0 赞 0 分享
手机端的文本输入受到使用环境、网络状况及设备本身条件的制约,使其用户体验的改良成为一个老生常谈的话题。如:一直在改进的输入法,新输入方式的探索(语音输入),甚至想尽种种办法去避免输入……
  文本输入本身是一个从无到有的过程,是让用户将空白的输入框填满的过程,本文避谈一些尚未经过易用性测试验证的创新设计,从本人的日常积累和实际经验出发,以文本输入框作为设计对象,从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧。
  无中生有之"引导词"——帮助用户认知
  手机端的界面空间可谓寸土寸金,很少有空白的区域。而用户在面对界面中一片空白的区域时往往会产生紧迫感甚至有些不知所措。如果在这片空白里增加一些"引导词"(即引导描述型词条),用户就能迅速产生认知活动,对将要输入的内容进行快速反应和判断。
手机文本输入框设计  脚本之家
就登陆界面的设计来说,面对无引导词界面的用户也许会浪费时间在想他的用户名是什么来着?是他的邮箱还是随便起的昵称还是他的手机号?以及他的密码是几位的?甚至还会浪费时间在用户名的书写格式上。而使用第二个界面的用户会在第一时间获知闪烁的光标处要输入邮箱,密码框里的"小点点"也形象的告知了用户密码的显示形式和长度。可见输入框中增加必要的引导词能够提高用户的输入效率。"引导词"依据使用功能及使用场景进行分类如下:
      1.输入内容的模板
  提供给用户即将输入内容的模板,用户无需花费更多时间思考如何输入。
  you@website.com是约定俗成的邮箱地址的模板,能够与用户的心智模型相呼应,用户能够很快的做出反应。
  2.需要输入的片段内容
  输入内容中有部分内容是用户经常用到或重复用到的,或者是约定俗成的,那么把这部分内容直接作为引导词,显示在文本输入框中,一方面能够提示用户接下来将要输入什么内容,一方面能够省略这部分内容的输入操作,进而提高输入效率。
  "www."和".com"等是用户所悉知的网址协议,在输入框中增加该引导词能够给用户直观的提醒这里是要输入网址的,并且省略了这些字符的输入。
  3.输入内容的描述
  用户输入的内容不准确会导致不准确的操作反馈时,需要增加对输入内容的简短描述,以降低这种误操作的风险。
  如果不提示输入商家或地点名称,用户应该不会很快搞清楚这个框子里应该输入些什么,用户好不容易完成输入,却是输入了一个错误的关键词,得到的是查无结果,很难想象用户该有多么的沮丧。
  4.输入诱导
  在多行文字的输入框中,虽然有光标闪烁提示用户输入框已被激活,可以输入了,但是为了消除用户在面对大片空白区域而产生紧张感也会增加引导性的文字,引导用户输入而不是点返回按钮退出。
  "说点儿什么吧……""吼一句"这些引导词会让用户有亲切感,引起用户情感上的共鸣,激发用户的操作欲望。
  无中生有之"附加控件"——简化用户操作
  为了使文本的输入效率更高,文本输入框可以与一些控件进行关联,依靠这些控件来简化或方便用户对输入文本的编辑操作。归纳几种输入框常用的附加控件如下:
  1.单位控件
  某些特定条件的输入内容本身就是一个单位,如收件人的邮箱地址,收信人的电话,好友的名称等。将每个单位转化为控件按钮,可以方便用户对单位信息进行编辑操作。
  添加收件人的输入操作中,输入的每个收件人名字自成一个单位,以分号隔开显示,当输入框再次获得焦点时每个单位文字变成控件按钮。编辑时可以就某个单位进行单独编辑,或删除,提高整体输入效率。
  单位控件的样式需结合具体的输入内容进行设计,可以是按钮形态,也可以是其他形态。位置可以在输入框内部也可以在外部,依具体情况而定。
  2.删除控件
  在手机上输入文字困难,删除大段的不必要文字同样困难,在设计时需要根据用户的使用情景充分考虑这一需求,使输入框附加一键删除按钮。
  浏览器地址栏中的"地址输入框"常常需要用户将其清空重新输入新的地址,因此当已有内容的地址栏获得焦点时,在输入框内增加一个清除按钮,方便用户快速的清空现有内容,开始新的内容输入。
  在微博的编写过程中,用户常常输入了一段文字后感觉并不是合适的,需要重新输入,此时输入框中的清除按钮就可以让用户快速清除当前输入的所有文字。
  删除控件多位于输入框末端。在单行文本输入框内为了节省空间删除控件可以是隐藏的,与文本选择进行关联。
  3.提醒控件
  手机中关于文字输入的字数有很多限制,比如每条手机短信限制160个字符,微博限制140个汉字等等,用户常常会因为不知道限制条件或者忘记了限制条件而进行了误操作,浪费了时间。那么在输入框中增加提醒控件,提醒用户目前还有多少个字符可以输入,避免用户输入超出字数限制。
该控件多内嵌于输入框中的右下脚,并与输入内容本身在颜色或字体大小上做区分设计,不能喧宾夺主,打扰用户的输入过程。结论:
  设计手机文本输入框时,以用户需求为出发点,结合使用场景,在空白的输入框样式中增加引导词、附加一些小控件的设计手段可以帮助用户对将要输入的内容有更好的理解和把握,减少用户在输入过程中产生的错误,方便用户对已输入的内容进行编辑和修改,达到提高用户输入效率的目的。
  当然这些"无中生有"的设计策略,在实施时要注意样式的展示和交互上的细节,尽量做到简洁、低调,因为输入的文字才是用户在输入过程中需要重点关注的对象,不要让复杂的设计打扰用户。
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多