設計交付
元件重構
設計系統建立
我的貢獻
協助轉換設計工具
建立 Figma 設計系統與元件庫
協助整理 Notion 設計文件與版本紀錄
專案總覽
我負責設計系統規劃、介面視覺轉化、專案功能開發與元件交互最佳化，並與工程團隊共同交付可開發的設計資產。
專案成果與影響
+26 %
活躍用戶數
專案導入後，產品活躍使用率提升 26%，使用者滿意度提升，並成功為後續功能擴充奠定元件規模與維護基礎。
成功導入 Figma 設計系統，減少跨模組設計重工
UI 元件一致性提升，使用者操作更直覺
設計系統完整導入手機端，組件一致性提高、工程交付效率提升
我們如何在保留品牌風格的前提下，將複雜功能合理轉化為行動裝置上的直覺操作，並清楚傳達視覺層級與操作回饋？
問題定義
觀察痛點
1
老闆需求偏向主觀風格指示，需將模糊語言轉譯為具體行動
2
跨模組元件使用不統一，交互與樣式缺乏規範
3
使用者介面層級不清，操作體驗不連貫
專案成果
設計流程規劃先行，避免需求反覆與設計浪費
專案初期，我會先根據需求整理完整的 User Flow，並與團隊討論動線可行性與功能目的，待共識建立後才進入 Wireframe 製作階段，這次也透過這樣的流程幫助團隊更早釐清開發邊界與優先順序，讓開發不會在後期突然增加額外功能、導致反覆返工。
統整畫面邏輯，讓交付更具指引性
為了讓交付時能清楚傳達每個畫面的交互邏輯與細節，我會事先整理好完整的畫面流程與元件狀態，幫助工程師快速理解設計意圖。
提升理解效率，減少認知落差
我會針對每個功能建立清晰的操作邏輯與畫面流程，例如貼文／投票的彈出選單，除了標示觸發條件與動作後狀態，也補充說明哪些狀況會顯示或消失，幫助團隊快速理解交互設計的意圖。
最佳化貼文列表視覺，提升新功能使用率
針對聊天室內的貼文列表，我根據使用者回饋與實際操作體驗進行了視覺與架構調整。
為了避免按鈕遮擋訊息，我重新調整底部留白空間；此外，也將「新增貼文／主題投票」功能入口以 icon 呈現，放在容易辨識的位置，讓使用者能清楚分辨並快速使用新功能。
釐清操作意圖，提升畫面理解力
早期版本的聊天室畫面中，同質元件過多、功能樣式混用，導致使用者難以理解哪些區域可以操作或新增內容。
我重新整理操作邏輯，並導入 Tooltip 引導機制，幫助使用者清楚知道畫面行為與點擊區域。
為避免載入過程中使用者誤解畫面異常，也加入 Skeleton Loader 提示版面載入狀態
從閱讀困難到一目了然：重新梳理卡片資訊結構
卡片資訊雜亂堆疊、圖片比例過小，是使用者在測試中最常提及的閱讀障礙。
針對這點，我與團隊重新審視了卡片的視覺層級與資訊順序，將圖片移至頂部、放大顯示，加強主題感知；關鍵資訊如日期、標籤、參與成員則重新排列，讓使用者能在滑動時快速掃描判讀。
詳細頁中，我也針對填寫順序重新配置欄位位置，讓使用者可以更流暢地新增內容、補充資料，不需花時間在找欄位上 這些調整讓卡片變得更直覺，也減少因訊息錯置造成的編輯誤差。
重設貼圖功能入口邏輯與 Icon 樣式
原本貼圖功能的 Icon 設計過於輕巧，無法在複雜畫面中突顯，加上開啟貼圖的點擊率長期偏低，所以從樣式與邏輯兩方面同時最佳化。
我們先盤點過去使用數據後發現：同一畫面中設有兩個入口（上方功能列與輸入框旁），卻無明顯誘導效果，反而造成認知混亂與點擊誤差。 因此與團隊討論後，移除重複入口，並將貼圖入口改設於輸入框旁，配合更粗線條、更清晰色彩的 Icon 樣式，讓新使用者也能即時辨識。
這次調整目的是：讓該點被看見、並知道點了之後會發生什麼事。
自學動態設計，為產品節慶打造互動體驗
在求學期間我自學動態設計相關知識，並嘗試應用於 Figma Prototype。加入公司後，團隊開始嘗試在節慶期間導入視覺動態，專案負責人看見我在動態上的投入與能力，邀請我負責設計節慶動畫並實作進產品中，提升介面的互動感與趣味性。
這讓我體會到，設計不只是功能與資訊呈現，更可以創造情境與使用者記憶點。
反思與學習
我的反思
剛進入 Letstalk 時，我雖然熟悉設計工具（如 Sketch），但對於介面設計背後的系統邏輯與設計語言仍不夠熟悉。隨著實際參與產品最佳化與改版專案，我開始深入理解 Material Design 的概念，從元件規範到畫面一致性，逐步學會如何將使用者痛點轉譯為具體的 UI 解法。
這段歷程讓我逐漸建立起對「畫面結構」與「使用者感知」的敏銳度，開始能更主動與工程師主管溝通，釐清設計背後的目的與交付需求。
回顧這段經驗，我學會了幾件重要的事：
交付不只是畫面好看，更要讓團隊能準確理解並落地實作。
UI 元件與流程設計要有系統性，才能隨產品演進持續維護與擴充。
很多微小的細節會在用戶實際操作中累積出整體感受與體驗差異。
