有關聊天氣泡框，80%的人都不知道這些……
從零開始學運營，10年經驗運營總監親授，2天線下集訓+1年線上學習，做個有競爭力的運營人。 ofollow,noindex">瞭解詳情
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
對於設計師來說，越是小的細節越值得注意。本文分析了在設計聊天介面時文字部分和圖片部分中有哪些值得注意的細節，希望對設計師朋友們有所幫助。
聊天氣泡我們很熟悉，每天都要和他打交道。早上醒來第一件事你是不是開啟微信看看呢？
那在和朋友聊天時，你有沒有這樣的疑問，為什麼輸入文字多少不同，氣泡的展示也不同？為什麼傳送不同比例的圖片，其縮圖的展示效果也不同？
作為設計師，搞懂介面背後的原理是很重要的。
本期我就從聊天介面中常見的文字部分、圖片部分來分析，看看聊天介面在設計時需要注意哪些細節。
一、文字部分
聊天介面雖然不是每個APP都需要，但是隨著APP社交化，現在APP上加入聊天介面是很常見的。
在聊天介面設計時，我發現很多人都不知道氣泡框的最大寬度是如何定義的，在標註的時候很容易把氣泡框的寬度標死。
那應該如何標註呢？其實聊天氣泡框我們很容易看出來有兩個變數即a(氣泡框)和b（空白間距），當頁面中有兩個變數時我們就不能用常規的方法進行標註，而是採用百分比的形式才較為合理。
這個比例是多少呢？
通過總結得出：a/螢幕寬度=70%最為適宜。
有小夥伴可能要問，這個70%的數值怎麼得來的？
這個主要是介面的一個實際效果決定的，除了這個數值比較接近黃金比例外，它同時能夠最大化展示我們的文字資訊。
下面就以微信為例：
我分別對比了750px和640px解析度下是不是適合這樣一個規律。
由上圖可以看到：微信750和640這兩種解析度氣泡框最大寬度都是螢幕總寬度的70%。以上數值都是自己推理而來，因此有小夥伴覺得有問題的地方，還歡迎指出。
這裡我想說的是如果我們不是做專門的社交類APP，只是平時工作中使用，那麼掌握這些方法後能夠讓我們的專案落地即可。
二、圖片部分
聊天介面的圖片部分相對比較複雜，有單張展示和同時多張展示，多張展示相對比較複雜。
今天主要和大家說單張展示，以便大家輕鬆的掌握聊天氣泡框中單張圖片展示規則。
聊天圖片我們知道往往比例是不固定的，有時候可能是方圖，有時候是橫圖，有時候是豎圖。
這麼多圖片尺寸，如何設計一個合理的縮圖展示規則使得既能夠讓介面整齊美觀，又能夠最大程度滿足展示需求？
關於這裡需要引入一個概念——閾值。
閾的意思是界限，故閾值又叫臨界值，是指一個效應能夠產生的最低值或最高值。因此不管是方圖、橫圖、豎圖，只有設定了閾值，我們才能夠輕鬆解決圖片展示的問題。
通過研究這個閾值往往設定為圖片比例3：1，因為該比例在手機上顯示窄的一邊特別小，影響視覺，因此凡是比例大於3：1的都會被裁切，我們熟悉的微信就是採用這一閾值。
下面還是以微信為例，我們就分別從方圖、橫圖、豎圖來具體分析，看看他是怎麼定義的。
1. 正方形圖
正方形圖相對比較簡單，不過不同的APP實現方式不同，當然你也可以採取微信這種，不管是大圖還是小圖上傳都採用統一的尺寸處理。
下面就來進行分析下，我分別傳送了4張圖片到微信助手：600x600px；200x200px；100x100px；50x50px。
傳送之後的縮圖展示效果如下：
從上圖可以看出：750解析度下和640解析度圖片展示尺寸相同均為270px；同時傳送的4張不同尺寸的圖片，其縮圖展示效果一致，均等比縮放展示在270×270的方形中。
這種方式比較簡單，大家在做的時候可以借鑑。
2. 橫圖
橫圖縮圖的展示規則相比方圖較為複雜，不過只要採用閾值進行適配，其實也是比較簡單的。
閾值具體怎麼用，下面我們還是以微信為例進行解說。
首先為了測試準確性，我做了5組測試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例。
如下圖用於接下來的測試：
將圖片分別傳送到聊天介面，將圖片分別傳送到聊天介面，得到如下效果，我分別對圖片進行1到5的排序，方便解說：
通過研究微信的閾值是3:1的圖片比例。
也就是說當圖片比例小於3:1時，寬度固定、高度等比縮放；當圖片比例大於3:1時，圖片的寬度和高度都保持一致，並都以3:1的縮圖尺寸展示，多於部分隱藏。
從上圖可以發現我上傳的前三張圖片的寬度隨圖片比例變化始終保持一致即270px，而圖片高度隨高度進行等比縮放正好應證了這一結論。
在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮圖的展示寬高一致，這就是圖片大於3:1這個閾值時，圖片的寬高以3:1的為準保持一致，圖片超出的圖片截斷不顯示。
3. 豎圖
豎圖縮圖的展示規則和橫圖類似，其閾值也是3:1，同樣為了更好的理解，我還是以微信為例。
同樣繼續做了5組測試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例。
如下圖用於接下來的測試：
將圖片分別傳送到聊天介面，得到如下效果，我分別對圖片進行1到5的排序，方便解說：
同樣，圖片為豎圖時，圖片比例以3:1為閾值，圖片比例小於3:1時，高度固定、寬度等比縮放；當圖片比例大於3:1時，圖片的寬度和高度都保持一致，並都以3:1的縮圖尺寸展示，多於部分隱藏。
從上圖可以發現1、2、3張圖片的高度隨圖片比例變化始終保持一致即270px，而圖片寬度不同（圖片寬度由圖片等比縮放而來）。
在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮圖的展示寬高一致。
通過上面的解說，想必大家也瞭解了什麼是閾值，以及在做類似社交頁面圖片適配時該如何使用。
三、總結
1. 文字部分
在聊天介面中，標註時出現了兩個變數，這時候我們可以考慮用百分比的方式進行標註。這樣可以做到多個機型進行適配，保證專案能夠順利落地。
2. 圖片部分
在做圖片部分時，需要先設定閾值，然後我們在根據閾值進行方圖、橫圖、豎圖的適配工作。
參考連結：http://www.mobileui.cn/story-behind-the-chat-thumbnails.html?from=singlemessage 《聊天縮圖背後的故事：你不曾注意的那些細節》
作者：風箏KK，公眾號：海鹽社
本文由 @ 風箏KK 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基於 CC0 協議
