设计表单的标签和输入区
作者:波希米亚 来源:b3inside.com 时间:2009-04-27 16:16:00
重读LukeW的《Web Form Design:Filling in the Blanks》感触很深,除佩服LukeW的钻研精神外,更多的是学习他对设计细节的执着和理解。我把对本书的理解,与工作生活中遇到的实际问题结合起来,作为今后设计工作的指导和规范。
有一些元素,看着很简单,设计起来却很头疼。往往这样的元素都具有一个共同的特点——变化多,表单的设计就是如此。你说见过20、30种以上不同的表单,我并不惊讶,产品需求、风格不同,必然五花八门。当然,换了设计师,表单的样式也可能会不同。然而,不能让这种情况继续下去,表单不是艺术展。不要让你的才华阻碍了别人的前进。
表单就是一扇门
古有大禹,三过家门而不入;今有用户,看到表单犯糊涂。难道大禹遇到的是这样的门?
表单,尤其是注册表单,就像一扇门,穿过他才能看到完整的产品。所以千万别做这种门,自己费事不说,用户也不会买账。这个设计最糟糕之处,就在于它有悖常理。好的设计应当遵循于其自然规律,这样一来符合人们预期,使用起来也就顺畅。
表单中标签与输入区的4种对齐方式
标签垂直顶对齐
标签水平右对齐
标签水平左对齐
标签在输入区内部
《Web Form Design》一书中对标签和输入区组合进行了一些研究,我整理了一份数据比较的表格:
标签垂直顶对齐
标签和输入区垂直依次排列,从而降低了对页面宽度的要求。如果你的页面没有富裕的空间用于标签和输入区的横向排列,这种组合是个不错的选择。
眼动轨迹表明,用户自上而下的扫描表单,焦点多集中在左侧一列,且跳动较小。
标签:设计,表单,标签,注册
0
投稿
猜你喜欢
使用python实现http及ftp服务进行数据传输的方法
2021-08-26 01:20:19
Python+Opencv实现表格边框线检测
2023-08-11 04:55:14
Python实现按逗号分隔列表的方法
2023-06-08 08:32:16
PyTorch上搭建简单神经网络实现回归和分类的示例
2022-08-02 04:49:42
详解Python 使用 selenium 进行自动化测试或者协助日常工作
2023-09-05 03:44:19
Python爬虫小例子——爬取51job发布的工作职位
2022-04-30 23:17:18
利用Python如何实时检测自身内存占用
2023-01-11 03:12:02
结合Python的SimpleHTTPServer源码来解析socket通信
2021-09-05 23:30:27
MySQL与PHP的基础与应用专题之数据查询
2023-11-10 10:09:55
python移位运算的实现
2021-07-16 10:23:38
pytorch 实现在预训练模型的 input上增减通道
2023-12-02 00:49:33
Go语言入门exec的基本使用示例
2024-04-25 13:16:33
python eval()函数使用详情
2021-10-17 02:09:23
phpMyAdmin开发人员访谈——4个人支持整个项目
2010-05-26 15:34:00
Python3 利用requests 库进行post携带账号密码请求数据的方法
2023-04-03 05:37:53
pycharm设置鼠标悬停查看方法设置
2022-12-25 16:04:31
argparse 模块简介
2023-05-27 10:19:36
MySQL临时表的简单用法介绍
2024-01-13 10:03:56
Linux上通过binlog文件恢复mysql数据库详细步骤
2024-01-27 17:56:01
python2.7读取文件夹下所有文件名称及内容的方法
2023-12-16 03:27:07