设计表单的标签和输入区(2)
作者:波希米亚 来源:b3inside.com 发布时间:2009-04-27 16:16:00
标签:设计,表单,标签,注册
标签水平右对齐
标签右对齐和输入区水平排列,从而降低了对页面高度的要求。但与标签垂直顶对齐相比,由于标签文字左侧参差不齐,对问题的认知和扫描时间变的更长。
眼动轨迹表明,用户花了更多时间在看问题,输入框对他们来说很简单。
标签水平左对齐
标签左对齐和输入区水平排列,同样降低了对页面高度的要求。标签左对齐有利于用户对问题标签的扫描,但不利于填写答案,因为标签距离输入区较远,要重新定位到右侧输入框,确实要消耗一点时间。
眼动轨迹表明,用户花在定位输入区上的时间比看清标签更长,从而影响了整个表单的完成时间。
标签在输入区内部
这种方式虽然具备垂直组合的优点,但仍应谨慎使用。当焦点移入输入区后,标签消失,看不到问题,可能会忘记要回答什么,很郁闷,不得不清掉输入好的字,把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单,而且人们对他很熟悉,不用费力去记住标签提出的问题,比如:搜索框。
当你真的选择用这种表单的时候,注意,让标签和真实内容区分开来,一些约定俗成的做法是减淡标签字色,在后面打上“…”;下拉菜单则在默认选项两侧打上“-”,以示区别:
设计要有一条主线,贯穿于整个产品,别让人用着感觉像是几个设计师干的事。认真思考一遍,就会有新一层的理解,这对我的工作有极大的帮助。
原文:http://blog.b3inside.com/userexperience/label-and-input-in-form-design/


猜你喜欢
- 第一:编写限制搜索范围的查询语句。众所周知,在数据库查询的时候返回记录的多少直接关系到查询的效率。所以,在客户端通过一定的条件语句,限制搜索
- 注意,本文代码是使用在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