App设计体系之表单

表单有三个基本组成部分： 表单标签、表单域、 表单按钮。

1、表单标签

根据标签所处位置可以分为左标签、顶部标签和行内标签。

1.1 左标签

a 标签对齐

文字对齐有两种格式：左对齐、右对齐；右对齐的“跳跃性”太大，并不适合移动端。

b 标签字数

标签字数需要限制，字数过多会影响表单区的输入范围，也会增加对标签含义的理解负担，尽量限制在6个字数以内。

1.2 顶部标签

与左标签相比，顶部标签可以给输入框腾出足够的空间，也正因如此，在界面中占的面积也更大。

同一个表单中会有很多的输入项，可以通过空间和样式的差异来凸显重要项。

1.3 行内标签

传统的行内标签只有表单域，极大地节省了界面空间。

输入了内容，暗提示不再显示，当表单内容过多，没有暗提示显然不行，那么可以加上文字或图标。

2、表单域

表单域包含了文本框、密码框、单选复选和下拉选择框等，概括为输入项与选择项。

2.1 对齐方式

当表单域更多的是需要填写(输入项)时，选择使用左对齐；当表单域更多的是需要选择(选择项项)时，选择使用右对齐；不管采用哪种方式，都要确保App中表单域对齐方式一致。

2.2 暗提示

暗提示的作用是辅助用户填写表单，起到提示作用，切勿喧宾夺主，确保文案言简意赅，表现形式不干扰用户，色彩过于突出或过浅都不适合用于暗提示的视觉表现。

2.3 错误提示

用户提交填写好的表单，需要对表单内容进行校验是否有误，报错方式有以下4种：文字提示、背景提示、Toast提示、对话框提示。

3 表单按钮

表单中的按钮位置有三种：固定在界面下方、跟随内容、导航栏右上角。

当表单内的内容无需全部填写选择，选择固定在界面下方；

当表单内容少或内容多且内容大多是要填写选择的，选择跟随内容；

当表单内容是以输入框为主，选择放在导航右上角。

当表单内容全部是选择项，则不需要确定按钮，更改选择后实时保存。