一個簡單的卡片樣式 Simple Card UI

一個簡單的卡片樣式 simple card ui
一個簡單的卡片樣式 simple card ui

從 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,歡迎取用。

Summary
一個簡單的卡片樣式 Simple Card UI
Article Name
一個簡單的卡片樣式 Simple Card UI
Description
從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言