本站AI自動(dòng)判斷提供您所需要的app下載：點(diǎn)我下載安裝，你懂的APP
微信新版紅包封面，全面開放定制！
和“同桌的你校服”一起來看看是怎么定制的吧
年初，紅包封面解鎖了全新樣式。新版封面打破邊框、不拘一格，一度刷爆了春節(jié)朋友圈。
新版封面加入了全新的設(shè)計(jì)元素——掛件，突破紅包邊框限制，在方寸之間展示更多創(chuàng)意。靈活多變的造型在社交傳播中備受用戶喜愛，也讓品牌印象更深入人心。
為滿足更多個(gè)性化定制需求，新版紅包封面現(xiàn)已全面開放定制。
1
新版封面該怎么定制
1.在電腦端登錄微信紅包封面開放平臺(tái)（cover.weixin.qq.com）。
2. 進(jìn)入【我的紅包封面】，點(diǎn)擊【定制紅包封面】。
3. 封面類型選擇【新版封面】。
4. 按頁面提示上傳設(shè)計(jì)好的封面圖、封面掛件、氣泡掛件（缺一不可）。
5. 完善其他定制信息，確認(rèn)預(yù)覽效果后，提交微信團(tuán)隊(duì)進(jìn)行審核。
2
新版封面該如何設(shè)計(jì)
你可以從這些優(yōu)秀案例中獲取靈感：
1.巧妙疊放掛件和封面圖，靈活構(gòu)建畫面層次和空間感。
如案例中，掛件被設(shè)計(jì)成若隱若現(xiàn)的小老虎，讓品牌形象的展示更加生動(dòng)有趣，充滿故事性。
2. 自由延展畫面元素，讓節(jié)日氛圍破框而出。
如案例中，掛件與封面圖中的圖案無縫銜接、渾然一體，實(shí)現(xiàn)了創(chuàng)意的破框效果，整體搭配靈動(dòng)優(yōu)雅。
左滑下圖看更多優(yōu)秀案例：
對(duì)于設(shè)計(jì)師來說，越是小的細(xì)節(jié)越值得注意。本文分析了在設(shè)計(jì)聊天界面時(shí)文字部分和圖片部分中有哪些值得注意的細(xì)節(jié)，希望對(duì)設(shè)計(jì)師朋友們有所幫助。
聊天氣泡我們很熟悉，每天都要和他打交道。早上醒來第一件事你是不是打開微信看看呢？
那在和朋友聊天時(shí)，你有沒有這樣的疑問，為什么輸入文字多少不同，氣泡的展示也不同？為什么發(fā)送不同比例的圖片，其縮略圖的展示效果也不同？
魔域手游在哪買經(jīng)驗(yàn)球 - 櫻花動(dòng)漫
作為設(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í)能夠最大化展示我們的文本信息。
下面就以微信為例：
我分別對(duì)比了750px和640px分辨率下是不是適合這樣一個(gè)規(guī)律。
由上圖可以看到：微信750和640這兩種分辨率氣泡框最大寬度都是屏幕總寬度的70%。以上數(shù)值都是自己推理而來，因此有小伙伴覺得有問題的地方，還歡迎指出。
這里我想說的是如果我們不是做專門的社交類APP，只是平時(shí)工作中使用，那么掌握這些方法后能夠讓我們的項(xiàng)目落地即可。
二、圖片部分
聊天界面的圖片部分相對(duì)比較復(fù)雜，有單張展示和同時(shí)多張展示，多張展示相對(duì)比較復(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ì)被裁切，我們熟悉的微信就是采用這一閾值。
下面還是以微信為例，我們就分別從方圖、橫圖、豎圖來具體分析，看看他是怎么定義的。
1. 正方形圖
正方形圖相對(duì)比較簡(jiǎn)單，不過不同的APP實(shí)現(xiàn)方式不同，當(dāng)然你也可以采取微信這種，不管是大圖還是小圖上傳都采用統(tǒng)一的尺寸處理。
下面就來進(jìn)行分析下，我分別發(fā)送了4張圖片到微信助手：600x600px；200x200px；100x100px；50x50px。
發(fā)送之后的縮略圖展示效果如下：
從上圖可以看出：750分辨率下和640分辨率圖片展示尺寸相同均為270px；同時(shí)發(fā)送的4張不同尺寸的圖片，其縮略圖展示效果一致，均等比縮放展示在270×270的方形中。
這種方式比較簡(jiǎn)單，大家在做的時(shí)候可以借鑒。
2. 橫圖
橫圖縮略圖的展示規(guī)則相比方圖較為復(fù)雜，不過只要采用閾值進(jìn)行適配，其實(shí)也是比較簡(jiǎn)單的。
閾值具體怎么用，下面我們還是以微信為例進(jìn)行解說。
首先為了測(cè)試準(zhǔn)確性，我做了5組測(cè)試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例。
如下圖用于接下來的測(cè)試：
將圖片分別發(fā)送到聊天界面，將圖片分別發(fā)送到聊天界面，得到如下效果，我分別對(duì)圖片進(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)嗖伙@示。
3. 豎圖
豎圖縮略圖的展示規(guī)則和橫圖類似，其閾值也是3:1，同樣為了更好的理解，我還是以微信為例。
同樣繼續(xù)做了5組測(cè)試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例。
如下圖用于接下來的測(cè)試：
將圖片分別發(fā)送到聊天界面，得到如下效果，我分別對(duì)圖片進(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í)該如何使用。
三、總結(jié)
1. 文字部分
在聊天界面中，標(biāo)注時(shí)出現(xiàn)了兩個(gè)變量，這時(shí)候我們可以考慮用百分比的方式進(jìn)行標(biāo)注。這樣可以做到多個(gè)機(jī)型進(jìn)行適配，保證項(xiàng)目能夠順利落地。
2. 圖片部分
在做圖片部分時(shí)，需要先設(shè)定閾值，然后我們?cè)诟鶕?jù)閾值進(jìn)行方圖、橫圖、豎圖的適配工作。
參考鏈接：
http://www.mobileui.cn/story-behind-the-chat-thumbnails.html?from=singlemessage 《聊天縮略圖背后的故事：你不曾注意的那些細(xì)節(jié)》
作者：風(fēng)箏KK，公眾號(hào)：海鹽社
本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash ，基于 CC0 協(xié)議