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

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

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

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

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

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

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

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

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

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

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

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

      當(dāng)圖片比例小于等于3:1時(shí)，將圖片等比縮放，最長(zhǎng)邊為縮略圖的大尺寸300px，如下圖所示。

      當(dāng)圖片比例大于3:1時(shí)，仍采用3:1縮略圖的展示尺寸，多余部分進(jìn)行隱藏，從而讓圖片更有閱讀性。

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

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

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

廣告

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