人人都是产品经理B端UI界面交互基础组件：会话框

_本文原题：B端UI界面交互基础组件：会话框
导语：在前一篇文章《B端UI界面交互基础组件-表单》中，一起学习了B端“表单”组件UI设计规范，其中包括“基础表单”、“全页表单”；并从表单组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述；今天我们继续介绍了B端“会话框”组件的交互规范。

本文插图
一、基础会话框 1. 需求场景
需要在当前页面进行信息提示。
需要在不影响当前页面布局内容的情况下，提供用户快速操作、配置的入口。
2. 内容布局
根据功能，会话框分为三个区域：标题栏、内容区域、操作按钮，布局如下：

本文插图
标题栏：会话框标题局左对齐，关闭按钮居右显示，会话图标根据会话框内容需要显示。

本文插图
内容区域：内容根据显示需要，向下自动扩展。
操作按钮区域：操作说明居左显示，操作按钮居右显示，推荐操作的按钮重点标注：

本文插图
注：

操作按钮说明主要用于操作按钮区出现多个按钮，需要对部分特定操作进行特别说明的情况；
推荐操作按钮需要分布在一组操作按钮的头或尾，避免出现在中间位置；

通用情况下，初始状态下会话窗口基于页面居中（水平、垂直）显示。
3. 交互行为
点击关闭按钮、取消按钮，将关闭会话窗口，如涉及复杂配置类窗口，为避免用户误操作，需要提供二次确认弹窗。
其他详细交互行为，请查看对应会话窗口。
二、提示信息会话框 1. 需求场景
根据用户的操作行为，进行相应信息提示。
仅做操作行为或操作结果提示、或者建议用户执行某一特定操作。
2. 内容与布局
区域分布与通用会话框相同。
标题栏中图标与提示标题，内容与提示信息强相关，图标需表意直观、标题文本需简单概要说明当前提示信息核心内容。
图标：

本文插图

提示：信息说明
提醒：用户操作可能受阻，需用户进行处理或者关注。
成功：操作成功
失败：操作失败
标题：成功与失败提示需使用：“操作 + 结果”方式呈现，例如：删除成功、更新失败、连接失败等。

内容区域高度须有最小高度限制（因内容区域内容过少，导致内容区域高度过小时，需限定内容区最小高度）。
内容区分为：提示内容（详情）、备注信息：
常规布局：

本文插图
展开详情：详情内容展开后，达到一定长度自动出现垂直滚动条。

本文插图
提示会话框一般建议只提供一个操作按钮，用于关闭会话框；如果因业务需要，需要通过操作按钮进行后续业务执行时，允许出现多个操作按钮。
推荐使用模式：
内容提示：仅提示用户，常用于帮助说明等场景