跨平台一致性
介面重構
設計系統整合
我的貢獻
協助轉換設計工具
建立 Figma 設計系統與元件庫
協助整理 Notion 設計文件與版本紀錄
專案總覽
Letstalk 是一款企業內部使用的即時通訊工具，為提升產品一致性與開發效率，我負責桌機版 UI/UX 最佳化，從設計系統建立到元件規範落地，全面提升跨部門溝通效率與產品品質。
專案成果與影響
+26 %
活躍用戶數
專案導入後，產品活躍使用率提升 26%，使用者滿意度提升，並成功為後續功能擴充奠定元件規模與維護基礎。
成功導入 Figma 設計系統，減少跨模組設計重工
UI 元件一致性提升，使用者操作更直覺
為未來新功能的設計規範基礎，提升維運效率與產品一致性
問題定義
觀察痛點
1
缺乏設計系統，導致介面風格不一致、維護成本高
2
跨模組元件使用不統一，交互與樣式缺乏規範
3
使用者介面層級不清，操作體驗不連貫
專案成果
從靜態畫面到真實體驗：讓設計細節落地的橋梁
為了讓工程師更準確理解 UI 動態邏輯與期望呈現效果，我針對複雜交互設計補充製作 Prototype。
以搜尋結果互動為例：
當使用者點選搜尋結果中的聯絡人，聊天視窗中應同步跳出該訊息所在位置並高亮提示。透過 Prototype 示意能更清楚表達「何時觸發」「跳轉節點」與「提示狀態」，有效縮短與工程端來回討論的時間。
從零拆解，再組合：建立讓團隊信任的元件庫
為了確保產品在日後擴充與開發維護上的效率與一致性，我從零建立了 Letstalk 桌機版的設計元件庫，並全面導入 Auto Layout、Variants 與 Layer 命名規則。
透過元件統一與系統化管理，我們團隊成功減少重工次數、提升開發交付效率，也讓設計團隊在後續任務中能專注於策略與體驗最佳化。
用標註減少誤解：讓設計交付更精準落地
為了提升交付效率與開發一致性，加上尺寸、間距與狀態標註，協助工程師更清楚掌握互動行為與畫面結構。
以行事曆元件為例，我針對各階段（如 Hover、Click、Disabled）標註了必要的狀態邏輯與操作回饋，讓工程師在對照 Figma 畫面時，能快速理解哪些是靜態、哪些是交互，哪些為特殊邏輯處理。
這樣的標註不僅讓開發實作更順利，也能在後續討論與迭代時，快速追溯已處理與未處理的細節，大幅減少來回修改與理解落差。
重構 Kanban 卡片介面，從「資訊堆疊」轉為「視覺分層」
為了讓看板功能更符合辦公族群實際分派與溝通需求，我重新設計了 Kanban 介面結構與內容呈現方式，將原本雜亂堆疊的資訊轉化為更清晰、有層次的視覺模組，此次最佳化聚焦於以下幾點：
卡片資訊模組化：
將平台適用標籤（Mac/Windows）、卡片主標、指派成員等資訊進行視覺分組，並透過 icon 和 hint 建立清楚的互動回饋。
支援成員辨識與縮圖顯示：
每個列表下方能顯示卡片數與縮圖，提升團隊指派與追蹤效率。
選擇性強調關鍵角色：
成員欄位中優先高亮排序重要參與者，讓視覺聚焦更直覺。
導入 Auto Layout，與工程師同步設計邏輯：
確保開發時的還原度與彈性，並加速協作效率。
給使用者一份安心感：讓選取條件不再隱形
原本的搜尋與選擇流程中，使用者難以掌握「我已選了什麼？現在篩選了哪些條件？還能再加嗎？」這樣的模糊感導致使用效率降低，且容易重複操作或錯過結果。
為解決這個問題，我重新設計了卡片搜尋與條件選擇的互動流程，聚焦在以下幾點：
條件選取即時回饋：
所有已選條件（標籤與執行者）清楚顯示於輸入欄下方，避免錯過與誤判。
視覺模組化設計：
標籤與成員以 Tag 元件形式統一呈現，強化辨識與一致性。
輸入欄提示指引：
將「搜尋卡片名」「加入篩選條件」等行為整合於同一模組，降低學習曲線。
支援清除與多選操作：
已選項目可一鍵移除，增加操作彈性。
重構卡片資訊結構，讓交辦事項更清晰
原本的卡片詳情頁面資訊呈現零散，執行功能與溝通訊息混雜，使用者需要多次滑動與點擊才能完成任務交辦或回應，影響效率與可讀性。
我重新規劃了卡片的操作邏輯與視覺層級，最佳化重點如下：
動作操作模組化：
將執行動作（如指派、設定時間、上傳附件）整合至右側操作欄，統一入口，減少認知負擔。
留言設定 floating：
讓討論回應與卡片內容產生更直接的對話流，強化任務的即時協作性。
輸入區彈性伸縮：
根據輸入內容高度自動調整，避免遮擋資訊，提升可用性。
資訊欄左側集中、對齊視線：
包含執行人、標籤、連結等資訊統一靠左顯示，閱讀動線更順暢。
支援圖檔放大預覽：
使用者可直接點擊查看圖檔細節，方便設計師與審核者確認。
強化訊息排程與篩選，讓每條訊息都能掌控得當
為了提升使用者對排程訊息的掌握力，我在聊天室訊息管理中新增了「To Be Sent（未送出）」與「Sent（已送出）」的分頁切換設計，讓使用者能快速區分當前排程狀態並有效管理內容。
這項設計改動聚焦在以下幾點：
視覺標籤清楚標示訊息狀態：
避免訊息混淆或誤判是否已傳出。
分頁導覽切換，分類即一目了然：
使用者能快速切換訊息狀態，並集中操作。
Hover 顯示更多選項，避免干擾主要訊息：
保持畫面簡潔，僅在需要時展開操作。
預約訊息內容圖文一致，操作前後無落差：
使用者可預覽訊息樣貌，增強掌控感。
整合時間資訊與訊息行動，提升訊息掌控力
當訊息需要依時間軸排序並追蹤，使用者往往需要在多個模組來回切換，增加認知成本，我重新設計了「Me 區塊」的提醒與訊息總覽頁。
聚焦三個核心目的：
集中資訊
對齊操作邏輯
提升篩選效率
聚焦以下重點：
統一訊息類型切換入口：
將 Reminder、Schedule、Summary 統整於標籤頁中，讓資訊更有分類依據。
強化日曆互動關聯性：
使用者可直接點選日期，快速對應當天排程訊息與提醒內容，減少搜尋與記憶負擔。
訊息操作集中於訊息本體右側選單：
如刪除、跳轉、編輯等都以 hover 顯示方式隱性呈現，維持簡潔 UI 同時保留功能。
視覺資訊區塊清晰分隔：
讓使用者清楚分辨「我看到的是什麼？這是提醒還是訊息？」
明確的狀態提示，才是穩定體驗的開始
我們在用戶訪談中發現，許多使用者在使用聊天室時遇到訊息未發出、畫面卡住，常以為是「App 壞了」，其實只是網路斷線或訊息同步延遲，這些技術狀況若無明確提示，將導致用戶焦躁與錯誤操作。
為此，我加入了以下兩個關鍵系統狀態提示設計：
Message Syncing：
當系統正在同步訊息時，以明確 loading UI 呈現，避免使用者重複發送或誤以為已完成。
No Network Connection：
在網路中斷時即時顯示明確錯誤訊息，搭配紅色高對比視覺，強化用戶意識與理解力。
參與 QA 流程協作
在設計交付後，我會主動參與產品開發的 QA 驗收過程，協助工程師對齊設計稿與實際成品是否一致，並針對異常狀況或體驗落差，提出具體修正建議
這個流程中我建立了以下三項設計驗收方法：
可追蹤的問題記錄表單：
針對每張卡片建立「Reported bugs」表，標註問題項目與修正狀態，方便團隊追蹤與對齊。
視覺輔助標註：
在設計畫面或測試圖上直接加上圖像標記與註解（如 hint 顯示異常），幫助工程理解設計預期。
回圈確認機制：
修正後我會回到對應畫面再次確認，確認無誤後再核銷任務
反思與學習
我的反思
這次在桌機端的設計開發中，我不只是做出視覺，而是積極參與整體規則建立與元件落地實作，讓使用者能在不同平台上獲得一致體驗。
我做了幾件關鍵事：
將 mobile 上的互動經驗延伸至桌機環境，參考 Material Design 等設計系統並進行適配調整。
與工程師密切討論每一個元件的實作方式與技術限制，讓視覺設計具備彈性但不失一致性。
學習使用 design token 管理 Figma components，提高元件重用性並減少版本維護成本。
針對多方團隊回饋進行反覆調整，不斷內化觀點並將其實作為具體設計邏輯，建立可複用的設計規則。
這些推進也幫助我快速提升對 Figma component 結構、團隊交付流程的掌握，並在這次專案中從「交付設計」進化為能「帶動系統性設計落地」的角色。
