一本正经地胡说八道：iMessage 会话气泡的魔鬼细节

2015-06-25 本文已影响209人 SuerB

图片来源：知乎

最近在研究聊天方面的东西，正好看到这个知乎上的问题，就顺便整理一下 iMessage 的一些细节。问题归纳如下：

为什么不同时间发出的信息会有不同间距？

为什么 iMessage 的气泡颜色从上至下会越来越深？

先说结论：

一切依从于内容，用简单的「间距」方式表达「时间」间隔，增强信息之间的关联度；

时间会让一切「褪色」；快速聚焦。

这是一个逆向推导的过程，Apple 设计师的真实想法我暂时不知道，但是推导的过程，即探索「为什么」的过程，其实也非常有趣。欢迎大家探讨。

这里只分析气泡的部分展示形态，不涉及到动效。

设备：iPhone 6
系统版本：iOS 9 beta 2
网络环境：WIFI + 4G，部分需进入飞行模式

气泡的间距

iMessage 的气泡间距

为了探究 iMessage 的间距规则，如上图所示，简单推导出以下几个参数（未必准确）：

点击发送按钮的时间：就是用户编辑完短信，点击发送按钮后，信息上屏的时间；
本地实际发出时间：信息上屏后，顶部 Navigation Bar 底部会有发送进度条，进度条走完并发出「嗖」一声代表实际发出信息。经实际测试，若在发送过程中进入飞行模式，这里会先读取点击发送按钮时间，待信息成功发出后，再更新实际发出时间；
间距：有「长间距」与「短间距」之分；
已送达状态：即对方设备接收到信息的状态。

注：

左滑即可拉出本地实际发出时间；

「已读」时间对探究间距无甚帮助，因此不作分析。

得出结论：若 2 条消息的本地实际发出时间相隔大于等于 1 分钟，则增大气泡之间的间距。并非根据对方实际接收时间（已送达）来判断。

为什么呢？

Apple 的《Human Interface Guidelines》在最开头就讲述了自 iOS 7 以来扁平化的初衷：

Defer to Content
Although crisp, beautiful UI and fluid motion are highlights of the iOS 7 experience, the user’s content is at its heart.

聊天界面里，核心内容就是「信息」，其他内容都需要让步，但是让步不等于放弃，而是巧妙地把时间戳隐藏起来。

隐藏时间戳后，缺少了「时间」这一辨识纬度，会增加用户的辨识内容的难度。用「间距」来暗示「时间差」简单且合理。

为什么是大于等于 1 分钟才增大间距？

这与用户的聊天行为有关。大家有没有试过，在围绕闲聊话题发表个人意见的时候，都是连环炮一样的发送「一句话信息」？这些密集的「碎片化信息」无需深思熟虑，因此通常都在极短时间内表达完毕，它们都是围绕某话题而展开的「同类信息」。

根据「接近法则」，就应该把「同类信息」紧挨在一起。

而那些经过深思熟虑或需要东拼西凑的内容，基本会超过 1 分钟时间，例如表白。

为什么只有 2 种间距？

多间距反而会增加辨识难度。线性地增加多种不同的间距，还不如直接平均地展示时间戳。

2 种间距，刚刚好。

iMessage 的气泡颜色

如上图所示，从上至下是由浅到深的过程，并且中间的线性渐变非常严谨。

藏在箱底的老照片，随着时光流逝，慢慢褪色。
—— 达尔文

iMessage 的气泡也一样，时间越久远（虽然只是一屏几百像素之隔），色彩就越淡。这正代表着 Jony Ive 的一贯态度——「True to the material」。

另外，心理学里关于知觉的「选择性」也有相关阐述：对比度越高，对人的知觉刺激越大，即越容易吸引注意力。由于人对页面的扫视一般是从左上到右下，这与聊天界面的时间顺序相悖，高对比度可以让用户在切换页面后更快速地聚焦到最新信息上。

以上都是一本正经的胡说八道，欢迎大家脑暴探讨。