選擇網站風格
6 組主色、3 組字型搭配,其他照模板。選好之後,整個網站都會一起換:首頁、課程頁、上課頁、購物車結帳和會員中心。
主色 6 組
每組 9 個顏色,從按鈕、標題、內文到底色都配好了。每組都測過,主色按鈕上的白字對比都超過 4.5:1,看得清楚。
森林
按鈕白字對比 6.3:1自然、療癒、身心深海
按鈕白字對比 8.3:1專業、考試、語言莓果
按鈕白字對比 6.3:1美感、甜點、女性品牌藤紫
按鈕白字對比 7.2:1創意、藝術、心靈石墨
按鈕白字對比 12.5:1極簡、設計、商業字型搭配 3 組
內文都用清楚好讀的思源黑體,只換標題的字型。三種都是免費字型,不用另外買授權。
內文:思源黑體 Noto Sans TC
清楚俐落,最百搭
在家,也能拉出第一個碗
從第一堂開始
從揉土、定中心到修坯,跟著影片一步一步做。卡住了,老師在留言區回你。
內文:思源黑體 Noto Sans TC
有書卷氣,適合講究質感的品牌
在家,也能拉出第一個碗
從第一堂開始
從揉土、定中心到修坯,跟著影片一步一步做。卡住了,老師在留言區回你。
內文:思源黑體 Noto Sans TC
親切有溫度,適合手作與生活類
在家,也能拉出第一個碗
從第一堂開始
從揉土、定中心到修坯,跟著影片一步一步做。卡住了,老師在留言區回你。
字級與間距
字級、間距、圓角都照模板,電腦和手機上都清楚好讀。
主視覺標題
48/32px拉出第一個碗
48/32px拉出第一個碗
頁面標題
38/28px課程
38/28px課程
區塊標題
30/24px從第一堂開始
30/24px從第一堂開始
卡片標題
19px拉坯入門:從定中心到第一個碗
19px拉坯入門:從定中心到第一個碗
內文
17px從揉土、定中心到修坯,跟著影片一步一步做。
17px從揉土、定中心到修坯,跟著影片一步一步做。
說明文字
15px8 個單元・2 小時 40 分
15px8 個單元・2 小時 40 分
標籤
13px可試看
13px可試看
圓角按鈕 8px・輸入框 8px・卡片 12px・報名區塊 16px
前面是電腦版、後面是手機版的字級。
全站共用元件
網站上常用的按鈕、標籤、表單、提示和表格,都會跟著你選的顏色和字型一起換,每一頁看起來都是同一套。
按鈕
立即報名加入購物車看全部課程
用在:報名、加入購物車、前往結帳、繼續上課、會員中心
標籤與價格
線上課程可試看剩 2 位NT$1,800 2,200免費
用在:課程與商品卡片、課程頁、購物車
表單欄位
Email 格式好像不對,再檢查一下
用在:聯絡表單、登入註冊、結帳、會員資料
提示訊息
已加入購物車
購買課程後就可以在這裡提問
這個場次只剩 2 個名額
優惠碼無效,請確認大小寫
提示的顏色固定(成功綠、提醒黃、錯誤紅),不跟著主色變,客人一眼就看得懂。用在:課程頁、購物車、會員中心
分頁籤與進度
學習進度2/8 個單元
用在:課程頁、學習中心、我的課程
表格
| 訂單 | 課程 | 狀態 | 金額 |
|---|---|---|---|
| #1046 | 拉坯入門 | 已付款 | NT$2,400 |
| #1045 | 週末拉坯小班 | 待付款 | NT$3,600 |
用在:購物車、訂單紀錄、測驗紀錄