数码|B端UI交互界面基础组件——输入框 |组件|界面|

编辑导语：我们在很多平台都会用到输入框这个功能，输入框设计的好与坏对用户的体验关联非常大；遇到过一些输入框，句子过长就隐藏了后面的内容，让用户根本没办法一目了然，也不好修改；本文作者详细介绍了B端UI交互界面基础组件的输入框，我们一起来看一下。

本文插图

一、前言
在前一篇文章《B端UI界面交互基础组件-下拉菜单》中，一起学习了B端“下拉菜单”组件UI设计规范，其中包括常规菜单、多级菜单；并从“下拉菜单”组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述。
今天，作者又为我们介绍了B端“输入框”组件的交互规范，由于输入框内容比较多，规范比较细，我们分为上下两部分进行学习。
二、单行文本输入框
1. 需求场景

提供用户无段落输入的操作区域。
用户可能对部分输入项有疑惑，需要进行解释说明。
输入项规则比较复杂需要提供操作说明。
对于用户的误操作，需要提供合法性检测并且能够及时反馈。

1）内容布局
按照功能分为：文本输入、辅助信息、备注信息、数据关联提醒文本。

本文插图

2）输入框文本标签居右对齐，标签左侧为是否为必填项标注。
非必填项：
必填项：

本文插图

3）在输入框宽度允许时，可提供水印文本，用于提示允许用户输入的内容。
4）备注说明、操作数据提醒与文本输入框换行显示。

本文插图

5）操作数据提醒文本可能因输入特定数据变化而发生变化。
6）备注文本，操作数据提醒文本宽度可能会大于文本输入框宽度。

本文插图

7）当文本输入框不可用时，需要从视觉上进行区分：
正常状态：
不可用状态：
【数码|B端UI交互界面基础组件——输入框】8）在进行前台数据格式合法性检测时，需要提示校验结果：
数据格式合法：
数据格式不合法（显示边框提醒效果）：
9）在有后台有效性检查时，提供有效性检查状态标示示意，如校验中、正确、错误、异常；值得注意的是在输入框初始状态下，不需要显示数据有效性检测的标注。
初始状态：
后台校验中：
这种情况涉及等待时间较长的合法性校验，如名称是否重复，数据是否存在合法性校验。

后台校验结果正确：
后台校验结果错误：
后台校验结果异常，需要出现异常图标提示用户：
10）文本输入框获取焦点时应当有焦点获取样式：
11）涉及合法性校验的数据需要提供悬浮框，用来提示用户该输入框的输入规则。
合法性检查提示文本默认悬浮显示在输入框右侧，与文本输入框垂直居中对齐：