浅议 Web 网页 Form 表单设计技巧
作者：JunChen 来源：junchenwu.com 发布时间：2007-10-09 13:05:00
标签：表单,form,设计
“输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》
Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。
表单布局
考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等)，垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动下。
在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。
如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分)，左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了，而不会被输入框打断思路。但这样一来，标签与其对应的输入框之间的距离通常会被更长的标签拉长，可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。
于是产生了一种替代的方案，标签右对齐布局，使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家，人们习惯于从左至右的书写，所以这种右对齐的布局就给用户造成了阅读障碍。
0
投稿猜你喜欢
- 虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。1.使用语句来控制文字排版比用好
0.环境说明win10 64bit，电脑也是64bit的处理器，电脑装有vs2010 64bit，但是为了保险起见，只试验了32位的安装，等- 最近网站访问量大增，可能有些频道程序也有一些问题，造成了MySQL数据库出现Forcing close of thread 28790 us
- 本文实例讲述了GO语言实现简单的目录复制功能。分享给大家供大家参考。具体实现方法如下：创建一个独立的 goroutine 遍历文件，主进程负
- 如何在pytorch中指定CPU和GPU进行训练，以及cpu和gpu之间切换由CPU切换到GPU，要修改的几个地方：网络模型、损失函数、数据
- 最近帮人做了个贪吃蛇的游戏（交作业用），很简单，界面如下：开始界面：游戏中界面：是不是很简单、朴素。（欢迎大家访问GitHub）游戏是基于P
- 问题描述：在pyhton脚本中logging.info("hello world")希望输出'hello wor
- 将json转为结构体时，经常会遇到无法确定某个字段类型的情况。在Go中可以使用interface 任意类型来解决。// convert js
- DropPath/drop_path 是一种正则化手段，其效果是将深度学习模型中的多分支结构随机”删除&ldqu
- 一 CGI.pm中的方法（routines）调用1. CGI.pm实现了两种使用方法，分别是面向对象的方式和传统的perlmodule方法的
- 本文实例讲述了Python实现读写INI配置文件的方法。分享给大家供大家参考，具体如下：# -*- coding: utf-8 -*-imp
- 从4年之前什么都不知道，到现在对代码的一网情深，感谢无忧的兄弟姐妹的帮助，感谢无忧给我们提供了这么好的交流平台。现将最近几天捣鼓的asp封装
- 环境:主服务器:centos 5.2 mysql 5.1.35 源码 IP:192.168.1.22从服务器:centos 5.2 mysq
- 简介除ide的执行方式外，命令行的方式执行Python脚本是参数化程序执行的一种常见且简单的方法，正确处理命令行参数，可以提供给包含某种参数
- 在使用TensorFlow训练神经网络时，首先面临的问题是：网络的输入此篇文章，教大家将自己的数据集制作成TFRecord格式，feed进网
- 我就废话不多说了，大家还是直接看代码吧！# -*- coding: utf-8 -*-"""Created o
- ubuntu18.04版本，python版本python2.7,python3.5,python3.6因为安装一些库会安装到python3.
- 不过由于手机的参数多，且不同的手机其参数差异大，所以参数表结构通常是纵表（一个参数是一行），而不是横表（一个参数是一列），此时使用若干参数来
- 接着前面Django入门使用示例今天我们来看看Django是如何加载静态html的？我们首先来看一看什么是静态HTML，什么是动态的HTML
- 当用到socket来进行网络程序开发时，大多数情况下会遇到中文字符的发送与接收，这时若对发送的字符串用默认的方式进行处理，则一般会得到一堆乱
