B端UI界面交互基础组件:会话框

0 评论 3531 浏览 22 收藏 11 分钟

导语:在前一篇文章《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 协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!