起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Feed流：那些容易被忽略的圖片適配知識
在產品設計中，大家很容易跟著產品原型走而忽略了一些設計上的細節問題。本文筆者總結了在Feed流中容易被設計師忽略的，卻最容易出現問題的幾種圖片適配方式。
我們每天被淹沒在各種Feed流中，感覺它的設計是如此簡單，只需設計一個卡片，然后復制粘貼整個界面就大功告成了。
但是，大家很容易忽略圖片適配的問題，比如：微信朋友圈你無法保證用戶發幾張圖片，也無法預估圖片的比例，那么就需要我們對它設定相應的規則。
下面我總結了最易出現問題的大圖布局、宮格布局、拼圖布局的圖片適配方式。
一、大圖布局
大圖布局也就是不管用戶上傳幾張圖片，Feed流中以一張大圖進行展現，點擊詳情或通過滑動才能查看其他圖片。大圖布局的圖片適配方式一般有兩種：一種是展示圖片比例固定；另一種是隨圖片而變化。
1. 展示圖片尺寸固定
不管用戶上傳的是橫圖還是豎圖，其展示圖片的比例都固定。采用該適配方式圖片占用空間小，可提高用戶的閱讀效率，因此，當你的產品目的想要提高用戶的閱讀效率時可以使用，比如字里行間。
2. 隨圖片而變化
當用戶上傳不同比例的圖片時，圖片展示寬度為屏幕寬度，而圖片的展示高度根據確定的寬度等比例縮放。采用該適配方式能將圖片信息表達完善，圖片占用空間大，適合圖片質量高，用戶以圖片瀏覽為主的產品。
需要注意的是：采用該方式需要設置閾值，當圖片的高度超過一定數值，高度就不在增加以閾值為準，當圖片的高度小于一定數值，高度不在減小，以閾值為準。
二、宮格布局
宮格式布局也就是用戶上傳的圖片會適配到一個個的方塊中，宮格布局的形式多種多樣可以是九宮格、五宮格、三宮格，下面以較為復雜的九宮格的適配為例。
九宮格的適配未對屏幕進行區分，但對只上傳一張圖片進行了特殊的處理，二張或二張以上直接以最小邊為方塊的寬，然后等比例縮放，圖片的具體適配方案如下：
當圖片為三張時，3、5位置對調，排成一行：1、2、3。2）當圖片為兩張時，直接將圖片適配到1、2格子。
當圖片為1張時，如果0.5 < = 寬 / 高 <= 2 時，被限定在1 – 4格子的范圍大小（包括間距），也就是凡是寬高比在這個范圍時，最長的那邊暫兩個格子加間距。
當圖片為1張時，寬 / 高 > 2的圖片（如全景圖），最多占三欄，高最多占一欄（包括間距大?。?/p>
單張圖片，寬 / 高 < 0.5（如微博長圖），高最多占二欄，寬度最小占二欄1/3（包括間距）
三、拼圖布局
這種布局方式是將幾個圖片拼成一個矩形，樣式新穎類似雜志的排版，因此也叫雜志式布局，不過因為其對圖片的要求較高，因此多應用在圖片社交中，如in。
下面，我總結了宮格布局的規則，在設計時你可以不用把每種情況都設計完，只要把不同圖片適配的方案發給開發即可，他們會選用相應的規則。
四、畫重點
大家在設計時，很容易跟著產品原型走，從而忽略一些小設計。
尤其是對于新手設計師來說，更容易考慮不全面，因此建議大家在看到一些干貨的文章，就收集起來，以后在工作中遇到也能夠很快的找到文章，從而就可以規避這些問題，少走彎路。
比如，本文提到的三個容易被忽視的點：UGC內容未設置舉報功能、登陸注冊時鍵盤擋住按鈕、文字在淺色圖片上對比度不夠，下次大家遇到這些問題就不用再去踩坑了。
參考引文
《社交應用動態九宮格圖片的規則》：http://t.cn/RVagHD0
《仿Nice 首頁圖片列表 9 圖樣式 (iOS)》： http://t.cn/EMHgp3O
《那些謀殺你時間的Feed流》：http://t.cn/RNSvWi3
作者：風箏KK，公眾號：海鹽社
本文由 @風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash, 基于CC0協議
- 目前還沒評論，等你發揮！
