有关聊天气泡框，80%的人都不知道这些……
2018/10/29 人人都是产品经理

    

     作者：风筝KK，公众号：海盐社

     全文共 2069 字，阅读需要 5 分钟

     ———— / BEGIN / ————

     聊天气泡我们很熟悉，每天都要和他打交道。早上醒来第一件事你是不是打开微信看看呢？

     那在和朋友聊天时，你有没有这样的疑问：

     那应该如何标注呢？

     其实聊天气泡框我们很容易看出来有两个变量即a(气泡框)和b(空白间距)，当页面中有两个变量时我们就不能用常规的方法进行标注，而是采用百分比的形式才较为合理。

     这个比例是多少呢？

     通过总结得出：a/屏幕宽度=70%最为适宜。

    

     有小伙伴可能要问：这个70%的数值怎么得来的？

     这个主要是界面的一个实际效果决定的，除了这个数值比较接近黄金比例外，它同时能够最大化展示我们的文本信息。

     下面就以微信为例：

     我分别对比了750px和640px分辨率下是不是适合这样一个规律。

    

     由上图可以看到：微信750和640这两种分辨率气泡框最大宽度都是屏幕总宽度的70%。

     以上数值都是自己推理而来，因此有小伙伴觉得有问题的地方，还欢迎指出。

     这里我想说的是如果我们不是做专门的社交类APP，只是平时工作中使用，那么掌握这些方法后能够让我们的项目落地即可。

     从上图可以看出：

     将图片分别发送到聊天界面，将图片分别发送到聊天界面，得到如下效果，我分别对图片进行1到5的排序，方便解说：

    

     通过研究微信的阈值是3:1的图片比例。

     也就是说当图片比例小于3:1时，宽度固定、高度等比缩放；当图片比例大于3:1时，图片的宽度和高度都保持一致，并都以3:1的缩略图尺寸展示，多于部分隐藏。

     从上图可以发现：我上传的前三张图片的宽度随图片比例变化始终保持一致即270px，而图片高度随高度进行等比缩放正好应证了这一结论。

     在看第4张和第5张图片，我分别上传的是3:1和4:1的比例，但是其缩略图的展示宽高一致，这就是图片大于3:1这个阈值时，图片的宽高以3:1的为准保持一致，图片超出的图片截断不显示。

     3. 竖图

     竖图缩略图的展示规则和横图类似，其阈值也是3:1，同样为了更好的理解，我还是以微信为例。

     同样继续做了5组测试图，分别是4:3、16:9、2:1、3:1、4:1不同图片的比例。

     如下图用于接下来的测试：

    

     将图片分别发送到聊天界面，得到如下效果，我分别对图片进行1到5的排序，方便解说：

    

     同样，图片为竖图时，图片比例以3:1为阈值，图片比例小于3:1时，高度固定、宽度等比缩放；当图片比例大于3:1时，图片的宽度和高度都保持一致，并都以3:1的缩略图尺寸展示，多于部分隐藏。

     从上图可以发现：1、2、3张图片的高度随图片比例变化始终保持一致即270px，而图片宽度不同(图片宽度由图片等比缩放而来)。

     在看第4张和第5张图片，我分别上传的是3:1和4:1的比例，但是其缩略图的展示宽高一致。

     通过上面的解说，想必大家也了解了什么是阈值，以及在做类似社交页面图片适配时该如何使用。

     2. 图片部分

     在做图片部分时，需要先设定阈值，然后我们在根据阈值进行方图、横图、竖图的适配工作。

     参考链接：

     聊天缩略图背后的故事：你不曾注意的那些细节

     http://www.woshipm.com/pd/597974.html

     ———— / END / ————

    

     点击“阅读原文”下载APP

    http://weixin.100md.com
返回 人人都是产品经理 返回首页 返回百拇医药