卡片列表與圖片列表
BY Grace │

卡片列表與圖片列表

卡片列表(Cards)、圖片列表(Image lists)
卡片排列跟圖片排列其實在視覺上有時會難以區分,今天來介紹卡片列表(Cards)與圖片列表(Image lists)。

卡片設計是很常用的排版方式,它能清楚的在區塊內表達出主旨,讓整體視覺又不顯紊亂。
構成卡片(Cards) 的基本元素就是容器(container),卡片內的文字、圖片、符號等內容一定會由一個容器把這些元素都包覆起來,有了容器,裡面的內容就一定會有邊距,文字、icon、圖片等元素基本邊距是16dp,其他特殊距離只需記得:1."按鈕"邊距是8dp;2.圖片可以有邊框或無邊距;而卡片與卡片的排版只要不要低於8dp即可。cards排版詳細規範
今天舉例幾種常見卡片排版,在套上Material Design規範後,其差異顯而易見。

常見卡片排版一:上方為圖,下方為標題與內文的卡片排版
從原網站擷取的卡片編排方式
Material Design 規範

依照Material Design 規範設計的卡片,連圖片比例也裁減調整過, 整理後讓整體畫面上圖片面積不會顯得過大,下方文字也不會看起來擁擠。

常見卡片排版二:左邊為小圖,右邊為標題與內容文字的卡片排版
此種排版方式也是很常見,而且在編排時基本上不會多留意間距,不過此次加上material design設計觀感上明顯更為舒適。

原始排版:Material Design 規範
上下比對下來,可以明顯感覺到依照Material Design 規範設計的卡片區塊清楚區分,視覺上較為舒適。

Material Design 規範,卡片排版參考二

此種也屬於Material design 規範之一的排列方式,把每個區塊內容連結統一位置,進而想要看更多的閱覽者也能一目了然按鈕位置。


但是圖片列表呢?圖片列表可以只是純圖像排列、也可以加上圖片標題(Subtitle)與icon,而每一個圖片列表的單位容器可以內含圖片標題也可以不含,理當然爾,如果標題文字是被包含在容器裡,那標題的左右內距要記得保留16dp。
純圖片列表的外距1, 2, 4, 8, 16, 20, 24, 32 dp都可以,可是如果文字是在圖片下方,那圖片左右距離就不能太近,建議在16dp以上。
純圖片排版,圖與徒的間距不要超過32dp都可以
圖片來源:Material Design Image list圖片

如果是有圖片標題的情況也分為,文字在圖片裡面、文字在圖片下方,在圖片裡的整體編排距離可以比照純圖片的間距用法,但如果是文字在圖片下方,因文字區塊本是與圖片對齊, 所以這種的排版間距就必須要寬一點。
含文字的圖片排列
圖片來源:Material Design Image list圖片

以上大略分享常看到的卡片與圖片排版,之後大家在設計上也可以更加留意這些小細節,讓瀏覽者在使用時視覺上更為舒服,逛你家網站才能看得久!
 

更多文章:

  1. Material Design 網頁版比較
  2. Material Design 改版實例
  3. Material Design 按鈕介紹
  4. Material Design-文字排版與應用
  5. Material Design 的對話視窗

回應