聊天縮略圖背后的故事你不曾細致的那些細節

這里我們重要討論聊天列表中展示的縮略圖，縮略圖通常是將圖片內容進(jìn)行肯定的縮小顯現，或裁剪顯現，重要有兩個(gè)目的，一是提供肯定的預覽功能，二是節省屏幕展示空間、節省流量。

用戶(hù)發(fā)送的圖片長(cháng)短不一，有正方形的，有豎長(cháng)形的，有橫寬型的，甚至有不規則形的(比如一些用戶(hù)保持的 png 表情)如何設計一個(gè)合理的縮略圖展示規則能最大可能的知足展示需求，又讓整個(gè)聊天列表劃一美觀(guān)呢?

首先我們來(lái)看看我們想在聊天中提供的體驗：

• 單個(gè)圖片更多的圖片內容信息展示
• 多張圖片更好的欣賞定位找尋
• 同時(shí)發(fā)送多張圖片更高效的展示

假如我們盼望盡可能保留圖片的長(cháng)寬比樣式，在聊天列表中錯落有致地展示，則我們必要對橫向和縱向圖片的長(cháng)和寬都做響應的閾值限定。

在 Facebook Messenger 的例子中，我們發(fā)送了以下一組測試圖片：

有常見(jiàn)照片的 4：3 比例，也有常見(jiàn)截圖的 16：9 比例，還有 21：9 如許超長(cháng)/超寬圖片。

裁切閾值方面：我們發(fā)現，對于豎向圖，Facebook Messenger 設定了一個(gè)比例的閾值，長(cháng)圖超出 5：3 比例會(huì )被裁切、寬圖超過(guò) 1：2 會(huì )被裁切。未超過(guò)這個(gè)比例值，圖片的內容將被完備縮放。

展示尺寸方面，我們發(fā)現：

• 對于豎向圖：高度固定為 300pt，寬度是根據圖片比例動(dòng)態(tài)轉變的。
• 對于橫向圖：寬度是固定為 264pt，高度是根據圖片比例動(dòng)態(tài)轉變的。

這種方案，最大地兼顧了圖片原始比例和圖片內容。

限制寬和高的策略也在微信縮略圖規則中表現：

與 Messenger 不同之處在于：：

微信的裁切比例閾值設定更寬松一點(diǎn)，21：9 的比例都未被裁切，這會(huì )照顧到更多的圖片比例，除非是超長(cháng)、超寬，其他都能在微信中展示完備圖片信息，完備縮放。

Messenger 將高度和寬度分別設定，而微信簡(jiǎn)化了寬和高的閾值設定，以正方形作為基準，去限制高度和寬度，不去考慮是橫向圖照舊縱向圖，換一種說(shuō)法，即： 比例較大的邊等于正方形的邊，這意味著(zhù)你在微信中能產(chǎn)生最大表現面積的是正方形圖片，并且無(wú)需為正方形做特別判斷，Messenger 則必要將正方形視作橫向圖片的寬度規則，瑕玷是，正方形展示成了最大面積，其他比例圖片都較小，好像「有失公平」。微信設定的高度和寬度閾值較 Messenger 來(lái)說(shuō)小許多，如許在一屏幕中可以展示更多的圖片縮略圖;但同時(shí)，縮略圖太小可能無(wú)法識別信息。

微博在私信、發(fā)微博的縮略圖規則和和微信是千篇一律的;Telegram 也幾乎一樣，只是將「正方形」設置的大了一些。

所以設定多大的寬高閾值取決于我們的 App 的使用場(chǎng)景和我們的取舍，是經(jīng)常出現圖片照舊偶爾出現，是想在一屏幕中更多的展示圖片數量，方面用戶(hù)快速欣賞時(shí)檢索定位，照舊盼望縮略圖展示更明確的信息。