火星网校
B端UI界面交互基础组件:会话框
发布时间：2024-01-18 14:13:32 浏览量：135次
导语：在前一篇文章《B端UI界面交互基础组件-表单》中，一起学习了B端“表单”组件UI设计规范，其中包括“基础表单”、“全页表单”；并从表单组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述；今天我们继续介绍了B端“会话框”组件的交互规范。
一、基础会话框
1. 需求场景
需要在当前页面进行信息提示。
需要在不影响当前页面布局内容的情况下，提供用户快速操作、配置的入口。
2. 内容布局
根据功能，会话框分为三个区域：标题栏、内容区域、操作按钮，布局如下：
标题栏：会话框标题局左对齐，关闭按钮居右显示，会话图标根据会话框内容需要显示。
内容区域：内容根据显示需要，向下自动扩展。
操作按钮区域：操作说明居左显示，操作按钮居右显示，推荐操作的按钮重点标注：
注：
- 操作按钮说明主要用于操作按钮区出现多个按钮，需要对部分特定操作进行特别说明的情况；
- 推荐操作按钮需要分布在一组操作按钮的头或尾，避免出现在中间位置；
通用情况下，初始状态下会话窗口基于页面居中（水平、垂直）显示。
3. 交互行为
点击关闭按钮、取消按钮，将关闭会话窗口，如涉及复杂配置类窗口，为避免用户误操作，需要提供二次确认弹窗。
其他详细交互行为，请查看对应会话窗口。
二、提示信息会话框
1. 需求场景
根据用户的操作行为，进行相应信息提示。
仅做操作行为或操作结果提示、或者建议用户执行某一特定操作。
2. 内容与布局
区域分布与通用会话框相同。
标题栏中图标与提示标题，内容与提示信息强相关，图标需表意直观、标题文本需简单概要说明当前提示信息核心内容。
图标：
- 提示：信息说明
- 提醒：用户操作可能受阻，需用户进行处理或者关注。
- 成功：操作成功
- 失败：操作失败
- 标题：成功与失败提示需使用：“操作 + 结果”方式呈现，例如：删除成功、更新失败、连接失败等。
内容区域高度须有最小高度限制（因内容区域内容过少，导致内容区域高度过小时，需限定内容区最小高度）。
内容区分为：提示内容（详情）、备注信息：
常规布局：
展开详情：详情内容展开后，达到一定长度自动出现垂直滚动条。
提示会话框一般建议只提供一个操作按钮，用于关闭会话框；如果因业务需要，需要通过操作按钮进行后续业务执行时，允许出现多个操作按钮。
推荐使用模式：
内容提示：仅提示用户，常用于帮助说明等场景
提醒：操作前置条件不满足，推荐用户进行必要操作：
成功：用于提示单项操作结果：
单项操作失败：用于提示单项操作结果：操作对象一般使用ID表达并重点标注，默认显示24个字符（中文占2个字符），字符超过24个字符时显示前19个字符“…”链接后2个字符。
对象名称未超长：
对象名称已超长：
鼠标移入对象使用Tips全文显示：
注：
- 详情信息一般在普通用户（无法解决问题能力的用户不予显示）；
- 详情信息展开高度需要有最大高度限制，超过一定限度后续限制高度，并出现滚动条；
批量操作有异常：用于提示批量操作结果有部分失败或异常：
操作按钮定义以具备简要、明确的短语定义。
3. 交互行为
交互行为与通用会话框保持一致。
三、行为确认会话框
1. 需求场景
根据用户的操作行为，进行相应信息提示。
根据用户操作确认的入口，避免误操作。
2. 内容与布局
区域分布与通用会话框相同。
行为确认会话框根据行为影响范围进行分类。
提示类二次确认：一般性操作，误操作无较大影响，行为可逆。
警告类：在业务上会造成一定风险，需要用户进行信息内容阅读确认后，再操作。
安全验证：在业务上会造成较大危险，如有可能会导致业务瘫痪或终止，需要通过保障级别较高的操作验证行为进行安全保障，如输入手机验证码等方式。
3. 交互行为
警告类与安全类验证，信息确认框，操作确认按钮需前置操作如验证码，密码输入经过格式合法性校验通过后才能启用。
仅有两次确认复选框：
仅有文本验证输入框：
操作再次确认与文本输入框组合：
其他交互行为与通用会话框保持一致。
四、配置会话框
1. 需求场景
用户进行日常操作时，需要进行快速配置。
配置完成后，可以继续驻留在配置操作发起时相应界面。
配置相对较少。
2. 内容与布局
区域分布与通用会话框相同：
标题栏无会话框图标，内容如下：
内容区布局：
配置表单内部布局参考基础表单布局格式。
3. 交互行为
交互整体行为与基础会话框保持一致。
配置表单与会话框操作按钮关联关系与常规表单操作按钮关系一致。
配置成功，刷新源目标页面。
五、总结
关于B端基础交互组件“会话框”的相关分享就到这里，下一章我们介绍“B端UI交互里的系统性交互行为”包括“操作反馈”、“表格相关”、“分组配置”的相关交互规范。
本文由 @云计算产品汪 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 unsplash，基于 CC0 协议
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
