聊天縮略圖背後的故事:你不曾注意的那些細節

聊天縮略圖背後的故事:你不曾注意的那些細節

聊天縮略圖背後的故事:你不曾注意的那些細節

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

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

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

  • 單個圖片更多的圖片內容信息展示
  • 多張圖片更好的瀏覽定位找尋
  • 同時發送多張圖片更高效的展示

如果我們希望儘可能保留圖片的長寬比樣式,在聊天列表中錯落有致地展示,則我們需要對橫向和縱向圖片的長和寬都做相應的閾值限制。

在 Facebook Messenger 的例子中,我們發送了以下一組測試圖片:

聊天縮略圖背後的故事:你不曾注意的那些細節

有常見照片的 4:3 比例,也有常見截圖的 16:9 比例,還有 21:9 這樣超長/超寬圖片。

聊天縮略圖背後的故事:你不曾注意的那些細節

裁切閾值方面:我們發現,對於豎向圖,Facebook Messenger 設定了一個比例的閾值,長圖超出 5:3 比例會被裁切、寬圖超過 1:2 會被裁切。未超過這個比例值,圖片的內容將被完整縮放。

展示尺寸方面,我們發現:

  • 對於豎向圖:高度固定為 300pt,寬度是根據圖片比例動態變化的。
  • 對於橫向圖:寬度是固定為 264pt,高度是根據圖片比例動態變化的。

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

限定寬和高的策略也在微信縮略圖規則中體現:

聊天縮略圖背後的故事:你不曾注意的那些細節

與 Messenger 不同之處在於::

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

Messenger 將高度和寬度分別設定,而微信簡化了寬和高的閾值設定,以正方形作為基準,去限定高度和寬度,不去考慮是橫向圖還是縱向圖,換一種說法,即: 比例較大的邊等於正方形的邊,這意味著你在微信中能產生最大顯示面積的是正方形圖片,並且無需為正方形做特殊判斷,Messenger 則需要將正方形視作橫向圖片的寬度規則,缺點是,正方形展示成了最大面積,其他比例圖片都較小,似乎「有失公平」。微信設定的高度和寬度閾值較 Messenger 來說小很多,這樣在一屏幕中可以展示更多的圖片縮略圖;但同時,縮略圖太小可能無法識別信息。

微博在私信、發微博的縮略圖規則和和微信是一模一樣的;Telegram 也幾乎一樣,只是將「正方形」設置的大了一些。

聊天縮略圖背後的故事:你不曾注意的那些細節

所以設定多大的寬高閾值取決於我們的 App 的使用場景和我們的取捨,是經常出現圖片還是偶爾出現,是想在一屏幕中更多的展示圖片數量,方面用戶快速瀏覽時檢索定位,還是希望縮略圖展示更明確的信息。

註:相關網站建設技巧閱讀請移步到建站教程頻道。

轉載文章請附上來源:聊天縮略圖背後的故事:你不曾注意的那些細節Whoops SEO 搜尋引擎優化 – Search Engine Optimization


Techroomage Seo SEO TechRoomage 提供專業白帽 Search Engine Optimization (SEO) 服務與 Responsive Web Design (RWD) 響應式網頁設計,透過完善的服務幫助客戶建立高品質網站與後續強大的網路行銷。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *