iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 435 瀏覽

鐵人賽 IT 管理 DAY 28

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 28 篇

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

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

TC ‧ 2024-10-10 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 88 瀏覽

鐵人賽 IT 管理 DAY 26

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 26 篇

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

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

TC ‧ 2024-10-08 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 115 瀏覽

鐵人賽 IT 管理 DAY 22

前端工程師＆UI 的30天約會：教會猴子用Figma！系列第 22 篇

技術 [Day22] 21. 當我們同在 Figma 裡（上）

講了這麼多 Figma 共同協作的功能和使用技巧，卻一直沒有提到具體大家可以怎麼在 Figam 中互動，今天就來聊聊在合作時我們都是怎麼樣透過 Figma 溝通...

percev_shih ‧ 2024-10-04 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 596 瀏覽

鐵人賽 IT 管理 DAY 10

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 10 篇

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

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

TC ‧ 2024-09-22 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 580 瀏覽

鐵人賽 IT 管理 DAY 9

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 9 篇

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

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

TC ‧ 2024-09-21 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 323 瀏覽

鐵人賽 IT 管理 DAY 8

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 8 篇

技術 [Day8-討論階段] 拒當通靈王！請設計師出 Demo（Prototype）吧！（進階篇）

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

TC ‧ 2024-09-20 ‧團隊擁有夢想的鐵人猴子隊

1 Like 0 留言 339 瀏覽

鐵人賽 IT 管理 DAY 7

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 7 篇

技術 [Day7-討論階段] 拒當通靈王！請設計師出 Demo（Prototype）吧！

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

TC ‧ 2024-09-19 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 5

從零開始：全端新手的困境與成長系列第 5 篇

技術 Day5 從 Wireframe 到 UI Flow 再進一步用心智圖 GitMind 完善功能規劃

在完成 Wireframe 草圖後，下一步就是將這些頁面之間的連結建立起來，形成完整的 UI Flow。這不僅能幫助我們理解頁面間的關聯性，還能確保設計的邏輯性...

Chiayu ‧ 2024-09-13

0 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 4

從零開始：全端新手的困境與成長系列第 4 篇

技術 Day4 探索 Wireframe 設計：如何使用 Figma 進行網站功能規劃

在網站設計中，Wireframe 是網站開發的第一步，透過 Wireframe，我們能夠先規劃網站的頁面結構與功能，確保在進行詳細設計前，先建立好一個頁面的概念...

Chiayu ‧ 2024-09-12

0 Like 0 留言 137 瀏覽

鐵人賽自我挑戰組 DAY 29

UI/UX設計的初心者冒險之旅系列第 29 篇

技術 DAY29＃UI/UX設計學習目錄

從開賽到現在不知不覺快要30天了，除了學習之外，複習跟統整也是一樣重要的，所以今天我想把過去這幾天寫的內容歸納一下，方便之後回頭看不用亂找 :D 那就，理論...

Chloe ‧ 2024-09-09 ‧團隊iT 貓貓教

1 Like 0 留言 99 瀏覽

鐵人賽 IT 管理 DAY 5

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 5 篇

技術 [Day5-討論階段] 參與草稿（Wireframe）的討論，之後會更好做事！

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

TC ‧ 2024-09-17 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 414 瀏覽

鐵人賽 IT 管理 DAY 3

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 3 篇

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

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

TC ‧ 2024-09-15 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 194 瀏覽

鐵人賽自我挑戰組 DAY 28

UI/UX設計的初心者冒險之旅系列第 28 篇

技術 DAY28＃設計迭代 (Design Iteration)

一個產品開發、設計往往不是一蹴而就的事，總是要經歷不斷的調整，今天就針對這部分簡單做個筆記。那麼，設計迭代（Design Iteration）　　很早之...

Chloe ‧ 2024-09-08 ‧團隊iT 貓貓教

0 Like 0 留言 148 瀏覽

鐵人賽自我挑戰組 DAY 27

UI/UX設計的初心者冒險之旅系列第 27 篇

技術 DAY27＃實作練習-6_購物網站Prototype

根據那個階層圖表示，網頁視覺設計的Mockup完成之後，就是製作prototype的開始，也許會有沒想到的部分，但還是先嘗試看看吧！那就，頁面分述首頁...

Chloe ‧ 2024-09-07 ‧團隊iT 貓貓教

0 Like 0 留言 109 瀏覽

鐵人賽自我挑戰組 DAY 26

UI/UX設計的初心者冒險之旅系列第 26 篇

技術 DAY26＃實作練習-5_購物網站Mockup

在設計UI元件的時候，就已經開始思考網站雛型可能會長怎樣，不過我不是學設計的，要有很美觀的畫面會有點困難。但還是，嘿嘿， Mockup 　　依據那時候設計元...

Chloe ‧ 2024-09-06 ‧團隊iT 貓貓教

0 Like 0 留言 162 瀏覽

鐵人賽自我挑戰組 DAY 25

UI/UX設計的初心者冒險之旅系列第 25 篇

技術 DAY25＃實作練習-4_網站UI元件設計

原本今天的預期規劃是要完成Mockup，但對目前的我來說有點太吃力了，所以就著重在設計網站元件吧！那麼， UI元件設計　　從DAY24製作的小農網站wir...

Chloe ‧ 2024-09-05 ‧團隊iT 貓貓教

0 Like 0 留言 140 瀏覽

鐵人賽自我挑戰組 DAY 24

UI/UX設計的初心者冒險之旅系列第 24 篇

技術 DAY24＃實作練習-3_繪製網站Wireframe

目前小農購物網站的進度，已經從user story進展到UI flow，那接下來，就開始依據前一天繪製的內容，來製作每個介面的wireframe吧！那麼，...

Chloe ‧ 2024-09-04 ‧團隊iT 貓貓教

0 Like 0 留言 143 瀏覽

鐵人賽自我挑戰組 DAY 23

UI/UX設計的初心者冒險之旅系列第 23 篇

技術 DAY23＃實作練習-2_操作邏輯流程（Logic Flow）

在決定要製作一個簡易的小農購物網站後，回頭找了之前寫過的筆記，在DAY6那天，有截圖一個UI設計流程的階層圖，昨天已經完成有關User story的部分。那就...

Chloe ‧ 2024-09-03 ‧團隊iT 貓貓教

0 Like 0 留言 184 瀏覽

鐵人賽自我挑戰組 DAY 19

UI/UX設計的初心者冒險之旅系列第 19 篇

技術 DAY19＃Figma的網格系統 (Grid System)

好幾天之前在鐵人賽開始的DAY2，與排版相關的文章裡有提到網格系統（grid system）的概念，那今天就針對它學習吧。來吧！網格系統 (Grid Sy...

Chloe ‧ 2024-08-30 ‧團隊iT 貓貓教

0 Like 0 留言 298 瀏覽

鐵人賽自我挑戰組 DAY 17

UI/UX設計的初心者冒險之旅系列第 17 篇

技術 DAY17＃Prototype常見互動製作

透過Prototype的呈現可以讓團隊清楚了解版面設計與呈現方式，但要怎麼讓效果照預期的呈現，就需要應用學過的各種功能了，所以今天就來紀錄幾個常見的互動方式。...

Chloe ‧ 2024-08-28 ‧團隊iT 貓貓教

0 Like 0 留言 223 瀏覽

鐵人賽自我挑戰組 DAY 16

UI/UX設計的初心者冒險之旅系列第 16 篇

技術 DAY16＃將表單成果製作成Portotype

還記得我在DAY14那天用Figma設計了UI元件與表單，既然都有一個比較完整的設計稿了，不如直接拿它練習製作成Portotype吧！開練開練， Proto...

Chloe ‧ 2024-08-27 ‧團隊iT 貓貓教

0 Like 0 留言 184 瀏覽

鐵人賽自我挑戰組 DAY 15

UI/UX設計的初心者冒險之旅系列第 15 篇

技術 DAY15＃Figma的Portotype介紹

一般設計出來的線框稿或平面稿是不能互動的，這時候就需要製作可以模擬操作的Prototype（原型），來確認按鈕連結與預期效果。那就，操作總覽　　切換到P...

Chloe ‧ 2024-08-26 ‧團隊iT 貓貓教

0 Like 0 留言 204 瀏覽

鐵人賽自我挑戰組 DAY 14

UI/UX設計的初心者冒險之旅系列第 14 篇

技術 DAY14＃設計UI元件與製作表單

前面幾天學了很多有關於Figma的功能，今天就來嘗試看看設計UI元件，然後再製作表單試試看吧！那就，設計UI元件　　為了練習我這邊先設計可能會用到的元件...

Chloe ‧ 2024-08-25 ‧團隊iT 貓貓教

0 Like 0 留言 147 瀏覽

鐵人賽自我挑戰組 DAY 12

UI/UX設計的初心者冒險之旅系列第 12 篇

技術 DAY12＃Component + Variant 操作 - Input

原以為需要再找資料來學習input的variant，沒想到直接打開Figma重新做一遍，欸？可以了耶？完全不知道昨天怎麼了。但還是紀錄一下吧， Compon...

Chloe ‧ 2024-08-23 ‧團隊iT 貓貓教

0 Like 0 留言 182 瀏覽

鐵人賽自我挑戰組 DAY 11

UI/UX設計的初心者冒險之旅系列第 11 篇

技術 DAY11＃Component + Variant 操作 - Button

前一天關於Component的功能認識中有提到，透過「/」命名方式能將物件分類，並快速置換Instance的組成。後來，在2020年底，Figma推出一個新功能...

Chloe ‧ 2024-08-22 ‧團隊iT 貓貓教

0 Like 0 留言 236 瀏覽

鐵人賽自我挑戰組 DAY 10

UI/UX設計的初心者冒險之旅系列第 10 篇

技術 DAY10＃Figma的Component功能認識

講完了Auto layout能做到的幾個功能，接下來換針對Figma的Component來學習，希望之後要實作的話，回來都能看得懂 :D 那就， Compon...

Chloe ‧ 2024-08-21 ‧團隊iT 貓貓教

0 Like 0 留言 143 瀏覽

鐵人賽自我挑戰組 DAY 9

UI/UX設計的初心者冒險之旅系列第 9 篇

技術 DAY9＃Figma的Auto layout功能認識

在之前第一次製作wireframe的時候有說到一個功能，叫做Auto layout，非常非常容易在使用Figma的過程會使用到。那就， Auto layou...

Chloe ‧ 2024-08-20 ‧團隊iT 貓貓教

0 Like 0 留言 240 瀏覽

鐵人賽自我挑戰組 DAY 8

UI/UX設計的初心者冒險之旅系列第 8 篇

技術 DAY8＃Figma的基礎工具操作

ChatGPT的安排是，實際去製作一個簡單的wireframe之後，接著才是學習一些Figma的常用工具，有點像是體驗完後有個初步印象，再深入學習的感覺。那就...

Chloe ‧ 2024-08-19 ‧團隊iT 貓貓教

1 Like 0 留言 207 瀏覽

鐵人賽自我挑戰組 DAY 7

UI/UX設計的初心者冒險之旅系列第 7 篇

技術 DAY7＃使用Figma製作wireframe

上一篇講述有關UI設計流程與wireframe的概念，接下來可以開始學習接觸相關UI設計軟體，目前主流軟體有：Sketch、Adobe XD、Figma，關於這...

Chloe ‧ 2024-08-18 ‧團隊iT 貓貓教

0 Like 0 留言 170 瀏覽

鐵人賽 IT 管理 DAY 1

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 1 篇

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

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

TC ‧ 2024-09-13 ‧團隊擁有夢想的鐵人猴子隊