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

图片来源:知乎
图片来源:知乎

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

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

先说结论:

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

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

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

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

气泡的间距

iMessage 的气泡间距
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 的气泡颜色

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容