有幸因多年 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 鐵人賽,必須持...