

美妝品牌形象官網
MIZU SKIN 肌沐
概念作品
多頁的品牌官網,把品牌故事、護理服務、保養商品與生活日誌串成一條動線;訪客可以加入購物袋、走完示範結帳(模擬付款)並用訂單編號查詢狀態,也能預約。另有只保存在同一瀏覽器的內容管理示範。
- 多頁品牌官網
- 示範結帳與訂單查詢
- 線上預約
看適合情境與可操作內容
適合這類需求
- 品牌有故事也有商品,需要同時說明與販售的網站
- 服務與商品都希望能在線上預約或下單
你可以操作
- 查看商品詳情、調整購物袋,完成示範結帳(不扣款)並查詢訂單狀態
- 填寫護膚預約表單,或閱讀品牌日誌
- 在示範後台編輯草稿、發布、還原版本;不會同步到其他裝置
問題 → 設計決策 → 驗證結果
問題
品牌網站要同時說故事、賣商品與收預約,動線在手機上很容易斷掉;內容又得自己更新,但草稿一旦外洩或不同分頁互相覆蓋,前台就會出現錯誤的價格與文案。
設計決策
- 購物袋與訂單預覽只存在瀏覽器裡,畫面明確標示不送出訂單、不收款;三步驟一次加入整個日常保養時明細逐項列出,合計就是商品售價相加,不捏造組合折扣。
- 示範後台把草稿與已發布內容分開:儲存草稿不會讓訪客看到,只有發布才更新前台;還原舊版是把它發布成新的版本,歷史不被覆寫。
- 發布前先驗證內容:名稱不能重複、價格要是合理整數、不得出現不可查證的療效字眼;不合格就保留輸入,並把焦點移到出錯欄位。
- 跨分頁衝突時不直接覆蓋:另一個分頁更新後保留我的輸入,改以最新資料為基礎合併,且只帶我真正改過的欄位。
驗證結果
- 測試涵蓋:草稿不會出現在前台、發布後前台才更新、還原舊版會發布為新版本並保留尚未發布的草稿;15 個品牌頁在 390/768/1440px 都能各自開啟且不溢出。
- 購物袋數量有上下限、減到零會移除商品、分類篩選與商品詳情連結仍然可用;三步驟加入的合計為 780 + 1,280 + 1,480 = NT$3,540,沒有組合折扣。
- 發布規則會擋下重複名稱、非整數或過低價格與不可查證的療效字眼,並把焦點移到出錯欄位;另一個分頁發布時,編輯器保留未儲存輸入並以最新資料為基礎合併。
- 瀏覽器拒絕儲存時仍可預覽但不能儲存或發布;資料損毀時原檔完整保留,只有確認重設才替換,且不動其他示範工作區。




























