# 設計系統
# 響應式網頁
專案時間
2024年 7月-8月，共 1 個月
擔任角色
組長、使用者體驗設計師
負責項目
專案統籌、設計系統建構、設計完稿與交付
寵物市場崛起，電商潛力無限
隨著社會結構的轉變——高齡化、少子化以及單身人口增加，寵物逐漸成為家庭的重要成員。特別是在疫情期間，飼養寵物的人口快速增長，帶動全球寵物產業蓬勃發展。
疫情後，許多飼主習慣透過線上平台購買必需的寵物用品，使「寵物電商」市場迅速崛起。根據市場預測，全球寵物市場規模將在 2027 年突破 3500 億美元，而台灣的「毛經濟」更有望成為下個兆元產業。
市場現況與挑戰
隨著寵物飼養風潮的興起，消費模式也在逐漸轉變。根據資策會調查，雖然目前仍有 43.9% 的飼主偏好實體購物，但已有 39.4% 的飼主選擇虛實並用的購物方式，另有 16.7% 的飼主完全依賴網購平台。這樣的變化顯示，線上購物已逐漸成為飼主購買寵物用品的重要選擇，為寵物電商市場帶來巨大發展機會。
在飼養趨勢方面，台灣最常見的飼養類型依然是養狗，佔 67% 的比例，其次是養魚 33%，養貓則占 31%。隨著養貓與養魚的比例逐漸提升，市場需求也變得更加多元，涵蓋了不同寵物種類的用品與服務。然而，目前市場上的寵物電商平台數量仍然有限，無法充分滿足多樣化的需求。
由於團隊對於寵物電商的了解不夠充足，且對於目標客戶尚未有明確的定義以及想像，因此我們花四天的時間進行競品分析以及用戶訪談。
我們透過 AI 提供的名單選擇 5 家知名寵物電商，其中3家為國外電商，2家為國內電商。接著，我們針對這五家寵物電商的「品牌形象」、「介面設計」以及「商業策略」三方面進行分析與比較，並得出以下結論：
我們根據「有飼養寵物」為標準，進行 5 場深度訪談以及 5 場突擊式訪談，並得到以下結論：
1
受訪者表示在使用現有的平台時，他們總是因為不夠明確的商品分類方式，需要花很長的時間才能找到想要的商品。
2
受訪者提出在購買特定功能的飼料時，常常會因為缺少詳細的商品介紹，而不確定這是不是自己要買的飼料。
3
受訪者表示現有平台的退貨與退款政策不夠透明，讓他們在購物時感到不安心，若是實體店面有販售，他們會選擇在那裡購買。
”雖然現在的平台提供了很多商品的選擇，但是因為分類方式過於抽象，讓我總是要嘗試很多次才能找到我需要的商品“
由於時間有限，所以我們決定先針對因商品分類不夠清晰而難以開始購物這個問題發想解決發案。致力於打造一個連新手都可以順利完成購物的電商平台。
為了提高設計的一致性與可維護性，我們採用了模組化的設計系統，將重複使用的元件建立成可重複運用的組件，確保視覺與互動設計保持統一
此外，我們利用 Local Variables 功能，建立了兩個層級的 Design Tokens，分別為 Base 與 Functional。
Base Tokens：定義設計的基礎屬性，包括顏色、文字大小、間距、陰影和圓角等核心樣式。
Functional Tokens：繼承自 Base Tokens，根據特定功能需求或是元件（例如按鈕、標題或卡片）進行應用與擴展，提升設計靈活性與一致性。
這樣的設計方式不僅簡化了元件管理流程，也讓未來的設計更新與維護更加高效，確保整體設計風格統一且具擴展性。
情境導向的搜尋方式：毛孩商品配對機
毛孩配對機是 Pawsome 為新手飼主量身打造的智能推薦工具，旨在幫助使用者快速找到適合寵物需求的商品。透過簡單的資訊輸入，系統能根據飼主提供的條件，自動篩選並推薦符合需求的產品，大幅縮短搜尋時間，提升購物效率。
RWD：適用於不同尺寸的裝置
為了確保使用者在不同裝置上都能獲得一致且流暢的使用體驗，我們採用響應式網頁設計。我們針對1920px、992px、768px 和 370px 四個關鍵斷點進行畫面設計與調整，以適配桌機、平板及手機等多種裝置。
由於在建構設計系統時就有考慮響應式設計，因此我們透過彈性的布局與元件適應性，確保頁面內容能根據螢幕尺寸自動調整比例與排列方式，讓操作流程保持直覺與便利。不論使用者透過大型桌機或行動裝置瀏覽，都能獲得良好的視覺體驗與操作感受。
Pawsome 最終成功產出一套完整的設計系統與核心頁面設計，並將設計成果交付給工程團隊進行開發。
工程師根據我們提供的交付文件，順利製作出具備基礎互動功能的靜態網頁，包含首頁、毛孩商品配對機頁、商品頁以及結帳頁這四個主要畫面，完整呈現購物流程與互動邏輯。這項成果不僅驗證了設計系統的可行性，也為後續的產品開發與迭代提供了穩固的基礎。
首頁
毛孩商品配對機
商品頁
結帳頁
