聊天氣泡我們很熟悉，每天都要和他打交道。早上醒來第一件事你是不是打開微信看看。那在和朋友聊天時(shí)，你有沒有這樣的疑問，為什么輸入文字多少不同，氣泡的展示也不同？為什么發(fā)送不同比例的圖片，其縮略圖的展示效果也不同。
但是作為設(shè)計(jì)師，搞懂界面背后的原理是很重要的。本期我就從聊天界面中常見的文字部分、圖片部分來分析，看看聊天界面在設(shè)計(jì)時(shí)需要注意哪些細(xì)節(jié)。
聊天界面雖然不是每個(gè)APP都需要，但是隨著APP社交化，現(xiàn)在APP上加入聊天界面是很常見的。
在聊天界面設(shè)計(jì)時(shí)，我發(fā)現(xiàn)很多人都不知道氣泡框的最大寬度是如何定義的，在標(biāo)注的時(shí)候很容易把氣泡框的寬度標(biāo)死。
那應(yīng)該如何標(biāo)注呢？其實(shí)聊天氣泡框我們很容易看出來有兩個(gè)變量即a(氣泡框)和b（空白間距），當(dāng)頁面中有兩個(gè)變量時(shí)我們就不能用常規(guī)的方法進(jìn)行標(biāo)注，而是采用百分比的形式才較為合理。這個(gè)比例是多少，通過總結(jié)，a/屏幕寬度=70%最為適宜。
有小伙伴可能要問，這個(gè)70%的數(shù)值怎么得來的，這個(gè)主要是界面的一個(gè)實(shí)際效果決定的，除了這個(gè)數(shù)值比較接近黃金比例外，他同時(shí)能夠最大化展示我們的文本信息。
下面就以微信為例，我分別對比了750px和640px分辨率下是不是適合這樣一個(gè)規(guī)律。
?由上圖可以看到，微信750和640這兩種分辨率氣泡框最大寬度都是屏幕總寬度的70%。
以上數(shù)值都是自己推理而來，因此有小伙伴覺得有問題的地方，還歡迎指出。這里我想說的是如果我們不是做專門的社交類APP，只是平時(shí)工作中使用，那么掌握這些方法后能夠讓我們的項(xiàng)目落地即可。
聊天界面的圖片部分相對比較復(fù)雜，有單張展示和同時(shí)多張展示，多張展示相對比較復(fù)雜，今天主要和大家說單張展示，以便大家輕松的掌握聊天氣泡框中單張圖片展示規(guī)則。
聊天圖片我們知道往往比例是不固定的，有時(shí)候可能是方圖，有時(shí)候是橫圖，有時(shí)候是豎圖，這么多圖片尺寸，如何設(shè)計(jì)一個(gè)合理的縮略圖展示規(guī)則，既能夠讓界面整齊美觀，又能夠最大程度滿足展示需求？
關(guān)于這里需要引入一個(gè)概念——閾值。閾的意思是界限，故閾值又叫臨界值，是指一個(gè)效應(yīng)能夠產(chǎn)生的最低值或最高值。
因此不管是方圖、橫圖、豎圖，只有設(shè)定了閾值，我們才能夠輕松解決圖片展示的問題。通過研究這個(gè)閾值往往設(shè)置為圖片比例3：1，因?yàn)樵摫壤谑謾C(jī)上顯示窄的一邊特別小，影響視覺，因此凡是比例大于3：1的都會(huì)被裁切，我們熟悉的微信就是采用這一閾值。
下面還是以微信為例，我們就分別從方圖、橫圖、豎圖來具體分析，看看他是怎么定義的。
正方形圖
正方形圖相對比較簡單，不過不同的APP實(shí)現(xiàn)方式不同，當(dāng)然你也可以采取微信這種，不管是大圖還是小圖上傳都采用統(tǒng)一的尺寸處理。
下面就來進(jìn)行分析下，我分別發(fā)送了4張圖片到微信助手：600x600px；200x200px；100x100px；50x50px，發(fā)送之后的縮略圖展示效果如下：
從上圖可以看出，750分辨率下和640分辨率圖片展示尺寸相同均為270px;同時(shí)發(fā)送的4張不同尺寸的圖片，其縮略圖展示效果一致，均等比縮放展示在270x270的方形中。這種方式比較簡單，大家在做的時(shí)候可以借鑒。
橫圖
橫圖縮略圖的展示規(guī)則相比方圖較為復(fù)雜，不過只要采用閾值進(jìn)行適配，其實(shí)也是比較簡單的。閾值具體怎么用，下面我們還是以微信為例進(jìn)行解說。
首先為了測試準(zhǔn)確性，我做了5組測試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例，如下圖用于接下來的測試。
將圖片分別發(fā)送到聊天界面，將圖片分別發(fā)送到聊天界面，得到如下效果，我分別對圖片進(jìn)行1到5的排序，方便解說。
通過研究微信的閾值是3:1的圖片比例。也就是說當(dāng)圖片比例小于3:1時(shí)，寬度固定、高度等比縮放；當(dāng)圖片比例大于3:1時(shí)，圖片的寬度和高度都保持一致，并都以3:1的縮略圖尺寸展示，多于部分隱藏。
從上圖可以發(fā)現(xiàn)我上傳的前三張圖片的寬度隨圖片比例變化始終保持一致即270px，而圖片高度隨高度進(jìn)行等比縮放正好應(yīng)證了這一結(jié)論。
在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮略圖的展示寬高一致，這就是圖片大于3:1這個(gè)閾值時(shí)，圖片的寬高以3:1的為準(zhǔn)保持一致，圖片超出的圖片截?cái)嗖伙@示。
豎圖
豎圖縮略圖的展示規(guī)則和橫圖類似，其閾值也是3:1,同樣為了更好的理解，我還是以微信為例。?
同樣繼續(xù)做了5組測試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例，如下圖用于接下來的測試。
將圖片分別發(fā)送到聊天界面，得到如下效果，我分別對圖片進(jìn)行1到5的排序，方便解說。
同樣，圖片為豎圖時(shí)，圖片比例以3:1為閾值，圖片比例小于3:1時(shí)，高度固定、寬度等比縮放；當(dāng)圖片比例大于3:1時(shí)，圖片的寬度和高度都保持一致，并都以3:1的縮略圖尺寸展示，多于部分隱藏。
從上圖可以發(fā)現(xiàn)1、2、3張圖片的高度隨圖片比例變化始終保持一致即270px。而圖片寬度不同（圖片寬度由圖片等比縮放而來）。
在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮略圖的展示寬高一致。
通過上面的解說，想必大家也了解了什么是閾值，在做類似社交頁面圖片適配時(shí)該如何使用，下面就來做個(gè)總結(jié)吧。
1、文字部分
在聊天界面中，標(biāo)注時(shí)出現(xiàn)了兩個(gè)變量，這時(shí)候我們可以考慮用百分比的方式進(jìn)行標(biāo)注。這樣可以做到多個(gè)機(jī)型進(jìn)行適配，保證項(xiàng)目能夠順利落地。
2、圖片部分
在做圖片部分時(shí)，需要先設(shè)定閾值，然后我們在根據(jù)閾值進(jìn)行方圖、橫圖、豎圖的適配工作。
