ELEMENT WALL
一格一格的小互動元件
這裡不是固定模板，而是把商家網站常用的小元素拆開展示。每一格都可以依品牌調整顏色、版型、動畫強弱與文字風格，再放進首頁、商品頁、活動頁或詢價流程。
按鈕 hover
用在填表、預約、查看方案這類主要行動。
動畫開關
讓客戶選擇穩定版或有動畫的形象版。
少量動畫數量選擇
先用簡單數量抓出網站規模。
3
服務官網常見頁數
分頁切換
適合 Landing Page、作品集入口與簡單服務介紹。
流程進度
讓客戶知道目前卡在哪一步。
客制游標
移到這格、點一下，會出現星星與煙火。
狀態提示
送出表單後，用清楚提示降低不安感。
已收到需求
後續會用留下的聯絡方式回覆。
FRONT / ADMIN
前後台展示
左邊模擬客戶在前台選商品與數量，右邊即時產生後台收件表格，讓商家知道網站可以怎麼把需求整理起來。
前台商品選擇
客戶不需要打長訊息，只要從下拉選單選商品、填數量，後台就能形成可追蹤資料。
後台需求表格
01表格列數
NT$680小計
待回覆狀態
| 商品 | 單價 | 數量 | 聯絡 | 狀態 | 操作 |
|---|---|---|---|---|---|
| 咖啡豆禮盒 | NT$680 | 1 | LINE | 待處理 |
BOOKING FLOW
預約名單
適合美容、課程、顧問、攝影、餐廳包場。前台選服務與時段，後台直接整理成預約表。
01
後台預約表
| 服務 | 時段 | 聯絡 | 狀態 | 操作 |
|---|---|---|---|---|
| 形象照諮詢 | 週三 14:00 | LINE: @store-demo | 待確認 |
QUOTE FLOW
詢價需求
適合服務業或接案型商家。前台用選項整理需求，後台就能先知道預算、類型與回覆順序。
01
後台詢價表
| 需求 | 預算 | 聯絡 | 狀態 | 操作 |
|---|---|---|---|---|
| 服務官網 | NT$18,000 起 | Discord / Email | 待報價 |
SIGNUP FLOW
活動報名
適合講座、體驗課、快閃活動。訪客選活動與人數後，後台自動形成報名清單。
01
後台報名表
| 活動 | 人數 | 聯絡 | 狀態 | 操作 |
|---|---|---|---|---|
| 週末體驗課 | 2 | IG: demo_store | 已收件 |
WEBSITE TRACKER / ANALYZE
網站追蹤與分析
示範網站可以記錄訪客行為，像是瀏覽頁面、點擊詢價、點 LINE、送出表單，再整理成後台數據與改善建議。
模擬訪客動作
左邊按鈕代表訪客在網站上的操作。每按一次，右邊後台會新增事件並重新分析成效。
網站成效分析
12瀏覽
05互動
02有效需求
16.7%轉換率
分析建議
目前有人點擊詢價，但表單送出偏少，可以把表單題目再減少一點，或把 LINE 放得更明顯。
| 時間 | 事件 | 來源 | 分析 |
|---|---|---|---|
| 09:42 | 送出表單 | 活動頁 | 有效需求 |
| 09:38 | 點 LINE | 首頁 CTA | 高意圖 |
| 09:35 | 瀏覽首頁 | Google 搜尋 | 一般瀏覽 |
GALLERY ADMIN
作品畫廊管理
後台可以新增作品、上傳圖片、補作品說明；送出後右邊會直接顯示到前台畫廊。
新增作品
尚未上傳圖片，會先用色塊預覽。
前台作品畫廊
店家新增作品後，前台可以立即看到圖片、分類與說明。這適合攝影、餐飲、設計、課程成果或案例展示。
預設作品圖，可用來展示首頁、活動頁或品牌視覺成果。
可放完成畫面、設計截圖、商品照或活動紀錄。
後台新增作品後，前台畫廊會即時多一張卡片。
WHITEBOARD DEMO
白板便利貼效果
把想法、需求、待辦或客戶回饋整理成便利貼，適合用在流程討論、需求整理或活動企劃頁。