iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
IT 管理

【前端工程師&UI 的 30 天約會】戰勝猴子!:Figma 交付實戰篇 系列

你是否遇到過這些狀況?像是:
💬 工程師:沒有前因後果又畫不完全,設計是要我們通靈嗎?
💬 設計師:為何最後的成品都跟我畫的不同,用起來那麼怪!
因為設計師擅長處理問題、提出解法,關注使用者行為;而工程師們注重功能、結構和效用,確保產品的可用性。我們常因為兩者不同的思考模式而產生摩擦。

本篇想分享在這兩年的複雜後台專案中,前端工程師與 UI/UX 設計師們從不熟悉到相互配合,在一般交付方式不適用之下,一步步逐漸共同討論出的一套合作流程,在專案中提升協作效率的故事!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊擁有夢想的鐵人猴子隊
DAY 1

[Day1-介紹] 猴子是誰?!前端工程師與 UI 設計師如何透過 Figma 協作!

本系列介紹 單純討論設計流程、開發流程的文章很多,但團隊組成和會遇到的問題百百種!本系列將搭配專案,分享實際狀況中遇到的問題和應對做法。 藉由「使用者導向」的概...

2024-09-13 ‧ 由 TC 分享
DAY 2

[Day2-介紹] UI/UX 設計師是做什麼的?

UI/UX 設計師、產品設計師 近十年來,隨著產品開發的發展,和日漸增加對使用者洞察的需求,台灣各家公司的產品開發團隊中開始加入了新角色:UI/UX 設計師,有...

2024-09-14 ‧ 由 TC 分享
DAY 3

[Day3-介紹] 我是工程師,我不需要學設計軟體吧

Figma 是誰 Figma 是一套線上設計軟體,具有即時協作的特性,在 COVID 疫情後普遍被採用。 除了設計師能夠用 Figma 產出 UI(介面)外,隨...

2024-09-15 ‧ 由 TC 分享
DAY 4

[Day4-介紹] 工程師跟設計師會是敵對的?🙂‍↕️ 舉個範例吧!

你是否遇到過這些狀況 我們常聽到一些設計師和開發吵架的故事,像是:因為設計師擅長處理問題、提出解法,關注使用者行為;而工程師們注重功能、結構和效用,確保產品的可...

2024-09-16 ‧ 由 TC 分享
DAY 5

[Day5-討論階段] 參與草稿(Wireframe)的討論,之後會更好做事!

專案啟動 這裡的啟動指的是需求進到設計,開始討論前台畫面時。設計師們在此階段會出 Wireframe 草稿(什麼是 Wireframe?請看下一篇),幫助需求對...

2024-09-17 ‧ 由 TC 分享
DAY 6

[Day6-討論階段] 參與草稿(Wireframe)的討論(進階篇)

補充說明:Wireframe 是什麼 前一篇提到一個概念「Wireframe」(中文稱:線框圖)是一種常見的設計溝通工具。由 UX 設計師產出(若無專業分工,有...

2024-09-18 ‧ 由 TC 分享
DAY 7

[Day7-討論階段] 拒當通靈王!請設計師出 Demo(Prototype)吧!

(圖片來源:純靠北工程師47c) 通靈能力是工程師必備的嗎 「通靈」這個萬年長談的議題,不管對「工程師」或「設計師」都是心中的痛。 對於工程師,設計師或 PM...

2024-09-19 ‧ 由 TC 分享
DAY 8

[Day8-討論階段] 拒當通靈王!請設計師出 Demo(Prototype)吧!(進階篇)

補充說明:Prototype 是什麼 Prototype(中文稱:原型)是一種 Demo 想法的工具。能夠有效呈現概念和互動,在專案的前、後期使用最為加分。 如...

2024-09-20 ‧ 由 TC 分享
DAY 9

[Day9-討論階段] 需求定版!UI Mockup 是專案啟動的訊號 📡

終於開始要幹正事 確認完所有事情後(需求、功能、邏輯),設計師會陸續交付前端工程師用來切版的 UI Mockup。Figma 能夠直接產出一個分享連結,在 UI...

2024-09-21 ‧ 由 TC 分享
DAY 10

[Day10-討論階段] 終於可以開始切版!但到底要看哪一版 final_last_finalfinal?💥

(圖片來源:DRBARTPM.COM) Mockup 的具象讓人看到更多可能 當然沒那麼簡單定版⋯ 利害關係人們看了 UI Mockup 後,因為近一步推進到實...

2024-09-22 ‧ 由 TC 分享