聊天界面大家都很熟悉，設計也比較簡單，但是新人或者第一次設計聊天界面的同學往往會遇到問題，那就是未考慮聊天氣泡框的適配，導致最後落地效果參差不齊。本文主要和大家分享聊天氣泡框的常見問題，以及對應的解決方案。
平時我們知道聊天氣泡框隨文字多少變化，寬高也會隨之變化，但是標註時就容易忽略掉了這個前提，將其標成固定尺寸或者不標註讓技術自己去寫，不管是哪種情況都會導致後期頻繁的溝通調試，增加開發的時間，因此掌握正確可落地的適配方法比較重要，下面結合實例分別看看主要有哪些問題。
直接標註氣泡框的具體尺寸是較為常見的問題，其結果就會導致小屏手機展示不完全，大屏手機展示又太空的問題，如下圖所示。
以我之前做的醫生問診界面來説，在標註時，我直接將氣泡框標註為固定尺寸520px，最後驗收時才發現iPhone5的氣泡框已經超出屏幕；而iPhone8 Plus上留白又太多，導致各機型展示效果不統一。
在發送圖片時會涉及到不同比例的圖片，如果都採用方形展示多餘的部分都會被隱藏掉，如下圖所示。
還是以諮詢醫生這個界面來説，我分別上載了橫圖和豎圖，從圖可以看到最終的縮略圖效果都是方圖，其缺點是不能將圖片信息最大化展現，佔用屏幕空間。方圖展示對於用户量小1.0的版本使用尚可，但是如果你的APP用户量大，同時聊天界面使用率高，就需要考慮用户體驗了。
其實以上兩個問題都是我第一次做聊天界面時遇到的，通過查找資料、對各平台對比、和技術溝通、諮詢設計前輩等方式，終於解決了上述兩個問題，並總結了較為落地的適配方案。
由於氣泡框的寬度隨着屏幕寬度變化，因此採用百分比的標註方法，可很好的解決多設備下不統一的問題。
計算方式：氣泡框的最大寬度 / 屏幕寬度=70%。根據該公式，我們也能夠根據屏幕寬度得到較為適合的氣泡框的設計尺寸，如下圖所示。
採用百分比標註後，適配到iPhone5 640×1136和iPhone8 Plus 1242×2208都不會出現顯示不完全或者留白太多的問題了。
注意：在設計時百分比不是固定的，大家可適當調整，比如你的APP本身留白比較多，那麼這個數值你可設置為65%，然後再取8的倍數即可。以750×1334為基準進行設計為例，氣泡框的最大寬度=750*70%=525px，最後取8的倍數為520px。
聊天氣泡框中的圖片一般有正方形圖、橫圖、豎圖，為了最大化的保留圖片長寬比樣式，保證超長圖信息可識別性，首先需要確定圖片適配規則和設置圖片比例的閾值。
1）設置縮略圖最大尺寸，以單邊進行縮放這是目前體驗較好的方案，可滿足各比例圖片信息最大化的展示。因此，大家在設計時首先需要確定縮略圖尺寸範圍。以問醫生的項目為例，在2倍圖下我將其設置為300px(該數值在保證展示效果下，一屏可展示更多的圖片)，最後方圖、橫圖、豎圖的適配效果如下圖所示。
設置好縮略圖的尺寸後，圖片如何適配呢？簡單來説就是圖片最長邊適配到縮略圖中，在將圖片等比縮放即可。
2）設定圖片適配的閾值比例在實際場景中，往往會遇到特殊比例圖片（如超長圖），將其適配之後就會發現圖片所佔面積極小，不僅展示效果不佳，同時識別性也極低，如下圖所示。
因此在適配時我們還需要設置閾值，什麼是閾值呢？閾的意思是界限，故閾值又叫臨界值，也就是當圖片當比例超過閾值時，其縮略圖展示效果和閾值一致。考慮到圖片的展示效果和識別性，我們將3:1作為閾值較為合適。
當圖片比例小於等於3:1時，將圖片等比縮放，最長邊為縮略圖的最大尺寸300px，如下圖所示。
當圖片比例大於3:1時，仍採用3:1縮略圖的展示尺寸，多餘部分進行隱藏，從而讓圖片更有閲讀性。
以上就是利於閾值，設置縮略圖最大尺寸，以單邊進行縮放的方法，需要注意的是以上説的所有數值均是在2倍圖下。
文字部分：在聊天界面中，文字氣泡框適配最好採用百分比的方式進行標註，這樣能保證各個機型展示效果統一，保證項目順利落地。
圖片部分：圖片氣泡框適配首先設置好縮略圖的取值範圍，為了最大化的保留圖片長寬比樣式，圖片的適配我們採用設置兩邊長取值範圍，以單邊進行縮放，並設定好圖片適配的閾值比例。
參考引文：
《聊天縮略圖背後的故事：你不曾注意的那些細節》
聊天產品的設計策略—縮略圖
圖片來源：
海鹽社（公眾號）
酷知知識幫
