從 Google Material Design 問世以後,愈來愈多網站設計出了卡片的 UI。
卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。
今天設計了一個簡單造形的卡片,歡迎大家取用。
See the Pen simple card by sean (@sean-su) on CodePen.
以下講一下設計上的思考,跟一些最近常用的方法。
卡片頭(Card Title)
卡片頭大至上就是一張圖片。
但,有跟編輯配合過的前端就會知道,圖片大小很多時候是不固定的。
如果真的照著現有的圖片去做卡片頭,就會有高度不一樣的狀況。
解決這種的方法,就是把圖片改成背景圖,然後限定卡片頭的區塊比例,常用的比例是 16:9,這是參考最佳影音的比例。
使用背景圖的原理,在「像Medium的漸近式圖片加載」這篇上有說明了,這邊就不再多說。
另外通常一個站上的文章會有許多類別,因此在卡片頭上也在左上角放了一個寫文章類別用的小標籤,為了不讓樣式太死板以及能夠清楚看見文字,就用成漸層背景。
卡片身體(Card Body)
Card Body的部份,就是一般的文字內容,包含文章標題跟簡述。
Body 沒限高,如果要讓一整排的高度同相同,方法有:
1 Card Body 用 CSS寫 min-height
,並請後端工程師在顯示的內文上限字數。
2 Card Body 用 CSS 寫 min-height
,前端工程師用 JavaScript 去把多的字刪掉,並加上「……」。
差別就在審字數是要前端還後端處理。
卡片尾(Card Footer)
卡片身體跟卡片尾,中間的部份蠻多設計是用單純的一條線。
不過總覺得多出一條線在視覺上很雜,這邊就用的漸層色去處理,到左右兩邊漸漸透明。
這樣既能分隔區塊,又可以讓ui保持整潔。
卡片尾一般就是一個連結按鈕,為了方便在手機時可以單手操作,因此需要點擊的按鈕,放右半邊較合適,就放在右下角。
另外半邊的 icon 跟數字,就是要放能吸引人點閱的東西,這邊是用閱讀數跟收藏數。
也有網站是放 po 文日期、作者、留言人數……等,都可以,就看經營站長的想法。
共通點是:一個 icon + 一個數字。
簡單用一個 icon 表示數字的意思,可以讓版面維持簡潔。
icon,這邊用的是 SVG 圖,這樣桌機、手機都可以清晰呈現。
SVG 用 JavaScript 去 prepend,主要是因為這樣可以讓 HTML 碼在撰寫時比較乾淨,而且 CodePen 上除了程式碼外也無法存檔。
按鈕的部份,除了用跟其它文字不一樣的顏色,也故意在按鈕周圍留了很多的空白,這樣即使按鈕不加背景色,也可以讓使用者第一眼就知道它是個按鈕。
按鈕的操作反饋就是在 :hover
時加了一個具透明度的背景色。
有些 UI 平常先寫好,等有需要用到時就可以即時取用。
這篇分享自己刻的卡片 UI,歡迎取用。