選擇網站風格

6 組主色、3 組字型搭配,其他照模板。選好之後,整個網站都會一起換:首頁、課程頁、上課頁、購物車結帳和會員中心。

主色 6 組

每組 9 個顏色,從按鈕、標題、內文到底色都配好了。每組都測過,主色按鈕上的白字對比都超過 4.5:1,看得清楚。

陶土

按鈕白字對比 5.7:1溫暖、手作、生活感

森林

按鈕白字對比 6.3:1自然、療癒、身心

深海

按鈕白字對比 8.3:1專業、考試、語言

莓果

按鈕白字對比 6.3:1美感、甜點、女性品牌

藤紫

按鈕白字對比 7.2:1創意、藝術、心靈

石墨

按鈕白字對比 12.5:1極簡、設計、商業

字型搭配 3 組

內文都用清楚好讀的思源黑體,只換標題的字型。三種都是免費字型,不用另外買授權。

現代黑體標題:思源黑體 Noto Sans TC
內文:思源黑體 Noto Sans TC
清楚俐落,最百搭

在家,也能拉出第一個碗

從第一堂開始

從揉土、定中心到修坯,跟著影片一步一步做。卡住了,老師在留言區回你。

人文宋體標題:思源宋體 Noto Serif TC
內文:思源黑體 Noto Sans TC
有書卷氣,適合講究質感的品牌

在家,也能拉出第一個碗

從第一堂開始

從揉土、定中心到修坯,跟著影片一步一步做。卡住了,老師在留言區回你。

溫暖手寫標題:霞鶩文楷 LXGW WenKai TC
內文:思源黑體 Noto Sans TC
親切有溫度,適合手作與生活類

在家,也能拉出第一個碗

從第一堂開始

從揉土、定中心到修坯,跟著影片一步一步做。卡住了,老師在留言區回你。

字級與間距

字級、間距、圓角都照模板,電腦和手機上都清楚好讀。

主視覺標題
48/32px
拉出第一個碗
頁面標題
38/28px
課程
區塊標題
30/24px
從第一堂開始
卡片標題
19px
拉坯入門:從定中心到第一個碗
內文
17px
從揉土、定中心到修坯,跟著影片一步一步做。
說明文字
15px
8 個單元・2 小時 40 分
標籤
13px
可試看
圓角按鈕 8px・輸入框 8px・卡片 12px・報名區塊 16px

前面是電腦版、後面是手機版的字級。

全站共用元件

網站上常用的按鈕、標籤、表單、提示和表格,都會跟著你選的顏色和字型一起換,每一頁看起來都是同一套。

按鈕

立即報名加入購物車看全部課程

用在:報名、加入購物車、前往結帳、繼續上課、會員中心

標籤與價格

線上課程可試看剩 2 位NT$1,800 2,200免費

用在:課程與商品卡片、課程頁、購物車

表單欄位

Email 格式好像不對,再檢查一下

用在:聯絡表單、登入註冊、結帳、會員資料

提示訊息

已加入購物車
購買課程後就可以在這裡提問
這個場次只剩 2 個名額
優惠碼無效,請確認大小寫

提示的顏色固定(成功綠、提醒黃、錯誤紅),不跟著主色變,客人一眼就看得懂。用在:課程頁、購物車、會員中心

分頁籤與進度

學習進度2/8 個單元

用在:課程頁、學習中心、我的課程

表格

訂單課程狀態金額
#1046拉坯入門已付款NT$2,400
#1045週末拉坯小班待付款NT$3,600

用在:購物車、訂單紀錄、測驗紀錄