# 聊天气泡

来源快照：`result_data_new_260518.json`

- 来源 ID：`1201360021223530511`
- 模块：工作消息
- 目录：员工操作指南 - 更多功能
- space ID：`1159418347111063584`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## **一、功能背景**

1、千篇一律的聊天界面容易让用户产生视觉疲劳，添加气泡颜色可以使聊天界面更加生动、活泼，为用户带来全新的视觉感受，从而增加用户使用应用的频率和时长。 

2、用户能够根据自己的喜好来选择气泡颜色，使得聊天过程更加有趣

## **二、功能价值**

1、用户体验方面，满足了个人对发送消息的个性化需求 

2、高对比度的聊天气泡颜色，可以满足特殊人群的无障碍阅读

## **三、功能概述**

1、各端在消息设置中添加气泡设置页面，通过颜色选择器进行辅助选择； 

2、颜色气泡保存在个人偏好设置中，其他端使用时同步获取设置，形成多端气泡同步； 

3、针对不同的消息类型进行区分处理，比如卡片类的，不添加气泡颜色；

## **四、业务流程图**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361589133688837&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361631880208387&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)  

## **五、功能详细说明**

### **5.1 前台使用-pc端**

默认是开启状态

pc客户端 

在会话列表上方，点击【更多】-【偏好设置】-【消息】-【消息聊天气泡颜色】中设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361683616948228&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361722244120583&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

pc 客户端

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361821037584390&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361876844339202&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D) pc web端

设置后发送的消息展示效果如下 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201361984061792259&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### **5.2 前台使用-移动端**

移动端在底部栏【我】-【设置】-【消息设置】-【气泡设置】中进行设置

气泡设置界面：主要由颜色选择 和 内置的几个气泡颜色组成 通过颜色选择器选择的气泡颜色范围更宽广，通过底部内置可以快速选择喜欢颜色； 选择浅色气泡，承载字体默认为黑色； 选择深色奇葩，承载字体默认为白色； 如图，浅色/深色对比

浅色： 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201362039960821762&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201362095814000640&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

深色： 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201362211876954121&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201362289012031496&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

设置后聊天界面显示

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201362422207176711&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1201362482451505158&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### **5.3 生效规则：**

设置成功后，pc（web、客户端）立即生效；app端杀进程重新进入生效； 

仅针对设置后的消息生效，历史消息不追溯

后台无相关设置，基于个人个性化设置

## **注意点**

避免设置过重颜色，影响文字或其他查看阻碍

## **常见问题**

暂无

作者：泛微帮助中心——IM消息模块
