使用者介面設計講義

發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用？可透過「使用者測試」這個方法驗證。我們可以透過 Prototype測試使用者想透過產品完成某項任務時，需經過哪些頁面的流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。

延伸閱讀｜

1. 威秀影城-ReDesign：設計解說｜ Prototype
2. 初學者的 Prototype
3. Prototype 大觀園：Prototype 優劣分析步步來
4. Figma Tutorial: Prototyping

Prototype｜基礎教學

1. 以下說明，以Figma官方範例為解說案例
2. 選擇起始頁面，可由右側選單選取（如下圖），或者可自由移動藍底箭頭圖示至想要起始的頁面，作為第一頁。


---

3. 上方的時間顯示，以及下方的固定導覽選單，都需要利用『Constraints』(約束條件)控制固定位置，並勾選『Fix position when scrolling』（滾動時固定位置）


---

4. 當卡片式設計，超出版面範圍，製作可左右滑動的效果，可以將可滑動的全部卡片元素，包含於同一個Frame當中，再將Frame的範圍縮小至裝置寬度，即可形成滑動效果。
勾選『Clip content』可將超出裝置之部分隱藏。

---

---

5. 點選圖片（On Click（Tap） ＞ Open Overlay），連結至滿版大圖(選擇出現於置中)。
點選圖片上方箭頭（On Click（Tap） ＞ Close Overlay），自動關閉圖片，返回原來頁面。

---

6. 可以先將需要重複設定相同連結的部分，設為『create Component』組件，即可設定一次，其他複製即可。


---

7. 點選後（On Click（Tap） ＞ Open Overlay），出現於畫面底部（或其他部位）。

1. Youtube 影片：Animating Microinteractions with Figma

---

2. Figma Tutorial: Prototyping & Transitions

---

3. Figma Tutorial: Device Frames and Scrolling

1. Youtube 影片：Figma Tutorial: Prototyping

---

2. Figma Tutorial: Prototyping & Transitions

---

3. Figma Tutorial: Device Frames and Scrolling