关于表单的交互

2018-06-12  本文已影响40人  adaliang

手机键盘

根据输入内容类型选择不同的键盘,如输入手机号,输入框获取焦点后,数字键盘自动弹出。

联动键盘。简单来说,是将同类型字段整合输入,减少用户点击,使用联动式组件。

正在输入中,键盘可显示提示文字。

自动切换大小写。英文输入中适用。

提供缺省值

从系统中获取信息,减少用户输入,如地点、时间等。

提供以前输入过的内容。

提供大部分用户会使用的选项或内容。

提供热门内容。

提示标签

① 顶部对齐。适用于水平空间有限的情况。

优点:和输入框联系非常紧密,从上至下的视觉路径清晰流畅,填写效率很高。

缺点:大量占用垂直空间,不适用于输入框较多的表单。

② 右对齐。适用于垂直空间有限的情况并且需要用户快速填写的情况。

优点:和输入框联系较为紧密,并且减少占用垂直空间。

缺点:标签可读性不强,降低快速浏览完表单的效率。

③ 左对齐。适用于垂直空间有限并且需要用户谨慎填写的情况。

优点:标签可读性强,并且减少占用垂直空间。

缺点:和输入框联系不紧密,增加用户填写表单的时间。

④ 输入框内对齐。适用于水平和垂直空间有限的情况。

优点:与输入框联系紧密,并且减少占用水平和垂直空间。

缺点:标签随输入内容而消失,复核表单信息较困难。

⑤ 悬浮标签。结合了顶部对齐和输入框内对齐的情况。

优点:和输入框联系最紧密,填写效率最高,并且减少占用水平和垂直空间。

缺点:稍微占用了垂直空间,标签字号太小容易造成可读性问题,不过缺点不是很明显。

说明需要填什么内容。

自动补全,关联词,

如自动补全邮箱后缀。

关联词,如搜索“设计”,提供”交互”“UE”等选项。

输入验证

及时反馈

颜色指示

如果用户在处于已验证正确的字段(即先前输入的数据是有效的)中输入数据,则在数据输入后验证。

如果用户在处于已验证错误的字段(即以前输入的数据无效)中输入数据,则在数据输入过程中进行验证。

字符限制

当用户输入超过限制的字符时,还应该红色标记用户输入的字符数和限制字符数

输入内容显示格式

如电话号码,xxx xxxx xxxx的格式更容易阅读。

不要强制用户按一定的格式填写内容,如日期2018.3.3,或2018-03-03。程序应该可以辨别并保存为统一格式。

状态

默认,悬停,焦点,错误,成功和禁用

上一个输入完成,可自动跳转到下一个输入框。

区分选填项和必填项。

“必填”,*(有说明)

使用选择框代替输入。如日期、地区输入。

输入掩码

对话式表单

分步骤

动效

上一篇 下一篇

猜你喜欢

热点阅读