浅议 Web 网页 Form 表单设计技巧（2）
作者：JunChen 来源：junchenwu.com 发布时间：2007-10-09 13:05:00
借助可视化元素
由于“标签左对齐布局”的优点(方便检索并且减少垂直高度)，尝试纠正它的主要缺点(标签和输入框的分离)就很诱惑人。
一个方案就是增加背景色和分割线，不同的背景色产生了一列垂直的标签和一列垂直的输入框，每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错，但是还是会存在问题。
对比之前的形态(用户主观的视觉区分)，这增加了15个视觉元素:中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线，让用户难以聚焦到一些重要的元素上，比如标签和输入框。 正如 Edward Tufte 指出的:“信息本身存在差异，必然产生感官上的不同。”换句话说，任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现，你的视线总是被打断，停下来想那些水平线、单元格和背景颜色。
当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。
主次操作
一个表单的主要操作(通常是“提交”或“保存”)需要一个比较强的视觉比重(在上面的例子里用了亮色调、粗字体、背景色等等)。这相当于给用户一个提示:您已/即将完成填写表单。
当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。
虽然以上内容可以更好的让你设计表单，但是组合布局、可视化元素以及内容，仍然需要经过用户的测试以及数据分析(完成度评估、错误报告等)。
更多的细节和例子在 Web Application Form Design Expanded。
JunChen 翻译自 LukeW's Functioning Form
0
投稿猜你喜欢
1.资源下载官网下载地址：https://dev.mysql.com/downloads/mysql/2.软件解压 2.1选择位置- 1、上下文管理的使用场景凡是要在代码块前后插入代码的场景，这点和装饰器类似。资源管理类：申请和回收，包括打开文件、网络连接、数据库连接等；权
- 代码编辑环境Win10+(Pycharmm or Vscode)+PyQt 5.14.2功能实现静态作图：数据作图，取决于作图函数，可自行修
- date("yyyyMMdd",time()) date() 函数功能：用于格式化时间，返回一个字符串。&nb
- 写在前面vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上
- 异常的传递性在 Python 中，异常的传递性指的是，当一个异常没有被处理时，它会沿着调用栈向上抛出，直到被处理或者导致程序崩溃。具体来说，
- Anaconda是一个和Canopy类似的科学计算环境，但用起来更加方便。自带的包管理器conda也很强大。首先是下载安装。Anaconda
- 平时写pyhton的时候习惯初始化一些list啊，tuple啊，dict啊这样的。一用到Pandas的DataFrame数据结构也就总想着初
- 本文接上一篇博客python实现的八大排序算法part1，将继续使用python实现八大排序算法中的剩余四个：快速排序、堆排序、归并排序、基
- 编程零基础，可以学习 Python 吗”，这是很多初学者经常问我的一个问题。当然，在计算机方面的基础越好，对学习任何一门新的编程语言越有利。
- 1、封装的理解封装(Encapsulation)：属性和方法的抽象属性的抽象：对类的属性（变量）进行定义、隔离和保护分为私有属性和公开属性：
- js的成员和方法好象没有private和public之分，列一下public的成员和方法成员：name 控件的名字，既这个控件的变量名（必选
- 初学vue自己新建一个vue项目来做学习demo。不过在编写代码时一直出现空格不规范的警告。严重影响初学者的热情。错误如下图所示。（这样的错
- Django使用mysqlclient服务连接并写入数据库准备1.创建Django程序,安装Django服务(详情请看上上节)2.创建子应用
- 若你使用过 Shell 中的 awk 工具，会发现用它来分割字符串是非常方便的。特别是多个连续空格会被当做一个处理。[root@localh
- 在php中使用Xajax能够即时与数据库发生交互带给用户更好的体验主要的应用有网页的即时、不刷新的登录系统也可以利用于注册系统中即时验证用户
- css实现的圆角矩形的方式很多,但要追求灵活型,上面的结构简单,看起来爽一点注意css所用的图片路径,已修改兼容ie6 ie7 ff ,IE
- 这是一个小技巧，看着.ejs的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。1.在app.js的头上定义ejs
- 1 配置环境setting.json·是设置语言环境，launch.json是设置执行环境来执行代码，tasks.js
- 获取一组radio被选中项的值var item = $(’input[@name=items][@checke
