鐵人檔案
有幸因多年 UX/UI 的設計實務經驗，累積了些許領域知識、踩過的坑，與心路歷程。希望透過寫作，分享給更多想系統化學習 UX/UI 的好朋友們，對社群做一些貢獻。
內容共規劃為四大模塊:
1. UX 觀念及基礎方法
2. 業界常見的 UI 設計流程
3. 使用 Axure RP 繪製Wireframe/Wireflow
4. 使用 Figma 設計 GUI 及原型 Prototype
今天來設計每個網頁幾乎都會有的登入頁面吧！跟著 Rson 一起實作完，就能做出下面這張設計稿： 分二塊來實作，首先先繪製容器及左半部 Sign-up 的部份，再...
Constraints 是 Figma 中一個很重要的功能，它可以讓我們的設計在做拉伸的時候，變的更加彈性，當你需要做 RWD (Responsive Web...
前一篇我們實驗 Constraints 各種設定會造成的影響後，相信大家已經對於 Constraints 有所理解了。今天我們來將昨天學到的，實際應用在真實的...
在一個網站中，常常會在不同的頁面之間看到許多相同共用的元素，比如說按鈕、導覽列。而在同一個網頁中，也經常會看到有些一再重覆出現的元素，比如說卡片、列表等。 我們...
大家應該都有這樣的經驗：辛辛苦苦做了一、二個小時的進度，因為沒有養成隨時存檔的好習慣，當突然遇到軟體或作業系統當機而欲哭無淚。Figma 考量到了這點，預設大約...
Figma 的功能已經相當強大，但多少還是會缺乏一些功能，當我們有需要的時候，便可到社群裡用關鍵字查找，看看有沒有開發者已經開發出可以擴充的插件 (Plugin...
上一篇介紹了 plugin 是什麼、如何安裝使用，以及推薦的插件。今天我們實際透過這些插件實作一個簡單版的po文牆網頁UI。最後會完成的結果如下： 首先，使用形...
終於，我們要進入 UX/UI 設計中的最後一個流程－ 高精度原型 Hi-Fi Prototype，這也是交付所有能夠設計的細節，給工程師進入開發前的最後一個階段...
由於 Figma 的核心是 GUI 設計工具，附帶原型製作能力，所以一般來說我們都會使用它來進行高精度原型設計，說到這裡，你會不會想問，有高精度，那是不是也有低...
楔子 收到 iT 邦鐵人賽資訊時，正好是 Rson 新公司案子最忙、頻繁加班的時候。還記三十幾天前，我盯著螢幕上幾行字時的情景 … 「參加 iT 鐵人賽，必須持...
