云和教育:云和数据集团旗下高端IT职业教育品牌
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

UI设计——用户表单设计注意事项

  • 作者:云和教育
  • 日期:2020-06-22
  • 浏览:99次

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

001.jpg

一个表单有三个组成部分:

表单标签(标题)。

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

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

002.jpg

常见的表单类别:文本输入框、密码输入框、其中文本输入框又包含中文输入框、英文输入框、数字输入框等。其中我们接触最多的就是需要录入信息的输入框。

表单布局

表单的布局结构,合理的表单结构,能提高用户阅读效率,同时还能降低信息填写时的错误率。常见的布局结构:左右、上下、内部。

003.jpg

左右和上下结构,左右结构常用在pc端,左右结构在用户体验上,视觉路径相对较长,特别是在多行信息录入时,尤其明显。

输入限制

为什么要做输入限制:一是为了陈列这些数据时,可以根据长度来确定它的一种展现方式;二是为了减轻数据库的压力。

1、对表单域输入的信息进行字数限制

004.jpg

2、做属性限制,比如在数字文本框时,输入汉字,或者字母,这就极大的增加了用户的错误率

005.jpg

提示文字

提示文字在设计中,我们要注意文字清晰、明了、简短、一致,在颜色选择上,作为提示性信息,视觉层级较弱,不宜用太过突出的颜色。在HTML5中,input标签中有placeholder提示文字这个属性是有一定原因的。而我们加入提示文字,用户在填写表单的时候,一眼看上去就知道应该在哪里填写,怎么填写,清晰明了。

006.jpg

输入框大小与边距

我们在绘制设计图的时候,需要给开发标有效输入框的大小与间距。我这里设置了红色,为了不影响视觉,我们可以将不透明度降为零,在交接到蓝湖或者像素大厨,开发都能看到input框的大小,可以看不见,但必须存在。

007.jpg

在input框中有icon时,也要注意icon与input框之间的间距。

008.jpg

多行文字规则

在表单当中,多行文字一般出现在两个地方,一是表单标签,二是行内信息。

在做标签的时候,有时候会出现一个名字很长的标签,我们给文字设定宽度和行高,我们给出规则,比如最多五个字,超出部分做换行处理,我们需要给标签的行高和宽度统一。

009.jpg

报错提醒

我们在用户输入的时候,就应及时针对用户录入的信息进行判断,有些前端自己就能做,有些需要扫一遍数据库,做信息对比,然后告知用户信息重复。总之及时做判断,并给出反馈,同时引导用户完成正确填写操作,不要等到用户点提交按钮后,才给用户做出判断。

010.jpg

结果反馈

用户在完成表单填写,并提交后,需要及时给用户反馈,比如完成提交时的祝贺,谢谢等,都能催发用户体内的多巴胺,并产生愉悦的情绪,无论是祝贺还是提醒,用户都会产生快乐的情感。