練就設計 · LIANJIU STUDIO
官網重建提案 · 2026.05
把藥師的
科學配方，
變成顧客
看得懂的信任。
So-Easy 官網重建 · 從品牌識別到電商上線 · 一條龍交付
提案對象 · 竹芯國際有限公司（So-Easy）
提案單位 · 練就設計
提案日期 · 2026 年 5 月 18 日
報價有效期 · 30 天
SCOPE AT A GLANCE
16 大項
完整功能模組
14 頁
主站 + 系統頁面
18 週
完整建置上線
01 / 19
練就設計
02 · CONTEXT
So-Easy 已經建立了
產品的信任，
但品牌資產還沒被收回。
14
商品
5 個單品 + 9 個套組，主力商品「輕悅纖」已建立口碑。
∞
分散的設計
包裝、社群、官網風格不一致，每個設計師接手都是重新猜。
0
系統化規範
沒有標準色、字、應用模板。長期品牌資產無法累積。
02 / 19
練就設計
03 · WHAT YOU NEED
你要的，
我們全部都聽見了。
依據《So-Easy 官網重建需求文件 v1.1》整理。每一項我們都會做、後續每頁逐條展開。
01
10 頁主站
首頁、關於、最新消息、所有產品、成功案例、VIP 福利、Q&A、瘦身小知識、用法小管家、體質檢測
✓
02
4 個系統頁
登入/註冊、購物車、使用者條款、隱私權聲明
✓
03
首頁 9 區塊
Hero 輪播、產品導覽、案例、回饋、Q&A 入口、品牌特色 ×3、Blog、用法管家
✓
04
14 商品電商系統
5 單品 + 9 套組、規格選擇、加購、特價標示
✓
05
促銷自動排程
活動開始/結束時間設定、到期自動恢復原價、活動標籤自動顯隱
✓
06
會員系統
註冊登入、訂單查詢、購物金、忘記密碼、個資管理
✓
07
VIP 福利機制
生日購物金（前兩週自動發、60 天效期）、VIP 等級
✓
08
體質檢測工具
互動式智能問卷、結果分析、商品推薦演算法
✓
09
LINE 通知系統
6 種觸發點、Messaging API、Flex Message 卡片
✓
10
分潤系統
推薦碼、歸因 cookie、業績計算、防弊機制、CSV 匯出
✓
11
動畫導覽（5 類型）
滾動動畫、檢測互動、產品引導、Onboarding Tour、Loading 過場
✓
12
第三方串接
綠界/藍新金流、黑貓/7-11 物流、LINE OA、Meta Pixel、GA4
✓
13
後台 CMS
商品/文章/案例/Banner/FAQ/訂單/會員/購物金管理
✓
14
SEO + 效能
PageSpeed ≥ 80、Core Web Vitals、WebP、Lazy Load
✓
15
響應式設計
桌機 1280px+、平板 768–1279px、手機 375–767px
✓
16
CIS 品牌識別
Logo 系統、標準色字、應用模板、品牌規範手冊（我們建議先做）
✓
03 / 19
練就設計
04 · SITE MAP
網站架構．
10 頁主站 + 4 系統頁。首頁含 9 大區塊。
主站 10 頁
| 首頁 | 品牌入口、主視覺 Banner、產品導覽 |
| 關於我們 | 藥師創辦人故事、品牌理念 |
| 最新消息 | 新聞 / 活動文章列表 |
| 所有產品 | 商品列表 + 分類篩選 |
| 成功案例 | 顧客使用成果分享 |
| VIP 會員福利 | 會員制度與生日福利說明 |
| 常見 Q&A | FAQ 條列 |
| 瘦身小知識 | 部落格文章列表 |
| 產品用法小管家 | 各品項使用教學 |
| 體質檢測 | 互動式智能問卷 |
系統頁 4 頁
| 登入 / 註冊 | 會員入口、忘記密碼 |
| 購物車 / 結帳 | 結帳流程、優惠碼 |
| 使用者條款 | 法律頁面 |
| 隱私權聲明 | 法律頁面 |
首頁 9 大區塊
Header + 主選單 + 體質檢測 CTA + 購物車
Hero Banner（全寬輪播 ≥ 2 張，可連結指定頁）
所有產品導覽（精選卡 ≥ 3 件，含加入購物車）
成功案例輪播 / 網格
真實回饋截圖（上下兩組）
常見 Q&A 入口
品牌特色 ×3 圖片區塊
瘦身小知識（Blog）入口
產品用法小管家入口
04 / 19
練就設計
05 · PRODUCT SYSTEM
商品系統．
14 商品（5 單品 + 9 套組）＋ 規格選擇 ＋ 加購 ＋ 促銷自動排程。
商品架構
5 單品 ＋ 9 套組 ＝ 14 項
單品內建規格選擇（咖啡因/強度/數量），不拆分商品
套組獨立商品，套組內建規格
單品與套組定價、折扣各自獨立
商品頁功能
每頁必備 6 件事
圖片輪播 + Hover 切換
規格選擇器（多款式）
加入購物車 / 立即購買
商品描述、成分、用法
特價標示
加購區塊（Cross-sell）
促銷排程
活動完全自動
設定開始 + 結束時間，到期自動恢復
單品促銷 vs 套組促銷各自獨立
後台按分類批次篩選
「限時特價」標籤跟著排程自動顯隱
現有商品清單對照
| 精選單品（5） | 售價起 |
|---|
| 輕悅纖（懶人體態救星） | NT$ 3,000 |
| 濕濕茶（溫補同時甩水） | NT$ 350 |
| 甘舒寧（擺脫油膩感） | NT$ 1,800 |
| 睡眠燃燒 | NT$ 1,600 |
| 順仙茶 / 順水配方 / 便便膠囊 / 思瑪特 | NT$ 130 起 |
| 最強組合（9） | 售價起 |
|---|
| 終極甩水濕 1+1>2（輕悅纖+濕濕茶） | NT$ 4,800 |
| 拒當小腹婆（輕悅纖+甘舒寧） | NT$ 4,700 |
| 輕盈下半身（輕悅纖+睡眠燃燒） | NT$ 4,500 |
| 完美燃全身（3 件套） | NT$ 6,200 |
| 四件套組（含順水配方） | NT$ 9,600 |
05 / 19
練就設計
06 · MEMBER & VIP
會員系統 + VIP 福利．
註冊 → 第一單 → 第 N 單，每個階段都有黏著機制。
會員基礎功能
註冊到下單一條龍
會員註冊 / 登入 / 忘記密碼
個人資料管理
訂單查詢與歷史紀錄
購物金餘額查詢
收件地址多筆管理
LINE 帳號綁定（搭配通知系統）
VIP 福利機制
生日 + 等級 = 回購引擎
生日購物金：前 2 週系統自動發送
購物金有效期 60 天（製造緊迫感）
VIP 等級頁面（依設計稿配置）
後台可調整等級規則 / 購物金金額
會員專屬活動可標記「限會員」
為什麼這些功能值得做
回購率
保健品最大的成本是「拉新」。會員＋購物金能把第一次客變第二次、第三次。
生日機制
前 2 週發、60 天到期 — 創造一個「我得回來用掉它」的窗口。
LINE 綁定
會員 = 訊息可達。配合下一頁的 LINE 通知系統，整個生命週期都有觸點。
06 / 19
練就設計
07 · QUIZ ENGINE
體質檢測．
不是「填表問問題」，是 So-Easy 的差異化武器。讓陌生訪客 60 秒變準客戶。
01
互動問卷
題目切換動畫、進度條推進。8–12 題、不能讓人棄答。
02
結果分析
圓形進度圖 + 雷達圖展開動畫。視覺化「你的體質類型」。
03
商品推薦演算法
依答題結果配對 14 商品，輸出「最適合你的組合」。CTA 直接導購物車。
為什麼這頁是 So-Easy 的 King Page
健康保健品最大的卡點：「我不知道我該買哪個」
問卷把猶豫 → 變成「藥師說我適合 XX」的信任
分享率高（測完想 PO IG 限動），自帶流量
轉換率比直接看商品頁高 2-3 倍（行業常見數據 [UNVERIFIED]）
必備細節
每題切換有過場動畫（不是僵硬跳頁）
結果頁可分享到 LINE / IG（自帶口碑）
推薦商品 CTA 必須明顯（不要藏在角落）
後台可調整題目、選項權重、推薦邏輯
未完成的答案可儲存、下次接續
07 / 19
練就設計
08 · LINE NOTIFICATIONS
LINE 通知系統．
@chuchu.soeasy 串接 LINE Messaging API、6 種觸發點、Flex Message 圖文卡片。
| # | 觸發事件 | 通知內容 | 顧客感受 |
|---|
| 1 | 訂單建立成功 | 訂單編號、商品摘要、金額、預計出貨 | 「下單有收到、安心」 |
| 2 | 付款確認完成 | 付款成功確認、預計出貨日期 | 「錢有過、不用怕」 |
| 3 | 訂單出貨 | 物流公司、追蹤單號、預計送達 | 「東西在路上、可追蹤」 |
| 4 | 訂單送達 | 包裹已送達、開箱錄影提示 | 「保障權益、品牌貼心」 |
| 5 | 退換貨申請受理 | 申請編號、後續處理說明 | 「處理中、不用打去問」 |
| 6 | 購物金發送 | 購物金金額、到期日提醒 | 「有錢可花、回來用掉它」 |
顧客選擇權
顧客可自選是否訂閱通知，符合 LINE 官方規範。
後台可編輯
每種通知的文字模板都可在後台改、不用找工程師。
Flex Message
圖文並茂卡片格式，不是純文字 — 開信率與點擊率差 3 倍以上。
08 / 19
練就設計
09 · AFFILIATE
分潤系統．
會員介紹會員、口碑變流量。推薦碼 + 歸因 cookie + 業績計算 + 防弊一條龍。
推薦人前台
每位會員都能變推薦人
申請成為推薦人、取得專屬推薦碼 / 分潤連結
個人後台：推薦人數、訂單數、累積分潤
一鍵複製專屬連結
申請提領分潤（填收款資訊）
分潤計算
規則可後台調整
| 分潤比例 | 訂單金額 % 計算（例 10%） |
| 計算基準 | 實際付款（扣折扣、扣退款） |
| 發放時機 | 確認收貨後 N 天結算 |
| 發放方式 | 購物金 / 銀行轉帳 / 兩者並行 |
後台管理
老闆完全掌控
查看所有推薦人 + 業績
分潤明細 + 發放紀錄
手動調整 / 暫停推薦人資格
匯出分潤報表 CSV
防弊機制
不讓人鑽漏洞
自購不計入（推薦人自己下單不算）
Cookie 效期 30 天（可調）
異常訂單 / 退款自動扣回分潤
同 IP / 裝置刷單偵測
09 / 19
練就設計
10 · ANIMATION GUIDE
動畫導覽系統．
5 種動畫類型 × 整站體驗。讓網站「會說話」、停留時間延長、轉換率往上。
⊙
01 Onboarding Tour
新訪客引導 Tooltip
首次進站彈出輕量導覽，依序點亮：體質檢測 → 所有產品 → VIP 福利。可「跳過」或「下次再說」、完成後不再顯示。
↓
02 滾動動畫
Scroll Animation
▦
04 產品頁導覽
成分 highlight + 使用步驟時間軸
◐
05 Loading 過場
Logo 動畫 + Skeleton 骨架屏
⚙
技術選用
GSAP · AOS · Lottie · Shepherd.js · CSS Keyframes
尊重使用者偏好
支援 prefers-reduced-motion，系統設定為減少動態時自動降低動畫強度。
行動裝置 60fps
手機動畫適度簡化，避免同時執行造成卡頓。
不為動畫而動畫
每個動畫都服務一個目的：吸睛、引導、回饋。沒有目的的動畫一律拿掉。
10 / 19
練就設計
11 · INTEGRATIONS & CMS
第三方串接 + 後台 CMS．
所有金流、物流、廣告追蹤一次串好。老闆可自管後台、不用找工程師。
第三方串接
| 服務 | 用途 |
|---|
| 綠界 / 藍新金流 | 信用卡、ATM、超商代碼 |
| 黑貓 / 7-11 物流 | 配送追蹤、超商取貨 |
| LINE Official Account | 客服 + 訂單通知 |
| Meta Pixel | FB/IG 廣告再行銷 |
| Google Analytics 4 | 流量、行為、轉換分析 |
後台 CMS（老闆自管）
商品上下架、規格、價格、促銷排程
文章新增 / 編輯（瘦身小知識）
成功案例新增 / 編輯
Banner 圖片上傳、輪播順序調整
FAQ 條目增刪改
訂單管理：出貨狀態更新、退款處理
會員管理：購物金加減、VIP 等級調整
分潤系統：推薦人審核、業績查看
效能目標
Google PageSpeed ≥ 80（行動版）
圖片 WebP + Lazy Load
Core Web Vitals 合規
響應式設計
桌機 1280px+
平板 768–1279px
手機 375–767px
SEO 基本
Meta tags / sitemap / robots.txt / 結構化資料 / OG image 全配。
11 / 19
練就設計
12 · WHY CIS FIRST
在動工之前，
先把品牌語言寫清楚。
官網用 A 紫、IG 用 B 粉、包裝用 C 橘
新設計師接手都要重猜品牌
廣告 banner 每次都要重做配色
客戶記不住品牌，產品才是賣點
三年後想升級——一切重來
所有設計依據同一本規範
新設計師 30 分鐘上手
廣告快速產出、視覺一致
顧客看到色塊就認得品牌
CIS 是長期資產、越久越值
12 / 19
練就設計
13 · CIS DELIVERABLES
CIS 交付的
具體內容。
◧
標準色票
CMYK / RGB / HEX / Pantone
▭
應用範例
名片 · Email · 社群 ×3 · 包裝指引
📖
品牌規範手冊 PDF
25-35 頁 · 中英對照
13 / 19
練就設計
14 · OUR PROCESS
怎麼做：
四個階段、階段交付、低風險。
階段 0
CIS
品牌識別
Logo 系統化、規範手冊、應用模板。後續所有設計的依據。
⏱ 4 週
階段 A
樣品
4 頁 Demo
真的能點能滑的網站。客戶看到體感對，再決定要不要進完整建置。
⏱ 2 週
階段 B
完整
建置上線
10 大模組全做：電商、會員、LINE、分潤、體質檢測、動畫、串接、後台。
⏱ 12 週
階段 C
月維護
持續支援
上下架、活動排程、bug 修復、月度數據簡報。每月 4 小時內。
⏱ 至少 6 個月
為什麼分階段
客戶看到階段成果才付下階段款、不用一次簽全案賭半年成果。
為什麼 CIS 先做
網站視覺要依循 CIS 規範。先有規範再蓋網站、不會重做。
為什麼有樣品階段
花 NT$45K 看到 4 頁真網站、再決定要不要進 NT$320K 完整建置。
14 / 19
練就設計
15 · TIMELINE
18 週上線，
每階段都有驗收節點。
W1W3W5W7W9W11W13W15W17W18
CIS
樣品
完整建置
保固
15 / 19
練就設計
16 · INVESTMENT
每階段每項目單獨列價、工時透明。客戶可逐項對照確認。
階段 B
NT$ 320K
完整建置 · 12 週
階段 0 · CIS 品牌識別系統
工項總計 NT$ 80,000 ／ 預估 4 週
| # | 項目 | 工時 |
|---|
| 1 | Logo 優化（向量化、橫式/直式/單色/反白 4 版本） | 3 天 |
| 2 | 標準色系統（主色 + 輔助 + 中性、含 CMYK/RGB/HEX/Pantone 對照） | 1 天 |
| 3 | 字體系統（中英文搭配、權重規範、各場景應用） | 1 天 |
| 4 | 視覺元素（圖示風格、輔助圖形、icon set 規範） | 2 天 |
| 5 | 應用範例（名片、Email、社群貼文模板 ×3、包裝指引） | 5 天 |
| 6 | 品牌規範手冊 PDF（25-35 頁、中英對照） | 4 天 |
| 7 | 客戶 review + 修改 2 輪 | 4 天 |
| 階段 0 合計 | NT$ 80,000 |
階段 A · 樣品設計（4 頁前端 Demo）
工項總計 NT$ 45,000 ／ 預估 2 週（10 工作天）
| # | 項目 | 工時 |
|---|
| 1 | 品牌視覺方向定調（字體 / 配色 / 排版風格） | 1 天 |
| 2 | 首頁設計 + 開發（Hero、產品導覽、案例、Q&A 入口） | 3 天 |
| 3 | 商品頁設計 + 開發（輕悅纖示範，含規格選擇、加購） | 2 天 |
| 4 | 體質檢測頁設計（互動問卷 UI、雷達圖、推薦 CTA） | 2 天 |
| 5 | 關於我們頁設計（藥師故事、品牌理念） | 1 天 |
| 6 | 響應式調整（桌機 / 平板 / 手機）+ review 修改 1 輪 | 1 天 |
| 階段 A 合計 | NT$ 45,000 |
不含：真實商品圖、第三方串接、後台、會員系統。
階段 B · 完整建置（10 大模組）
10 模組原價合計 NT$ 380,000 · 整案優惠 －NT$ 60,000 · 階段 B 實收 NT$ 320,000 ／ 12 週
| 模組 | 內容 | 工時 | 金額 |
|---|
| B1 | 視覺設計（全部 10 頁主站 + 系統頁設計稿） | 2 週 | NT$ 50,000 |
| B2 | 前端開發（響應式切版、GSAP/AOS/Lottie/Shepherd 動畫導覽） | 3 週 | NT$ 80,000 |
| B3 | 電商系統（14 商品 + 規格 + 加購 + 促銷排程 + 購物車 + 結帳） | 2 週 | NT$ 60,000 |
| B4 | 會員系統（註冊登入、訂單查詢、購物金、生日福利、VIP 等級） | 1.5 週 | NT$ 40,000 |
| B5 | LINE 推播（Messaging API、6 觸發點、Flex Message 卡片） | 1 週 | NT$ 25,000 |
| B6 | 分潤系統（推薦碼、歸因 cookie、業績計算、防弊、CSV 匯出） | 1.5 週 | NT$ 35,000 |
| B7 | 體質檢測（互動問卷邏輯、結果分析、商品推薦演算法） | 1 週 | NT$ 20,000 |
| B8 | 第三方串接（綠界/藍新金流、黑貓/7-11 物流、Meta Pixel、GA4） | 1 週 | NT$ 30,000 |
| B9 | 後台 CMS（商品/文章/案例/Banner/FAQ/訂單/會員管理） | 1 週 | NT$ 25,000 |
| B10 | QA + 上線（全站測試、PageSpeed ≥ 80、SEO、部署） | 1 週 | NT$ 15,000 |
| 10 模組原價小計 | 12 週 | NT$ 380,000 |
| 整案優惠（含樣品階段已完成部分） | | －NT$ 60,000 |
| 階段 B 實收 | 12 週 | NT$ 320,000 |
階段 C · 月維護方案
NT$ 10,000 / 月 · 至少簽 6 個月、可續約
包含
每月 4 小時內：bug 修復、商品上下架、活動排程、Banner 更新
主機監控、安全更新
月度數據簡報（GA4 流量、轉換）
不含（超出時數另計）
· 新功能開發：NT$ 2,500 / 小時
· 大改版：另案報價
· 第三方服務費（LINE 訊息費、金流手續費、主機升級）
全案總結
| 階段 0 · CIS | NT$ 80,000 |
| 階段 A · 樣品 | NT$ 45,000 |
| 階段 B · 完整建置 | NT$ 320,000 |
| 小計（未稅） · 18 週 | NT$ 445,000 |
| 5% 加值營業稅 | NT$ 22,250 |
| 總計（含稅） | NT$ 467,250 |
| 階段 C · 月維護（另議） | NT$ 10,000 / 月 |
不含項目（客戶自負）：
網域註冊 NT$ 800–1,500/年 · Cloudflare 部署（免費方案） · Gotham Rounded 字體授權 · 金流手續費 2.5%–3%/筆 · LINE 訊息費（超量才收） · 商品攝影 / 文案另案
市場行情對照：
台灣電商建置 — 套版 NT$15K–50K · 半客製 NT$50K–150K · 全客製 NT$150K–500K · Shopify Plus NT$800K+。本案含分潤 + LINE + 體質檢測等客製功能、落「全客製中段」。
16 / 19
練就設計
17 · PAYMENT
付款方式：
階段交付、階段請款。
階段 0 · CIS
NT$ 80,000
簽約50% · 40K
手冊驗收50% · 40K
階段 A · 樣品
NT$ 45,000
開工50% · 22.5K
樣品驗收50% · 22.5K
階段 B · 完整建置
NT$ 320,000
簽約30% · 96K
設計稿20% · 64K
開發完成30% · 96K
上線驗收20% · 64K
為什麼這樣付款：
每階段都有具體交付物（手冊、可點網站、上線網址）。客戶看到才付下階段款、不用一次預付全案、不用賭。練就設計也能依進度開發，雙方都安心。
17 / 19
練就設計
18 — SELECTED WORKS
近期上線作品．
10 個品牌，橫跨保健、食品、醫材、社群、SaaS、房產、工業 B2B。每一件都是上線運營中的真實案例。
與 So-Easy 最相關的兩件 — TVO23 端源（保健品電商、同產業）與 社區藥局的五四三（藥師創辦人品牌、同 founder background）。從保健品電商 KPI、藥師內容呈現、會員回購機制，到工業 B2B 全英文站，我們做過。
18 / 19
練就設計
19 — WHY US · NEXT STEP
為什麼選練就設計，
以及下一步。
01
設計 × 工程
一條龍
不是設計做完丟給別人寫 code，從 CIS 到上線同一團隊，視覺不會跑掉。
02
階段交付
風險最低
每階段都有驗收節點，看到才付款。不像傳統一次簽 320K 賭半年成果。
03
完整原始碼
移交
智慧財產權完全屬於客戶，未來換廠商也能接手，不被鎖死。
下一步很簡單
①
確認方向
本提案 review、回覆要調整的範圍或預算。
②
簽約 · 收訂金
階段 0 訂金入帳，即啟動 CIS 設計工作。
③
4 週後
CIS 品牌手冊交付。看到具體成果，再決定是否進階段 A。
立即啟動 →
練就設計 · LIANJIU STUDIO
[聯絡方式待補]
19 / 19