您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

移动互联网产品的设计模式-文本框

原创文章 分类: 经验/观点 版权:
1155 8 2 0
2019-01-25
4.2
编辑推荐

文本框在日常使用中随处可见,虽然看起来一点也不复杂,但文本框却通过自身的属性满足了不同场景的需求,让我们来了解一下这个空间吧~

Image title

• 文本框是什么 •


文本框,英文原名Text fields,是图形用户界面的计算机软件中能够显示用户输入/修改或从列表选择的信息文本的框格区域。文本框包含有通常在用户界面中可视的标签(Labels)。标签是文本字段,用于描述框中显示的信息的类型。在文本框中还有提示文本(Hint text),它是对输入信息起到建议作用的占位符,同时也是对输入格式的说明。在输入框上/下方可能会出现帮助文本(Helper text),它是展示额外补充的信息,当光标位于输入框时,用户可以在其中输入或复制粘贴文本、数字等内容。文本类型多种多样、长短不一,但是计算机能接受的文本是有限的,业务方通常对文本类型也有要求。输入限制考虑到一旦用户的输入超出限制或出错,就会给予用户合适的反馈,帮助用户将内容修改正确。

Image title



• 文本框的结构 •


标签

用户需要一个清晰的文本标签来告诉他们,在文本框中将要输入的字段到底是什么样的数据。而有时用户也需要借助字段相关的图标(icon)来理解输入框对应的含义,就比如看到放大镜立刻会联想到搜索。但是整体上来说,文本类型的标签是必不可少的,因为清晰的标签会让用户在操作的时候更加理解和配合,所以不推荐标签的文本过长,应该简洁易懂。部分APP会利用标签的颜色,在确保对比度的前提下配合整体的配色方案来增加识别度。

Image title


浮动标签(Float Label)是Material Design里文本框的默认风格,是由设计师Matt D Smith发明的一种新颖的交互模式:当用户在文本框中输入内容以后,内嵌的标签会浮动到文本框的上方,并成为顶端对齐。

Image title



占位符文本

在填写文本时涉及的数据呈现方式各式各样,所以在输入信息的时候需要占位符文本/输入来提示用户。


占位符文本/输入提示(Placeholder text)是文本框中没有内容时出现的灰色文字,当用户输入内容后将会消失,因此多数情况展示一些比较简短的信息。占位符文本/输入提示一般作为输入指引(例如:“请点击输入”)或者表明输入的限制和示例(例如:“电话号、座机号”)。现今很多电商产品搜索框会把占位符文本/输入提示用于大数据抓取的商品或者热门商品促销。

Image title



辅助说明

如果文本框的输入规则或者注意事项比较复杂,建议在文本框附近(一般是下面)添加辅助说明(Helper text)进行额外说明,多数情况下这类信息不超过100字。说明可以用提示框(Tooltips)或者可操作的提示框(Popover)的形式出现。生活中常出现的场景有:需要填写信用卡号或者服务条款链接之类的存在。它们的出现,向用户解释了一些令人困惑的问题。

Image title



初始默认值

初始默认值(Default value)是输入框内默认预留的字符,在获取焦点后不失,但用户可以进行编辑或者删除。优秀的初始默认值会减少用户的输入负担,比如地图App路线导航功能的起点输入框初始默认值是用户的当前位置,用户输入目的地后即可开始导航,提高了效率。

Image title



快速清除按钮

对于手机软键盘来说,连续多次点击delete键删除多个字符比物理键盘体验要差得多,因此对于有修改内容需求的文本框可在右侧放一个快速清除按钮(Clear button),点击就清空文本框的所有内容。


快速清除按钮出现场景大概有以下三种:1)没有明显的快速清除按钮,但是按一下软键盘的删除键就会直接清空内容。通常发生在密码输入时。2)获取焦点时。3)有内容时,即使没有获取焦点。比如搜索时,点击快速清除按钮后清空内容再自动获取焦点,直接进行下次搜索。

Image title



可见性切换图标

输入密码时紧挨着快速清除按钮的就是可见性切换图标(Visibility icon)。它的作用是通过切换明文/密文来防止被旁观者窃取,pc时代的密码防止被泄漏基本是密文,但移动端屏幕小,灵活性高,密文的显示给用户输入和检查带来很大麻烦,有时需要重新输入。所以切换图标在移动端伴随着密码输入出现,给人们带来了很大便捷。

Image title



字数限制

文本框的字符需要限制时就需要进行明确的字数限制,现阶段有两种风格:1)当前已经输入的字数/字的最大长度 2)显示当前输入字数,但达到最大字数限制后会提示超出的长度。


区别在于用户不会在刚开始输入时因为看到字数限制,而有意控制输入字数造成降低用户输入的欲望。

Image title



• 文本框的对齐方式 •


对齐方式

文本框和标签的排版对用户浏览和使用有很大影响,一般来说可以把文本框和标签对齐方式划分为四种。


1)顶端对齐: 两者垂直左对齐排版,用户依次向下浏览。此对齐方式优点是占用屏幕横向空间少,标签长度也可以兼容,缺点是会占用屏幕高度,还要注意可读性,在和其他组的间距把握上要避免太密集。


2)水平左对齐:这种方式优点是浏览标签比较顺畅,节约了垂直的空间。缺点是文本框和标签距离参差不齐,阅读时间长,但也能让用户减少出错。


3)水平右对齐:优点同样是节约垂直空间,同时标签和文本框距离近的话会更好对照。但标签的右对齐影响了阅读速度,浏览效率仍低于顶端对齐。


4)内嵌:这种方式一般将标签颜色降低明度并加入,实际上是把占位符文本当作标签。优点是节省大量空间,浏览效率和顶端对齐不相上下。但是一旦用户输入内容之后就看不到标签了。所以只适合标签特别短的情况,或者搜索框、密码输入框等用户非常熟知的情况。



点击区域

在用户使用移动端屏幕输入的时候要考虑用户的体验,确保用户点击输入框时的触发区足够宽松舒适,而不是很难点击。所以就需要考虑拇指和食指的触发区域,让用户能够流畅输入,减少误操作。

Image title



• 文本框的形式 •


单行、多行文本框

由于手机屏幕小,文本框需要限制一个最大行高。根据文本框的可输入的行数,可以分为单行文本框(Single-linetext field当文本输入光标到达输入区域的最右边,单行文本框中的内容会自动滚动到左边。)和多行文本框(Multi-linetext field当光标到达最下缘,多行文本框会自动让溢出的文字断开并形成新的行,使文本可以换行和垂直滚动)。如果达到最大的行高就可以根据滚动条滑动来查看。



全宽文本框

全宽文本框对于更深入的任务或输入复杂信息会很有用。比如邮箱的输入框为全宽文本框,是单行文本框又是多行文本框。

Image title



自动完成输入框

生活中填写表格对人们来说是一件头大的事情,因此一些需要填的表格有预设的初始值或内容在其中的话,可以让用户用起来更方便和愉悦。这里就不得不提到生活中大数据的“神奇”,我在玩游戏创建一个新角色起名字的时候,默认填写的是我玩过这家公司其他游戏内的名字。公司通过计算或者抓取了我的数据来输入,自动完成输入的便捷让用户在填写的时候不再苦恼。


另一种自动完成的方式是以下拉框的形式出现,根据你输入的内容进行实时补完的功能。(让我想起来常被人吐槽的输入法)这样可以帮助用户更准确、高效地填写信息。对于输入困难、拼写困难的用户尤其有帮助。



键盘

最后的重点就是键盘输入了,为了填写信息就离不开输入。目前文本框的主流输入方式就是键盘,另一种语音输入正在不断进步。当用户选中准备输入的时候,应当提供清晰的视觉提示,比如发光、颜色变化的输入框或者光标的变化等。使用适当的软键盘布局有助于用户提高输入效率,降低出错的可能性。根据使用场景合理运用其他输入方式能提升输入效率,例如不方便用手输入的时候选择语音输入、输入地址不如点击按钮进行GPS定位、遇到陌生语言会拍照识别文字等等。


正如开头所说,文本框要应对不同类型的文本,此时就需要键盘输入的优化,比如需要填写电话时打开键盘显示的是全键盘就不太合适了。需要优化的常用类型包括:1)数字:电话号码、信用卡号。2)文本:专有名词、用户名等。3)混合的格式:邮件地址、街道地址、搜索查询。这三个方面可以根据内容来优化,会促使输入的更加快捷高效。

Image title



•总结•


本文从文本框是什么,文本框的具体样式有哪些,文本框的摆放要注意什么,以及文本框的内容四个方面进行了整理并提出了使用建议。以上就是我对文本框的总结分析,如果大家有什么不同的意见或看法,欢迎留言交流。

UImax

159粉丝/0关注

老马识途首页新秀
世界水日,那些让人眼前一亮的公益广告盘点那些令人绝望的设计

扫描二维码
去手机端查看海报

UImax

TA已经获得3枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN