Tob Design - 超实用B端及可视化产品设计师平台

1.表单域包含以下内容有：

2.文本输入框，数字输入框，密码输入框。邮箱/网址输入框

3.在Ant Design上，对输入框定义了三种尺寸大小(大、默认、小)，40px、32px、24px

结构上：左 右结构和上下结构和内部三种。

• 三种输入框的例子——（由标签的顶部居左局右三种方式决定）

注意事项

• 7±2法则的应用

  人在短时间内只能记住5～9个单位，即“7加减2”法则，这是大部分用户的极限，但设计不是要去挑战极限，而是要思考，还有一部分用户是远远达不到“7加减2”这个范畴，因此，在设计的时候，就需要降低用户的记忆门槛，采用更加适用的“2加减1”原则，当用户需要输入的字段多余三个的时候，就必须给表单留下标签，用来提示用户。

  • 像百度搜索框要注意的点。（2020-08-05）

体验类

下面这几个点是提升用户体验的设计点

1.1 输入限制的意义

• 例子

1.2 占位符

• 例子

1.3 有效的输入框+icon尺寸

• 例子

1.4 输入框长度

• 在表单内容较多的时候，我们可以给输入框的样式做变动，可以更清晰的给用户做目标视觉定位。
• 输入框焦点，对于输入框，当用户选中准备输入的时候，应当提供清晰的视觉定位，比如外输入框的样式的变动，或者闪动的光标。一般情况下，选择光标都默认存在，光标的大小取决于字体的大小，因此不用对光标进行二次设计。

1.5 超长文字情况

• 在表单当中，多行文字一般出现在两个地方，一是表单标签，二是行内信息。
• 输入框另外一种情况——行内信息

1.6 报错信息提醒

• 需要给用户一个明确的文案

1.7 帮助性信息提醒

• 例子