起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識有關聊天氣泡框，80%的人都不知道這些……
對于設計師來說，越是小的細節越值得注意。本文分析了在設計聊天界面時文字部分和圖片部分中有哪些值得注意的細節，希望對設計師朋友們有所幫助。
聊天氣泡我們很熟悉，每天都要和他打交道。早上醒來第一件事你是不是打開微信看看呢？
那在和朋友聊天時，你有沒有這樣的疑問，為什么輸入文字多少不同，氣泡的展示也不同？為什么發送不同比例的圖片，其縮略圖的展示效果也不同？
作為設計師，搞懂界面背后的原理是很重要的。
本期我就從聊天界面中常見的文字部分、圖片部分來分析，看看聊天界面在設計時需要注意哪些細節。
一、文字部分
聊天界面雖然不是每個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 協議
這個比例大小怎么看。 比如 3:1 6:1 ，這兩個比例誰大 誰小啊？ 計算公式 第一位 除以 第二位的值比大小嘛？
不錯的嘗試
其實是利用了黃金比例對么
并不是，只是在你不知道怎么做的適合，有一個參考，同時這樣的方法可以幫助你快速落地。聊天界面對于不是專門做社交的來說，花很多時間去適配，得不嘗試。
很不錯的經驗，學習了。
額么么么么，也就是微信怎么做的，那就是好的，不用去看其它家，也不用考慮其它家，微信這么做的，那就是黃金分割比，那就是完美無瑕。。。
這個細節有點意思的
給力
贊，