鐵人檔案
有幸因多年 UX/UI 的設計實務經驗，累積了些許領域知識、踩過的坑，與心路歷程。希望透過寫作，分享給更多想系統化學習 UX/UI 的好朋友們，對社群做一些貢獻。
內容共規劃為四大模塊:
1. UX 觀念及基礎方法
2. 業界常見的 UI 設計流程
3. 使用 Axure RP 繪製Wireframe/Wireflow
4. 使用 Figma 設計 GUI 及原型 Prototype
有了 User Story，已經能夠了解產品會有哪些角色、他們的需求及功能價值。但缺少的是這些需求會以什麼樣的型式整合在一起成為一個產品，我們還需要將這些需求...
透過 Functional Map 將 User Story 裡抽象的「需求」轉換成「功能」描述之後，是不是就能直接來畫Wireframe 框線稿了嗎？不是不...
UI Flow 的全名是 User Interface Flow，望文生意，也就是使用者點某個按鈕會到哪個畫面的流程圖集合。 許多人會可能會認為他就是介面銜接的...
由於 UI Flow 一定程度上已經交代了操作流程會走過哪些頁面，接下來設計師就可以根據 UI Flow，把每個頁面的所有狀態、環節、動線都繪製完畢，便能夠...
Wireflow = Wireframe + Flow ，上一篇理解了什麼是 Wireframe 之後，離更深入了解 Wireflow 就不遠了。 Wire...
我們平常可能不太會注意到，ajax 網頁、APP 裡的每一個頁面，其實不是單一靜態的，而是伴隨著多種不同狀態。 想想看當我們在用 Line 傳訊息的時候，網路突...
規劃設計完 Wireflow 產出關鍵藍圖規格稿之後，基本上已經完成了整個產品的骨架。接著就是要根據 UX Persona 的輸入，以此目標族群會喜愛的視覺風格...
上篇說明了 GUI 設計裡包含的二個項目：Mockup，以及 Style Guideline。這篇我們接著說明最後一項。 GUI Spec & Asse...
前二篇解釋了 GUI Design 階段的重點，也提到此時花費設計師的工時相當可觀。功欲善其事，必先利其器，挑選一個稱手、效率高的設計軟體就很重要。目前 GUI...
Figma 的介面佈局與一般的設計軟體很類似，上方(1)為工具列，左方(2)可切換 Layer, Page ，右方 (3) 有三個面版，當目前為 Design...
