一個簡單的卡片樣式 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

隨選筆記文

Firebase Google

Firebase Cloud Functions 基本使用筆記

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

Front-End

File API 客製上傳檔案按鈕 / input file

Front-End

用純 CSS 寫的網頁預覽效果

Front-End

漸層色按鈕 Hover 效果

Google Sheets

如何用 Google Sheets / Excel 當作資料庫

Front-End

用 CSS :target 製作頁籤、手風琴功能

API Front-End

WebSocket 基本介紹及使用筆記

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。