小莫

小编:嗨大家好,我们接着上篇文章《UI设计组件-文本框/输入框(上)》继续学习文本框的7个组成元素。(01部分在上篇文章哦。)


02 
状态

文本框在移动端、网页和电视上一共有哪些状态呢?
文本框的“按下”状态由于太快了,忽略不计。“正在输入”有些地方也称作“激活”状态。
默认:文本框作为录入类组件,和其他类组件的不同在于,它有未输入(empty)和已输入(filled)两种情况。所以在设计文本框状态的时候,也需要时常考虑这两种情况。
悬停:在默认的基础上,容器变成高亮。
聚焦:容器高亮,输入位置出现闪动的光标(暗示可以进行输入操作),占位符可以保留以便用户输入前参考,拉起虚拟键盘(当没有物理键盘)。
正在输入:在悬停/聚焦的基础上,出现输入文本并替换占位符(若有),同时用跟踪图标或帮助信息来实时反馈输入内容的有效性、安全等级等。
禁用:禁用状态下,无论用户悬停还是聚焦它都不会变化。
出错:使用警醒色(红、橙),并及时出现。不同类型文本框的状态供参考: 

 

输入线文本框

表中没有“聚焦”状态,因为聚焦主要存在于tv端,但在上篇我们说过tv上尽量避免用输入线容器。

 

填充文本框

 

线性文本框

 

03文本框的属性

尺寸

不同设备的文本框有一些常见高度,以下数据不是绝对的,仅供参考:

移动端

 

web端

 

电视端

 

间距

从文本框上篇我们已经知道,文本框的7个元素中,标签、占位符(输入文本)、帮助文本和格式化标记的位置和对齐方式有很多种。所以这里列一些最常见的间距做法供参考。

移动端

 

web端

电视端

因为观看距离远,电视上信息不宜太多,文本框数量也少,所以可以用占位符代替标签

 

04界面中的文本框

文本框分区

当页面中有多个文本框,应该按功能相关性进行分区。避免把所有框等间距排列,那样会让用户感觉没有条理。可以用这些方法来布局:

  • 用标题分组:
  • 用间距或分割线分组,根据格式塔原理中的亲密性原则,人们通常认为互相靠近的元素属于同一组:拉勾网
  • 使用步骤指示器(step indicator),一步步分页:
    工商银行

 

容器宽度

在移动端的表单页,文本框宽度往往接近屏幕宽度,但在web和tv这样的较大屏幕上,文本框的宽度没必要全部一致,它可以适应填写字段的预估长度。按照格式塔原理的另一条相似性原则,当页面中某些的文本框宽度一致,用户看一眼就感觉它们是相关的。例如表单中的姓和名宽度一致、地址1和地址2宽度一致:


合理的容器宽度,Nikita Prilepskiy(Dribbble)

 

相反,如果宽度都一致,用户就感觉不到哪些是有关联的:


容器都一样宽,不太好,Sadik (Dribbble)

tips:

  • 电视端和网页端:多个文本框的界面,分别用遥控器和tab键来切换焦点时,保证其切换的方向符合用户心理预期。
  • 电视上的文本框首选填充类容器,这样更容易在远距离看清。
  • 和按钮类似,填充类和线性类容器的文本框可以在一个界面共存,但和按钮不同的是它们需要分区:
    Material Design
  • 使用合适的虚拟键盘/软键盘(soft keyboard),当用户输入时,如果其使用的设备没有物理键盘,则会拉起虚拟键盘。虚拟键盘的种类多达十几种以上,当输入内容只能是数字时(如手机号),只需拉起数字键盘;当需要输入中文名字时,需要拉起中文输入法。我们设计的时候应该告知开发者预期的键盘类型,否则会造成用户填写表单时的体验不顺畅。
  • 拉起的虚拟键盘不要把正在编辑的文本框给挡住了。

 

原文地址:UI设计语言(公众号)
作者: 珠珠

转载请注明:学UI网 » UI设计组件-文本框/输入框(下)

登录收藏
 
你可能喜欢的:
用人的语言·为人设计用人的语言·为人设计
为什么颜色很重要为什么颜色很重要
干货 | 如何构建UI组件设计规范干货 | 如何构建UI组件设计规范
小程序与App有什么区别?小程序与App有什么区别?
B端产品设计特性整理B端产品设计特性整理
“收藏、喜欢、关注”有啥区别?“收藏、喜欢、关注”有啥区别?
数据可视化在移动端的应用数据可视化在移动端的应用
大厂产品告诉你:提升交互表现的8个技巧大厂产品告诉你:提升交互表现的8个技巧
设计案例精选,如何通过App改版提高50%交易额?设计案例精选,如何通过App改版提高50%交易额?
四步搞定底部导航动效(下篇)四步搞定底部导航动效(下篇)