免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網站建設中聊天界面、氣泡框設計細節

2021-05-09    分類: 網站建設

聊天界面大家都很熟悉,設計也比較簡單,但是新人或者第一次設計聊天界面的同學往往會遇到問題,那就是未考慮聊天氣泡框的適配,導致最后落地效果參差不齊。本文主要和大家分享聊天氣泡框的常見問題,以及對應的解決方案。
一、新手常見問題
    平時我們知道聊天氣泡框隨文字多少變化,寬高也會隨之變化,但是標注時就容易忽略掉了這個前提,將其標成固定尺寸或者不標注讓技術自己去寫,不管是哪種情況都會導致后期頻繁的溝通調試,增加開發的時間,因此掌握正確可落地的適配方法比較重要,下面結合實例分別看看主要有哪些問題。
    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倍圖下。
三、畫重點
    文字部分:在聊天界面中,文字氣泡框適配最好采用百分比的方式進行標注,這樣能保證各個機型展示效果統一,保證項目順利落地。
    圖片部分:圖片氣泡框適配首先設置好縮略圖的取值范圍,為了大化的保留圖片長寬比樣式,圖片的適配我們采用設置兩邊長取值范圍,以單邊進行縮放,并設定好圖片適配的閾值比例。
(鄭重聲明:本文版權歸原作者風箏KK所有,轉載文章僅為傳播更多信息之目的,如有侵權,請聯系我們刪除;如作者信息標記有誤,請聯系我們修改。)

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

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

廣告

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

成都定制網站網頁設計