比如按鈕該如何擺放？列表圖片尺寸如何設(shè)定？產(chǎn)品信息和圖片的關(guān)系？當(dāng)產(chǎn)品信息增加或者減少該如何展現(xiàn)？解決這個(gè)問(wèn)題之前我們還是先來(lái)看看小按鈕圖片列表有哪些樣式，然后再來(lái)說(shuō)說(shuō)設(shè)計(jì)中需要考慮的要點(diǎn)。

小按鈕圖片列表展現(xiàn)形式其實(shí)有很多，怎么才能夠?qū)⑺麄兎珠T別類的說(shuō)清楚呢？下面我們從3個(gè)方面來(lái)說(shuō)：

1、文字信息為主

2、圖片為主

3、橫向?yàn)g覽

文字信息為主

其表現(xiàn)形式往往為左圖右字，人的視覺(jué)流程往往是圖片>文章，因此**圖片吸引用戶，另外右邊文字將商品信息部分露出，可以幫助用戶快速了解，找到感興趣的內(nèi)容。

使用場(chǎng)景：一般用在電商團(tuán)購(gòu)類商品列表、福利中心、任務(wù)中心界面中。適用于文字信息為主要內(nèi)容的列表，圖片不是很重要的信息。 

以大眾點(diǎn)評(píng)預(yù)約訂座和霸王餐為例，圖片雖然在左側(cè)顯示，但是其所占比例相對(duì)較少，主要以內(nèi)容信息為主，幫助用戶快速找到感興趣的內(nèi)容。

帶有小按鈕的以圖片為主的列表，我們?cè)谝曨l類的APP和電商類的APP較為常見(jiàn)，下面主要以帶有小按鈕的訂閱和關(guān)注列表為例，其優(yōu)勢(shì)是展示內(nèi)容整體性強(qiáng)。缺點(diǎn)是一屏展示頁(yè)面較少，不能跳躍查看。

使用場(chǎng)景：視頻、旅游、健身、圖片社交等具有訂閱和關(guān)注的列表中，另外在一些應(yīng)用市場(chǎng)也經(jīng)常使用。

土豆以大V號(hào)發(fā)布的視頻信息橫向滑動(dòng)顯示，其主要以視頻圖片吸引用戶注意，進(jìn)而引導(dǎo)用戶訂閱。

Nice一樣展示發(fā)布過(guò)的相冊(cè)內(nèi)容引導(dǎo)用戶點(diǎn)擊關(guān)注，只是其**多展示4條多于不顯示。

橫向?yàn)g覽

橫向?yàn)g覽，其展示信息整體性強(qiáng)，左右切換流暢。同時(shí)占地面積小，往往會(huì)以模塊的形式插入到首頁(yè)，引導(dǎo)大家點(diǎn)擊關(guān)注。缺點(diǎn)就是不適合展示過(guò)多頁(yè)面，不能跳躍查看，視覺(jué)易疲勞。

大佬說(shuō)主要在首頁(yè)插入企業(yè)大量信息，并**按鈕引導(dǎo)大家關(guān)注，并且可以左右滑動(dòng)展現(xiàn)更多大佬信息。

淘票票正在熱映，也是在首頁(yè)加入熱映的電影，并且**圖片引發(fā)人們的興趣，從而點(diǎn)擊按鈕購(gòu)票。

了解了上面的列表樣式之后，我們就來(lái)解決文章開(kāi)頭提到的設(shè)計(jì)要點(diǎn)，主要有以下四點(diǎn)：

1、圖文比例怎么算

2、圖片尺寸如何設(shè)定

3、按鈕如何擺放

4、當(dāng)內(nèi)容信息增加或減少該如何展示

在列表設(shè)計(jì)中，圖片與內(nèi)容信息應(yīng)該有一定的對(duì)比。盡管我們的列表是以文字為主，但是人天生喜歡看圖片而不是閱讀，因此我們?nèi)匀灰詧D片的形式引導(dǎo)用戶關(guān)注到內(nèi)容上，從而點(diǎn)擊按鈕進(jìn)行相關(guān)操作，具體該怎么做呢？

首先，我們可以根據(jù)產(chǎn)品類型確定圖片展示的大小。

上圖分別以大眾點(diǎn)評(píng)和Keep為例，明顯大眾點(diǎn)評(píng)由于是電商類，其圖片質(zhì)量參差不齊, 在加上右側(cè)內(nèi)容較多，因此其圖片展示以小圖為主。

Keep主要以健身為主，其中圖片質(zhì)量也相對(duì)較高，而發(fā)現(xiàn)頁(yè)面也主要介紹師傅課程，在這個(gè)需要看顏值的時(shí)代，當(dāng)然高顏值的老師們需要展示出來(lái)了，因此圖片相對(duì)來(lái)說(shuō)較大，并以豎圖的形式出現(xiàn)。

然后，就是確定圖文的尺寸，**簡(jiǎn)單的方式根據(jù)文字內(nèi)容的多少來(lái)確定圖片的高度。

將大眾點(diǎn)評(píng)和淘票票的圖文單獨(dú)出來(lái)，從上面右側(cè)的圖可以看出來(lái)，不管是大眾點(diǎn)評(píng)，還是淘票票，產(chǎn)品圖片的高度和文字主要信息高度一致（為了視覺(jué)協(xié)調(diào)，往往上下會(huì)留8px的距離）。因此我們?cè)谠O(shè)計(jì)時(shí)，也可以參考這樣的方式來(lái)確定圖片的高度。

**圖文我們基本就確定了圖片的高度，那么寬度又該如何設(shè)置呢？我們可以根據(jù)產(chǎn)品的屬性來(lái)，往往為了圖片編輯上傳和適配，往往我們把圖片比例設(shè)置成常見(jiàn)比例，因此在圖片設(shè)計(jì)上我們常常用到以下三個(gè)尺寸：4:3，1:1，3:2。

4:3 的原因是相機(jī)的畫幅一般是4比3，同時(shí)手機(jī)也較多該尺寸，所以我們看到越來(lái)越多的APP也采用這一比例。

1:1 一般用于電商里面常常用到，能夠大限度的展示圖片，同時(shí)由于上傳圖片尺寸不規(guī)律更便于裁剪。

3:2 該比例也較為常見(jiàn)，早期我們的相機(jī)畫幅就是該比例，因此一些圖片型的APP采用該比例較多。

這里主要以常見(jiàn)的縱向列表為例，**瀏覽大量的APP，我總結(jié)了按鈕的五個(gè)擺放位置：和圖片頂對(duì)齊，和圖片居中對(duì)齊，和圖片底對(duì)齊，另外換行。下面分別來(lái)看看：

1、和圖片頂對(duì)齊

當(dāng)按鈕頂對(duì)齊，你需要考慮標(biāo)題文字過(guò)多是采用“…”代替還是將標(biāo)題顯示兩行，這里在切圖標(biāo)注，甚至在設(shè)計(jì)時(shí)就需要考慮進(jìn)去。

2、和圖片居中

當(dāng)按鈕和圖片居中對(duì)齊，你需要考慮當(dāng)按鈕下方帶其他信息，需要將一整塊內(nèi)容居中，還是 為了達(dá)到視覺(jué)平衡仍然將按鈕居中。

將按鈕和按鈕下方的信息一起相對(duì)圖片居中，這樣便于一些有促銷信息一些沒(méi)有的情況能夠正常顯示。

右圖以大眾點(diǎn)評(píng)每日福利為例，由于其信息較少，因此圖標(biāo)也直接采用的了居中的方式，避免樣式錯(cuò)亂。

3、和圖片底對(duì)齊

當(dāng)標(biāo)題或者內(nèi)容信息過(guò)長(zhǎng)，我們往往會(huì)采用底對(duì)齊的方式，這個(gè)方式的優(yōu)勢(shì)是不用考慮其他信息的展示問(wèn)題。

4、另外換行

當(dāng)頁(yè)面中有其他信息，容易和按鈕混淆時(shí)，這時(shí)候采用換行處理，常常出現(xiàn)在優(yōu)惠券頁(yè)面，主要為了將按鈕和優(yōu)惠券的信息分離開(kāi)。

內(nèi)容信息增加或者減少，主要指標(biāo)題長(zhǎng)短不一，有可能一行或兩行。同時(shí)標(biāo)簽有可能有有可能沒(méi)有，我們?cè)谠O(shè)計(jì)時(shí)就需要考慮這些問(wèn)題，為了保持界面的統(tǒng)一，我們應(yīng)該注意一下三點(diǎn)：

1、添加減少標(biāo)簽內(nèi)容信息如何展現(xiàn)

左圖以大眾點(diǎn)評(píng)為例，他主要采用信息居中的方式展現(xiàn)，由圖可以看出默認(rèn)展示標(biāo)題和多商圈間距為24px,當(dāng)加入標(biāo)簽MrMiss光顧本店設(shè)置間距后，我們可以明顯的看到其適配機(jī)制，就是整塊內(nèi)容采用和圖片居中的原則，這是一種比較保險(xiǎn)的方式。

右圖以大眾點(diǎn)評(píng)-名店搶購(gòu)為例，當(dāng)只有標(biāo)題和價(jià)格信息，呈上下排布；當(dāng)增加標(biāo)簽信息，直接跟著標(biāo)題順排即可。該方法適合信息較少，同時(shí)圖片比例不大的列表中。

當(dāng)標(biāo)題后面需要增加小標(biāo)簽標(biāo)題該如何顯示？

這時(shí)候標(biāo)簽往往不能換行，其適配和下面文字的大距離一樣，同時(shí)標(biāo)題文字過(guò)多情況采用“…”代替。

下面主要來(lái)總結(jié)下小按鈕圖片列表設(shè)計(jì)要點(diǎn)：

1、圖文比例如何確定：根據(jù)產(chǎn)品屬性和功能要求大概確定圖片范圍，然后根據(jù)主要文字信息，確定圖片的高度。

2、圖片尺寸如何設(shè)定：為了后期編輯上傳，往往采用常規(guī)尺寸4:3, 3:2, 1:1等尺寸。

3、按鈕如何擺放：主要有和圖片頂對(duì)齊、居中、底對(duì)齊、另外換行，在設(shè)計(jì)時(shí)，我們可根據(jù)展現(xiàn)的內(nèi)容具體分析采用哪種對(duì)齊方式。

4、當(dāng)內(nèi)容信息增加或減少該如何展示：這時(shí)候就需要考慮有標(biāo)簽和無(wú)標(biāo)簽怎么顯示，文案信息過(guò)多是采用截?cái)噙€是“…”代替，還是折行，這個(gè)需要根據(jù)具體頁(yè)面來(lái)說(shuō)，比如如果標(biāo)題不重要，那么久考慮用“…”代替，如果標(biāo)題重要就考慮折行。