之前25學(xué)堂跟大家討論了分享了APP列表的布局展示方式。建議童鞋們可以好好的閱讀一下。

1、APP產(chǎn)品列表UI設(shè)計(jì)思維【移動(dòng)產(chǎn)品設(shè)計(jì)干貨】

2、APP設(shè)計(jì)課程：手機(jī)APP圖文列表設(shè)計(jì)【大圖一列】

而今天，25學(xué)堂的小編繼續(xù)跟大家聊聊APP設(shè)計(jì)列表當(dāng)中的圖片與文字的組織關(guān)系。

同時(shí)告訴大家這些圖片文字組合布局的優(yōu)缺點(diǎn)分析。希望對(duì)大家有所幫助。

第一種情況：圖片靠左對(duì)齊，文字靠右

根據(jù)眼動(dòng)規(guī)律來(lái)說(shuō)，也就是PC端我們常說(shuō)的F型閱讀模式

“F”指的就是閱讀者視線的運(yùn)動(dòng)規(guī)律：一般來(lái)說(shuō)，習(xí)慣從左至右閱讀的讀者在讀網(wǎng)頁(yè)時(shí)，會(huì)先以水平的方式瀏覽頁(yè)面上部。接下來(lái)閱讀者的視線會(huì)下移，快速掃描一下副標(biāo)題或關(guān)鍵字，如果其中恰好有感興趣的內(nèi)容，他們就會(huì)按正常模式，也就是以水平的方式繼續(xù)讀下去。

言歸正傳：在移動(dòng)端正常情況下，用戶的注意力從左向右（當(dāng)然不否定特例的），圖片放在列表開(kāi)頭的優(yōu)勢(shì)。

如下圖所示的：

三個(gè)優(yōu)點(diǎn)：

A、可以增加識(shí)別度，加快用戶對(duì)該記錄的識(shí)別速度，比如通訊錄左側(cè)頭像、IM消息列表頭像；這樣的布局組合方式的前提是圖片比文字更重要點(diǎn)。

B、可以吸引用戶注意力，提高點(diǎn)擊率，比如很多APP在每個(gè)欄目左邊會(huì)放一個(gè)icon；

C、可以用圖片內(nèi)容引發(fā)用戶興趣，作為營(yíng)銷(xiāo)的手段提高轉(zhuǎn)化率，比如團(tuán)購(gòu)網(wǎng)站的美食列表經(jīng)常放很有誘惑力的美食圖片。

缺點(diǎn)：

A、如果圖片與內(nèi)容沒(méi)啥關(guān)系，就會(huì)增加惹眼的污染信息，影響用戶的閱讀速度；

B、如果圖片主要是以營(yíng)銷(xiāo)為目的的，久而久之用戶就會(huì)下意識(shí)自動(dòng)過(guò)濾左側(cè)的圖片，圖片就成了無(wú)用的障礙信息。

第二種情況：圖片靠右對(duì)齊，文字靠左的布局方式

如果列表中，每條記錄的內(nèi)容比圖片更重要或者該內(nèi)容很難用相應(yīng)的圖片進(jìn)行表達(dá)，同時(shí)又想充實(shí)頁(yè)面提高頁(yè)面美觀度，又或者想用圖片對(duì)文字進(jìn)行補(bǔ)充說(shuō)明的，可以考慮圖片放在右側(cè)；

如下圖的界面所示：今日頭條APP。

對(duì)于這樣類(lèi)型的APP，內(nèi)容為主，圖片只是配圖。APP里面的配圖只是對(duì)內(nèi)容的一種補(bǔ)充。讓內(nèi)容看起來(lái)更加的豐富。

這樣的圖片靠右對(duì)齊的布局方式適用于新聞?lì)惢蛘哒f(shuō)內(nèi)容為主的APP界面。

優(yōu)點(diǎn)：適合媒體快速閱讀。

缺點(diǎn)：視覺(jué)平衡不夠好。

第三種情況：圖片放在上方，文字放下方

如下面的這些APP界面設(shè)計(jì) 作品：

此時(shí)圖片的重要程度比放在左側(cè)還要高的多，基本每條記錄的主要信息都靠配圖來(lái)呈現(xiàn)，也主要靠圖片來(lái)吸引用戶，文字僅起到輔助作用。這種處理方式主要利用在視頻網(wǎng)站、圖片社交、部分購(gòu)物網(wǎng)站、旅游網(wǎng)站上。

一般用在電商購(gòu)物網(wǎng)站、旅游網(wǎng)站、視頻網(wǎng)站等相關(guān)的APP界面設(shè)計(jì)上。

優(yōu)點(diǎn)：醒目，大氣、辨識(shí)度高。

缺點(diǎn)：如果一排只放一條記錄，很占空間。對(duì)于移動(dòng)端來(lái)說(shuō)是非常浪費(fèi)的。

第四種情況：圖片放下面，文字放上面的。

這類(lèi)圖文組合布局方式常見(jiàn)于社交APP界面上。比如我們最常見(jiàn)的就是微信的朋友圈的布局方式。

主要利用于社交的狀態(tài)列表中，比如朋友圈、微博、空間，主要的優(yōu)勢(shì)：可以把文字和圖片的結(jié)合優(yōu)勢(shì)充分發(fā)揮出來(lái)，文字簡(jiǎn)要陳訴，圖片帶你身臨其境，還原真實(shí)情況。

如下圖APP展示：

這樣的APP界面圖片排版優(yōu)點(diǎn)：自上而下閱讀，常見(jiàn)于一些觀點(diǎn)，建議等界面。圖片只是闡述輔助。這樣的布局設(shè)計(jì)漂亮。適合快速閱讀。

這類(lèi)跟第二種的圖片文字組合方式有類(lèi)似的地方。

缺點(diǎn)：只適合按某種排序。比如時(shí)間、地點(diǎn)等。

當(dāng)然，以上四種圖片和文字布局組合方式都是我們APP界面設(shè)計(jì)當(dāng)中常見(jiàn)的布局方式。

也是混搭在某一個(gè)APP里面的圖文列表表現(xiàn)方式。