表单的 9 种设计技巧【上】
全文 1308 字
阅读时间约 5 分钟
本文首发于码匠技术博客
目录
技巧 1：选择合适的输入框标签对齐
技巧 2：保持标签文本简洁，并选择合适的输入组件
技巧 3：保持输入框长度合理、一致
技巧 4：表单输入框放在一列
技巧 5：对相关信息分组
关于码匠
表单是信息添加、录入的通用形式，合理的表单设计能减轻用户负担。这里码匠提供了一些表单设计的简单技巧。
技巧 1：选择合适的输入框标签对齐
码匠中标签根据标签与输入框的位置关系，可以设置位置和对齐方式：
每种标签对齐都有自身的优点与局限性，根据不同的场景选择合适的标签对齐，能提高用户填写速度，同时还能降低信息填写时的错误率。
根据 Matteo Penzo 研究发布的关于标签对齐的文章：采用顶部左对齐的标签样式，浏览表单所需的时间最短，而左侧左对齐则用时最长。以下为该研究中捕捉到的用户在填写三种对齐方式的表单时的眼动轨迹（圆圈越大，注视时间越长）：
可以看到，在顶部左对齐的设计中，用户能够在单次视线移动中同时获取标签和输入字段，可以更快理解表单。而左侧左对齐会迫使用户通过注视更大范围的屏幕空间获取信息，从而拖慢用户的反应速度。
如果希望用户能快速扫描填写表单，那么标签顶部对齐是最佳选择。注意对齐的一致性，所有标签在整个表单中都应该遵循相同的对齐方式。
表单的 9 种设计技巧【上】相关推荐
- 浅谈数据库设计技巧(上)
浅谈数据库设计技巧(上) 说到数据库,我认为不能不先谈数据结构.1996年,在我初入大学学习计算机编程时,当时的老师就告诉我们说:计算机程序＝数据结构+算法.尽管现在的程序开发已由面向过程为主逐步过渡 ...
- php文本框自动补全,PHP自动补全表单的两种方法
效果图: 第一种:从数据库中检索之后补全 第二种:邮箱等纯前端的补全 先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/f ...
- mvc ajax提交html标签,Mvc提交表单的四种方法全程详解
Mvc提交表单的四种方法全程详解 2019-01-05 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了Mvc提交表单的四种方法全程详解,编程之家小编觉得挺不错的 ...
- uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少 前端代码举例 后端代码举例 form表单元素较多 前端代码举例: 后端java代码举例 uni-app提交f ...
- js表单提交 php,JavaScript提交表单的几种方法
在我们工作中我们会经常使用到form表单,相信大家再熟悉不过了,那么提交表单有很多种方法,JavaScript提交表单的方法又是如何呢,今天就带大家介绍下JavaScript提交表单的几种方法! 第一 ...
- form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式 一,表单提交无反应 有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
- 关系型数据库表结构的两个设计技巧
关系型数据库表结构的设计,有下面两个设计技巧: 物理主键作为关联的外键 关系型数据库,由多个数据表构成.每一个数据表的结构是相同的,不同表之间可能存在关联关系.表之间的关联关系,正是关系型数据库得名的 ...
- android 漂亮的表单界面,面向ArcGIS for Android的表单界面生成器的设计与实现
孙俊英 陈忠超 摘 要:基于ArcGIS for Android的采集系统作为当下主要的野外采样方式之一,被广泛的应用于各类场景,针对不同采集内容,采集系统的主要差异在于采样的属性数据所有不同,使用传 ...
- 基于React和Node.JS的表单录入系统的设计与实现
一.写在前面 这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景 人活着一定要有信仰,没有 ...
最新文章
- 京东主图怎么保存原图_京东自营怎么做？详解京东平台操作方法
- GDataXMLNode：xml解析库
- 元组Tuple、数组Array、映射Map
- 深入理解javascript的闭包
- 设计模式---组合模式
- 华为鸿蒙发布会新手机,曝华为 P50/Pro 系列最终版确定，6 月 2 日揭晓鸿蒙手机发布时间...
- otb100matlab,ECO for tracking 在 OTB100 基准测试和 VOT2016 数据集中的实验结果
- 搭建小程序表情包教程
- C# winform 上传文件 (多种方案)
- python-opencv学习第二章
- 故障分析：从Oracle数据库故障到Linux nproc算法
- 使用FFTW3做二维DFT的示例代码
- Web前端可视化绘图软件编辑器-汇总
- 导入从postman导出的json接口文件，并设置全局变量
- 通过collect埋点_通过Collect UI查找每日界面设计灵感
- 使用Python进行数独求解（二）
- 逆变器LCL滤波器参数设计（一）
- 软考高项 : 计算题汇总
- 一个屌丝程序猿的人生（二十七）
- iOS8:TouchID
热门文章