iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
IT 管理

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

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

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

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

[Day21-開發中期] 欄位邏輯 Flow 🎢  藉由 Figma 模擬程式模組積木,定義功能互動及開發!(下)

積木化的流程圖 承上篇的結論,我們覺得既然要提供前端們開發功能的指引,透過這樣 「視覺化」 的方式,能夠很好的模擬程式模組的架構! 以下是我們最後的流程圖:(因...

2024-10-03 ‧ 由 TC 分享
DAY 22

[Day22-開發後期] 高效撰寫前端檢核和提示訊息

行雲流水的前端檢核 前端檢核(frontend validation)指的是使用者操作產品的過程中,透過程式邏輯檢查使用者輸入的數據,以確保其操作符合規則。前端...

2024-10-04 ‧ 由 TC 分享
DAY 23

[Day23-開發後期] 提示訊息的藝術讓前端檢核與提醒不再混亂 🎨

在檢核中迷失的設計師 操作情境百百種,面對各種檢核條件,和產品的不斷迭代,常常會出現各種版本的提示訊息文字。這件事不僅是讓設計師之間,也讓前端的工程師們感到無所...

2024-10-05 ‧ 由 TC 分享
DAY 24

[Day24-開發後期] 通靈後端 API 的翻譯表(上)

光通靈就飽了@@ 作為前端工程師,需要在設計稿和 API 規格中橫跳比對。撇除透過 user flow(day18:UI Flow 指引我回家 🌊)深入了解業...

2024-10-06 ‧ 由 TC 分享
DAY 25

[Day25-開發後期] 通靈後端 API 的翻譯表(下)

設計也要懂後端規格? 老實說,應該不需要對吧 😂 不過設計師如果能夠理解一些基本的後端概念,能夠有效提升開發效率。畢竟在專案中,絕大多數合作的利害關係人還是工程...

2024-10-07 ‧ 由 TC 分享
DAY 26

[Day26-開發後期] 用 Emoji 打卡!開發迭代不漏接 🏓

交棒給你不漏接 一個健康的開發過程,是工程師們會隨時與設計師確認是否符合需求和想像。因此在開發過程中發現問題或改變做法都是很正常的事!像是收到後端規格才發現前端...

2024-10-08 ‧ 由 TC 分享
DAY 27

[Day27-開發後期] 工程師可以如何使用 Figma?前端交付前的最後檢查

前端交付前的最後檢查 前面的篇幅大多在講工程師如何與設計師透過 Figma 合作,請設計師們配合產出文件,那 Figma 於工程師們可以有什麼價值呢? 雖然進入...

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

[Day28-總結] 猴子翻過高牆!工程師也懂的設計交付之旅🔥

Figma 讓合作更緊密 藉由 Figma 即時同步,團隊成員可以共同參與,隨時跟進進度與提供回饋。一個健康的產品團隊需要設計與開發緊密協作,互相理解與回饋。合...

2024-10-10 ‧ 由 TC 分享
DAY 29

[Day29-總結] 沒有最好只有更適合!從零到 87 分的合作模式

團隊在協作中成長與調整 團隊的合作模式不是一日就能塑照的,網路上大公司的合作流程不一定適合新創組織。在同樣的團隊下,適合 A 專案的作法也不一定就能套用到 B...

2024-10-11 ‧ 由 TC 分享
DAY 30

建立互助共贏的團隊關係:前端與 UI 設計的持續對話

感謝誌 合作同事的來來去去,在最後的這一篇順便清算一下人情😂(圖片來源:梗圖倉庫) 像論文一樣,不免俗在最後感謝一下在這個專案上合作到的大家!首先要感謝的是天史...

2024-10-12 ‧ 由 TC 分享