「这个控件叫什么」系列之输入框/文本框/Text fields

　　Text fields(输进框/文本框)是一个汗青长久而典范的控件，当光标位于输进框时，用户能够正在此中输进或复造粘揭文本、数字等内容。输进框固然看上来简朴，但需求思索的细节也很多，本文将背您引见输进框的相干构成部门战留意事项。

　　△ Text fields的相干构成部门

　　题目 / 输进框标签(Label)

　　Label是一个控件或一组相干控件的称号或题目，取Text field成对呈现时暗示输进框的题目大概内容，关于常睹的主题偶然也用图标替代Label。正在表单中为了标明输进框是必挖的，凡是正在Label中间增加一个星号「*」。

　　△ 笔墨Label、图标Label、带星号的Label

　　Label取Text fields的对齐方法

　　Label战Text fields的排版对用户阅读战利用有很年夜影响，普通去道能够把Label取Text fields对齐方法分别为4种。

　　顶端对齐

　　Label战Text field垂曲左对齐布列，用户只需顺次背下阅读，因而阅读战挖写的服从是4个对齐方法中最好的，并且占用屏幕横背空间少，即便Label出格少也能很好的显现(那对撑持多国言语的硬件出格有效，果为有些言语比英文借要少许多)。但那种对齐方法会占用过量的屏幕下度，别的该当留意每组Label战Text field取其他组的间距，免得稀稀麻麻低落可读性。

　　△ 顶端对齐

　　程度左对齐

　　Label战Text field程度显现，Label左对齐。占用的屏幕下度加小，可是因为Label是非纷歧时隐得条理没有齐，因而用户阅读服从会比垂曲顶端对齐低。

　　△ 程度左对齐

　　程度左对齐

　　那种对齐方法利于用户阅读Label，可是Label战Text field的间隔较近，用户从左往左阅读的工夫会变得更少。可将某些短Label经由过程删减字符间距的方法使之更容易读。固然，工夫少也没有是好事，关于有生疏数据战需求慎重挖写内容反却是能让用户削减堕落的能够。

　　△ 程度左对齐

　　内嵌Label

　　Text field内嵌Label是最节流空间的做法，为了让Label战实正输进的内容做辨别凡是会把Label色彩调浓而且正在最初减「…」，实践上是把Placeholder text当作Label。内嵌Label阅读服从上战顶端对齐八两半斤，可是一旦用户正在Text field输进内容后，Label便看没有到了，因而只合适Label出格短大概搜刮框、账号稀码输进框等用户十分生知的状况。

　　△ 内嵌Label

　　Float Label(浮动标签)

　　设想师Matt D Smith正在内嵌Label的根底上创造了一种新奇的交互形式Float Label(dribbble )：当用户正在Text field中输进内容当前，内嵌Label会浮动到Text field上圆，成为顶端对齐。那种方法兼具内嵌Label战顶端对齐的长处，今朝曾经成为Material Design里Text field默许气势派头。

　　△ Float Label

　　那种形式也出缺面，Label显现太小，关于小屏幕战目力欠安的用户去道没有是个好计划。别的，Label陵犯了本来Placeholder text的空间，关于一些用户生疏的Text field去道需求分外的空间放提醒战阐明。

　　占位符文本/提醒语(Placeholder text / Hint text)

　　Placeholder text是Text field出有内容时呈现的灰色笔墨，当用户输进内容后将会消逝，因而只能展现一些比力简短的疑息。凡是利用Placeholder text做为输进指引(比方：“请面击输进批评”)大概表白输进的限定战示例(比方：“年/月/日”)。许多电商产物搜刮框会把Placeholder text用于热点商品促销。

　　△ 淘宝App的搜刮框Placeholder text

　　iOS有一个特征，正在硬键盘上圆显现Placeholder text，那样即便正在输进历程中也能提醒用户准确的划定规矩，且输进历程顶用户视野停止正在硬键盘上不消转移。

　　△ 正在键盘上圆显现Placeholder text

　　帮助阐明/分外阐明/协助笔墨( Helper text)

　　假如Text field的输进划定规矩大概留意事项比力庞大，倡议正在Text field四周(普通是上面)增加Helper text停止分外阐明。Helper text也能够用Tooltips大概Popover的情势去显现。

　　MailChimp给稀码输进框的Helper text参加了互动：输进框的庞大划定规矩拆分红多个简朴的前提，每当用户输进的内容满意一个前提，会赐与响应的反应，见告用户已满意那个前提，那样便把庞大的使命拆分得简朴，用户输进不容易堕落。

　　△ MailChimp

　　初初默许值(Default value)

　　输进框内默许预留的字符，获得核心后不用得，用户能够删除大概修正那些字符。好的初初默许值能削减用户的输进承担。比方舆图App道路导航功用的出发点输进框Default value是用户确当前地位，用户只需输进目标天便可开端导航，进步了服从。

　　△ 出发点Default value是用户当前地位

　　输进限定

　　文本范例多种多样、是非纷歧，可是计较性能承受的文本是有限的，营业圆凡是对文本范例也有请求。比方脚机号码必定是数字，假如输进其他内容会报错。为了削减用户堕落的能够性，保护计较机体系宁静不变，必需对Text field停止一些输进限定，比方最短最常能输进几个字符;能否能输进emoj心情标记等特别字符;前后的空格能否过滤;可否撑持从剪揭板粘揭等等。

　　别的要思索假如用户的输进超越限定或堕落，该当怎样赐与用户适宜的反应，协助用户将内容修正准确。

　　主动获得核心(Autofocus)

　　当用户面击Text field，光标呈现弹出硬键盘，暗示该Text field已获得核心，此时用户便能输进大概修正内容了。关于次要使命便是挖写表单的页里，能够正在用户进进该页里后，主动获得核心。假如页里有多个Text field，当用户挖写完一个后，主动获得下一个的核心，那样操纵会更流利。

　　输进方法

　　Text field的支流输进方法是键盘，利用恰当的硬键盘规划有助于用户进步输进服从，低落堕落的能够性。闭于硬键盘规划等特征，笔者曾经正在前文《「那个控件叫甚么」系列之实拟键盘/硬键盘/Soft Keyboard》曾经有具体阐述。

　　除键盘中，开理使用其他输进方法能提拔输进服从。比方语音输进、GPS定位、照相辨认笔墨、笔墨主动遐想、取其他输进类控件共同等。

　　△ 淘宝App的Text field供给了十分丰硕的输进方法

　　字数限定展现

　　关于需求字数限定的Text field，今朝有2种字数限定展现气势派头：

　　当前曾经输进的字数/字的最年夜少度。

　　不断显现「当前曾经输进的字数」，到达最年夜字数限定后会提醒超越少度。

　　那两种方法给用户带去的感触感染是纷歧样的，比方收微专战复兴微专的Text area(文本地区/多止文本输进区)字数限定提醒由本来「当前曾经输进的字数/140字」，改成「输进130字当前显现盈余可输进的字符数目」，那样做的益处是用户没有会正在刚开端输进时，果为看到字数限定而决心掌握输进字数，挨断心流形成感情不顺畅大概低落输进念头，或许能进步收微专战批评的活泼 。

　　△ 微专改版前后

　　快速肃清按钮(Clear button)

　　关于脚机硬键盘去道，持续屡次面击delete键删除多个字符比物理键盘体验要好很多，因而关于有修正内容需供的Text field可正在左侧放一个Clear button，面击便可一键浑空Text field中的一切内容。

　　Clear button呈现机会有4种：

　　获得核心时才呈现。

　　有内容时便呈现，即便出有获得核心。那种合适搜刮框，面击Clear button后浑空内容再主动获得核心，趁热打铁，间接停止下次搜刮。

　　不断呈现。

　　出有较着的Clear button，可是按一次硬键盘的delete键间接浑空一切内容。凡是稀码输进框堕落后会用那种。

　　稀码输进框战可睹性切换图标

　　正在PC时期，电脑屏幕比力年夜，假如稀码间接明文显现，简单被观察迟疑者窃看夺取，因而用星号「*」或「•」躲藏实在的稀码。挪动时期稀码输进框也稀文显现便值得推敲了，尾先脚机屏幕比力小，不容易被观察迟疑夺取。其次犯警份子不雅察硬键盘按键次第便能够夺取稀码，没有需求来看稀码输进框。别的稀文显现给用户输进战查抄带去很年夜费事。外洋无数据显现，接纳稀码默许明文显现，经由过程可睹性图标(Invisibility icon/Visibility icon)切换明文/稀文，能较着进步转化率，并且没有会低落宁静性。

　　编者注：甚么时分该显现甚么时分又不应显现呢?大概，甚么设想办法能够同时满意便利+宁静的需供?谜底正在那里→《不容易发觉的细节!常睹的登录界里该不应显现稀码?》

　　多止输进框的最年夜止下

　　按照Text field能够输进的止数，可分为单止文本框(Single-line text field)战多止文本框(Multi-line text field)，因为脚机的屏幕比力小，倡议给多止文本框限定一个最年夜止下，假如到达最年夜止下，输进框内的文本可经由过程转动条滑动。为了便利拇指转动，倡议最年夜止高峻于5止。

　　△ 多止输进框的最年夜止下