课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认识达内从这里开始
认真做教育 专心促就业
文本框设计在许多网页设计和app应用设计中都是会经常用到的一个设计功能，而本文我们就通过案例分析来简单了解一下，文本框设计注意事项分析。
1、状态
文本框在移动端、网页和电视上一共有哪些状态呢?
文本框的“按下”状态由于太快了，忽略不计。“正在输入”有些地方也称作“激活”状态。
默认：文本框作为录入类组件，和其他类组件的不同在于，它有未输入(empty)和已输入(filled)两种情况。所以在设计文本框状态的时候，也需要时常考虑这两种情况。
悬停：在默认的基础上，容器变成高亮。
聚焦：容器高亮，输入位置出现闪动的光标(暗示可以进行输入操作)，占位符可以保留以便用户输入前参考，拉起虚拟键盘(当没有物理键盘)。
正在输入：在悬停/聚焦的基础上，出现输入文本并替换占位符(若有)，同时用跟踪图标或帮助信息来实时反馈输入内容的有效性、安全等级等。
禁用：禁用状态下，无论用户悬停还是聚焦它都不会变化。
出错：使用警醒色(红、橙)，并及时出现。
2、界面中的文本框
当页面中有多个文本框，应该按功能相关性进行分区。避免把所有框等间距排列，那样会让用户感觉没有条理。可以用这些方法来布局：
用标题分组：
用间距或分割线分组，根据格式塔原理中的亲密性原则，人们通常认为互相靠近的元素属于同一组：拉勾网
使用步骤指示器(stepindicator)，一步步分页
3、容器宽度
在移动端的表单页，文本框宽度往往接近屏幕宽度，但在web和tv这样的较大屏幕上，文本框的宽度没必要全部一致，它可以适应填写字段的预估长度。按照格式塔原理的另一条相似性原则，当页面中某些的文本框宽度一致，用户看一眼就感觉它们是相关的。
【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。
< 上一篇：南昌达内IT培训敏捷测试实践常用方法分享
下一篇：南昌达内IT培训Linux系统应用领域都有哪些 >
2024-01-12
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 5月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 5月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 5月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 5月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 5月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
预约申请试听课
400-111-8989
lihm@tedu.cn
