iMessage 会话气泡的魔鬼细节

图片来源:知乎

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

  1. 为什么不同时间发出的信息会有不同间距?
  2. 为什么 iMessage 的气泡颜色从上至下会越来越深?

先说结论:

  1. 一切依从于内容,用简单的「间距」方式表达「时间」间隔,增强信息之间的关联度;
  2. 时间会让一切「褪色」;快速聚焦。

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

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

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

气泡的间距

iMessage 的气泡间距

为了探究 iMessage 的间距规则,如上图所示,简单推导出以下几个参数(未必准确):

  1. 点击发送按钮的时间:就是用户编辑完短信,点击发送按钮后,信息上屏的时间;

  2. 本地实际发出时间:信息上屏后,顶部 Navigation Bar 底部会有发送进度条,进度条走完并发出「嗖」一声代表实际发出信息。经实际测试,若在发送过程中进入飞行模式,这里会先读取点击发送按钮时间,待信息成功发出后,再更新实际发出时间;

  3. 间距:有「长间距」与「短间距」之分;

  4. 已送达状态:即对方设备接收到信息的状态。

注:

  • 左滑即可拉出本地实际发出时间
  • 「已读」时间对探究间距无甚帮助,因此不作分析。

得出结论:若 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」。

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

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

许可君.Suer wechat
本文同步更新至我的公众号与知乎专栏