设计表单的标签和输入区（2）
作者：波希米亚 来源：b3inside.com 发布时间：2009-04-27 16:16:00
标签：设计,表单,标签,注册
标签水平右对齐
标签右对齐和输入区水平排列，从而降低了对页面高度的要求。但与标签垂直顶对齐相比，由于标签文字左侧参差不齐，对问题的认知和扫描时间变的更长。
眼动轨迹表明，用户花了更多时间在看问题，输入框对他们来说很简单。
标签水平左对齐
标签左对齐和输入区水平排列，同样降低了对页面高度的要求。标签左对齐有利于用户对问题标签的扫描，但不利于填写答案，因为标签距离输入区较远，要重新定位到右侧输入框，确实要消耗一点时间。
眼动轨迹表明，用户花在定位输入区上的时间比看清标签更长，从而影响了整个表单的完成时间。
标签在输入区内部
这种方式虽然具备垂直组合的优点，但仍应谨慎使用。当焦点移入输入区后，标签消失，看不到问题，可能会忘记要回答什么，很郁闷，不得不清掉输入好的字，把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单，而且人们对他很熟悉，不用费力去记住标签提出的问题，比如：搜索框。
当你真的选择用这种表单的时候，注意，让标签和真实内容区分开来，一些约定俗成的做法是减淡标签字色，在后面打上“…”；下拉菜单则在默认选项两侧打上“-”，以示区别：
设计要有一条主线，贯穿于整个产品，别让人用着感觉像是几个设计师干的事。认真思考一遍，就会有新一层的理解，这对我的工作有极大的帮助。
原文：http://blog.b3inside.com/userexperience/label-and-input-in-form-design/
0
投稿猜你喜欢
- 第一：编写限制搜索范围的查询语句。众所周知，在数据库查询的时候返回记录的多少直接关系到查询的效率。所以，在客户端通过一定的条件语句，限制搜索
- 注意，本文代码是使用在txt文档上，同时txt文档中的内容每一行代表的是图片的名字。#coding:utf-8 import shutil
本文主要研究的是Python机器学习logistic回归的相关内容，同时介绍了一些机器学习中的概念，具体如下。Logistic回归的主要目的- 是在客户端确认还是在服务器端确认？ <SCRIPT LANGUAGE="VBSc
- 前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。这样通过服务器链接地址，直接可以在手机上点开来访问。
- 目录1、正则表达式1.1 正则表达式字符串1.1.1 元字符1.1.2 字符转义1.1.3 开始与结束字符1.2 字符类1.2.1 定义字符
- 客户需要一个类似 news letter 的功能，当然，内容是可编辑的，而且还要以 HTML 格式呈现给用户。这就需要在发送邮件的时候，指明
- OCR简介OCR，即Optical Character Recognition，光学字符识别，是指通过扫描字符，然后通过其形状将其翻译成电子
- ES6 开始，js 新增了剩余参数语法、展开语法等，它们有个共同之处就是都以 ... 这么个符号为前缀，好像很多地方都可以用到，但实际上又不
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 对象测量概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
- 使用SQL Server事件探查器工具，你可用一个捕获到的跟踪来收集有关服务器的重要信息。与索引优化向导(Index Tuning Wiza
- 无意中看到百度的页面代码，想到了一种声明写法，需要的朋友可以参考下。<!DOCTYPE html> <!--[if IE]
- 一、定义面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能
- 一、下载安装包http://www.php.net/downloads.php获取下载地址wgethttp://hk1.php.net/di
- 项目应用中，曾有以下一个场景：接口中要求发送一个int类型的流水号，由于多线程模式，如果用时间戳，可能会有重复的情况(当然概率很小)。所以想
- tkinter提供了三个模块，可以创建弹出对话窗口：（使用必须单独导入模块）1.messagebox消息对话框示例：askokcanceli
- 本文实例讲述了Python常见数字运算操作。分享给大家供大家参考，具体如下：Python 解释器可以作为一个简单的计算器：您可以在解释器里输
- 如下所示：#!/usr/bin/python# coding=utf-8#import timeimport datetime# 今天日期t
- 最近在用GAE开发自己的博客程序。虽然GAE的API没有显式的提供操作Cookie的方法，但他现有的架构，使我们有足够的自由来操作Cooki
- 首先,你得下载SocksiPy这个.解压出来之后里面会有一个socks.py文件.然后你可以把这个文件复制到python安装目录里面的Lib
