slider

使用者介面設計講義

User interface design，UI

首頁/使用者介面設計講義

Prototype 互動原型設計

Prototype｜互動原型設計｜解析

開發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用？可透過「使用者測試」這個方法驗證。

我們可以透過 Prototype測試使用者想透過產品完成某項任務時，需經過哪些頁面的流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。

官方範例原型互動檔
Behance參考案例 |
  1. PlantParent | Plant Care App
延伸閱讀｜
  1. 初學者的 Prototype
  2. Prototype 大觀園：Prototype 優劣分析步步來
  3. 為什麼你應該把原型設計(Prototyping)放進你的 UI/UX 設計流程中？
  4. 製作 IPHONEX 的互動原型該注意哪些事項？
  5. 2017 十大最佳 互動設計原型 作品欣賞

Prototype｜智能動畫範例

  1. Youtube 影片：Figma Tutorial: Smart Animate and Drag Triggers｜智能動畫和拖動觸發範例｜以進入動畫與Email刪除信件為例
    2. 如何用 Figma 做 prototype? 介紹 Smart animate
    Figma Prototyping Hack - Exercise File｜範例

  2. 學長姐智能動畫範例檔案

  3. 其他智能動畫範例檔案

    1. Figma範例練習檔｜Micro interactions - Prototypes｜微互動 - 原型｜練習範例
    2. Figma範例練習檔｜Micro interactions - Prototypes｜微互動 - 原型｜練習範例
      3. Card Expansion
      Tab Transition
    3. Figma範例練習檔｜High fiedlity interactive prototypes- Part 1 (Community)｜高保真互動原型｜練習範例
    4. Figma範例練習檔｜9 Smart Animate Examples
    5. Figma範例練習檔｜Figma Smart Animate Tutorial by FerdiCildiz
    6. Figma範例練習檔｜Videos in prototypes playground｜影片播放

Prototype｜Figma 官方案例教學及說明

Figma｜Prototype｜名詞釋義

  1. 起始動作示意。
  2. 觸發動作示意。

Prototype｜基礎教學

範例影音

FigmaPROTOTYPE 互動原型設計｜Figma官方範例操作(109-2)
可參考範例影片，或參照以下製作步驟的逐步說明，可完成基礎的頁面連結與互動。
  1. 以下說明，以 Figma官方範練習檔 為解說案例。
    2. Figma官方範例完成檔作為參照。
  2. 選擇起始頁面，可由右側選單選取（如下圖），或者可自由移動藍底箭頭圖示至想要起始的頁面，作為第一頁。
    3. 選擇起始頁面 選擇起始頁面
  3. 上方的時間顯示，以及下方的固定導覽選單，都需要利用『Constraints』(約束條件)控制固定位置，並勾選『Fix position when scrolling』（滾動時固定位置）
  4. 當卡片式設計，超出版面範圍，製作可左右滑動的效果，可以將可滑動的全部卡片元素，包含於同一個Frame當中，再將Frame的範圍縮小至裝置寬度，即可形成滑動效果。
    5. 勾選『Clip content』可將超出裝置之部分隱藏。
  5. 點選圖片（On Click(點擊)）（On Tap（輕按）） ＞ Open Overlay（開啟重疊覆蓋），連結至滿版大圖(選擇出現於置中)。
    6. 點選圖片上方箭頭（On Click（Tap） ＞ Close Overlay（關閉重疊覆蓋），自動關閉圖片，返回原來頁面。
  6. 可以先將需要重複設定相同連結的部分，設為『create Component』組件，即可設定一次，其他複製即可。
  7. 點選後（On Click（Tap） ＞ Open Overlay），出現於畫面底部（或其他部位）。

Prototype｜微動畫設計範例｜以導覽列微動畫為例

Youtube 影片：Animating Microinteractions with Figma
範例壓縮檔

範例影音

FigmaPROTOTYPE 互動原型設計｜Figma MenuTab導覽列微動畫解析(109-2)
可參考範例影片，或參照以下製作步驟的逐步說明，可完成MenuTab導覽列微動畫製作，請將之應用於期末作業中。
完成效果
製作步驟解析
  1. 開啟『 範例檔案』，並將之『Duplicate』複製為自己的檔案，並開始製作。
  2. 將其中『Star-Default』頁框，複製於上方。
  3. 將複製的頁框，重新命名為『Star-Hover』
  4. 將STAR 邊框顏色(Stroke)修改為『D0D24B』。
  5. 將Star-Bg背景色填色（Fill），改為20%。
  6. 切換至『Prototype』模式，將『Star-Default』連結到『Star-Hover』。
  7. 修改其連結設定改為『While Hovering』（當滑鼠移過時）。
  8. 修改其指向設定改為『Open Overlay』（開啟重疊覆蓋）。
  9. 修改其啟動設定改為『Manual』（手動）。
  10. 『Star-Hover』設定完成。
    11. 測試效果，看看目前滑鼠移過的效果。
  11. 接著，將『Star-Hover』頁框，複製於右方。
  12. 將頁框重新命名為『Star-Down』(按下)。
  13. 將Star填色（Fill），改為100%。
  14. 將Star-Bg背景色的填色（Fill），以吸管工具，吸取列表頁底色之藍色
  15. 將頁框『Star-Down』，複製至右側。
  16. 將頁框重新命名為『Star-Focused』（重點突出）。
  17. 回到頁框『Star-Down』，選取Star，同時按住 option 和 shift，以中心等比例縮小，往內拉至，約寬20px。
  18. 切換至『Prototype』模式，將『Star-Hover』連結到『Star-Down』。
  19. 按下後效果改為『Swap overlay』交換覆蓋，動畫改為『Smart animate』智能動畫。
  20. 將『Star-Down』連結到『Star-Focused』。
  21. 將進入效果改為『After Delay』延遲效果，按下後效果改為『Swap overlay』交換覆蓋，動畫改為『Smart animate』智能動畫。
  22. 將『Star-Focused』連結到『導覽列』，並將動畫效果改為『instant』瞬間。
    23. 測試效果，看看目前整體效果，速度較為緩慢。
  23. 修改『Star-Down』連結到『Star-Focused』間的時間設定皆為『50ms』，使速度更加自然。

Figma檔案輸出 / 輸入檔案之作法

Figma檔案輸出之作法
Figma輸出檔案＞『File』『Save Local Copy』，即可將Figma檔案輸出為.fig格式。
Figma輸入檔案之步驟
  1. 在『Drafts』草稿夾中，選擇右側『New』新增＞『Import』輸入
  2. 選擇解壓縮過後的檔案
  3. 輸入完成
  4. 開啟『Animating Microinteractions with Figma』(以Figma製作微動畫)

Prototype｜影音教學案例

  1. Youtube 影片：Figma Tutorial: Prototyping
  2. Figma Tutorial: Prototyping & Transitions
  3. Figma Tutorial: Device Frames and Scrolling