跨境電商平台專案
🏆 專案成就亮點
建立新的產品服務專案
設計系統雙平台的管理策略
🚀 專案願景
建立符合公司既有產品 UI 風格的跨境電商服務
設計同時符合 網站端 與 App WebView 端 規範的 UI
在有限人力下，讓產品可以如期在 8 月上線
類別
Ecommerce
時間
2025/04~08
擔任角色
UI 設計
工具
Figma、Notion
🧗 面對的挑戰
規劃 跨平台 UI 的設計策略（Web 與 WebView）
建立 設計系統管理方式，避免元件混亂與重複製作
訂定 團隊協作方式與設計紀錄流程
🔍狀況 (Situation)
公司啟動了一個新的產品規劃：
建立一個 跨境電商平台服務。
這個服務會同時存在兩個地方：
1️⃣ 公司自己的 網站平台
2️⃣ 合作方 App 內的 WebView
但同時也帶來一個問題：
產品有自己的需求與設計風格，但在合作方 App 中又需要 部分遵守對方的 UI 規範。因此我們必須在 產品需求、平台規範與維護成本 之間找到一個平衡。
而且現實條件是：
整個部門只有 3 個人，所以這個解法 必須簡單、可維護、可長期擴展。
(圖片：兩個不同平台端需求對比圖說明圖)
🔍狀況 (Situation)
公司啟動了一個新的產品規劃：
建立一個 跨境電商平台服務。
這個服務會同時存在兩個地方：
1️⃣ 公司自己的 網站平台
2️⃣ 合作方 App 內的 WebView
但同時也帶來一個問題：
產品有自己的需求與設計風格，但在合作方 App 中又需要 部分遵守對方的 UI 規範。因此我們必須在 產品需求、平台規範與維護成本 之間找到一個平衡。
而且現實條件是：
整個部門只有 3 個人，所以這個解法 必須簡單、可維護、可長期擴展。
(圖片：兩個不同平台端需求對比圖說明圖)
📝任務 (Task)
在專案開始時，我的任務是為這個新的跨境電商服務建立一套 可以同時支援自家網站與合作方 WebView 的 UI 設計方案，並確保設計能在有限人力下順利維護與擴展。
主要需要完成的任務包括：
為核心產品頁面建立 清晰的 Layout 與 UI 架構
整理並建立 專案所需的 UI 元件
規劃 跨平台 UI 的設計策略（Web 與 WebView）
建立 設計系統管理方式，避免元件混亂與重複製作
訂定 團隊協作方式與設計紀錄流程
透過這些任務，讓團隊在後續協作與設計製作時能更有效率，也能維持產品 UI 的一致性。
(圖片：Web vs Webview 平台示意)
📝任務 (Task)
在專案開始時，我的任務是為這個新的跨境電商服務建立一套 可以同時支援自家網站與合作方 WebView 的 UI 設計方案，並確保設計能在有限人力下順利維護與擴展。
主要需要完成的任務包括：
為核心產品頁面建立 清晰的 Layout 與 UI 架構
整理並建立 專案所需的 UI 元件
規劃 跨平台 UI 的設計策略（Web 與 WebView）
建立 設計系統管理方式，避免元件混亂與重複製作
訂定 團隊協作方式與設計紀錄流程
透過這些任務，讓團隊在後續協作與設計製作時能更有效率，也能維持產品 UI 的一致性。
(圖片：Web vs Webview 平台示意)
⚡行動 (Action)
Step 1 — 協作討論
在專案開始前，UI 與 PM 先開了一次專案執行前的會議，對齊整體製作流程。
在 UI 執行上，我先負責建立主要頁面，例如首頁、搜尋結果頁與商品頁，並先訂定整體 Layout 與主要元件。同時我也把專案新增的元件整理到 設計系統 Page 做集中管理，讓同事可以快速瀏覽與使用，也方便日後整理進正式設計系統。
在同事加入協作前，需要先了解公司的設計系統並瀏覽該專案的設計系統 Page，確認目前有哪些元件，避免重複造輪子。另外整個設計流程中也需要撰寫 Design Log 來記錄設計迭代與修改內容。
完成這些前置作業後，其他同事在既有規範與設計系統的基礎上延伸頁面，整體製作效率也能大幅提升。
(圖片：Figma 檔案架構)
⚡行動 (Action)
Step 1 — 協作討論
在專案開始前，UI 與 PM 先開了一次專案執行前的會議，對齊整體製作流程。
在 UI 執行上，我先負責建立主要頁面，例如首頁、搜尋結果頁與商品頁，並先訂定整體 Layout 與主要元件。同時我也把專案新增的元件整理到 設計系統 Page 做集中管理，讓同事可以快速瀏覽與使用，也方便日後整理進正式設計系統。
在同事加入協作前，需要先了解公司的設計系統並瀏覽該專案的設計系統 Page，確認目前有哪些元件，避免重複造輪子。另外整個設計流程中也需要撰寫 Design Log 來記錄設計迭代與修改內容。
完成這些前置作業後，其他同事在既有規範與設計系統的基礎上延伸頁面，整體製作效率也能大幅提升。
(圖片：Figma 檔案架構)
Step 2.1 — 設計系統雙平台的管理策略
為了同時管理 公司網站 與 合作方 App WebView 的 UI，我建立了一套三層的設計系統管理方式：
Core 設計系統
專案設計系統
檔案內管理
Core 系統主要收錄通用元件，例如 Color、Spacing、Button、Tag 等，可以被不同專案共用。
專案設計系統則收錄專案共用元件，例如專案主色與商品卡等 UI Pattern。而平台特有元件，例如 Header、Sidebar、Footer 或特殊評級組件，則保留在專案檔案中管理。
在分類元件時，如果不同專案只是樣式微調（例如顏色、字級或順序），就會使用 Variant 在專案設計系統中管理；如果元件結構或 Layout 差異較大，則保留在專案檔案中。透過這樣的方式，我們可以同時滿足雙平台需求，也能降低設計系統的維護成本。
(圖片：Design System 架構圖)
Step 2.1 — 設計系統雙平台的管理策略
為了同時管理 公司網站 與 合作方 App WebView 的 UI，我建立了一套三層的設計系統管理方式：
Core 設計系統
專案設計系統
檔案內管理
Core 系統主要收錄通用元件，例如 Color、Spacing、Button、Tag 等，可以被不同專案共用。
專案設計系統則收錄專案共用元件，例如專案主色與商品卡等 UI Pattern。而平台特有元件，例如 Header、Sidebar、Footer 或特殊評級組件，則保留在專案檔案中管理。
在分類元件時，如果不同專案只是樣式微調（例如顏色、字級或順序），就會使用 Variant 在專案設計系統中管理；如果元件結構或 Layout 差異較大，則保留在專案檔案中。透過這樣的方式，我們可以同時滿足雙平台需求，也能降低設計系統的維護成本。
(圖片：Design System 架構圖)
Step 2.2 — 為什麼不再拆分各平台設計系統?
最主要的原因其實是 人力限制。
整個設計團隊只有 3 位設計師，如果再拆成 Web 與 WebView 各自的設計系統，維護成本會大幅增加，更新元件時也需要同步兩套系統，流程會變得非常複雜。
因此在和同事討論後，我們決定如果是平台特有元件，就不另外建立平台設計系統，而是 直接保留在專案檔案中管理。
這樣我們只需要維護 Core 設計系統與專案設計系統 兩個主要系統，而平台特有元件則可以隨專案靈活調整，整體結構也更簡單，團隊三個人都能快速上手與維護。
(圖片：「平台兩套系統 vs 現在方案」對比圖)
Step 2.2 — 為什麼不再拆分各平台設計系統?
最主要的原因其實是 人力限制。
整個設計團隊只有 3 位設計師，如果再拆成 Web 與 WebView 各自的設計系統，維護成本會大幅增加，更新元件時也需要同步兩套系統，流程會變得非常複雜。
因此在和同事討論後，我們決定如果是平台特有元件，就不另外建立平台設計系統，而是 直接保留在專案檔案中管理。
這樣我們只需要維護 Core 設計系統與專案設計系統 兩個主要系統，而平台特有元件則可以隨專案靈活調整，整體結構也更簡單，團隊三個人都能快速上手與維護。
(圖片：「平台兩套系統 vs 現在方案」對比圖)
Step 3 — 先蓋地基
在策略確定後，我開始建立專案 UI。
首先使用 Core 設計系統中的 Tokens 與元件 作為基礎，並在專案檔案中建立一個 設計系統 Page，先整理專案新增的元件，方便日後整理進專案設計系統。
在頁面製作順序上，我會先建立元件較多、結構較複雜的核心頁面，例如首頁、商品頁、搜尋結果頁與購物車。
當這些核心頁面完成後，整個產品就會有一個清楚的雛形，其他同事也可以在這個基礎上延伸製作其他頁面。
(圖片：Mockup)
Step 3 — 先蓋地基
在策略確定後，我開始建立專案 UI。
首先使用 Core 設計系統中的 Tokens 與元件 作為基礎，並在專案檔案中建立一個 設計系統 Page，先整理專案新增的元件，方便日後整理進專案設計系統。
在頁面製作順序上，我會先建立元件較多、結構較複雜的核心頁面，例如首頁、商品頁、搜尋結果頁與購物車。
當這些核心頁面完成後，整個產品就會有一個清楚的雛形，其他同事也可以在這個基礎上延伸製作其他頁面。
(圖片：Mockup)
Step 4 — 管理與維護
在各部門的合作下，跨境電商平台成功在 8 月正式上線。
專案上線後，我開始整理整個專案的設計系統。首先建立一個 Notion 資料庫 來整理元件備註與分類，確認哪些元件要保留在專案檔案中，哪些需要拆分至專案設計系統。
分類完成後，我將雙平台共用的元件整理並移動到專案設計系統中，並同步更新給設計與工程團隊，確保各部門使用的是最新版本。
(圖片：Notion Database)
Step 4 — 管理與維護
在各部門的合作下，跨境電商平台成功在 8 月正式上線。
專案上線後，我開始整理整個專案的設計系統。首先建立一個 Notion 資料庫 來整理元件備註與分類，確認哪些元件要保留在專案檔案中，哪些需要拆分至專案設計系統。
分類完成後，我將雙平台共用的元件整理並移動到專案設計系統中，並同步更新給設計與工程團隊，確保各部門使用的是最新版本。
(圖片：Notion Database)
✨結果 (Result)
跨境電商平台 UI/UX 專案成功延續公司的產品 UI 風格，並在 8 月中如期上線。在專案過程中，我們與工程團隊與需求方進行了多次溝通與調整，最終上線版本與設計稿以及 PO 的需求都高度一致。
同時，我們也為 雙平台產品 建立了一套簡單、好維護的設計系統架構，讓小型團隊也能有效維護多平台產品。
(圖片：Mockup)
✨結果 (Result)
跨境電商平台 UI/UX 專案成功延續公司的產品 UI 風格，並在 8 月中如期上線。在專案過程中，我們與工程團隊與需求方進行了多次溝通與調整，最終上線版本與設計稿以及 PO 的需求都高度一致。
同時，我們也為 雙平台產品 建立了一套簡單、好維護的設計系統架構，讓小型團隊也能有效維護多平台產品。
(圖片：Mockup)
🌱專案心得與反思
這個專案讓我學習到如何與不同角色的團隊合作完成產品。
不論是與：
設計同事
工程師
PM
PO
協作與溝通，在這個專案之後我的 溝通與協調能力都有明顯成長。
同時也提升了：
解決問題的能力
UI 設計效率
更重要的是，我的角色也開始從單純的 UI 繪圖者，逐漸轉變為 設計系統的架構規劃與維護者。開始思考的不再只是：「這個按鈕好不好看？」而是：如何在不同產品與平台之間維持一致的 UI 體驗，並讓設計系統在有限的人力之下，能夠長期維護與擴展。
(圖片：UI 繪圖者→設計系統的架構規劃與維護者示意圖)
🌱專案心得與反思
這個專案讓我學習到如何與不同角色的團隊合作完成產品。
不論是與：
設計同事
工程師
PM
PO
協作與溝通，在這個專案之後我的 溝通與協調能力都有明顯成長。
同時也提升了：
解決問題的能力
UI 設計效率
更重要的是，我的角色也開始從單純的 UI 繪圖者，逐漸轉變為 設計系統的架構規劃與維護者。開始思考的不再只是：「這個按鈕好不好看？」而是：如何在不同產品與平台之間維持一致的 UI 體驗，並讓設計系統在有限的人力之下，能夠長期維護與擴展。
(圖片：UI 繪圖者→設計系統的架構規劃與維護者示意圖)
