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

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

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

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

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

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

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

小按鈕圖片列表展現(xiàn)形式其實有很多，怎么才能夠將他們分門別類的說清楚呢？
下面我們從3個方面來說：

1. 文字信息為主；
2. 圖片為主；
3. 橫向瀏覽。

1. 文字信息為主

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

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

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

2. 圖片為主

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

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

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

3. 橫向瀏覽

橫向瀏覽，其展示信息整體性強，左右切換流暢。同時占地面積小，往往會以模塊的形式插入到首頁，引導大家點擊關注。

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

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

二、小按鈕圖片列表注意要點

了解了上面的列表樣式之后，我們就來解決文章開頭提到的設計要點，主要有以下四點：

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

1. 圖文比例怎么算

在列表設計中，圖片與內容信息應該有一定的對比。盡管我們的列表是以文字為主，但是人天生喜歡看圖片而不是閱讀，因此我們仍然以圖片的形式引導用戶關注到內容上，從而點擊按鈕進行相關操作，具體該怎么做呢？

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

上圖分別以大眾點評和Keep為例，明顯大眾點評由于是電商類，其圖片質量參差不齊, 在加上右側內容較多，因此其圖片展示以小圖為主。

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

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

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

因此我們在設計時，也可以參考這樣的方式來確定圖片的高度。

2. 圖片尺寸如何設定

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

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

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

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

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

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

3. 按鈕如何擺放

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

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

3.1 和圖片頂對齊

當按鈕頂對齊，你需要考慮標題文字過多是采用“…”代替還是將標題顯示兩行，這里在切圖標注，甚至在設計時就需要考慮進去。

3.2 和圖片居中

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

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

右圖以大眾點評每日福利為例：由于其信息較少，因此圖標也直接采用的了居中的方式，避免樣式錯亂。

3.3?和圖片底對齊

當標題或者內容信息過長，我們往往會采用底對齊的方式，這個方式的優(yōu)勢是不用考慮其他信息的展示問題。

3.4 另外換行

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

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

4. 當內容信息增加或減少該如何展示

內容信息增加或者減少，主要指標題長短不一，有可能一行或兩行。

同時標簽有可能有有可能沒有，我們在設計時就需要考慮這些問題，為了保持界面的統(tǒng)一，我們應該注意一下三點：

4.1 添加減少標簽內容信息如何展現(xiàn)

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

右圖以大眾點評-名店搶購為例：當只有標題和價格信息，呈上下排布；當增加標簽信息，直接跟著標題順排即可。該方法適合信息較少，同時圖片比例不大的列表中。

當標題后面需要增加小標簽標題該如何顯示？這時候標簽往往不能換行，其適配和下面文字的最大距離一樣，同時標題文字過多情況采用“…”代替。

五、總結

下面主要來總結下小按鈕圖片列表設計要點：

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

作者：風箏KK，公眾號：海鹽社

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

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