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

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

　　一、文字部分
 

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

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

 

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

 

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

 

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

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

　　二、圖片部分
 

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

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

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

　　因此不管是方圖、橫圖、豎圖，只有設(shè)定了閾值，我們才能夠輕松解決圖片展示的問(wèn)題。通過(guò)研究這個(gè)閾值往往設(shè)置為圖片比例3: 1，因?yàn)樵摫壤谑謾C(jī)上顯示窄的一邊特別小，影響視覺(jué)，因此凡是比例大于3: 1的都會(huì)被裁切，我們熟悉的微信就是采用這一閾值。
 

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

　　正方形圖
 

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

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

 

　　橫圖
 

　　橫圖縮略圖的展示規(guī)則相比方圖較為復(fù)雜，不過(guò)只要采用閾值進(jìn)行適配，其實(shí)也是比較簡(jiǎn)單的。閾值具體怎么用，下面我們還是以微信為例進(jìn)行解說(shuō)。
 

　　首先為了測(cè)試準(zhǔn)確性，我做了5組測(cè)試圖，分別是4:3、16:9、 2:1、3:1、4:1不同圖片的比例，如下圖用于接下來(lái)的測(cè)試。

 

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

 

　　通過(guò)研究微信的閾值是3:1的圖片比例。也就是說(shuō)當(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ī)則和橫圖類(lèi)似，其閾值也是3:1 ,同樣為了更好的理解，我還是以微信為例。
 

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

 

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

 

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

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

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

　　總結(jié)
 

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