中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

人是追求美的動(dòng)物，所以相比起文字，用戶會(huì)對圖像有更高的要求。本文從圖片的比例和排列兩方面進(jìn)行分析，希望對你有幫助。

人類是感性生物，眼睛對于圖像捕捉的興趣程度往往是大于文本的。

也正是因?yàn)閼?yīng)用程序中無處不在的圖片，讓我時(shí)常對于圖片的展示方式習(xí)以為常、司空見慣。

殊不知靜下心來思考一番其排版展示背后的原因，還是總結(jié)出了一些原理。

圖片出現(xiàn)的場景有很多，但這篇文章我主要總結(jié)一下圖片在列表中排列的方式。以下是我對幾十款A(yù)PP進(jìn)行總結(jié)分析后進(jìn)行的整理，希望能夠有助于你以后對圖片的展示排版更加游刃有余。

一、圖片的比例

線上圖片的比例最為流行的無非是1:1、4:3、16:9?這幾種了。但只是記住了這幾個(gè)被設(shè)計(jì)師用來津津樂道的比例數(shù)據(jù)，而不去了解它們背后的緣由，可能你還是能難去運(yùn)用它們。

這幾個(gè)比例從源頭上講，都離不開早期的膠片攝影到現(xiàn)代相機(jī)傳感器大小的一步步演變。篇幅原因我不去多做擴(kuò)展，有興趣的朋友可以去查閱這方面的資料。

我主要是解析一下針對移動(dòng)端設(shè)計(jì)師來說，產(chǎn)品設(shè)計(jì)前期應(yīng)該如何規(guī)定圖片的展示比例，我認(rèn)為最關(guān)鍵的要素還是列表圖片的應(yīng)用場景和來源用戶是誰。

1:1

1:1 的圖像因?yàn)槠湔叫蔚囊?guī)整性，讓圖像能夠最大程度的突出主體，并且正方形對于非1:1圖片的適配也最為容易，能夠找到一個(gè)普適的適配方案來最大化地保留主體關(guān)鍵信息（我認(rèn)為這也是為什么頭像往往都讓用戶裁剪為正方形的原因之一）。

1:1的圖像展示往往是希望圖像在橫向與縱向上展示的信息盡量完整化，布局盡量規(guī)整化，所以我們能看到大部分電商平臺(tái)展示商品圖片都是遵循1:1比例。

4:3

說到4:3一定有很多小伙伴會(huì)馬上想到3:2的圖像比例，因?yàn)樽钇鸪?35膠卷輸出的照片比例就是3:2。但隨著手機(jī)端攝影在大眾中普及，4:3的圖像逐漸流行起來，并且目前市場上的主流手機(jī)攝影的照片尺寸一般都為4:3。

所以當(dāng)列表展示的是UGC內(nèi)容，圖片主要來源是平臺(tái)用戶，那么用戶最可能的圖像來源渠道就是手機(jī)攝影了，這時(shí)候設(shè)置圖片比例為4:3是比較合理的。

類似的案例比如58同城讓房東自行上傳租房信息的圖片，不可能每一個(gè)房東都有專業(yè)的攝影設(shè)備，大部分的圖像可能都是由手機(jī)拍攝的，所以這時(shí)候設(shè)置圖像展示為4:3對于用戶圖像的適配裁剪損失最小。

但是這是不是說明3:2的圖像比例在移動(dòng)端的展示就已經(jīng)不存在了呢？并不是的，這就要從產(chǎn)品定位和用戶場景來說了。

馬蜂窩和愛彼迎是兩款主打旅行衍生業(yè)務(wù)的產(chǎn)品，大多數(shù)生產(chǎn)內(nèi)容的用戶可能在旅行過程中對于攝影都有所涉獵。所以UGC圖像來源的渠道很可能是相機(jī)，對于相機(jī)設(shè)備輸出的圖像，采用3:2的比例對用戶圖像的適配裁剪損失便是最小的了。

16:9

16:9不用贅述了，這是一個(gè)非常典型的視頻比例尺寸了，一般視頻類列表的圖片尺寸會(huì)比較常用，例如愛奇藝、優(yōu)酷這樣的視頻類產(chǎn)品，基本都是采用16:9的尺寸來展示圖像。

倒也不是說圖像的比例一定要遵循以上這幾種，只能說這幾個(gè)比例覆蓋了大多數(shù)的圖像場景。使用這些比例展示圖像，在非常規(guī)比例圖像需要適配裁剪的情況下，損失的像素能達(dá)到最小。

當(dāng)然，當(dāng)列表展示的是PGC內(nèi)容，圖像來源主要是由團(tuán)隊(duì)內(nèi)部運(yùn)營，那么圖像比例就可以較為自由一些了，因?yàn)樯蟼鞯膱D片往往能夠得到內(nèi)部的把控。

二、圖片列表的排列

我參考了諸多的應(yīng)用程序，發(fā)現(xiàn)主流的圖片的排列方式基本可以由“列結(jié)構(gòu)+行結(jié)構(gòu)”來囊括。

下面聽我娓娓道來。

單列+文本=列表布局

列表布局是最為常見的排列方式，列表布局中圖片展示較小，用戶一般不會(huì)去注意圖片細(xì)節(jié)，所以列表布局往往是更注重文本內(nèi)容的展示。

曾經(jīng)看到過一個(gè)問題：什么情況下列表應(yīng)該左圖右文？什么情況又應(yīng)該右圖左文？

首先要明白，列表布局和人的瀏覽習(xí)慣（從左到右，從上往下）相契合，是典型的F式瀏覽布局。所以大多數(shù)人瀏覽左右結(jié)構(gòu)列表，都是遵循這個(gè)瀏覽軌跡的，所以你可以將更重要的內(nèi)容放置在左側(cè)。

舉個(gè)例子：許多新聞資訊產(chǎn)品采用的都是左文右圖布局，是因?yàn)閳D片和標(biāo)題內(nèi)容的關(guān)聯(lián)性不大，圖片只是用來增加閱讀趣味性。根據(jù)用戶的瀏覽習(xí)慣，標(biāo)題放在居左更能突出內(nèi)容，而不會(huì)被圖像所干擾。

而對于圖像內(nèi)容優(yōu)先于文本內(nèi)容的情況，也可以借助用戶瀏覽習(xí)慣，將圖片居左顯示，讓圖片來更直觀地傳達(dá)內(nèi)容，讓用戶的視線順著左側(cè)的圖片向下快速瀏覽。許多電商類APP就是采用的左圖右文的形式。

之前還看到過一個(gè)網(wǎng)友分享的觀點(diǎn)：因?yàn)橛脩舳鄶?shù)用右手操作，滑動(dòng)頁面時(shí)，手指遮擋的是次要的圖片內(nèi)容，而重要的文本內(nèi)容在滑動(dòng)的過程中也能夠無障礙閱讀，我認(rèn)為這也是一個(gè)很好的想法。

單列=大圖布局

大圖布局一行只展示一張圖片，這種排列方式很耗損移動(dòng)端屏縱向空間，但同時(shí)也能夠幫助用戶過濾繁瑣信息，一屏內(nèi)只關(guān)注1-2個(gè)內(nèi)容。

正是因?yàn)閳D片版面大的緣故，能夠向用戶十分完整地展示圖片細(xì)節(jié)，所以對于圖像的質(zhì)量要求往往會(huì)很高（這里說的圖片質(zhì)量不單單是像素質(zhì)量，還有圖片內(nèi)容質(zhì)量）。

我發(fā)現(xiàn)會(huì)采用這種圖像布局形式的產(chǎn)品，或多或少會(huì)設(shè)立專門的運(yùn)營人員編輯，或是采用審核機(jī)制，來完成對圖像視覺表現(xiàn)上的把控。

兩列+并排=網(wǎng)格布局

兩列網(wǎng)格布局相對于單列大圖布局來說，一屏內(nèi)能夠展示的圖像內(nèi)容更多，能夠更快速地將內(nèi)容傳遞給用戶。相對于列表布局來說，網(wǎng)格布局更希望在屏幕空間利用率高的前提下，用圖像去命中目標(biāo)不明確用戶。

既然都是為了節(jié)約屏幕利用空間了，在該布局下的文本配置基本上也不會(huì)超過兩行，一般會(huì)做省略處理。

兩列+錯(cuò)位=瀑布流布局

為了增加網(wǎng)格布局的趣味性，避免用戶視覺疲勞，從單一的并排形式衍生出了錯(cuò)位展示形式，也就是瀑布流了。

瀑布流放任了單個(gè)內(nèi)容在縱向上的展示空間，讓內(nèi)容與內(nèi)容之間呈現(xiàn)出錯(cuò)位的形式。雖然視覺跳躍性增加了，但是也容易導(dǎo)致用戶視覺流混亂。讓高度更高的內(nèi)容容易被看見，高度更低的內(nèi)容容易被忽略。所以瀑布流更適用于圖像高度能夠均衡的列表場景。

多列+拼圖=拼圖布局

拼圖布局也是增加了圖像排版的趣味性，并且根據(jù)拼圖形式，可以由更多列來組成。相對于用瀑布流來增加趣味性，拼圖能顯得更加規(guī)整。

拼圖中如何配置單個(gè)拼圖比例大小是相對自由的，對于質(zhì)量高的圖像可以占據(jù)大版面，對于質(zhì)量低的圖像可以適當(dāng)縮小。如何去定義，更在于設(shè)計(jì)師前期規(guī)劃的把控。

#專欄作家#

UCD耍家，公眾號(hào)：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議