论表单设计规范

原创 2016年08月12日 21:29:57
在平时设计过程中,设计师经常会直接性地按照一种规范或参考做设计,比如字体大小、间距、表单形式等,因为这样做准没错,所有人都这么做,但甚好人去思考为什么这么做?

无论注册流程,多视图递进,或单纯的数据录入界面,表单都是数字产品设计的重要组成部分。这里介绍一些表单设计中的常见问题,这些事一般的设计规范,每项可能有例外。

1、表单应该集中在一列

多列表单会破坏用户的垂直浏览惯性。

图片

2、顶部对齐标签

虽然左对齐标签的方式更容易被一同扫视而且能够降低页面高度,但用户完成顶部对齐标签表单的速度比左对齐更快,顶部对齐的形式也更适用于移动端,所以很多琴况下都采用顶部对齐。

图片

3、标签贴近输入框

让标签和输入框更接近,确保输入框与下一标签有足够高的间距,这样用户不会感到困惑。

图片

4、如果少于6项就展示全部选项

选项放置在隐藏的下拉列表中,需要用户点击两次,所以只有在超过5个选项的时候才会使用下拉列表的方式。如果下拉列表的选项超过25个,那么还应该增加一个搜索。

图片

5、抵制使用占位符文本作为标签

虽然使用占位符文本作为标签节省了空间,看起来也更简洁,但是这也会导致很多可用性的问题,当输入框被选中,提示也会消失。

图片

6、不论是单选框还是复选框都应该纵向排列

纵向排列的方式更易于浏览。

图片

7、动作描述要准确

每一个动作都应该有清除的目的,注册就是注册,而不是写成普适性的提交。

图片

8、使用内敛提示

明确告诉用户哪里出错,并说明理由。

图片

9、在用户输入结束后再使用内联校验

不要再用户输入的时候使用内敛校验,否则会导致用户在输入过程中被提示错误,实际上人家只是没完成输入,并不是输入错了。

图片

10、不要隐藏基础的帮助文本

尽可能地展示出基础帮助文本,如果内容比较多,当输入狂被激活的时候就将它放在输入框旁边而不是用一个问好图标折叠。

图片

11、区分主次动作

应不应该将“注册”与“取消”按钮都是为主要动作是一个哲学问题,但一般情况下,我们主要目的还是想让人注册吧。

图片

12、区分*及可选字段

如果没有*用户可能不着调哪些是玄天的内容,所以加上*能够更好地暗示用户。

图片

13、将相关信息分类

用户希望分批次地去处理问题,混合的长表单会让人觉得不知所措,所以创建逻辑组合,用户将更好理解。

图片

表单域规范写法

登录表单     账号:     密码:     表单域要用fieldset标签包起来,并用legend标签说明表单的用途。因为fieldset默认有边框,而legend也有默认...
  • zjt107
  • zjt107
  • 2015-08-24 10:37:10
  • 1952

设置form的间距

  • jxyuhua
  • jxyuhua
  • 2004-08-30 10:53:00
  • 2326

论表单设计规范

在平时设计过程中,设计师经常会直接性地按照一种规范或参考做设计,比如字体大小、间距、表单形式等,因为这样做准没错,所有人都这么做,但甚好人去思考为什么这么做? 无论注册流程,多视图递进,或单纯的...
  • u010975449
  • u010975449
  • 2016-08-12 21:29:57
  • 990

B/S<em>表单</em>设计的<em>规范</em>模板

B/S页面<em>表单</em>设计的<em>规范</em>模板,对B/S架构应用软件的设计人员有用,可以<em>规范</em>设计出人性化的页面<em>表单</em> 综合评分:0 收藏评论举报 所需: 5积分/C币 下载个数: 55 ...
  • 2018年04月17日 00:00

流程填报模块 填报表单设计规范

填报数据存储 在设计填报表单时,可以灵活地设置单元格填写数据的保存方式。可以将数据提交给一些中间处理层,由中间层去解决数据入库的问题,但最常用的就是设置数据表字段与单元格的对应关系,将单元格中填写的...
  • return031116
  • return031116
  • 2014-01-18 22:50:29
  • 661

Web界面设计规范(Web Form的UI设计)

  • 2009年04月11日 12:48
  • 199KB
  • 下载

常见表单

名词:action:每个&amp;lt;form&amp;gt;元素都需要一个action特性,其特性值是服务器上一个页面的URL,这个页面用来在用户提交表单时接收表单中的信息 method:表单的...
  • jxdhfkd
  • jxdhfkd
  • 2018-03-05 21:25:48
  • 41

SQL Server数据库设计规范

数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求。数据库设计过程中命名规范很是重要,命名规范合...
  • tzstzstzsxy
  • tzstzstzsxy
  • 2016-02-26 14:00:20
  • 428

最新版本的《民用建筑电气设计规范》(JGJ16-2008)

  • 2009年04月19日 21:17
  • 2.49MB
  • 下载

HTML5智能表单的使用和规范

1970 1980 1990 默认值: 邮箱: URL: DATE: TIME: Month: WEEK: 数字: 滑动条: 搜索...
  • ddv1999
  • ddv1999
  • 2017-11-06 19:36:53
  • 67
收藏助手
不良信息举报
您举报文章:论表单设计规范
举报原因:
原因补充:

(最多只允许输入30个字)