iMessage 中信息氣泡「顏色漸變」和「氣泡間的距離」變化是出於什麼樣的設計理念？

01-14

有兩處問題：
1. 我發從出的氣泡顏色會有漸變處理，越下方的顏色越深；
2. 在短時間內發出的信息氣泡會上下會挨的比較緊湊，時間跨度長的相對較遠。

最近在研究聊天方面的東西，正好在知乎看到這個問題，就順便整理一下 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」。

另外，心理學裡關於知覺的「選擇性」也有相關闡述：對比度越高，對人的知覺刺激越大，即越容易吸引注意力。由於人對頁面的掃視一般是從左上到右下，這與聊天界面的時間順序相悖，高對比度可以讓用戶在切換頁面後更快速地聚焦到最新信息上。

以上都是一本正經的胡說八道，歡迎大家腦暴探討。

iOS7 / 8 Message App 的小細節還是很有意思的，我在這具體分析下題主提的這兩點。

第二點比較容易解釋，我先回答第二點：

『在短時間內發出的信息氣泡上下會挨的比較緊湊，時間跨度長的相對較遠』

如《寫給大家看的設計書》中提到，設計中有個「親密性原則」。也就是說，設計師們在進行設計的時候，關聯性越大的項會讓它們越靠近。在這兒，就是發送間隔越短的信息越靠近。這在一定程度上「整理」了你所發的信息，讓它們不至於都堆擠在一起。還能令你在回看的時候閱讀更有節奏。

（具體可以參考 @許可君的回答）

解決了第二點，再回來談第一點：

『我發出的氣泡顏色會有漸變，越下方的顏色越深』

這種漸變處理其實有著更深層次的原因，是存在於整個系統的。我從小往大講，首先請大家看下 Message 圖標的漸變。

可以發現圖標的漸變也是上淺下深，這樣 Message 界面里的氣泡就做到了和圖標在視覺上的統一。我放張普通信息的綠色氣泡，可能更能體現這種統一的感覺。

那麼為什麼要放這麼個漸變呢，如果都是純色不好嗎？

我猜測有幾個原因：1.與系統統一（如圖標漸變）；2.與對方的灰色氣泡產生更明顯的區別；3.就是這麼騷。

哈哈，好了，把話說回來：為什麼我說「這種上淺下深的漸變處理其實有著更深層次的原因」呢？

iOS 系統界面中隱藏著一個我們習以為常的現象，「光是從上照下來的」。很抱歉我也不知道這方面更具體的設計原理或術語，只能這麼和大家先描述。具體來看就是這樣的感覺：

因為光是從上面照射下來，所以單純的顏色會被照射成上淺下深的顏色。

而在iOS中，這種由上而下的光照效果存在與很多地方。

Game Center 里氣泡的高光，反映了頂部的光源。

設置開關按鈕和控制台上的滑塊的陰影，都是從上往下投影的，也反映了從上往下的光照方向。所以，從系統整體來看，氣泡的上淺下深漸變顯得非常合理了。

突出的設計理念叫做隱喻。意思就是通過一些不易察覺的設計元素(比如間距，線條，顏色，尺寸等)，來傳遞出正確和合理的意義。舉個簡單的例子。

這是兩段文字，用戶並不了解他們的相互關係。

在兩段文字前加上欄位，用戶識別出來，這是一篇短文，第一行是標題，後面的是正文。

稍微變化一下字體的大小和間距，無需兩段文字前的欄位，用戶即可分辨出第一行文字即是標題。第二行是正文。而這種方式，就叫做隱喻設計。

回到簡訊界面：

1.人的視覺天然是習慣從上至下而閱讀的，通過顏色逐漸加深，能夠引導用戶視線焦點從上至下瀏覽並最終定位在底部。因為底部是最近的一條簡訊，他對用戶的重要性比較早前的簡訊更加重要。

2.通過降低氣泡間距，讓用戶識別出，這是短時間內發送的一組信息。（順便也想想微信和QQ又是怎麼做的？）