论表单设计规范

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

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

1、表单应该集中在一列

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

图片

2、顶部对齐标签

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

图片

3、标签贴近输入框

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

图片

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

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

图片

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

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

图片

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

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

图片

7、动作描述要准确

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

图片

8、使用内敛提示

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

图片

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

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

图片

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

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

图片

11、区分主次动作

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

图片

12、区分*及可选字段

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

图片

13、将相关信息分类

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

图片

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

利用K-means聚类算法根据经纬度坐标对中国省市进行聚类

K-means聚类算法是一种非层次聚类算法,在最小误差的基础上将数据划分了特定的类,类间利用距离作为相似度指标,两个向量之间的距离越小,其相似度就越高。程序读取全国省市经纬度坐标,然后根据经纬度坐标进...

Radon变换理论介绍与matlab实现--经验交流

本人最近在研究Radon变换,在查阅了各种资料之后在此写下个人的理解,希望与各位牛牛进行交流共同进步,也使得理解更加深刻些。 Radon变换的本质是将原来的函数做了一个空间转换,即,将原来的XY平...

Matlab绘图-很详细,很全面

Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数。此外,Ma...

CT图像重建技术

由于csdn贴图不方便,并且不能上传附件,我把原文上传到了资源空间CT图像重建技术 1.引言 计算机层析成像(Computed Tomography,CT)是通过对物体进行不同角度的射线投影测量而...

linux查找目录下的所有文件中是否含有某个字符串

查找目录下的所有文件中是否含有某个字符串  find .|xargs grep -ri "IBM"  查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名  find .|xargs g...

Radon变换入门matlab CT原理

http://hi.baidu.com/hi9394/blog/item/0d492b8bfd714700c8fc7aa9.html 简介 图像投影,就是说将图像在某一方向上做线性积分(或理解为累...

Intel系列处理器的三种工作模式

Intel系列处理器的三种工作模式 微机中常用的Intel系列微处理器的主要发展过程是:8080,8086/8088,80186, 80286,80386,80486,Pentium,Pen...

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:论表单设计规范
举报原因:
原因补充:

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