欧美精品v欧洲高清视频在线观看-北条麻妃青青久久-少妇被粗大的猛进出69影院-国产成本人视频在线观看-亚洲三级在线视频-91久久精品国产-2021久久天天躁狠狠躁夜夜

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

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

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

首先我們來看看我們想在聊天中提供的體驗：

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

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

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

有常見照片的 4：3 比例，也有常見截圖的 16：9 比例，還有 21：9 如許超長/超寬圖片。

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

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

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

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

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

與 Messenger 不同之處在于：：

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

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

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

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