小按鈕列表展現(xiàn)的形式有多種：以文字圖片為主、以圖片為主、或是橫向?yàn)g覽……大家對列表想必一點(diǎn)都不陌生，那么，有關(guān)小按鈕圖片列表常見的設(shè)計(jì)要點(diǎn)你都知道多少呢？

列表想必大家都不陌生，說到小按鈕列表可能就有人要問，這個(gè)有什么可研究的？

是的，看上去小按鈕列表不過是在普通列表上加了一個(gè)按鈕而已，你回憶以下你在做這種頁面時(shí)，是否考慮得完善呢？

比如按鈕該如何擺放？列表圖片尺寸如何設(shè)定？產(chǎn)品信息和圖片的關(guān)系？當(dāng)產(chǎn)品信息增加或者減少該如何展現(xiàn)？

解決這個(gè)問題之前我們還是先來看看小按鈕圖片列表有哪些樣式，然后再來說說設(shè)計(jì)中需要考慮的要點(diǎn)。

一、小按鈕圖片列表的形式

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

1. 文字信息為主；
2. 圖片為主；
3. 橫向?yàn)g覽。

1. 文字信息為主

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

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

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

2. 圖片為主

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

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

土豆以大V號(hào)發(fā)布的視頻信息橫向滑動(dòng)顯示，其主要以視頻圖片吸引用戶注意，進(jìn)而引導(dǎo)用戶訂閱。Nice一樣展示發(fā)布過的相冊內(nèi)容引導(dǎo)用戶點(diǎn)擊關(guān)注，只是其最多展示4條多于不顯示。

3. 橫向?yàn)g覽

橫向?yàn)g覽，其展示信息整體性強(qiáng)，左右切換流暢。同時(shí)占地面積小，往往會(huì)以模塊的形式插入到首頁，引導(dǎo)大家點(diǎn)擊關(guān)注。

缺點(diǎn)就是不適合展示過多頁面，不能跳躍查看，視覺易疲勞。

大佬說主要在首頁插入企業(yè)大量信息，并通過按鈕引導(dǎo)大家關(guān)注，并且可以左右滑動(dòng)展現(xiàn)更多大佬信息。淘票票正在熱映，也是在首頁加入熱映的電影，并且通過圖片引發(fā)人們的興趣，從而點(diǎn)擊按鈕購票。

二、小按鈕圖片列表注意要點(diǎn)

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

1. 圖文比例怎么算；
2. 圖片尺寸如何設(shè)定；
3. 按鈕如何擺放；
4. 當(dāng)內(nèi)容信息增加或減少該如何展示；

1. 圖文比例怎么算

在列表設(shè)計(jì)中，圖片與內(nèi)容信息應(yīng)該有一定的對比。盡管我們的列表是以文字為主，但是人天生喜歡看圖片而不是閱讀，因此我們?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ì)量也相對較高，而發(fā)現(xiàn)頁面也主要介紹師傅課程，在這個(gè)需要看顏值的時(shí)代，當(dāng)然高顏值的老師們需要展示出來了，因此圖片相對來說較大，并以豎圖的形式出現(xiàn)。

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

將大眾點(diǎn)評(píng)和淘票票的圖文單獨(dú)出來，從上面右側(cè)的圖可以看出來，不管是大眾點(diǎn)評(píng)，還是淘票票，產(chǎn)品圖片的高度和文字主要信息高度一致（為了視覺協(xié)調(diào)，往往上下會(huì)留8px的距離）。

因此我們在設(shè)計(jì)時(shí)，也可以參考這樣的方式來確定圖片的高度。

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

通過圖文我們基本就確定了圖片的高度，那么寬度又該如何設(shè)置呢？

我們可以根據(jù)產(chǎn)品的屬性來，往往為了圖片編輯上傳和適配，往往我們把圖片比例設(shè)置成常見比例，因此在圖片設(shè)計(jì)上我們常常用到以下三個(gè)尺寸：4:3，1:1，3:2。

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

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

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

以上我主要小按鈕列表最常見的圖片展示方式，當(dāng)然還有其他的比例，大家在具體設(shè)計(jì)時(shí)，靈活使用。

3. 按鈕如何擺放

這里主要以常見的縱向列表為例，通過瀏覽大量的APP，我總結(jié)了按鈕的五個(gè)擺放位置：

1. 和圖片頂對齊；
2. 和圖片居中對齊；
3. 和圖片底對齊；
4. 另外換行。
5. 下面分別來看看：

3.1 和圖片頂對齊

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

3.2 和圖片居中

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

左圖以淘票票為例：將按鈕和按鈕下方的信息一起相對圖片居中，這樣便于一些有促銷信息一些沒有的情況能夠正常顯示。

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

3.3?和圖片底對齊

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

3.4 另外換行

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

通過上面的案例可以得出一個(gè)結(jié)論就是：按鈕的位置也是根據(jù)產(chǎn)品信息定的，如果按鈕帶了小標(biāo)簽，那么建議居中顯示；如果標(biāo)題和信息過長，建議底對齊顯示；如果底部信息過多，就頂對齊展示。

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

內(nèi)容信息增加或者減少，主要指標(biāo)題長短不一，有可能一行或兩行。

同時(shí)標(biāo)簽有可能有有可能沒有，我們在設(shè)計(jì)時(shí)就需要考慮這些問題，為了保持界面的統(tǒng)一，我們應(yīng)該注意一下三點(diǎn)：

4.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)-名店搶購為例：當(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)題文字過多情況采用“…”代替。

五、總結(jié)

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

1. 圖文比例如何確定：根據(jù)產(chǎn)品屬性和功能要求大概確定圖片范圍，然后根據(jù)主要文字信息，確定圖片的高度。
2. 圖片尺寸如何設(shè)定：為了后期編輯上傳，往往采用常規(guī)尺寸4:3, 3:2, 1:1等尺寸。
3. 按鈕如何擺放：主要有和圖片頂對齊、居中、底對齊、另外換行，在設(shè)計(jì)時(shí)，我們可根據(jù)展現(xiàn)的內(nèi)容具體分析采用哪種對齊方式。
4. 當(dāng)內(nèi)容信息增加或減少該如何展示：這時(shí)候就需要考慮有標(biāo)簽和無標(biāo)簽怎么顯示，文案信息過多是采用截?cái)噙€是“…”代替，還是折行，這個(gè)需要根據(jù)具體頁面來說，比如如果標(biāo)題不重要，那么久考慮用“…”代替，如果標(biāo)題重要就考慮折行。

作者：風(fēng)箏KK，公眾號(hào)：海鹽社

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

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