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

0 Like 0 留言 15032 瀏覽

鐵人賽 Modern Web DAY 24

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 24 篇

技術 Day 24. 打造可重覆使用的設計－Figma 的 Component 元件解析

在一個網站中，常常會在不同的頁面之間看到許多相同共用的元素，比如說按鈕、導覽列。而在同一個網頁中，也經常會看到有些一再重覆出現的元素，比如說卡片、列表等。我們...

Rson Wilson ‧ 2021-10-09

0 Like 0 留言 6736 瀏覽

鐵人賽 Modern Web DAY 20

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 20 篇

技術 Day 20. 用 Figma 來設計基本 icon 吧！

Figma 的介面佈局與一般的設計軟體很類似，上方(1)為工具列，左方(2)可切換 Layer, Page ，右方 (3) 有三個面版，當目前為 Design...

Rson Wilson ‧ 2021-10-05

0 Like 0 留言 6561 瀏覽

鐵人賽 Modern Web DAY 7

從零開始學 - Side Project專題開發及切版實作技巧系列第 7 篇

技術 Day 7 - 動手繪製 Wireframe 線框稿(Figma教學)

Day 7 - 動手繪製 Wireframe 線框稿(Figma教學) 每日一談嗨 ! 大家好，我是阿蘇今天是Day 7 ，今天會分享 Wireframe...

阿蘇蘇 ‧ 2022-09-22 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 6342 瀏覽

鐵人賽 Modern Web DAY 22

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 22 篇

技術 Day 22. RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制

Constraints 是 Figma 中一個很重要的功能，它可以讓我們的設計在做拉伸的時候，變的更加彈性，當你需要做 RWD (Responsive Web...

Rson Wilson ‧ 2021-10-07

0 Like 0 留言 6312 瀏覽

鐵人賽 Modern Web DAY 25

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 25 篇

技術 Day 25 Figma 設計檔的多啦時光機－檔案歷史紀錄與版本控制

大家應該都有這樣的經驗：辛辛苦苦做了一、二個小時的進度，因為沒有養成隨時存檔的好習慣，當突然遇到軟體或作業系統當機而欲哭無淚。Figma 考量到了這點，預設大約...

Rson Wilson ‧ 2021-10-10

0 Like 0 留言 5057 瀏覽

鐵人賽 Modern Web DAY 21

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 21 篇

技術 Day 21. 透過實作設計一個登入頁面，掌握 Figma 基本工具

今天來設計每個網頁幾乎都會有的登入頁面吧！跟著 Rson 一起實作完，就能做出下面這張設計稿：分二塊來實作，首先先繪製容器及左半部 Sign-up 的部份，再...

Rson Wilson ‧ 2021-10-06

0 Like 0 留言 4660 瀏覽

鐵人賽 Modern Web DAY 27

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 27 篇

技術 Day 27. 我要準時下班- Figma Plugin (下)

上一篇介紹了 plugin 是什麼、如何安裝使用，以及推薦的插件。今天我們實際透過這些插件實作一個簡單版的po文牆網頁UI。最後會完成的結果如下：首先，使用形...

Rson Wilson ‧ 2021-10-12

0 Like 0 留言 4632 瀏覽

鐵人賽 Modern Web DAY 19

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 19 篇

技術 Day 19. UI 設計軟體- Figma 簡介與優勢

前二篇解釋了 GUI Design 階段的重點，也提到此時花費設計師的工時相當可觀。功欲善其事，必先利其器，挑選一個稱手、效率高的設計軟體就很重要。目前 GUI...

Rson Wilson ‧ 2021-10-04

0 Like 0 留言 4282 瀏覽

鐵人賽 Modern Web DAY 26

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 26 篇

技術 Day 26. 我要準時下班- Figma Plugin (上)

Figma 的功能已經相當強大，但多少還是會缺乏一些功能，當我們有需要的時候，便可到社群裡用關鍵字查找，看看有沒有開發者已經開發出可以擴充的插件 (Plugin...

Rson Wilson ‧ 2021-10-11

0 Like 0 留言 3513 瀏覽

鐵人賽 Modern Web DAY 23

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 23 篇

技術 Day 23. 透過 Constraints 機制，實作出能夠拉伸的響應式卡片設計

前一篇我們實驗 Constraints 各種設定會造成的影響後，相信大家已經對於 Constraints 有所理解了。今天我們來將昨天學到的，實際應用在真實的...

Rson Wilson ‧ 2021-10-08

0 Like 1 留言 3415 瀏覽

鐵人賽 Modern Web DAY 28

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 28 篇

技術 Day 28. Hi-Fi Prototype－以 Figma 製作高精度原型 (上)

終於，我們要進入 UX/UI 設計中的最後一個流程－高精度原型 Hi-Fi Prototype，這也是交付所有能夠設計的細節，給工程師進入開發前的最後一個階段...

Rson Wilson ‧ 2021-10-13

0 Like 0 留言 3271 瀏覽

鐵人賽 Modern Web DAY 20

1995到2021，php到react網站開發歷程系列第 20 篇

技術 DAY20-網站構思之進階figma

前言：昨天我們使用了幾個基本的方法設計了網頁的首頁，今天阿森要來進一步介紹一些figma prototype的功能，讓我們最佳化figma預覽的效果，也就是...

Cooksuhr ‧ 2021-10-02 ‧團隊Obit0 Studio

0 Like 0 留言 2845 瀏覽

鐵人賽 Modern Web DAY 19

1995到2021，php到react網站開發歷程系列第 19 篇

技術 DAY19-網站構思之figma(一)

前言：接下來就要進入網頁構思的階段了，在開始寫網站之前，如同畫畫一樣，一定都需要先打一個草稿，除了讓之後寫code可以有一個方向，也可以先預覽看看之後網站的...

Cooksuhr ‧ 2021-10-01 ‧團隊Obit0 Studio

1 Like 1 留言 2299 瀏覽

鐵人賽 Modern Web DAY 29

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 29 篇

技術 Day 29. Hi-Fi Prototype－以 Figma 製作高精度原型 (下)

由於 Figma 的核心是 GUI 設計工具，附帶原型製作能力，所以一般來說我們都會使用它來進行高精度原型設計，說到這裡，你會不會想問，有高精度，那是不是也有低...

Rson Wilson ‧ 2021-10-14

0 Like 1 留言 1792 瀏覽

鐵人賽 Mobile Development DAY 7

今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列第 7 篇

技術 Day 7 Figma x Material Theme Builder x Material Design 3

前言前2天用了 Web版 Material Theme Builder，快速方便。但想要看渲染過的元件長什麼樣的話就要到 Figma 版的 Material...

ChuLin ‧ 2022-09-13 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

0 Like 0 留言 1701 瀏覽

鐵人賽 Modern Web DAY 9

從零開始學 - Side Project專題開發及切版實作技巧系列第 9 篇

技術 Day 9 - Figma 繪製精美 Mockup (二)

Day 9 - Figma 繪製精美 Mockup (二) 每日一談嗨! 大家好，我是阿蘇又是新的一天開始了，今天是Day 9來繼續昨天的分享，今天主要是...

阿蘇蘇 ‧ 2022-09-24 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 1678 瀏覽

鐵人賽 Modern Web DAY 2

從零開始的寫web app 30天生活系列第 2 篇

技術 Day 2 - 原型: Figma

前言我先建立一個原型(Prototype), 用來釐清這個WebApp的功能跟UI界面。建立原型所用到的工具是Figma, 它有免費版本, 功能應該足以應付...

tlyau62 ‧ 2021-09-14 ‧團隊ㄟˊ~這是幹嘛的？

0 Like 0 留言 1569 瀏覽

鐵人賽 Modern Web DAY 6

從零開始學 - Side Project專題開發及切版實作技巧系列第 6 篇

技術 Day 6 - Wireframe 線框稿

Day 6 - Wireframe 線框稿每日一談嗨 ! 大家好，我是阿蘇不知不覺就來到了 Day 6 ，有沒有開始對 Side Project 有些靈...

阿蘇蘇 ‧ 2022-09-21 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 1456 瀏覽

鐵人賽 Software Development DAY 2

台南不需要米其林系列第 2 篇

技術 Day02 首頁UI設計圖 ft. Figma

摘要在第一階段中我們先畫出第一版的UI設計圖，作為後續開發時的參考圖片。這邊會使用到Figma這項工具來繪製UI，參考了Papaya教室的教學影片，從手繪的草...

yenshaoting ‧ 2022-09-17 ‧團隊台南巷弄美食獵人

0 Like 0 留言 1414 瀏覽

鐵人賽 Modern Web DAY 8

從零開始學 - Side Project專題開發及切版實作技巧系列第 8 篇

技術 Day 8 - Figma 繪製精美 Mockup (一)

Day 8 - Figma 繪製精美 Mockup (一) 每日一談嗨，大家好 ! 我是阿蘇今天是Day7 我們即將進入設計階段，這邊一樣也是使用 F...

阿蘇蘇 ‧ 2022-09-23 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 1300 瀏覽

鐵人賽 IT管理 DAY 25

大共享時代系列系列第 25 篇

技術大共享時代系列_024_可協同 UI 設計的軟體

客戶：我的需求不多，就一點點...設計師：（已預知接下來無窮盡的...浩瀚宇宙）多人可同時協同設計的好處？讓設計的流程透過協作的方式變得更透明容易，及時性...

Shiva虛碼 ‧ 2021-10-10 ‧團隊好想工作室V5.0

0 Like 0 留言 1219 瀏覽

鐵人賽 Modern Web DAY 10

從零開始學 - Side Project專題開發及切版實作技巧系列第 10 篇

技術 Day 10 - Prototype 原型互動 / 產品模擬

Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學) 每日一談嗨，大家好 ! 我是阿蘇今天是Day10 ，今天來跟大家談談 P...

阿蘇蘇 ‧ 2022-09-25 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 1208 瀏覽

鐵人賽 Modern Web DAY 21

手把手web初學者系列第 21 篇

技術來用Figma做出高擬真的使用介面

網頁需要做下滑只要把Figma的 Frame 再拉長接著我們要來做一點元件的變化水平滾動圖片先拉出你需要放進圖片的圖形置入圖片到 □選取點選要放入的圖形...

我是誰我在哪... ‧ 2022-10-04

0 Like 0 留言 1136 瀏覽

鐵人賽 Mobile Development DAY 2

無法成為釣魚大師也要努力摸魚！！辣個吃魚神器 APP 系列第 2 篇

技術【Day 2】Swift UI 打版(1) - 透過 Figma 進行原型設計

tags: 釣魚術 ListView Figma SwiftUI 雜談我在淡水河畔的師傅總是耳提面命著那麼一句話⋯⋯ 『一魟，二虎，三沙毛，四斑午，五象耳，...

二坪山小弱砲 ‧ 2022-09-07 ‧團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

0 Like 1 留言 1118 瀏覽

技術幫助自己上班的零件數量查詢器(1)-出發、需求與介面

本系列純粹為本人利用上班之餘，先利用figma設計介面，並使用幾種前端語言製作幫助上班效率的工具，語言包括html、css、javascript、Vue、sc...

走得歪七扭八的孩子 ‧ 2023-02-02

1 Like 0 留言 946 瀏覽

技術新手指南：快速掌握UI/UX設計及實用工具推薦

在當今這個數位化的時代，UI/UX設計的重要性日益凸顯，它不僅關乎產品的視覺呈現，更影響著用戶體驗的質量。因此，許多設計新手都積極尋找能快速上手並提升設計效率的...

jasminecheng ‧ 2024-01-30

0 Like 0 留言 902 瀏覽

鐵人賽 Modern Web DAY 18

手把手web初學者系列第 18 篇

技術 UI介面設計入門款-Figma

今天要為大家介紹可以使用網頁版的UI介面設計神器-Figma也有人會使用 Adobe XD 或 Axure 等等(話說Figma最近也被 Adobe 收購了，不...

我是誰我在哪... ‧ 2022-10-01

0 Like 0 留言 727 瀏覽

鐵人賽 Mobile Development DAY 22

關於我用 Compose UI 造新輪子這檔事系列第 22 篇

技術 Day 22 - UI 設計

理論上 UI 要在開發前就設計好，不過我一開始是想到什麼就加什麼功能，完全沒在管設計。直到 Figma 9月中被 Adobe 併購，這消息出來後才意識到 UI...

Mikucat ‧ 2022-10-07 ‧團隊那團名要叫什麼？

0 Like 0 留言 712 瀏覽

鐵人賽 Modern Web DAY 7

從零開始的寫web app 30天生活系列第 7 篇

技術 Day 7 - 原型 (6): 預覽主頁

前言今天利用之前所建的主頁, 建立一個可讓使用者互動的原型｡預覽利用Figma的預覽功能, 即右上角的三角形(如下圖紅色標示), 可以幫助我們修正原型｡...

tlyau62 ‧ 2021-09-19 ‧團隊ㄟˊ~這是幹嘛的？

0 Like 0 留言 658 瀏覽