手机文本输入框设计

  手机端的文本输入受到使用环境、网络状况及设备本身条件的制约,使其用户体验的改良成为一个老生常谈的话题。如:一直在改进的输入法,新输入方式的探索(语音输入),甚至想尽种种办法去避免输入……

  文本输入本身是一个从无到有的过程,是让用户将空白的输入框填满的过程,本文避谈一些尚未经过易用性测试验证的创新设计,从本人的日常积累和实际经验出发,以文本输入框作为设计对象,从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧。

  无中生有之"引导词"——帮助用户认知

  手机端的界面空间可谓寸土寸金,很少有空白的区域。而用户在面对界面中一片空白的区域时往往会产生紧迫感甚至有些不知所措。如果在这片空白里增加一些"引导词"(即引导描述型词条),用户就能迅速产生认知活动,对将要输入的内容进行快速反应和判断。


就登陆界面的设计来说,面对无引导词界面的用户也许会浪费时间在想他的用户名是什么来着?是他的邮箱还是随便起的昵称还是他的手机号?以及他的密码是几位的?甚至还会浪费时间在用户名的书写格式上。而使用第二个界面的用户会在第一时间获知闪烁的光标处要输入邮箱,密码框里的"小点点"也形象的告知了用户密码的显示形式和长度。可见输入框中增加必要的引导词能够提高用户的输入效率。"引导词"依据使用功能及使用场景进行分类如下:1.输入内容的模板

  提供给用户即将输入内容的模板,用户无需花费更多时间思考如何输入。


  you@website.com是约定俗成的邮箱地址的模板,能够与用户的心智模型相呼应,用户能够很快的做出反应。

  2.需要输入的片段内容

  输入内容中有部分内容是用户经常用到或重复用到的,或者是约定俗成的,那么把这部分内容直接作为引导词,显示在文本输入框中,一方面能够提示用户接下来将要输入什么内容,一方面能够省略这部分内容的输入操作,进而提高输入效率。


  "www."和".com"等是用户所悉知的网址协议,在输入框中增加该引导词能够给用户直观的提醒这里是要输入网址的,并且省略了这些字符的输入。

  3.输入内容的描述

  用户输入的内容不准确会导致不准确的操作反馈时,需要增加对输入内容的简短描述,以降低这种误操作的风险。


  如果不提示输入商家或地点名称,用户应该不会很快搞清楚这个框子里应该输入些什么,用户好不容易完成输入,却是输入了一个错误的关键词,得到的是查无结果,很难想象用户该有多么的沮丧。

  4.输入诱导

  在多行文字的输入框中,虽然有光标闪烁提示用户输入框已被激活,可以输入了,但是为了消除用户在面对大片空白区域而产生紧张感也会增加引导性的文字,引导用户输入而不是点返回按钮退出。


  "说点儿什么吧……""吼一句"这些引导词会让用户有亲切感,引起用户情感上的共鸣,激发用户的操作欲望。

  无中生有之"附加控件"——简化用户操作

  为了使文本的输入效率更高,文本输入框可以与一些控件进行关联,依靠这些控件来简化或方便用户对输入文本的编辑操作。归纳几种输入框常用的附加控件如下:

  1.单位控件

  某些特定条件的输入内容本身就是一个单位,如收件人的邮箱地址,收信人的电话,好友的名称等。将每个单位转化为控件按钮,可以方便用户对单位信息进行编辑操作。


  添加收件人的输入操作中,输入的每个收件人名字自成一个单位,以分号隔开显示,当输入框再次获得焦点时每个单位文字变成控件按钮。编辑时可以就某个单位进行单独编辑,或删除,提高整体输入效率。

  单位控件的样式需结合具体的输入内容进行设计,可以是按钮形态,也可以是其他形态。位置可以在输入框内部也可以在外部,依具体情况而定。

  2.删除控件

  在手机上输入文字困难,删除大段的不必要文字同样困难,在设计时需要根据用户的使用情景充分考虑这一需求,使输入框附加一键删除按钮。


  浏览器地址栏中的"地址输入框"常常需要用户将其清空重新输入新的地址,因此当已有内容的地址栏获得焦点时,在输入框内增加一个清除按钮,方便用户快速的清空现有内容,开始新的内容输入。


  在微博的编写过程中,用户常常输入了一段文字后感觉并不是合适的,需要重新输入,此时输入框中的清除按钮就可以让用户快速清除当前输入的所有文字。

  删除控件多位于输入框末端。在单行文本输入框内为了节省空间删除控件可以是隐藏的,与文本选择进行关联。

  3.提醒控件

  手机中关于文字输入的字数有很多限制,比如每条手机短信限制160个字符,微博限制140个汉字等等,用户常常会因为不知道限制条件或者忘记了限制条件而进行了误操作,浪费了时间。那么在输入框中增加提醒控件,提醒用户目前还有多少个字符可以输入,避免用户输入超出字数限制。


该控件多内嵌于输入框中的右下脚,并与输入内容本身在颜色或字体大小上做区分设计,不能喧宾夺主,打扰用户的输入过程。结论:

  设计手机文本输入框时,以用户需求为出发点,结合使用场景,在空白的输入框样式中增加引导词、附加一些小控件的设计手段可以帮助用户对将要输入的内容有更好的理解和把握,减少用户在输入过程中产生的错误,方便用户对已输入的内容进行编辑和修改,达到提高用户输入效率的目的。

  当然这些"无中生有"的设计策略,在实施时要注意样式的展示和交互上的细节,尽量做到简洁、低调,因为输入的文字才是用户在输入过程中需要重点关注的对象,不要让复杂的设计打扰用户。

时间: 2024-11-03 02:08:21

手机文本输入框设计的相关文章

设计手机文本输入框:手机端高效的文本输入框设计

文章描述:"无中生有" 手机端高效的文本输入框设计. 手机端的文本输入受到使用环境.网络状况及设备本身条件的制约,使其用户体验的改良成为一个老生常谈的话题.如:一直在改进的输入法,新输入方式的探索(语音输入),甚至想尽种种办法去避免输入-- 文本输入本身是一个从无到有的过程,是让用户将空白的输入框填满的过程,本文避谈一些尚未经过易用性测试验证的创新设计,从本人的日常积累和实际经验出发,以文本输入框作为设计对象,从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出

“无中生有” 手机端高效的文本输入框设计

手机端的文本输入受到使用环境.网络状况及设备本身条件的制约,使其用户体验的改良成为一个老生常谈的话题.如:一直在改进的输入法,新输入方式的探索(语音输入),甚至想尽种种办法去避免输入-- 文本输入本身是一个从无到有的过程,是让用户将空白的输入框填满的过程,本文避谈一些尚未经过易用性测试验证的创新设计,从本人的日常积累和实际经验出发,以文本输入框作为设计对象,从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧. 无中生有之"引导词"--帮助用户认知 手机端

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

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

手机社交游戏设计:提升用户间的交互性体验

文章描述:手机社交游戏设计中交互理念的渗透. 延长玩家与游戏的生命周期 我从游戏设计中了解最多的除了游戏本身的机制效能,就是游戏化概念对其他产品价值及其衍生属性的影响.从本质上讲,游戏所提供的就是虚拟性的服务,而这层服务从用户获得体验那刻起开始生效,不仅仅是单纯为了一个漂亮的留存数据,更在于这种以时间投入为置换准则的泛娱乐形式能否起到愉悦用户的目的.而付费性一直是一个附属品,一个认可游戏价值的玩家终究能够自然发展为付费玩家,并且他们乐意在投入精力的同时帮助游戏探索和发展,延长玩家和游戏双重层面的

从四个维度探讨触屏手机的网站设计

文章描述:触屏手机网站设计. 随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website.触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备.系统.浏览器.网络.四个维度来与大家共同探讨触屏手机的网站设计: 一.设备 ·分辨率与屏幕尺寸·触屏机的交互特点·性能 1. 分辨率是设计师做网站时首要考虑的问题,iphone/ipod touch目前有2种分辨率:480*32

根据选择不同的下拉值出现相对应的文本输入框

根据用户选择不同的下拉值,出现相应的文本输入框,在某些情况下比较实用,本文为大家写了个,有需求的朋友可以参考下   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; <html xmlns="http://www.w3.or

css文本输入框:CSS给文本输入框添加背景图像

  <title>给文本输入框添加背景 - www.cxybl.com</title> <STYLE TYPE="TEXT/CSS"> .bg { background-image:url(bgdemo2.jpg); /*如果想添加你的网站Logo,可将这两行注释启用 background-repeat: no-repeat; background-position: center center; */ } </STYLE> </h

手机购物体验设计:干净,有效,流畅,简便的购物流程设计

文章描述:手机商务开始走向成熟.一个好的和差的订单提交体验对收入的影响是有很大的不同.如果给用户一个干净,有效,流畅,简便的过程来完成购物--在了解了以上提及的手机体验的优势和局限--那么用户和商家都可以盈利. 译者注:在电子商务中,我们发现用户在支付环节的流失率非常高,支付流程的用户体验是至关重要的环节.本文介绍了一些移动端支付流程的方法,怎样让我们的支付流程更加易用.业余时间翻译了这篇文章跟大家共享,若大家发现任何错误,欢迎随时给予纠正. 原文地址:designing-a-better-mo

触屏手机网页产品设计用户体验设计经验分享

文章描述:历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发.对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得. 历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发.对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得. 上篇包括以下一些内容: >>精神与基础 何谓高端--高端设计精神 平台间平衡 不同分辨率及比例间移植 浏览器框架 >>设计"泛"过程 移动场景下的用户需求 少即是多的设计原则 界面气质 -------