小莫

小编:@小莫 文本框在UI规划中有多重要?凡需求用户输入信息的当地,都要用到它。输账号暗码,输收货地址,输对话谈论…内容太多,总共分上下两篇讲。

文本框有多重要?凡需求用户输入信息的当地,都要用到它。输账号暗码,输收货地址,输对话谈论…

来自Dribbble
假如把UI组件按功用分这几类:录入、触发、导航、展现和容器,在录入类组件里,最根底的便是文本框~
文本框(text field),又名输入框。是用户输入文字的当地,一般是一条长长的矩形,顺便各种元素。常见于表单、谈天软件、注册登录、查找框等界面。
最近看到一个很棒的主意:在了解小组件的时分幻想一下它的物理原型,听说文本框在实际国际的原型来历于试卷的填空题:
忽然脑壳疼,哎:( 

01 拆分元素

文本框的元素总共7个:

  1. 容器(container)*
  2. 标签(label)
  3. 占位符文本(placeholder text)
  4. 协助文本(helper text)
  5. 输入文本(input text)*
  6. 格局化符号(formatter)
  7. 盯梢图标(trailing icon)

标*为必需元素

容器,好了解,它是输入内容的载体;标签、占位符、协助文本这三个,是用来介绍文本框和输入预期的;输入文本、格局化符号和盯梢图标,则是输入状况下实时呈现、提示和输入内容相关信息的。

 

1. 容器

已然它叫框,那么矩形框便是它的容器。这个矩形的款式又有三种:

  • 输入线(input line),一条长线,由于占空间小,常用于移动端和简练风格的web端表单,它不合适用在tv端,由于太远了简单看不清。
  • 填充容器(filled container) ,一个带填充色、无描边的矩形。
  • 线性容器(outlined container),一个无填充色只需描边的矩形。填充容器和线性容器(我把它俩统一叫“框容器”)不合适用在表单项较多的移动端界面,会很拥堵。

三种容器

 

三种容器示例:

图片来历:腾讯云

 

tips:

  • 在谷歌的资料规划(Material Design)中,线性文本框的上方两个角是圆角,下面两个是直角。

容器结束,接下来三个元素。作为同样是解说文本框的元素,标签和占位符能够酌情挑选,但至少要有一个。当它们俩都缺乏以介绍文本框时,再考虑运用协助文本。

 

2.标签

分类

包含文字标签和引导图标,是否运用标签、运用哪一种(或许两种)标签都是自定义的,只需确保用户好了解。

一般,咱们至少都能看到文字标签:

Email和Password为文字标签

 

但假如是用户很了解的场景,也能够只运用引导图标、不要文字标签,这时分占位符文本(下文会讲)能够起到辅佐阐明效果,如登录页:

标签只需引导图标,用占位符辅佐阐明(京东阅览)

 

假如仅引导图标就够好了解,没有占位符也可,如查找框:

图标-放大镜,无占位符,用户也了解这是查找框(tvOS)

也有不需求标签的,在苹果tvOS标准中,就着重:当占位符能充沛标明文本框意义时,就不需求标签:

只需占位符,无标签(tvOS)

 

总归怎样好看好了解,怎样来。

tips:

  • 占位符和标签的差异:占位符仅仅暂时占位,会在用户输入时消失,但标签会一向存在。

 

标签的方位

方位很灵敏,它能够在容器上方、左面、内部,一起还能够左对齐、右对齐。但,不是一切类型的容器都能够随意放置标签的,总结发现,输入线容器和框容器总共有5种标签方位:

输入线容器的标签

 

框容器(填充和线性容器)的标签

 

5种办法在规划中怎么挑选呢?先来了解下标签的对齐办法,研讨标明:

  • 顶部标签:用户眼球移动的功率最高;它节省水平空间,可是会占用更多的笔直空间;不合适表单过多、空间缺乏的页面。假如表单项不多,能够优先考虑。
  • 左对齐标签:功率是三者中最低的(其实也就差几百毫秒),可是能协助读者了解,适用于表单多、专业性强或用户生疏的页面。
  • 右对齐标签:统筹功率和笔直空间;但当标签较长时,会占用更多的水平空间,适用于表单多、不需求很专业了解力的横向页面。

再结合输入线和框容器的特征(上文有讲),一张流程图供挑选:

ps:这儿研讨的终端只需移动、web和tv三种,watch、pad、车载等不考虑在内

 

五种办法暗示:

内容少的web注册页:输入线+顶部标签(Dribbble)

 

移动端:输入线+左对齐标签(链家)

 

内容少:框容器+顶部标签(themeforest)

 

内容多、用户了解:框容器+右对齐标签(腾讯云控制台)

 

一看就很杂乱:框容器+左对齐标签(阿里云后台)

 

tips:

  • 请留意不论标签左仍是右对齐,矩形框都应该左对齐;

  • 文字标签宜简略,尤其在移动端,尽量不超越六个汉字(蚂蚁金服);
  • 英文标签不要一切字母大写,首字母大写即可。

 

必填和可选符号

常常见到表单页中一些标签打了“ * ”号,咱们便知道意思是必填(required)。除了用星号,必填还可用汉字“(必填)”放在标签后。咱们在规划中,假如遇到一页表单的大多数字段是必填,那么需求标出的不是必填,而是可选(optional)内容。也便是说,标出少的那一个,假如两者各占一半,那就二选一。

星号标明必填(Material Design)

 

tips:

  • 考虑到不了解UI言语的用户,请在必填符号“ * ”的邻近阐明该符号的意义;
  • 有的页面不像表单页那样杂乱,不必标出必填or可选,但应在一切必填项填好后,再点亮跳转到下一步的按钮,如登录注册页。
  • 起浮标签,是现下盛行的一种标签,也是谷歌的官方做法。默许情况下,标签在框容器内部,输入状况下,标签移动到的框的上边并逗留。长处是节省了独自的标签方位,动效进步用户体会感,缺乏是原本该放占位符的当地被标签占有了,因而或许还需求在容器下方独自写一行协助文本(下文介绍),并且研讨标明:空的文本框容器更吸引人的留意,而填充了标签的文本框会让人易疏忽。因而主张:只在不需求更多的协助文本且当节省空间是规划要点时才运用起浮标签,牢记起浮标签在默许状况要用淡色。谷歌资料规划现在便是深色,这或许会让人误解为已填,这样欠好。

资料规划的起浮标签

 

3. 占位符文本

占位符,是指在用户未输入时,预先占有文本框内方位、用来描绘该文本框的输入规矩、且色彩不太明显的文本符号。

当用户输入内容时/输入完结后,占位符不再存在,而是被输入文本(见下文)替代。前面也讲过:占位符和标签的差异在于:标签不会跟着输入状况改变而消失。

有时,能够只运用占位符而不要任何标签,这主要是在一些很简单的界面才用到(文本框较少且用户了解),例如上文中的查找框,又如登录注册页:

 

左:有占位符、有标签;右:有占位符、无标签

 

但当界面中文本框较多时(多于3个),纯占位符就不再合适。原因:

  • 1. 当占位符被输入文本替代,冗杂的文本框让用户简单忘掉每一个对应的意义,不方便检查。
  • 2. 整屏的纯占位符简单看起来像是现已填好的输入文本。

 

占位符方位

无标签时:占位符能够左对齐、居中对齐。居中对齐只在只需一个文本框时才用,比方查找框:

只需一个框,占位符可居中对齐(Dribbble)

 

有标签时,占位符绝大多数是左对齐,只需一种情况下能够挑选右对齐,即移动端的输入线文本框:

移动端常见的占位符右对齐(链家)

 

 tips:

  • 占位符要简略,不要换行,若超出框,超出部分切断;
  • 千万不要把占位符规划得像现已输入的文本,所以色彩要浅。框多的时分尽量不要占位符,由于许多用户仅仅大致阅览;
  • 色弱人士不合适用占位符由于色彩较浅。

 

4. 协助文本

协助文本是接近输入方位的一行小字,具体方位不限。当标签+占位符都缺乏以介绍文本框,或当用户正在输入时因占位符消失而需求更多提示时,能够运用协助文本,协助文本能够一向存在,也能够只呈现在“正在输入”或“完结输入”状况。

协助文本宜简略、不要换行,色彩不能抢了输入文本的风头(犯错信息在外)。

协助文本还能够展现犯错信息(error message)和字符计数器(counter)。犯错信息的呈现机遇:即时。不要等用户填完了页面所字段、点击提交时才呈现,尽量在鼠标点击到文本框外,或按了回车键、空格键时就及时呈现。

犯错信息和字数提示都是协助文本(腾讯云)

 

微信特性签名的字符计数器(右下角)

 

tips:

  • 犯错信息尽量不必弹框展现,那样有点小题大做,且弹框一关掉就无法看到,平添了操作进程;
  • 犯错信息尽量不换行,假如非要换行,留意和下一个文本框拉开距离。

 

5. 输入文本

只需在“正在输入”和完结输入后才呈现。假如有占位符,则输入文本会在相同的方位替换掉它,仅有的改变是字体色彩,需求更明显。

 

方位

和占位符相同。

 

大段输入文本

有时输入文本不宜太长,能够用协助文本提示用户,但假如大段文本是不免的,请参阅以下:

1. 移动端翻开新的页面输入:

 

来自微信

 

2. 运用多行文本框(muti-line text field)。

在默许的单行(single-line)文本框中,跟着输入内容超越容器,输入文本会向左移动:

单行文本框,向左翻滚(谷歌)

 

而在多行文本框中,文本不会向左翻滚,而是文本换行、容器随文本笔直增高:用户在输入前N行时,文本框的高度自适应、越变越高,超越N行时,高度不再添加,文本顶部被切断,且此刻文本支撑笔直翻滚检查。例如,微信N=5:

 

 

3. 运用文本区域(text area)。

文本区域高于单行文本框,且高度固定,溢出文本会换行,当光标抵达容器底部时文本笔直翻滚:

文本区域,高度固定(左:谷歌,右:微信)

 

tips:

  • 总结:单行文本和文本区域的容器尺度不变;多行文本的容器宽度不变,高度自适应改变。

 

输入完结后

输入好的文本,假如展现不完,对溢出的部分可用三种办法处理:

  • 切断(clip)
  • 换行(wrap)
  • 省掉(truncate),省掉号能够放在文本前、中、后方位,这取决于文本哪个部位最不重要。

 

从左至右:切断、换行、省掉(macOS)

 

对这种展现不完的文本框,悬停时应该有东西提示条(tooltips)来展现完好文本。

tips:

  • 运用主动完结(autocomplete)提高功率

 

6. 格局化符号

有时分输入文本带有特定格局、特别字符。它们有的作为分组字符(grouped characters)坐落输入文本中心,如电话号码的连字符、金额的分位符;有的作为后缀(suffix),如邮箱的“@域名”、中文钱银单位;还有的是前缀(prefix),如西文钱银单位美元(💲)。在规划和开发时咱们应该预置好这些符号。

还有一种保密文本框(secure text field),在输暗码时将暗码不行见,用黑点替代。

 

依次为:信誉卡号连字符、美元前缀、邮箱后缀、暗码掩码(macOS)

 

变输入为挑选

对较杂乱的格局化文本,如时刻和专业词语,主张变输入为挑选,加个下拉图标/右箭头,弹出/跳到新的挑选组件:

tips:

  • 请留意区别开标签、输入文本、占位符和前后缀的字体色彩。

 

7. 盯梢图标

这是在输入中、输入后呈现的,根据用户输入内容的一种提示,常用到的有:有效性图标(valid icon)、暗码安全性图标、犯错图标、铲除图标(clear icon)、语音输入图标(voice input icon)、下拉图标(dropdown icon)等。

这便是文本框的上篇,下篇会讲文本框的状况、不同终端的尺度和界面中的标准,回头见。

 

原文地址:UI规划言语(大众号)
作者: 珠珠

转载请注明:unibet网址网 » UI规划组件-文本框/输入框(上)

登录保藏
 
你或许喜爱的:
怎么让按钮规划的更诱人怎么让按钮规划的更诱人
浅析儿童APP中图标的特色浅析儿童APP中图标的特色
iOS渠道规划标准-精简总结篇iOS渠道规划标准-精简总结篇
移动端表单规划原则:酒店表单重构实践移动端表单规划原则:酒店表单重构实践
UI规划中的空间和布局UI规划中的空间和布局
5个规划小技巧,越早会越好5个规划小技巧,越早会越好
关于谈论,你应该知道这些关于谈论,你应该知道这些
百度AR小游戏规划进程全揭秘——《砸金猪积福分》百度AR小游戏规划进程全揭秘——《砸金猪积福分》
细节篇:儿童APP中的圆角规划细节篇:儿童APP中的圆角规划
交互规划师的输出文档编撰办法交互规划师的输出文档编撰办法