php两个表单_UI设计——用户表单设计注意事项

作为一个UI设计师，一定会用到表单设计，我们如果设计出一个糟糕的表单，会极大影响 用户信息的录入的效率，今天就给大家介绍一下表单设计中需要注意的事项。 一个表单有三个组成部分：

• 表单标签(标题)。

• 表单域(输入框)，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

• 表单按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

  常见的表单类别：文本输入框、密码输入框、其中文本输入框又包含中文输入框、英文输入框、数字输入框等。其中我们接触最多的就是需要录入信息的输入框。 表单布局 表单的布局结构，合理的表单结构，能提高用户阅读效率，同时还能降低信息填写时的错误率。常见的布局结构：左右、上下、内部。   左右和上下结构，左右结构常用在pc端，左右结构在用户体验上，视觉路径相对较长，特别是在多行信息录入时，尤其明显。 输入限制 为什么要做输入限制：一是为了陈列这些数据时，可以根据长度来确定它的一种展现方式；二是为了减轻数据库的压力。 1、对表单域输入的信息进行字数限制   2、做属性限制，比如在数字文本框时，输入汉字，或者字母，这就极大的增加了用户的错误率   提示文字 提示文字在设计中，我们要注意文字清晰、明了、简短、一致，在颜色选择上，作为提示性信息，视觉层级较弱，不宜用太过突出的颜色。在HTML5中，input标签中有placeholder提示文字这个属性是有一定原因的。而我们加入提示文字，用户在填写表单的时候，一眼看上去就知道应该在哪里填写，怎么填写，清晰明了。   输入框大小与边距 我们在绘制设计图的时候，需要给开发标有效输入框的大小与间距。我这里设置了红色，为了不影响视觉，我们可以将不透明度降为零，在交接到蓝湖或者像素大厨，开发都能看到input框的大小，可以看不见，但必须存在。   在input框中有icon时，也要注意icon与input框之间的间距。   多行文字规则 在表单当中，多行文字一般出现在两个地方，一是表单标签，二是行内信息。 在做标签的时候，有时候会出现一个名字很长的标签，我们给文字设定宽度和行高，我们给出规则，比如最多五个字，超出部分做换行处理，我们需要给标签的行高和宽度统一。   报错提醒 我们在用户输入的时候，就应及时针对用户录入的信息进行判断，有些前端自己就能做，有些需要扫一遍数据库，做信息对比，然后告知用户信息重复。总之及时做判断，并给出反馈，同时引导用户完成正确填写操作，不要等到用户点提交按钮后，才给用户做出判断。   结果反馈 用户在完成表单填写，并提交后，需要及时给用户反馈，比如完成提交时的祝贺，谢谢等，都能催发用户体内的多巴胺，并产生愉悦的情绪，无论是祝贺还是提醒，用户都会产生快乐的情感。 相关链接： 致全体云和数据复课学生的一封信 高亮！2020年4月全国程序员工资新鲜出炉 毕业在即，选择IT行业就业会更好吗？ 裁员降薪浪潮再现？你凭借什么在职场中生存下去？ 点击文末“”咨询，免费来云和试听课程——UI视觉交互精英班、PHP全栈web高薪班、JAVA大数据精英班、HTML5全栈精英班、Unity虚拟现实大师班、全域电商精英班、大数据人工智能专家班、华为认证课程，座位有限，先抢先得！