对于设计师来说，越是小的细节越值得注意。本文分析了在设计聊天界面时文字部分和图片部分中有哪些值得注意的细节，希望对设计师朋友们有所帮助。

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

那在和朋友聊天时，你有没有这样的疑问，为什么输入文字多少不同，气泡的展示也不同？为什么发送不同比例的图片，其缩略图的展示效果也不同？

作为设计师，搞懂界面背后的原理是很重要的。

本期我就从聊天界面中常见的文字部分、图片部分来分析，看看聊天界面在设计时需要注意哪些细节。

一、文字部分

聊天界面虽然不是每个APP都需要，但是随着APP社交化，现在APP上加入聊天界面是很常见的。

在聊天界面设计时，我发现很多人都不知道气泡框的最大宽度是如何定义的，在标注的时候很容易把气泡框的宽度标死。

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

这个比例是多少呢？

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

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

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

下面就以微信为例：

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