iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

有幸因多年 UX/UI 的設計實務經驗,累積了些許領域知識、踩過的坑,與心路歷程。希望透過寫作,分享給更多想系統化學習 UX/UI 的好朋友們,對社群做一些貢獻。

內容共規劃為四大模塊:
1. UX 觀念及基礎方法
2. 業界常見的 UI 設計流程
3. 使用 Axure RP 繪製Wireframe/Wireflow
4. 使用 Figma 設計 GUI 及原型 Prototype

鐵人鍊成 | 共 30 篇文章 | 40 人訂閱 訂閱系列文 RSS系列文
DAY 21

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

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

2021-10-06 ‧ 由 Rson Wilson 分享
DAY 22

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

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

2021-10-07 ‧ 由 Rson Wilson 分享
DAY 23

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

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

2021-10-08 ‧ 由 Rson Wilson 分享
DAY 24

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

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

2021-10-09 ‧ 由 Rson Wilson 分享
DAY 25

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

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

2021-10-10 ‧ 由 Rson Wilson 分享
DAY 26

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

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

2021-10-11 ‧ 由 Rson Wilson 分享
DAY 27

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

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

2021-10-12 ‧ 由 Rson Wilson 分享
DAY 28

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

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

2021-10-13 ‧ 由 Rson Wilson 分享
DAY 29

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

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

2021-10-14 ‧ 由 Rson Wilson 分享
DAY 30

Day 30. [復盤] 一場成年人的意志力之旅

楔子 收到 iT 邦鐵人賽資訊時,正好是 Rson 新公司案子最忙、頻繁加班的時候。還記三十幾天前,我盯著螢幕上幾行字時的情景 … 「參加 iT 鐵人賽,必須持...

2021-10-15 ‧ 由 Rson Wilson 分享