APP ui設(shè)計(jì)或是APP 視覺設(shè)計(jì)這些都是大家現(xiàn)有的Ui設(shè)計(jì)基礎(chǔ)可以做到的。然而一些好的APP設(shè)計(jì)布局思維和排版技巧，是25學(xué)堂一直傳授給大家的真正的干貨。

這節(jié)講的重點(diǎn)是：如何設(shè)計(jì)手機(jī)APP圖片列表或者是手機(jī)APP圖文列表。

下面幾個(gè)參考圖是25學(xué)堂的老譚童鞋，從目前國內(nèi)比較大的旅游APP當(dāng)中的截圖。截圖的內(nèi)容就是各個(gè)APP圖片列表或者是APP圖文列表。

第一種手機(jī)APP圖文列表設(shè)計(jì)效果：同程旅游網(wǎng)APP圖文列表設(shè)計(jì)

手機(jī)APP圖文列表設(shè)計(jì)分析：

這是一種大圖一行一個(gè)布局。優(yōu)點(diǎn)：視覺沖擊力很強(qiáng)，很適合旅游、電商類的APP。

而且文字放居中，文字有大有小，錯落有致。文字即代表了圖片的主題內(nèi)容。

第二種手機(jī)APP圖文列表設(shè)計(jì)效果：途牛旅游網(wǎng)APP圖文列表設(shè)計(jì)

手機(jī)APP圖文列表設(shè)計(jì)分析：

同樣采用大圖的背景設(shè)計(jì)，把圖片的主題和出發(fā)信息放置在左上角。價(jià)格信息放置在右下角。這樣的設(shè)計(jì)比較難的設(shè)計(jì)。目前途牛的這個(gè)APP列表設(shè)計(jì)頁面不能說是很美觀，只能說一般。 有點(diǎn)打補(bǔ)丁的視覺效果。

第三種手機(jī)APP圖文列表設(shè)計(jì)效果：國外經(jīng)常采用的APP圖文列表設(shè)計(jì)

上面這2個(gè)案例國外優(yōu)秀的APP列表設(shè)計(jì)。有點(diǎn)偏社交元素的APP圖文列表。APP設(shè)計(jì)也是非常精美。文字區(qū)域是有半透明的浮層背景。更顯得文字的表達(dá) 更有空間感。圓角的合理運(yùn)用使得整個(gè)界面非常的有逼格。

第四種手機(jī)APP圖文列表設(shè)計(jì)效果：阿里去啊app列表設(shè)計(jì)

我們一看到這樣的APP列表設(shè)計(jì)風(fēng)格，就知道是電商APP。必要的元素都排列的很條理。也是國內(nèi)電商界最常用的一種圖文列表排版。規(guī)規(guī)矩矩。25學(xué)堂也希望大家結(jié)合自己的產(chǎn)品特性來設(shè)計(jì)一些有個(gè)性的app圖文列表界面。如下圖：

國外的一個(gè)類似于支付寶錢包的app界面設(shè)計(jì)-生活-灰色-列表，搜索，個(gè)人信息，詳細(xì)內(nèi)容-App設(shè)計(jì)分享。

第五種手機(jī)APP圖文列表設(shè)計(jì)效果：圖片和文字區(qū)域是相等的布局設(shè)計(jì)

這一類APP圖文設(shè)計(jì)采用了1:1的對稱區(qū)域設(shè)計(jì)原則。 同時(shí)留白技巧使用合理。更像APP卡片化設(shè)計(jì)布局。扁平化的設(shè)計(jì)風(fēng)格更具時(shí)尚感和小清晰感。

以上五個(gè)手機(jī)APP圖文列表設(shè)計(jì)【大圖一列】案例的欣賞和學(xué)習(xí)。希望各位看完有比較清楚的怎么去設(shè)計(jì)自己APP的圖文大圖一列的布局排版設(shè)計(jì)。

下一節(jié)課程。我們將一行多列的APP圖文列表設(shè)計(jì)。 不知道大家有沒有發(fā)現(xiàn)，APP列表就是一張張卡片堆積而成的。這就是谷歌公司所倡導(dǎo)的移動卡片化設(shè)計(jì)的潮流。