聊天界面大家都很熟悉，設計也比較簡單，但是新人或者第一次設計聊天界面的同學往往會遇到問題，那就是未考慮聊天氣泡框的適配，導致最后落地效果參差不齊。本文主要和大家分享聊天氣泡框的常見問題，以及對應的解決方案。
一、新手常見問題
    平時我們知道聊天氣泡框隨文字多少變化，寬高也會隨之變化，但是標注時就容易忽略掉了這個前提，將其標成固定尺寸或者不標注讓技術自己去寫，不管是哪種情況都會導致后期頻繁的溝通調試，增加開發的時間，因此掌握正確可落地的適配方法比較重要，下面結合實例分別看看主要有哪些問題。
    1.文字氣泡框直接標注具體尺寸

      直接標注氣泡框的具體尺寸是較為常見的問題，其結果就會導致小屏手機展示不完全，大屏手機展示又太空的問題，如下圖所示。

      以我之前做的醫生問診界面來說，在標注時，我直接將氣泡框標注為固定尺寸520px，最后驗收時才發現iPhone5的氣泡框已經超出屏幕；而iPhone8 Plus上留白又太多，導致各機型展示效果不統一。
   2.不同比例圖片，氣泡縮略圖均展示方圖

      在發送圖片時會涉及到不同比例的圖片，如果都采用方形展示多余的部分都會被隱藏掉，如下圖所示。

      還是以咨詢醫生這個界面來說，我分別上傳了橫圖和豎圖，從圖可以看到最終的縮略圖效果都是方圖，其缺點是不能將圖片信息大化展現，占用屏幕空間。
    方圖展示對于用戶量小1.0的版本使用尚可，但是如果你的APP用戶量大，同時聊天界面使用率高，就需要考慮用戶體驗了。
  二、如何解決
  1.文字部分——采用百分比標注
    由于氣泡框的寬度隨著屏幕寬度變化，因此采用百分比的標注方法，可很好的解決多設備下不統一的問題。

      計算方式：氣泡框的大寬度 / 屏幕寬度=70%。根據該公式，我們也能夠根據屏幕寬度得到較為適合的氣泡框的設計尺寸，如下圖所示。

      采用百分比標注后，適配到iPhone5 640x1136和iPhone8 Plus 1242x2208都不會出現顯示不完全或者留白太多的問題了。
    注意：在設計時百分比不是固定的，大家可適當調整，比如你的APP本身留白比較多，那么這個數值你可設置為65%，然后再取8的倍數即可。以750x1334為基準進行設計為例，氣泡框的大寬度=750*70%=525px，最后取8的倍數為520px。
2. 圖片部分——設置圖片比例的閾值
    聊天氣泡框中的圖片一般有正方形圖、橫圖、豎圖，為了大化的保留圖片長寬比樣式，保證超長圖信息可識別性，首先需要確定圖片適配規則和設置圖片比例的閾值。
  1）設置縮略圖大尺寸，以單邊進行縮放

      這是目前體驗較好的方案，可滿足各比例圖片信息大化的展示。因此，大家在設計時首先需要確定縮略圖尺寸范圍。以問醫生的項目為例，在2倍圖下我將其設置為300px(該數值在保證展示效果下，一屏可展示更多的圖片)，最后方圖、橫圖、豎圖的適配效果如下圖所示。

      設置好縮略圖的尺寸后，圖片如何適配呢？簡單來說就是圖片最長邊適配到縮略圖中，在將圖片等比縮放即可。
   2）設定圖片適配的閾值比例

      在實際場景中，往往會遇到特殊比例圖片（如超長圖），將其適配之后就會發現圖片所占面積極小，不僅展示效果不佳，同時識別性也極低，如下圖所示。

      因此在適配時我們還需要設置閾值，什么是閾值呢？閾的意思是界限，故閾值又叫臨界值，也就是當圖片當比例超過閾值時，其縮略圖展示效果和閾值一致。考慮到圖片的展示效果和識別性，我們將3:1作為閾值較為合適。

      當圖片比例小于等于3:1時，將圖片等比縮放，最長邊為縮略圖的大尺寸300px，如下圖所示。

      當圖片比例大于3:1時，仍采用3:1縮略圖的展示尺寸，多余部分進行隱藏，從而讓圖片更有閱讀性。

      以上就是利于閾值，設置縮略圖大尺寸，以單邊進行縮放的方法，需要注意的是以上說的所有數值均是在2倍圖下。
三、畫重點
    文字部分：在聊天界面中，文字氣泡框適配最好采用百分比的方式進行標注，這樣能保證各個機型展示效果統一，保證項目順利落地。
    圖片部分：圖片氣泡框適配首先設置好縮略圖的取值范圍，為了大化的保留圖片長寬比樣式，圖片的適配我們采用設置兩邊長取值范圍，以單邊進行縮放，并設定好圖片適配的閾值比例。

網站欄目：網站建設中聊天界面、氣泡框設計細節
分享URL：http://www.js-pz168.com/news22/112922.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯