编辑导语:文本输入在日常中随处可见,在上篇文章中作者讲了B端“输入框”组件UI设计规范;本篇文章作者分享了关于B端“多行文本”、“下拉菜单”组件的交互规范,我们一起来学习一下。
![1df15f7080b9c9ac4e96b7bdb8738f89.png](https://img-blog.csdnimg.cn/img_convert/1df15f7080b9c9ac4e96b7bdb8738f89.png)
一、前言
在前一篇文章《B端UI界面交互基础组件-输入框(上)》中,一起学习了B端“输入框”组件UI设计规范,其中包括单行文本;并从“单行文本”组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述。
今天我们继续介绍了B端“多行文本”、“下拉菜单”组件的交互规范。
二、多行文本
1. 需求场景
- 为用户提供进行长文本内容输入的操作区域。
- 用户可能会对部分输入项有疑惑,需要相关的解释说明。
- 部分数据项与其他输入项的前后关系,或者输入数据规则比较复杂,需要提供操作指导。
- 为避免用户进行误操作,需要提供合法性检查规则,并及时反馈。
2. 内容布局
1)根据功能需要,输入框分为三个区域:文本输入、辅助信息、备注信息、数据关联提醒文本;布局如下:
![b558bf47e86c89eadcc8c164bde52236.png](https://img-blog.csdnimg.cn/img_convert/b558bf47e86c89eadcc8c164bde52236.png)
2)其他诸如标签与输入框左右布局、上下布局以及辅助信息放置位置等内容形态参见单行文本。
3. 交互行为
交互行为与单行文本输入框保持一致。
三、下拉选择
1. 需求场景
提供固定的值给用户进行数据选择。
2. 内容布局
1)根据功能需要,下拉菜单:标签、下拉菜单文本框、辅助信息、备注信息、数据关联提醒文本;布局如下:
![794cfe4b9bcfc0d9ed2ee4355eabcc37.png](https://img-blog.csdnimg.cn/img_convert/794cfe4b9bcfc0d9ed2ee4355eabcc37.png)
2)初始状态下,当下拉菜单有默认数据选中时,显示默认数据,无默认数据选中时,显示水印文本:
有默认数据选中:
![8fd3c44aefc0d51de74a4566d3bf31a3.png](https://img-blog.csdnimg.cn/img_convert/8fd3c44aefc0d51de74a4566d3bf31a3.png)
无默认数据选中:
![70f790041980795aca26ccf9dda4a6c9.png](https://img-blog.csdnimg.cn/img_convert/70f790041980795aca26ccf9dda4a6c9.png)
3)当点击刷新菜单列表时,如果回去数据出现异常时,显示异常状态图标:
![b61113c021bbf16ba7279c55bbb26bcb.png](https://img-blog.csdnimg.cn/img_convert/b61113c021bbf16ba7279c55bbb26bcb.png)
4)当下拉框合法性验证未通过时:
![7810eeffd16502fa1b74b6d1c50a14b9.png](https://img-blog.csdnimg.cn/img_convert/7810eeffd16502fa1b74b6d1c50a14b9.png)
5)下拉框菜单内容需要根据实际业务进行设计:
常规下拉选择框:
![29904d192af483212461b6c38c39cbec.png](https://img-blog.csdnimg.cn/img_convert/29904d192af483212461b6c38c39cbec.png)
已选中项标注已选中状态:
带补充信息的下拉选择框:
![cb921925f41e5afef665e8ce72529c49.png](https://img-blog.csdnimg.cn/img_convert/cb921925f41e5afef665e8ce72529c49.png)
6)下拉菜单选择项允许因业务需要对部分选择项进行禁用,并显示禁用的效果:
![7fa82fb735d01cac05e3b285cb21613a.png](https://img-blog.csdnimg.cn/img_convert/7fa82fb735d01cac05e3b285cb21613a.png)
7)下拉文本框不可用时,显示不可用状态:
3. 交互行为
1)点击下拉选择文本框,显示下拉选择菜单:
![06ccaf604048d153d4029ec067075060.png](https://img-blog.csdnimg.cn/img_convert/06ccaf604048d153d4029ec067075060.png)
2)点击下拉文本框外部区域时,隐藏下拉菜单。
3)点击下拉选择项时,文本框需显示对应选择项数据,并隐藏下拉菜单:
![c3bd63d89d9ff0f371dfeb193f405a68.png](https://img-blog.csdnimg.cn/img_convert/c3bd63d89d9ff0f371dfeb193f405a68.png)
4)已禁用选择项不允许选中。
5)已选中选择项,因外部原因导致该选择项不可用,则自动将对应选择项状态清除,并将选择文本框中内容置换为未选择任何数据。
6)当点击下拉菜单数据更新按钮,数据获取过程中,更新按钮变更为“刷新中”状态图标,不支持点击:
![47490806dec70bf73f35109f651e9261.png](https://img-blog.csdnimg.cn/img_convert/47490806dec70bf73f35109f651e9261.png)
7)当数据更新出现异常时,“刷新中”变更为异常状态图标,数据获取异常时,不更新下拉选择菜单数据:
8)支持点击异常状态图标,再次刷新数据:
![282d1aa4199ed7528a49fb7a07d41bf1.png](https://img-blog.csdnimg.cn/img_convert/282d1aa4199ed7528a49fb7a07d41bf1.png)
9)当数据成功更新后,自动刷新下拉选择项列表,如更新的数据中无当前已选择的数据,则将选择文本框中内容置换为未选择任何数据的状态:
更新数据中有当前已选择数据:
更新数据中无当前已选择数据:
四、总结
关于B端基础交互组件“输入框(下)”的相关分享就到这里,下一章我们介绍“翻页控制”包括常规翻页、简单翻页、极简翻页的相关交互规范。
本文由 @云计算产品汪 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 unsplash,基于 CC0 协议