火星网校
B端UI界面交互基础组件——输入框(下)
发布时间：2024-01-18 09:25:06 浏览量：165次
编辑导语：文本输入在日常中随处可见，在上篇文章中作者讲了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）点击下拉文本框外部区域时，隐藏下拉菜单。
3）点击下拉选择项时，文本框需显示对应选择项数据，并隐藏下拉菜单：
4）已禁用选择项不允许选中。
5）已选中选择项，因外部原因导致该选择项不可用，则自动将对应选择项状态清除，并将选择文本框中内容置换为未选择任何数据。
6）当点击下拉菜单数据更新按钮，数据获取过程中，更新按钮变更为“刷新中”状态图标，不支持点击：
7）当数据更新出现异常时，“刷新中”变更为异常状态图标，数据获取异常时，不更新下拉选择菜单数据：
8）支持点击异常状态图标，再次刷新数据：
9）当数据成功更新后，自动刷新下拉选择项列表，如更新的数据中无当前已选择的数据，则将选择文本框中内容置换为未选择任何数据的状态：
更新数据中有当前已选择数据：
更新数据中无当前已选择数据：
四、总结
关于B端基础交互组件“输入框（下）”的相关分享就到这里，下一章我们介绍“翻页控制”包括常规翻页、简单翻页、极简翻页的相关交互规范。
本文由 @云计算产品汪 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 unsplash，基于 CC0 协议
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
