在后台设计，以及B端的设计中，经常涉及到大量的数据输入以及选择，以及编辑删除，在实际场景中这两种控件的使用，也有很多使用场景，基于所设计的项目，在这里和大家分享相关的总结。

输入框&选择器的基本形式

1.输入框

输入框，以及暗提示文字（占位文本）

2.选择器

文本框，以及暗提示文字、下拉icon（提示更多选型）、滑块（当选型较多的时候）。

其中暗提示文字向用户说明要输入的信息，避免用户在空白中输入

输入框&选择器的尺寸

尺寸的大小，主要指高度，宽度可根据场景自由变化。一般有大中小三种尺寸，我们可以根据项目场景选择，我们一般默认选用中的尺寸。我们以8px为模数进行变化，即：24px（小）、32px（中）、40px（大）

其中圆角大小全局采用4px，文字大小为14px（其中文字颜色根据交互太变化）。

输入框延展形式

1.前缀和后缀图标

这种常见与登录页面，图标说明了输入框的属性。

2.搜索框

几种常见的搜索形式

3.复合型输入框

复合型输入框常用选择框结合使用：在两种或三种数据相关联，例如在输入证件号的时候，我们会选择证件类型（身份证、护照等），然后输入相关号码；有固定后缀的时候，可以采用后缀内容固定，减少用户的输入操作。

4.文本域

输入框一般输入的文字较少，当需要输入长文本的时候我们采用文本域的形式。

5.选择框

选择框和输入框都有前缀图标的形式，选择框常见的为常规选择框和时间选择框。下拉选框常见的有：多选和层级选择。

交互形式

在交互形式中，一般有以下几种状态：默认状态、输入状态、输入成功、输入成功鼠标悬浮状态、禁用状态、错误提示状态。

在这里我们会定义好输入框颜色：默认颜色，错误提示的颜色、禁用填充色、高亮色。

文字状态主要为：正文、不可用状态、错误提示。

颜色详见之前的文，颜色部分：https://www.zcool.com.cn/article/ZOTE4Mzcy.html

1.默认状态

提示语言越详细（良好的默认值、结构化的格式、暗提示、输入提醒），将减少用户输入的错误。

2.输入状态

主要为提示文字转化为光标形式，输入框高亮显示。可清除的内容icon，可以快捷清除已输入的内容。

3.输入成功状态

文字样式的改变。

4.输入成功，鼠标悬浮状态

鼠标悬浮状态，可清除的内容icon，可以快捷清除已输入的内容，方便重新编辑。

5.禁用状态

不可输入或不可修改的选项，一般会用灰色背景，文字为不可用样式。

6.错误提示

输入框红色显示，并显示提示语。因为在大量数据输入的时候，数据在后台的及时校检，在用户输入数据就反馈，比全部输入完成，点击提交后再提示，返回从头到尾检查要好很多。 

关于标签(Lable)

标签(Lable)，我们经常会遇到要不要加标签的问题，以及标题名文字长度不一致的问题。以下是几种业务场景，自己处理的方式。

1.注册/登录

不加标签，会让整体的界面很干净，但是这是在输入选项3项左右的时候比较合适。

例如注册的场景，一般有账户名和密码两种选项，这种情况下，一般可以不加标题，同时不影响用户记忆内容。

用户在输入数据的时候，一般记忆有限，尤其在需要输入大量数据的时候，常常会需要检查和校检。在这种情况下，我们就需要添加输入选项的标题，以明确此输入框和选择器的输入内容类型。但是标签的字数确实很难保持一致的，因为我们一般会根据具体情况处理。

2.基础表单

这种适用于相对较少的表单输入的情况，这种情况一般是一行一个的上下排列，整体的视觉效果相对统一。

3.综合表单

这种适用于大量的数据，选择一行一列数据，会造成页面太长。这时候就需要一行展示多个数据。

根据人从上到小，从左到右的阅读顺序，当然选择一个方向展示数据会更有利于数据的展示，以及用户获取数据的直观和准确。

所以在我们展示数据的时候，我们一行的数据会造成页面过长，多列展示数据的时候，尽量展示相关性较强的数据。 

注意点：

1.留出适当的间距，显示错误提示语

2.一排展示多条数据的时候，展示相关性比较强的数据

3.根据用户的阅读顺序，尽量选择单向展示数据 

4.分步表单

将表单内容进行分步，可以将复杂信息分解，可以提高用户处理的专注度，降低页面的复杂性。

在实际场景中，需要综合使用，这里只是举例，更多的业务场景，需要设计师发动大脑，综合处理。

原创不易，且赞且珍惜！长得好看的人，都给我点赞了！