UI设计组件-文本框/输入框
发布网友
发布时间：2023-11-26 18:21
共1个回答
热心网友
时间：2024-08-05 17:15
小编：嗨大家好，我们接着上篇文章《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键来切换焦点时，保证其切换的方向符合用户心理预期。电视上的文本框首选填充类容器，这样更容易在远距离看清。和按钮类似，填充类和线性类容器的文本框可以在一个界面共存，但和按钮不同的是它们需要分区：MaterialDesign使用合适的虚拟键盘/软键盘（soft keyboard），当用户输入时，如果其使用的设备没有物理键盘，则会拉起虚拟键盘。虚拟键盘的种类多达十几种以上，当输入内容只能是数字时（如手机号），只需拉起数字键盘；当需要输入中文名字时，需要拉起中文输入法。我们设计的时候应该告知开发者预期的键盘类型，否则会造成用户填写表单时的体验不顺畅。拉起的虚拟键盘不要把正在编辑的文本框给挡住了。
UI设计语言（公众号）
作者： 珠珠
