01
02
03

時間
2025年9月到2026年1月
共4個月
客戶
某台灣公司摩托車事業體
團隊角色
4人開發團隊(2前端、1後端、1PM)裡的UI/UX 設計師




Mockups
Before & After
首頁
Before

After

Before & After
產品頁
設計決策:
易用性:支援左右滑動切換產品,點擊圖片即可查看產品詳情
整合相關功能:將「產品註冊」與「檢視產品詳情」功能歸入同一頁面
視覺呈現:突顯產品名稱與圖片,以提升使用者體驗
Before

After

Before & After
會員頁
設計決策:
透過新增icon來增強識別度。
透過將相似選項分組、突出顯示標題以及簡化編輯按鈕
建立清晰的視覺層級。
Before

After

A


B
Before & After
*紅色區域展示了為改善產品註冊流程而進行的變更(從左到右,經過3次迭代)。

01
有些序號很容易輸錯
B/8、O/0 和 S/5 等字元容易讓使用者在 App 上輸入時產生混淆。
02
序號上的亂碼增加了使用者輸入序號時的摩擦力
諸如「-」、「 」、「☆」等不必要的序號可能會讓使用者感到困惑。
03
對第一次購買產品的使用者來說,很難去發現序號的位置
缺乏關於查找產品上兩個序號的明確指示




設計系統
元件
經與前端開發人員商定,我們決定在應用程式中使用線上第三方 React 元件庫 TailGrids 來實現可重複使用元件;設計系統也是基於 TailGrids 元件並結合少量調整建構而成的。
設計系統
顏色和字型
品牌色彩與排版基於 2.0 版 UI 設計確立,以保持設計的一致性。
交付檔案
UI Core & Spec & State
交付給開發人員的 HandOff 檔案經過精心整理,詳細列出了功能、規格、狀態及動畫效果。




交付檔案
UI Flow
所有的 UI 流程也都配有箭頭和文字說明進行記錄,這確保了與前端開發人員之間清晰順暢的溝通。





