淄博阎囤工贸有限公司

Feed流設(shè)計(jì):那些容易被忽略的圖片適配知識(shí)

2019-3-27    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

在產(chǎn)品設(shè)計(jì)中,大家很容易跟著產(chǎn)品原型走而忽略了一些設(shè)計(jì)上的細(xì)節(jié)問題。本文筆者總結(jié)了在Feed流中容易被設(shè)計(jì)師忽略的,卻最容易出現(xiàn)問題的幾種圖片適配方式。
我們每天被淹沒在各種Feed流中,感覺它的設(shè)計(jì)是如此簡(jiǎn)單,只需設(shè)計(jì)一個(gè)卡片,然后復(fù)制粘貼整個(gè)界面就大功告成了。
但是,大家很容易忽略圖片適配的問題,比如:微信朋友圈你無(wú)法保證用戶發(fā)幾張圖片,也無(wú)法預(yù)估圖片的比例,那么就需要我們對(duì)它設(shè)定相應(yīng)的規(guī)則。
下面我總結(jié)了最易出現(xiàn)問題的大圖布局、宮格布局、拼圖布局的圖片適配方式。
大圖布局也就是不管用戶上傳幾張圖片,F(xiàn)eed流中以一張大圖進(jìn)行展現(xiàn),點(diǎn)擊詳情或通過滑動(dòng)才能查看其他圖片。大圖布局的圖片適配方式一般有兩種:一種是展示圖片比例固定;另一種是隨圖片而變化。
不管用戶上傳的是橫圖還是豎圖,其展示圖片的比例都固定。采用該適配方式圖片占用空間小,可提高用戶的閱讀效率,因此,當(dāng)你的產(chǎn)品目的想要提高用戶的閱讀效率時(shí)可以使用,比如字里行間。
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
當(dāng)用戶上傳不同比例的圖片時(shí),圖片展示寬度為屏幕寬度,而圖片的展示高度根據(jù)確定的寬度等比例縮放。采用該適配方式能將圖片信息表達(dá)完善,圖片占用空間大,適合圖片質(zhì)量高,用戶以圖片瀏覽為主的產(chǎn)品。
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
需要注意的是:采用該方式需要設(shè)置閾值,當(dāng)圖片的高度超過一定數(shù)值,高度就不在增加以閾值為準(zhǔn),當(dāng)圖片的高度小于一定數(shù)值,高度不在減小,以閾值為準(zhǔn)。
宮格式布局也就是用戶上傳的圖片會(huì)適配到一個(gè)個(gè)的方塊中,宮格布局的形式多種多樣可以是九宮格、五宮格、三宮格,下面以較為復(fù)雜的九宮格的適配為例。
九宮格的適配未對(duì)屏幕進(jìn)行區(qū)分,但對(duì)只上傳一張圖片進(jìn)行了特殊的處理,二張或二張以上直接以最小邊為方塊的寬,然后等比例縮放,圖片的具體適配方案如下:
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
當(dāng)圖片為三張時(shí),3、5位置對(duì)調(diào),排成一行:1、2、3。2)當(dāng)圖片為兩張時(shí),直接將圖片適配到1、2格子。
當(dāng)圖片為1張時(shí),如果0.5 < = 寬 / 高 <= 2 時(shí),被限定在1 – 4格子的范圍大?。òㄩg距),也就是凡是寬高比在這個(gè)范圍時(shí),最長(zhǎng)的那邊暫兩個(gè)格子加間距。
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
當(dāng)圖片為1張時(shí),寬 / 高 > 2的圖片(如全景圖),最多占三欄,高最多占一欄(包括間距大?。?
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
單張圖片,寬 / 高 < 0.5(如微博長(zhǎng)圖),高最多占二欄,寬度最小占二欄1/3(包括間距)
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
這種布局方式是將幾個(gè)圖片拼成一個(gè)矩形,樣式新穎類似雜志的排版,因此也叫雜志式布局,不過因?yàn)槠鋵?duì)圖片的要求較高,因此多應(yīng)用在圖片社交中,如in。
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
下面,我總結(jié)了宮格布局的規(guī)則,在設(shè)計(jì)時(shí)你可以不用把每種情況都設(shè)計(jì)完,只要把不同圖片適配的方案發(fā)給開發(fā)即可,他們會(huì)選用相應(yīng)的規(guī)則。
Feed流中容易被忽略的圖片適配知識(shí)
Feed流中容易被忽略的圖片適配知識(shí)
大家在設(shè)計(jì)時(shí),很容易跟著產(chǎn)品原型走,從而忽略一些小設(shè)計(jì)。
尤其是對(duì)于新手設(shè)計(jì)師來(lái)說(shuō),更容易考慮不全面,因此建議大家在看到一些干貨的文章,就收集起來(lái),以后在工作中遇到也能夠很快的找到文章,從而就可以規(guī)避這些問題,少走彎路。

藍(lán)設(shè)計(jì)m.ibut.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

日歷

鏈接

個(gè)人資料

存檔

永清县| 高密市| 尤溪县| 黔南| 沙雅县| 石景山区| 海原县| 清河县| 云龙县| 高州市| 赣州市| 彭水| 嘉荫县| 保山市| 金门县| 深水埗区| 宝山区| 璧山县| 平安县| 健康| 沧源| 津南区| 桓仁| 隆林| 威信县| 牡丹江市| 集贤县| 吉林省| 安泽县| 读书| 凭祥市| 微山县| 牙克石市| 虞城县| 正镶白旗| 石棉县| 四子王旗| 吉安县| 中方县| 敦煌市| 环江|