聊天氣泡框你還不知道的小細節?
聊天介面大家都很熟悉,設計也比較簡單,但是新人或者第一次設計聊天介面的同學往往會遇到問題,那就是未考慮聊天氣泡框的適配,導致最後落地效果參差不齊。本文主要和大家分享聊天氣泡框的常見問題,以及對應的解決方案。
新手常見問題
平時我們知道聊天氣泡框隨文字多少變化,寬高也會隨之變化,但是標註時就容易忽略掉了這個前提,將其標成固定尺寸或者不標註讓技術自己去寫,不管是哪種情況都會導致後期頻繁的溝通調試,增加開發的時間,因此掌握正確可落地的適配方法比較重要,下面結合實例分別看看主要有哪些問題。
1. 文字氣泡框直接標註具體尺寸
直接標註氣泡框的具體尺寸是較爲常見的問題,其結果就會導致小屏手機展示不完全,大屏手機展示又太空的問題,如下圖所示。
以我之前做的醫生問診介面來說,在標註時,我直接將氣泡框標註爲固定尺寸520px,最後驗收時才發現iPhone5的氣泡框已經超出屏幕;而iPhone8 Plus上留白又太多,導致各機型展示效果不統一。
2. 不同比例圖片,氣泡縮略圖均展示方圖
在發送圖片時會涉及到不同比例的圖片,如果都採用方形展示多餘的部分都會被隱藏掉,如下圖所示。
還是以諮詢醫生這個介面來說,我分別上傳了橫圖和豎圖,從圖可以看到最終的縮略圖效果都是方圖,其缺點是不能將圖片資訊最大化展現,佔用屏幕空間。方圖展示對於用戶量小1.0的版本使用尚可,但是如果你的APP用戶量大,同時聊天介面使用率高,就需要考慮用戶體驗了。
如何解決?
其實以上兩個問題都是我第一次做聊天介面時遇到的,透過查找資料、對各平臺對比、和技術溝通、諮詢設計前輩等方式,終於解決了上述兩個問題,並總結了較爲落地的適配方案。
1. 文字部分——採用百分比標註
由於氣泡框的寬度隨着屏幕寬度變化,因此採用百分比的標註方法,可很好的解決多設備下不統一的問題。
計算方式:氣泡框的最大寬度 / 屏幕寬度=70%。根據該公式,我們也能夠根據屏幕寬度得到較爲適合的氣泡框的設計尺寸,如下圖所示。
採用百分比標註後,適配到iPhone5 640×1136和iPhone8 Plus 1242×2208都不會出現顯示不完全或者留白太多的問題了。
注意:在設計時百分比不是固定的,大家可適當調整,比如你的APP本身留白比較多,那麼這個數值你可設定爲65%,然後再取8的倍數即可。以750×1334爲基準進行設計爲例,氣泡框的最大寬度=750*70%=525px,最後取8的倍數爲520px。
2. 圖片部分——設定圖片比例的閾值
聊天氣泡框中的圖片一般有正方形圖、橫圖、豎圖,爲了最大化的保留圖片長寬比樣式,保證超長圖資訊可識別性,首先需要確定圖片適配規則和設定圖片比例的閾值。
1)設定縮略圖最大尺寸,以單邊進行縮放這是目前體驗較好的方案,可滿足各比例圖片資訊最大化的展示。因此,大家在設計時首先需要確定縮略圖尺寸範圍。以問醫生的項目爲例,在2倍圖下我將其設定爲300px(該數值在保證展示效果下,一屏可展示更多的圖片),最後方圖、橫圖、豎圖的適配效果如下圖所示。
設定好縮略圖的尺寸後,圖片如何適配呢?簡單來說就是圖片最長邊適配到縮略圖中,在將圖片等比縮放即可。
2)設定圖片適配的閾值比例在實際場景中,往往會遇到特殊比例圖片(如超長圖),將其適配之後就會發現圖片所佔面積極小,不僅展示效果不佳,同時識別性也極低,如下圖所示。
因此在適配時我們還需要設定閾值,什麼是閾值呢?閾的意思是界限,故閾值又叫臨界值,也就是當圖片當比例超過閾值時,其縮略圖展示效果和閾值一致。考慮到圖片的展示效果和識別性,我們將3:1作爲閾值較爲合適。
當圖片比例小於等於3:1時,將圖片等比縮放,最長邊爲縮略圖的最大尺寸300px,如下圖所示。
當圖片比例大於3:1時,仍採用3:1縮略圖的展示尺寸,多餘部分進行隱藏,從而讓圖片更有閱讀性。
以上就是利於閾值,設定縮略圖最大尺寸,以單邊進行縮放的方法,需要注意的是以上說的所有數值均是在2倍圖下。
畫重點
文字部分:在聊天介面中,文字氣泡框適配最好採用百分比的方式進行標註,這樣能保證各個機型展示效果統一,保證項目順利落地。
圖片部分:圖片氣泡框適配首先設定好縮略圖的取值範圍,爲了最大化的保留圖片長寬比樣式,圖片的適配我們採用設定兩邊長取值範圍,以單邊進行縮放,並設定好圖片適配的閾值比例。
參考引文:
《聊天縮略圖背後的故事:你不曾注意的那些細節》
聊天產品的設計策略—縮略圖
圖片來源:
海鹽社(公衆號)作者: 風箏KK
-
ai素材製作之雄鹿篇
雄鹿一般都有2只萌萌噠的鹿角,很可愛,相對的雌鹿就很少見,在動物園裏,它們也是很受小朋友喜愛的動物,今天,小編爲您介紹:ai素材製作之雄鹿篇。工具/材料ai軟件電腦操作方法01首先我們開啟我們的ai軟件,接着我們新建一個名字爲“雄鹿”的ai檔案,如下圖所示。02接着我們第...
-
怎麼用支付寶購買彩票
怎麼使用支付寶購買彩票,讓小編教給你最新的購買指南。操作方法(01)國家全面禁止網絡售彩,所以相關的支付寶購彩指南經驗全部取消。(02)但是支付寶可以轉賬,可以與彩票代售點老闆互加好友,透過轉賬的方式由老闆代購。(03)支付寶還可以當面付,在彩票代售點與老闆透過支付寶...
-
如何製作圖片火海燃燒效果
如何製作圖片火海燃燒效果呢?下面,就讓小編給大家介紹一下吧。操作方法01首先,我們需要開啟我們電腦的ps軟件(鼠標左鍵雙擊桌面上的ps捷徑或者是鼠標右鍵再選擇開啟都是可以的)。02開啟ps軟件之後,開啟一張圖片;接着,複製背景圖層。03添加分層雲彩濾鏡效果;然後,執行...
-
最好的p圖軟件有哪些?
現在在網上我們經常會看到一些惡搞的圖片,感覺非常搞笑好玩,其實這都是透過P圖軟件來製作的,下面我們就來看看常用的最好的P圖軟件有哪些。操作方法(01)p圖軟件之Photoshop,該軟件簡稱ps,它是最常用的p圖軟件,該軟件功能十分強大,只要你有想法有創意透過該軟件都可以做...