網(wǎng)站建設(shè)中聊天界面、氣泡框設(shè)計細節(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)站欄目：網(wǎng)站建設(shè)中聊天界面、氣泡框設(shè)計細節(jié)
分享URL：http://www.bm7419.com/news22/112922.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站建設(shè)等

廣告

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