UI設(shè)計中聊天氣泡框的設(shè)計技巧

　　聊天氣泡我們很熟悉，每天都要和他打交道。早上醒來第一-件事你是不是打開微信看看。那在和朋友聊天時，你有沒有這樣的疑問，為什么輸入文字多少不同，氣泡的展示也不同?為什么發(fā)送不同比例的圖片，其縮略圖的展示效果也不同。今天AAA教育郭老師就針對UI設(shè)計中聊天氣泡框的設(shè)計技巧進(jìn)行簡單的說明。
 

　　一、文字部分
 

　　聊天界面雖然不是每個APP都需要，但是隨著APP社交化，現(xiàn)在APP.上加入聊天界面是很常見的。
 

　　在聊天界面設(shè)計時，我發(fā)現(xiàn)很多人都不知道氣泡框的最大寬度是如何定義的，在標(biāo)注的時候很容易把氣泡框的寬度標(biāo)死。

 

　　那應(yīng)該如何標(biāo)注呢?其實聊天氣泡框我們很容易看出來有兩個變量即a(氣泡框)和b (空白間距)，當(dāng)頁面中有兩個變量時我們就不能用常規(guī)的方法進(jìn)行標(biāo)注，而是采用百分比的形式才較為合理。這個比例是多少，通過總結(jié)，a/ 屏幕寬度=70%最為適宜。

 

　　有小伙伴可能要問，這個70%的數(shù)值怎么得來的，這個主要是界面的一個實際效果決定的，除了這個數(shù)值比較接近黃金比例外，他同時能夠最大化展示我們的文本信息。下面就以微信為例，我分別對比了750px和640px分辨率下是不是適合這樣一個規(guī)律。

 

　　由上圖可以看到，微信750和640這兩種分辨率氣泡框最大寬度都是屏幕總寬度的70%。
 

　　以上數(shù)值都是自己推理而來，因此有小伙伴覺得有問題的地方，還歡迎指出。這里我想說的是如果我們不是做專門的社交類APP，只是平時工作中使用，那么掌握這些方法后能夠讓我們的項目落地即可。
 

　　二、圖片部分
 

　　聊天界面的圖片部分相對比較復(fù)雜，有單張展示和同時多張展示，多張展示相對比較復(fù)雜，今天主要和大家說單張展示，以便大家輕松的掌握聊天氣泡框中單張圖片展示規(guī)則。
 

　　聊天圖片我們知道往往比例是不固定的，有時候可能是方圖，有時候是橫圖，有時候是豎圖，這么多圖片尺寸，如何設(shè)計一個合理的縮略圖展示規(guī)則，既能夠讓界面整齊美觀，又能夠最大程度滿足展示需求?
 

　　關(guān)于這里需要引入一個概念—閾值。閾的意思是界限，故閾值又叫臨界值，是指一個效應(yīng)能夠產(chǎn)生的最低值或最高值。
 

　　因此不管是方圖、橫圖、豎圖，只有設(shè)定了閾值，我們才能夠輕松解決圖片展示的問題。通過研究這個閾值往往設(shè)置為圖片比例3: 1，因為該比例在手機(jī)上顯示窄的一邊特別小，影響視覺，因此凡是比例大于3: 1的都會被裁切，我們熟悉的微信就是采用這一閾值。
 

　　下面還是以微信為例，我們就分別從方圖、橫圖、豎圖來具體分析,看看他是怎么定義的。
 

　　正方形圖
 

　　正方形圖相對比較簡單，不過不同的APP實現(xiàn)方式不同，當(dāng)然你也可以采取微信這種，不管是大圖還是小圖上傳都采用統(tǒng)-的尺寸處理。
 

　　下面就來進(jìn)行分析下，我分別發(fā)送了4張圖片到微信助手:600x600px; 200x200px; 100x100px; 50x50px，發(fā)送之后的縮略圖展示效果如下:

 

　　橫圖
 

　　橫圖縮略圖的展示規(guī)則相比方圖較為復(fù)雜，不過只要采用閾值進(jìn)行適配，其實也是比較簡單的。閾值具體怎么用，下面我們還是以微信為例進(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時，寬度固定、高度等比縮放;當(dāng)圖片比例大于3:1時，圖片的寬度和高度都保持一致，并都以3:1的縮略圖尺寸展示，多于部分隱藏。
 

　　從上圖可以發(fā)現(xiàn)我上傳的前三張圖片的寬度隨圖片比例變化始終保持一致即270px,而圖片高度隨高度進(jìn)行等比縮放正好應(yīng)證了這一結(jié)論。
 

　　在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮略圖的展示寬高一致，這就是圖片大于3:1這個閾值時，圖片的寬高以3:1的為準(zhǔn)保持一致，圖片超出的圖片截斷不顯示。
 

　　豎圖
 

　　豎圖縮略圖的展示規(guī)則和橫圖類似，其閾值也是3:1 ,同樣為了更好的理解，我還是以微信為例。
 

　　同樣繼續(xù)做了5組測試圖，分別是4:3、16:9、 2:1、 3:1、4:1不同圖片的比例，如下圖用于接下來的測試。

 

　　將圖片分別發(fā)送到聊天界面，得到如下效果，我分別對圖片進(jìn)行1到5.的排序，方便解說。

 

　　同樣，圖片為豎圖時，圖片比例以3:1為閾值，圖片比例小于3:1時,高度固定、寬度等比縮放;當(dāng)圖片比例大于3:1時，圖片的寬度和高度都保持一致， 并都以3:1的縮略圖尺寸展示，多于部分隱藏。
 

　　從上圖可以發(fā)現(xiàn)1、2、3張圖片的高度隨圖片比例變化始終保持一致即270px。而圖片寬度不同(圖片 寬度由圖片等比縮放而來)。
 

　　在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮略圖的展示寬高一致。
 

　　總結(jié)
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。