![ES Design購物車網站設計作品-芳源鵝網站設計](https://e-s.tw/wp-content/uploads/2022/11/芳源鵝網站設計thumb.jpg)
專案背景
圖爾生活是一個強調天然、健康、高品質的品牌,由創辦人親自引領團隊從靈感到研發設計,每一步都精益求精。這次專案由圖爾生活委託,我們要優化他們的購物車網站,提升購物流程體驗。我們以Woocommerce系統作為購物車管理系統,設計前後端分離架構,以提升Woocommerce本身效能問題,同時更可以高度客製化客戶需求。
![](https://e-s.tw/wp-content/uploads/2023/07/購物車網站設計-2.jpg)
設計概念
本次設計概念以圖爾生活的品牌Logo - 圓形倒角拱門為主要靈感來源。我們延伸這個形象至其他視覺元素,融入許多圓形和拱門形狀,以強化品牌特色。在色彩選擇上,我們將品牌色調濃縮為悠閒舒適的粉色基底,搭配上明亮活潑的黃色,形成了一個充滿活力且溫馨的視覺印象。這個設計不僅傳達了品牌的獨特風格,也將使購物網站的用戶體驗更加愉悅,符合圖爾生活追求高品質生活的精神。
![](https://e-s.tw/wp-content/uploads/2023/07/購物車網站設計-4.jpg)
區塊版型
我們在此購物車網站上,設計了具有高度活動性且自由搭配的商品內容頁區塊版型。這樣的設計讓每個商品頁面都能依據其特色與需求,靈活使用不同的版型組合,無論是哪種主題的商品,都能找到適合的展示方式。此功能不僅增添了商品頁面的變化性,也能更凸顯各商品的特色,以提供消費者更完善且個人化的購物體驗,進一步強化圖爾生活的品牌形象。
部落格拱門
我們特別設計了一個有趣功能:部落格拱門造型。由於客戶可能難以每次都確保文章圖片的完美品質,因此我們開發了此功能。當遇到圖片質量不佳時,可以啟用拱門造型,這將有助於轉移對圖片品質的焦點,並可自行選擇適合的底色。這不僅營造出視覺上的統一性,還能保持頁面的吸引力。
![](https://e-s.tw/wp-content/uploads/2023/07/購物車網站設計-7.jpg)
客製化購物流程
在此專案中,我們針對Woocommerce原本的購物流程進行了全面改進。透過對底層架構的改寫,我們高度客製化了結帳流程以及會員管理訂單的方式,使得整個流程更順暢,更貼近使用者需求。並且運用前後端分離架構,將Woocommerce的各個功能進行拆解,透過另外串接API的方式,實現每一項功能的最佳化。這樣的設計不僅提供了更好的使用者體驗,也讓網站功能達到最佳的效能與穩定性。
![](https://e-s.tw/wp-content/uploads/2023/07/購物車網站設計-9.jpg)
![](https://e-s.tw/wp-content/uploads/2023/07/購物車網站封面.jpg)