Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學)

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day10 ，今天來跟大家談談 Prototype 原型互動 / 產品模擬，Prototype是模擬產品原型，用 Mockup 設計稿去延伸設定而成，接下來下面會跟大家談談他的優點，讓我們進入今天主題 !

Prototype 是什麼?

Prototype 是產品原型，會以高擬真方式去模擬產品的原型，我們在設計階段有稍微提到，Wireframe
是畫大致版面架構跟內容，Mockup 則是 Wireframe 延伸我們會將他微調成品，這個就是最後的正式開發設計稿，Prototype 則是將視覺稿動態起來，或是你可以想像成 3D 化。

抱歉了錢錢 但我真的需要那個酷東西

Prototype 使用時機

• 設計稿最終畫面確認 (確認是否字體過大、排版是否舒適)
• 客戶產品原型確認
• 網站動態連結

在正式開發上 Prototype 是必須的，可以幫我避免致命的錯誤，省下時間，我們可以透過 Prototype 來做最後的設計稿確認，像是我設定字體 120 px 但是我不確定在滿版情況下他呈現效果如何，這時候就可以用 Prototype 確認，那也會拿來使用在正式專案開發上提供給客戶確認及內部協作討論。

Su 專題經驗談 (Prototype)
我自己在使用上Prototype 最常使用的是拿來確認版面跟畫面呈現 (字體是否過大、圖片排版、畫面舒適度)及網站動態連結，這次在開發 Side Project 時因為考慮時間關係，所以這次沒有 Prototype比較可惜 ，但是我自己很喜歡 Prototype。

他在原型呈現效果讓人驚豔，也可以讓個人專題呈現更完整，如果有機會的話下次也想把 Prototype 做起來。

這邊可以看到在，在規劃階段我們也會設計網站地圖，當設計稿在設計就可以使用 Prototype 把它連結起來，讓他模擬產品原型，

也可以按下預覽，這時候就會模擬網站實際運作呈現，可以看到我上面設定了連結4個，那我在 Prototype 就可以點擊前往，在這邊也可以在右上分享你的 Prototype

Figma 製作 Prototype

如何製作 Figma Prototype
1.新增頁面

2.點選右邊樣式面板 Prototype

3.選取要設定的物件

4.拖拉至指定Frame

5. 完成
   

是不是不會很難呢 ! 試著做看看吧 !

Figma Prototype 預覽

製作完成後 ，點擊右上播放按鈕，即可預覽