UI Project Overview

UI Project Overview

專案名稱

WorkBeaver 小河狸打工換宿平台

2023/06-2023/07

2023/06-2023/07

負責角色

UI Designer

合作對象

2 位 UI/UX 設計師 、 4 位 UI 設計師

2 位 UI/UX 設計師 、 4 位 UI 設計師

負責項目

協助領導專案、Mockup 製作、工程交付

專案背景

此專案為 UI 實戰營的專案題目,主題為住宿相關產品。我們團隊希望能延伸出一個與住宿高度相關、同時在台灣市場較少見的產品方向,因此將「打工換宿平台」作為本次專案的核心主題。

由於台灣目前幾乎沒有以打工換宿為核心的專屬平台,多數相關資訊仍以社群平台轉發打工文章的形式存在,因此我們透過此專案,嘗試規劃一個定位清楚、以打工換宿為核心的產品。

主題概念

創意發想:河狸以其驚人的工程能力建造堅固的巢穴,打造一個活力、鼓勵冒險和夢想實現的品牌形象。
設計概念:以小河狸打造夢想的水壩家園工作換宿為主,希望用戶跟河狸一樣能築夢人生,所以在配色上我們運用偏生態的薄荷綠,象徵體驗生活並與環境互動,用於突顯與環境、大自然相關,感受到與自然的連結。

設計執行

最初先由一位設計師規劃視覺風格及部分元件後,我再延伸產出其他 Component,我們每天會對應彼此的元件內容或狀態應用,確保設計的一致性。

最初是由另一位設計師確認主視覺風格及部分元件後,我再延伸產出其他元件,而專案時程較短,所以在執行上我們幾乎每天會對應彼此的元件內容或狀態應用,確保設計的一致性。合作上其他組員在設計 mockup 時會跟我們提出要使用的元件,而我們再提供給他們。

UI Mockup

有了高完整度的元件後,我們在設計 UI Mockup 的過程中就相對順利與省時。每一個視覺稿完成後,組員也會互相校稿讓整體畫面更加一致的,包含介面排版的間距、文字、視覺調性。

打工換宿首頁

打工換宿首頁

進階篩選頁面

進階篩選頁面

打工內容頁面

打工內容頁面

會員個人頁面

會員個人頁面

工程交付

在工程交付階段,由於我在這部分相對有較多實務經驗,因此在各流程完成備註後,我會再次檢視功能描述是否符合實際開發的運作邏輯。設計規範的撰寫由組員依各自負責的頁面分工進行,整體內容清楚且完整。


在此合作過程中,我也會帶著團隊一起討論不同平台的互動機制,並引導他們思考背後的系統運作邏輯。希望能透過這次專案,將部分後端運作與實際產品開發的概念傳遞給組員,讓大家理解實務開發中,設計規格往往需要比發想型專案更加完整且嚴謹。

在工程交付階段,由於我在這部分相對有較多實務經驗,因此在各流程完成備註後,我會再次檢視功能描述是否符合實際開發的運作邏輯。設計規範的撰寫由組員依各自負責的頁面分工進行,整體內容清楚且完整。


在此合作過程中,我也會帶著團隊一起討論不同平台的互動機制,並引導他們思考背後的系統運作邏輯。希望能透過這次專案,將部分後端運作與實際產品開發的概念傳遞給組員,讓大家理解實務開發中,設計規格往往需要比發想型專案更加完整且嚴謹。

Prototype 展示

我們專案做得很好的部份就是動態呈現,因為動態呈現的效果除了很真實外,同時也把小河狸主題發揮的相當有趣及完整。

實戰營心得

這次的 UI 實戰營對我來說收穫非常大。過去兩年我主要深耕在 UX 領域,較少有機會碰到 UI 設計,因此特別報名這門課,希望重新把 UI 手感練回來。實際參與後,不只 Figma 的使用更熟練、許多操作技巧也大幅度回溫,整體都重新找到節奏。

更讓我驚喜的是,我能以一位資深設計師的角度,協助轉職者或剛入門的同學。在與他們交流的過程中,我反而從他們的視角獲得了很多新鮮的想法與靈感,無論是美感、原型製作還是思考方式,都讓我有不少啟發。

最後,我們這組也在兩百多位學員中拿下佳作,真的很感謝一起努力的組員和指導老師。整個過程既扎實又充滿成長感。

專案名稱

百貨商場 - 品牌視覺網站提案

2021/08 - 2021/10

2021/08 - 2021/10

負責角色

UI Designer

合作對象

1 位 UI 設計師 、 1 位 UX 設計師 、
1 位 PM

負責項目

三種品牌視覺提案

設計風格

在規劃整個系列網站時,我先大量研究潮流、時尚與生活藝術相關的網站風格,從中萃取適合品牌調性的視覺語彙。此百貨的品牌定位以高質感的藝術氛圍與優雅生活態度為核心,因此在視覺設計上,我以寬闊的留白與俐落的區塊切分來打造沉穩且具空間感的版面。

線條、按鈕圓角等 UI 細節皆採用更銳利、簡約的造型設定,讓整體風格維持一致的精緻度,同時強化品牌所傳達的高端、現代與藝術感。

在規劃整個系列網站時,我先大量研究潮流、時尚與生活藝術相關的網站風格,從中萃取適合品牌調性的視覺語彙。此百貨的品牌定位以高質感的藝術氛圍與優雅生活態度為核心,因此在視覺設計上,我以寬闊的留白與俐落的區塊切分來打造沉穩且具空間感的版面。

線條、按鈕圓角等 UI 細節皆採用更銳利、簡約的造型設定,讓整體風格維持一致的精緻度,同時強化品牌所傳達的高端、現代與藝術感。

因商業保密合約,企業已化名處理

官網首頁

官網首頁

內容文章頁面

內容文章頁面

內容文章頁面

內容文章頁面

專案名稱

台塑網|後台設計系統建置專案

2021/04 - 2021/06

2021/04 - 2021/06

負責角色

UI/UX Designer

UI/UX Designer

合作對象

1 位 UI 設計師、2 位 PM、1 位工程師

1 位 UI 設計師、2 位 PM、1 位工程師

負責項目

Component 元件製作、系統導入影片

Component 元件製作、系統導入影片

設計內容

專在專案初期,我訪談了台塑網各事業體的負責人,並深入了解工廠人員的實際操作情境,藉此梳理後台系統的使用需求。結合既有介面與現行套件的分析後,我制定了後台設計的整體應用準則。


本專案由我與另一位設計師共同合作,我主要負責通用元件(如 Button、Dialog、Search、Form、Table 等)的設計規範,並錄製元件教學影片供團隊使用。由於此設計規範將套用至台塑網旗下多個事業體,因此在字體、狀態、互動與視覺樣式等層面皆制定了較為嚴謹的標準,以確保系統在橫向擴展下仍能維持一致性與易用性。

Thanks for watching

Thanks for watching

Thanks for watching

Thanks for watching