01
頁首(Header)設定
| 項目 | 說明 | 提供格式 |
|---|---|---|
| 頁首公告列 | 一行文字,例如「滿3000元免運」、「加入官方賴折$100元」 | 文字檔 |
| LOGO 檔案 | 含主Logo、網站小圖示ICON、橫式/直視版本 | .AI / .PNG(透明底) |
| 主選單項目 | 常見:首頁、關於我們、商店、購物須知、常見問題等 | 文字檔 |
| 功能按鈕 | □ 搜尋 □ 購物車 □ 會員登入/註冊 | 文字檔 |
02
網站頁面架構規劃
請列出網站所需頁面及內容方向,每頁建議提供主視覺 Banner 圖片 + 對應文字介紹。
🏠 首頁
主視覺Banner(單圖或輪播)、品牌介紹、最新商品/活動區塊、商品分類區塊、熱銷商品推薦
Banner 1920×800px (PC) / 808×1080px (手機)
👋 關於我們
品牌故事、理念、品牌形象、團隊介紹等,可為全圖、純文字或半圖半文
Banner 1920×800px / 808×1080px
🛍 商店
商品名稱、價格、規格、介紹文案,可搭配資料夾附上圖片加文字檔命名清楚
分類名稱 + 商品照 + 文案 + 價格
📋 購物須知
常見QA、購買方式、售後說明等
圖片 + 文字檔 / Word / Excel
🎉 本月活動 / 最新消息
活動海報、優惠內容、期限說明
圖片 + 文字檔 + 示意排版圖
✨ 客製化商品 / 服務
介紹不同方案與流程、示意圖
圖片 + 文字檔 + 示意排版圖
📬 聯絡我們
聯絡表單、社群連結、客服資訊
圖片 + 文字檔 + 連結
📁 其他頁面
如作品集、部落格等
圖片 + 文字檔 + 示意排版圖
03
首頁設計內容
首頁為網站最重要的門面與轉換入口,以下為常見區塊,可依個人需求增減調整。
| 區塊名稱 | 說明 | 提供格式 |
|---|---|---|
| 主視覺 Banner | 可單張主視覺或輪播多張 | 圖片 + 文字檔 1920×800px / 808×1080px |
| 最新商品 / 主打商品 | 展示新品或熱銷品 | 商品圖 + 文字檔,圖片 1000×175px(長條形) |
| 商品分類導覽 | 區分不同商品或服務類別 | 分類封面圖 + 名稱 |
| 本月活動 / 限時優惠 | 顯示活動橫幅或海報 | 圖片 + 活動期間文字 |
| 互動導流區 | 優惠卷、社群連結,增強品牌信任感 | 圖片或按鈕文字 + 連結網址(如LINE社群、領優惠券) |
| Instagram 貼文串接 | 自動抓取最新IG貼文顯示在首頁 | 提供 IG 帳號及連結 |
| 影片展示區 | 品牌介紹影片、產品影片或活動影片 | Youtube 連結 + 標題 + 簡短說明 |
| 客戶回饋 / 合作品牌 | 顯示顧客評價、合作品牌LOGO、媒體報導 | 建議附圖片 |
💡 建議以 3–6 個重點內容呈現最清楚,若有導流活動(如加入社群、領券、新會員優惠),請務必附上圖片及對應連結。
04
頁尾(Footer)內容
| 項目 | 說明 | 提供格式 |
|---|---|---|
| 關於我們 | □ 品牌名稱 □ 統編 | 文字檔 |
| 聯絡資訊 | □ 客服信箱 □ 服務時間 | 文字檔 |
| 門市資訊 | □ 交通 □ 地址 □ 營業時間 □ 電話 | 文字檔 |
| 社群平台 | □ IG □ FB □ 官方賴 □ Youtube □ Threads | 請提供連結和社群名稱 |
| 購物相關 | □ 隱私權政策 □ 售後說明 □ 退換貨說明 □ 付款與運送方式 | 可整理成 Word / Excel 檔 |
| 其他 | — | 文字檔 |
05
整體視覺風格設定
待填入色碼
頁首公告列背景色
待填入色碼
頁首底色(選單區)
待填入色碼
網站主背景色
待填入色碼
主要字體顏色
待填入色碼
懸浮字體顏色(Hover)
待填入色碼
頁尾背景色
| 項目 | 說明 |
|---|---|
| 字體風格 | 有指定字體需取得網頁用字體授權;若無授權皆使用 Google 字體 |
| 排版示意圖 | 若有想要的版型或喜歡的網站參考,可提供網址作為參考 |
06
功能設定資訊
| 項目 | 需要資料 | 提供格式 |
|---|---|---|
| 網域 & 主機資訊 | 若已有購買請提供登入帳密 | 文字檔 |
| 金物流資訊 | □ 統一金流 □ 綠界 □ Line Pay → 註冊帳號及 API 金鑰 | 可協助對接設定 |
| 第三方工具 | 如 GA4 / Meta Pixel | 可協助安裝追蹤碼 |
| 社群登入 | □ IG □ FB □ 官方賴 □ Google | 須擁有開發者權限或遠端使用,可協助串接 |
