一個簡單的卡片樣式 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
Article Name
一個簡單的卡片樣式 simple card ui
Description
從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。
Augustus
Let's Write
Let's Write
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言