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

编辑导语：文本输入在日常中随处可见，在上篇文章中作者讲了B端“输入框”组件UI设计规范；本篇文章作者分享了关于B端“多行文本”、“下拉菜单”组件的交互规范，我们一起来学习一下。

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

为用户提供进行长文本内容输入的操作区域。
用户可能会对部分输入项有疑惑，需要相关的解释说明。
部分数据项与其他输入项的前后关系，或者输入数据规则比较复杂，需要提供操作指导。
为避免用户进行误操作，需要提供合法性检查规则，并及时反馈。

2. 内容布局1）根据功能需要，输入框分为三个区域：文本输入、辅助信息、备注信息、数据关联提醒文本；布局如下：

本文插图
2）其他诸如标签与输入框左右布局、上下布局以及辅助信息放置位置等内容形态参见单行文本。
3. 交互行为
交互行为与单行文本输入框保持一致。
三、下拉选择
1. 需求场景
提供固定的值给用户进行数据选择。
2. 内容布局
1）根据功能需要，下拉菜单：标签、下拉菜单文本框、辅助信息、备注信息、数据关联提醒文本；布局如下：

本文插图
2）初始状态下，当下拉菜单有默认数据选中时，显示默认数据，无默认数据选中时，显示水印文本：
有默认数据选中：

本文插图
无默认数据选中：

本文插图
3）当点击刷新菜单列表时，如果回去数据出现异常时，显示异常状态图标：

本文插图
4）当下拉框合法性验证未通过时：

本文插图
5）下拉框菜单内容需要根据实际业务进行设计：
常规下拉选择框：

本文插图
已选中项标注已选中状态：
带补充信息的下拉选择框：

本文插图
6）下拉菜单选择项允许因业务需要对部分选择项进行禁用，并显示禁用的效果：

本文插图
7）下拉文本框不可用时，显示不可用状态：
3. 交互行为
1）点击下拉选择文本框，显示下拉选择菜单：

本文插图
2）点击下拉文本框外部区域时，隐藏下拉菜单。