大家对聊天界面都比较熟悉，设计也比较简单，但是新人或者第一次设计聊天界面的同学经常会遇到问题，就是没有考虑到聊天泡泡框的适配，导致登陆效果参差不齐。本文主要和大家分享一下关于聊天泡泡盒子的常见问题。
以及相应的解决方案。
新手常见问题
通常我们知道聊天气泡框的宽度和高度会随着字数的变化而变化，但是在标注的时候很容易忽略这个前提，标注为固定大小或者不标注让技术来写，无论哪种情况都会导致后期频繁的沟通和调试。
增加开发时间，所以掌握正确的适配方法很重要。让我们用例子来看看主要问题。
1.文字气泡框直接标注具体尺寸
直接标注气泡盒的具体尺寸是一个常见的问题。这样一来，小屏手机的显示会不完整，大屏手机的显示会是空的，如下图。
以我之前做的医生问诊界面来说，我标注的时候直接把泡泡盒子标注成了520px的固定尺寸，最后发现iPhone5的泡泡盒子在我接受的时候已经超过屏幕了；但是iPhone8Plus上留白太多，导致各款机型显示效果不一。
2.不同比例图片，气泡缩略图均展示方图
发送图片时，会涉及到不同比例的图片。如果都用方块显示，多余的部分会被隐藏，如下图所示。
至于咨询医生的界面，我分别上传了横竖图。从图片上我们可以看到，最终的缩略图都是正方形的图片，缺点是不能最大限度的显示图片信息，占用屏幕空间。方图显示，对于1.0的小用户量版本是可以接受的。
但如果你的APP用户量大，聊天界面使用率高，就需要考虑用户体验了。
如何解决？
其实上面两个问题是我第一次做聊天界面的时候遇到的。通过搜索资料、比较各种平台、与技术专家交流、咨询设计前辈等方式。我终于解决了以上两个问题，总结出了相对落地的适配方案。
1.文字部分——采用百分比标注
由于气泡框的宽度随屏幕宽度而变化，所以百分比标注法可以很好的解决多器件下的不均匀问题。
计算方法：气泡盒最大宽度/屏幕宽度=70%。根据这个公式，我们还可以根据屏幕宽度得到一个更合适的气泡边框设计尺寸，如下图所示。
使用百分比标注后，在适配iPhone56401136和iPhone8Plus12422208时，不会出现显示不全或留白过多的问题。
注意：的百分比在设计的时候是不固定的，可以适当调整。比如你的app本身空格比较多，可以把这个值设为65%，然后取8的倍数。以7501334为设计基准，
泡泡盒子的最大宽度=750*70%=525px，最后8的倍数是520px。
2.图片部分——设置图片比例的阈值
聊天泡泡框一般有方形、横向和纵向的图片。为了最大限度地保存图片的长宽比风格，保证超长图片信息的可识别性，首先需要确定图片自适应规则，设置图片比例的阈值。
1）设置缩略图最大尺寸，以单边进行缩放这是目前体验较好的方案，可以满足各种尺度下画面信息的最大化显示。所以大家在设计的时候需要先确定缩略图大小范围。以请医生这个项目为例。
在2倍图下我将其设置为300px(该数值在保证展示效果下，一屏可展示更多的图片)，最后方图、横图、竖图的适配效果如下图所示。
设置好缩略图的尺寸后，图片如何适配呢？简单来说就是图片最长边适配到缩略图中，在将图片等比缩放即可。
2）设定图片适配的阈值比例在实际场景中，往往会遇到特殊比例图片（如超长图），将其适配之后就会发现图片所占面积极小，不仅展示效果不佳，同时识别性也极低，如下图所示。
因此在适配时我们还需要设置阈值，什么是阈值呢？阈的意思是界限，故阈值又叫临界值，也就是当图片当比例超过阈值时，其缩略图展示效果和阈值一致。考虑到图片的展示效果和识别性，我们将3:1作为阈值较为合适。
当图片比例小于等于3:1时，将图片等比缩放，最长边为缩略图的最大尺寸300px，如下图所示。
当图片比例大于3:1时，仍采用3:1缩略图的展示尺寸，多余部分进行隐藏，从而让图片更有阅读性。
以上就是利于阈值，设置缩略图最大尺寸，以单边进行缩放的方法，需要注意的是以上说的所有数值均是在2倍图下。
画重点
文字部分：在聊天界面中，文字气泡框适配最好采用百分比的方式进行标注，这样能保证各个机型展示效果统一，保证项目顺利落地。
图片部分：图片气泡框适配首先设置好缩略图的取值范围，为了最大化的保留图片长宽比样式，图片的适配我们采用设置两边长取值范围，以单边进行缩放，并设定好图片适配的阈值比例。
参考引文：
《聊天缩略图背后的故事：你不曾注意的那些细节》
聊天产品的设计策略—缩略图
图片来源：
海盐社（公众号）作者：风筝KK
