不二糕餅
不二糕餅
不二糕餅
不二糕餅
不二糕餅
不二糕餅的美味，只離你一鍵之遙！
不二糕餅的美味，只離你一鍵之遙！
不二糕餅的美味，只離你一鍵之遙！
不二糕餅的美味，只離你一鍵之遙！
不二糕餅的美味，只離你一鍵之遙！
關於專案
「不二製餅」是一個來自台中的知名糕餅品牌。此專案的目標是要重新改版其電商網站，為消費者打造更直覺順暢的線上購物體驗。
關於專案
「不二製餅」是一個來自台中的知名糕餅品牌。此專案的目標是要重新改版其電商網站，為消費者打造更直覺順暢的線上購物體驗。
關於專案
「不二製餅」是一個來自台中的知名糕餅品牌。此專案的目標是要重新改版其電商網站，為消費者打造更直覺順暢的線上購物體驗。
客戶
不二製餅
時程
1月 ~ 6月, 2024
我的角色
RWD 網頁設計
設計提案
Prototype
設計系統
設計規格文件
UI 切版審核
微動畫設計
客戶
不二製餅
時程
1月 ~ 6月, 2024
我的角色
RWD 網頁設計
設計提案
Prototype
設計系統
設計規格文件
UI 切版審核
微動畫設計
客戶
不二製餅
時程
1月 ~ 6月, 2024
我的角色
RWD 網頁設計
設計提案
Prototype
設計系統
設計規格文件
UI 切版審核
微動畫設計
( 簡介 )
目標
優化購買產品的流程和體驗
改善網站資訊呈現、視覺和各情境的反饋機制
挑戰
應對高峰流量時，能確保消費者購買順暢
特定時段（如中秋）來臨時，網站承受大量流量湧入，造成網站使用體驗品質下降
加強各情境反饋機制，協助消費者採取行動
消費者在使用網站時遇到操作問題或特殊情境時，不知道下一步該怎麼做，而影響到購物體驗。
解決方案
強化提示彈窗與通知在網站上的應用
盤點消費者可能會遇到的所有情況後，依據不同情境提醒、引導消費者採取相對應的行動。降低網站學習曲線的同時，提升網站使用效率。
新增加載動畫情境
當網站使用流量過大時，透過加載動畫與說明，減少使用者等待的負面情緒，避免使用者以為網站出現問題而跳出網站。
( 簡介 )
目標
優化購買產品的流程和體驗
改善網站資訊呈現、視覺和各情境的反饋機制
挑戰
應對高峰流量時，能確保消費者購買順暢
特定時段（如中秋）來臨時，網站承受大量流量湧入，造成網站使用體驗品質下降
加強各情境反饋機制，協助消費者採取行動
消費者在使用網站時遇到操作問題或特殊情境時，不知道下一步該怎麼做，而影響到購物體驗。
解決方案
強化提示彈窗與通知在網站上的應用
盤點消費者可能會遇到的所有情況後，依據不同情境提醒、引導消費者採取相對應的行動。降低網站學習曲線的同時，提升網站使用效率。
新增加載動畫情境
當網站使用流量過大時，透過加載動畫與說明，減少使用者等待的負面情緒，避免使用者以為網站出現問題而跳出網站。
( 簡介 )
目標
優化購買產品的流程和體驗
改善網站資訊呈現、視覺和各情境的反饋機制
挑戰
應對高峰流量時，能確保消費者購買順暢
特定時段（如中秋）來臨時，網站承受大量流量湧入，造成網站使用體驗品質下降
加強各情境反饋機制，協助消費者採取行動
消費者在使用網站時遇到操作問題或特殊情境時，不知道下一步該怎麼做，而影響到購物體驗。
解決方案
強化提示彈窗與通知在網站上的應用
盤點消費者可能會遇到的所有情況後，依據不同情境提醒、引導消費者採取相對應的行動。降低網站學習曲線的同時，提升網站使用效率。
新增加載動畫情境
當網站使用流量過大時，透過加載動畫與說明，減少使用者等待的負面情緒，避免使用者以為網站出現問題而跳出網站。
設計系統
設計系統
設計系統
字體樣式
字體樣式
Mulish
Mulish
粗體、正常
顏色系統
顏色系統
主色
主色
#CD353D
#CD353D
輔色
輔色
#F0B658
#F0B658
中性色
中性色
#16171C
#16171C
字體樣式
Mulish
粗體、正常
顏色系統
主色
#CD353D
輔色
#F0B658
中性色
#16171C
設計規格文件
這份規範文件統整了各元件的所有應用情境與規則，有助於減少開發偏差及降低溝通成本，提升設計品質並促進跨部門高效協作，確保最終設計能為使用者帶來優越的產品體驗。
設計規格文件
這份規範文件統整了各元件的所有應用情境與規則，有助於減少開發偏差及降低溝通成本，提升設計品質並促進跨部門高效協作，確保最終設計能為使用者帶來優越的產品體驗。
設計規格文件
這份規範文件統整了各元件的所有應用情境與規則，有助於減少開發偏差及降低溝通成本，提升設計品質並促進跨部門高效協作，確保最終設計能為使用者帶來優越的產品體驗。
設計成果
設計成果
設計成果
手機
手機
手機
桌機
桌機
桌機
首頁改版
1
讓產品列表的資訊與功能更完整，縮短消費者選購流程。
消費者可查看產品的詳細內容物，並直接將欲購買的產品加入購物車，無需額外點進產品頁面來操做。
2
優化導覽列
採用更直覺的導覽項目命名，並以視覺化圖示取代「會員」和「購物車」文字按鈕，達到視覺簡化並提升易讀性。
Before
After
首頁改版
1
讓產品列表的資訊與功能更完整，縮短消費者選購流程。
消費者可查看產品的詳細內容物，並直接將欲購買的產品加入購物車，無需額外點進產品頁面來操做。
2
優化導覽列
採用更直覺的導覽項目命名，並以視覺化圖示取代「會員」和「購物車」文字按鈕，達到視覺簡化並提升易讀性。
Before
After
首頁改版
1
讓產品列表的資訊與功能更完整，縮短消費者選購流程。
消費者可查看產品的詳細內容物，並直接將欲購買的產品加入購物車，無需額外點進產品頁面來操做。
2
優化導覽列
採用更直覺的導覽項目命名，並以視覺化圖示取代「會員」和「購物車」文字按鈕，達到視覺簡化並提升易讀性。
Before
After
強化各情境的提示
1
清晰直白的情境提示
在使用者編輯購物車時，提供明確的確認反饋與指引，消除潛在的操作疑慮。
強化各情境的提示
1
清晰直白的情境提示
在使用者編輯購物車時，提供明確的確認反饋與指引，消除潛在的操作疑慮。
強化各情境的提示
1
清晰直白的情境提示
在使用者編輯購物車時，提供明確的確認反饋與指引，消除潛在的操作疑慮。
優化訂購日曆
2
新增加載動態，提升系統回饋的即時性。
透過日曆加載情境樣式及已售完提示文字，避免使用者誤解空白或反灰日期為日曆功能異常的現象。
1
新增日曆狀態說明
透過狀態說明提示，讓使用者立即了解哪些日期仍可預購。
優化訂購日曆
2
新增加載動態，提升系統回饋的即時性。
透過日曆加載情境樣式及已售完提示文字，避免使用者誤解空白或反灰日期為日曆功能異常的現象。
1
新增日曆狀態說明
透過狀態說明提示，讓使用者立即了解哪些日期仍可預購。
優化訂購日曆
2
新增加載動態，提升系統回饋的即時性。
透過日曆加載情境樣式及已售完提示文字，避免使用者誤解空白或反灰日期為日曆功能異常的現象。
1
新增日曆狀態說明
透過狀態說明提示，讓使用者立即了解哪些日期仍可預購。
產品頁改版
1
新增「購買提醒」區塊引導消費者主動了解購買須知
於購買產品按鈕下方放置「購買提醒」區塊來提醒不可退換貨政策，並可讓消費者直接導到訂購須知頁。透過這種設計方式，主動釐清可能的疑慮，為消費者創造安心無虞的購物體驗。
2
改善產品說明的資訊架構與易讀性
將產品資訊依照內容性質分類，協助消費者更快速掌握所需詳情，促進理性購買決策
產品頁改版
1
新增「購買提醒」區塊引導消費者主動了解購買須知
於購買產品按鈕下方放置「購買提醒」區塊來提醒不可退換貨政策，並可讓消費者直接導到訂購須知頁。透過這種設計方式，主動釐清可能的疑慮，為消費者創造安心無虞的購物體驗。
2
改善產品說明的資訊架構與易讀性
將產品資訊依照內容性質分類，協助消費者更快速掌握所需詳情，促進理性購買決策
產品頁改版
1
新增「購買提醒」區塊引導消費者主動了解購買須知
於購買產品按鈕下方放置「購買提醒」區塊來提醒不可退換貨政策，並可讓消費者直接導到訂購須知頁。透過這種設計方式，主動釐清可能的疑慮，為消費者創造安心無虞的購物體驗。
2
改善產品說明的資訊架構與易讀性
將產品資訊依照內容性質分類，協助消費者更快速掌握所需詳情，促進理性購買決策
購物清單優化
1
加入優惠券及優惠活動功能
在開始訂購流程前，讓消費者清楚了解當前已享有的優惠折扣資訊及可使用的優惠券選項。
2
透明化訂單成本計算
使消費者能預先計算不同取貨方式與套用優化折扣的總金額差異。
購物清單優化
1
加入優惠券及優惠活動功能
在開始訂購流程前，讓消費者清楚了解當前已享有的優惠折扣資訊及可使用的優惠券選項。
2
透明化訂單成本計算
使消費者能預先計算不同取貨方式與套用優化折扣的總金額差異。
購物清單優化
1
加入優惠券及優惠活動功能
在開始訂購流程前，讓消費者清楚了解當前已享有的優惠折扣資訊及可使用的優惠券選項。
2
透明化訂單成本計算
使消費者能預先計算不同取貨方式與套用優化折扣的總金額差異。
善用彈窗設計
1
利用彈窗設計及時回饋購買情況與下一步執行引導
透過彈窗主動提醒可能阻礙購買流程完成的情況（例：庫存剩餘、電子信箱尚未驗證等），並提供操作引導，讓面臨阻礙的使用者仍能輕鬆克服並順利完成產品購買。
善用彈窗設計
1
利用彈窗設計及時回饋購買情況與下一步執行引導
透過彈窗主動提醒可能阻礙購買流程完成的情況（例：庫存剩餘、電子信箱尚未驗證等），並提供操作引導，讓面臨阻礙的使用者仍能輕鬆克服並順利完成產品購買。
善用彈窗設計
1
利用彈窗設計及時回饋購買情況與下一步執行引導
透過彈窗主動提醒可能阻礙購買流程完成的情況（例：庫存剩餘、電子信箱尚未驗證等），並提供操作引導，讓面臨阻礙的使用者仍能輕鬆克服並順利完成產品購買。
加載動畫設計
1
減少等待頁面加載時間的負面情緒與焦慮
我利用品牌識別設計了一個簡約活潑的加載動畫，藉由品牌識別擬人化，營造與品牌形象一致的活潑與獨特的視覺氛圍。
加載動畫設計
1
減少等待頁面加載時間的負面情緒與焦慮
我利用品牌識別設計了一個簡約活潑的加載動畫，藉由品牌識別擬人化，營造與品牌形象一致的活潑與獨特的視覺氛圍。
加載動畫設計
1
減少等待頁面加載時間的負面情緒與焦慮
我利用品牌識別設計了一個簡約活潑的加載動畫，藉由品牌識別擬人化，營造與品牌形象一致的活潑與獨特的視覺氛圍。
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
