前不久我進入一家創業型公司，我開始發現，老板不看xxx.Html 原型圖的，老板只看視頻版本的原型圖，而給開發人員的原型圖就是xxx.Html的，所以每次做原型的時候我都會做兩套。一個簡單的視頻原型展示：查看視頻

下面我來介紹一下，如何在Mac上制作視頻原型圖

目錄

一、使用工具介紹

二、制作原型圖步驟&方法

• 第一步，設計草圖
• 第二步，設置事件
• 第三步，視頻錄制
• 第四步，排序整理文件
• 第五步，加入交互、文字說明
• 第六步，附加音樂
• 第七步，導出視頻

三、總結

一、使用工具介紹

Mac系統下使用工具： Axure、 Final cut pro / iMovie、QuickTime Player

Win系統下使用工具：Axure、繪聲繪影x6、xbox

先用Axure做原型并加上事件，然后用QuickTime Player/xbox進行錄屏，錄好后將視頻分類命名整理，最后用?Final cut pro或iMovie進行制作打包即可

二、制作原型圖步驟&方法

2.1 ?第一步，設計草圖

本篇文章主要是講如何讓原型圖動起來，所以不詳細說明原型圖怎么畫哈~

畫一個帶殼的原型圖即可，然后將其他的原型圖按照需要顯示的順序，疊加在帶殼的原型圖上。

2.2 第二步，設置事件

將畫好的原型圖，設置事件

2.3 第三步，視頻錄制

開始錄屏了，為了視頻能夠流暢，錄屏之前將原型先導出來，然后再打開index.html

打開QuickTime Player

選擇新建屏幕錄制

2.4 第四步，排序整理文件

用數字排序后，直接導入視頻編輯軟件內方便合成視頻做排序

2.5 第五步，加入交互、文字說明

推薦用

打開后，一個初始畫面

點擊此按鈕將視頻導入

然后將視頻拖入視頻編輯區域，在控件區域點擊T圖標，可選擇不同的文字樣式，選擇一款拖入“視頻編輯區域即可”

文字編輯完后，是這個樣子就對了

之后可以加一些轉場，切換頁面用(最常見的漸變)

做到這個時候就差不多了

2.6 第六步，附加音樂

如果覺得原型圖視頻太枯燥可以加一點音樂，實在不知道加什么音樂可以去…（你的作品給誰看呢？客戶？老板？）那么你就去他們的朋友圈逛逛，有沒有分享的音樂，然后下載放入即可~(加音樂的方式與加文字的方式是一樣的)

2.7 第七步，導出視頻

點擊導出按鈕

導出視頻并設置參數(一般選擇720p就可以了)

恭喜你大功告成，發了郵件后就等著漲工資吧

三、總結

這個技能也不是產品經理必備的，不過我倒感覺挺加分的，比如一些外包公司，需要給客戶提供一些方案，這個時候給一個能動的原型不是更有勝算嗎？也方便客戶理解，對于外行人來說，畢竟看一個原型圖是比較費腦的，如果再配上設計師的高保真的UI做這個的話，效果更贊，比如查看視頻

分享作品

• PRD文檔?干貨分享｜「病利貼」產品需求文檔
  
• PRD文檔?分享PRD：「我是紅人」產品需求文檔
• 原型技巧?Axure炫技：如何讓你的原型圖動起來
• 新手運營?「我是紅人」的初步運營計劃
• 產品技能?分分鐘教你使用手機預覽原型圖（MAC版）
• 原型技巧?如何優雅地做一個抽獎轉盤
• PRD文檔?分享 | JO+管家智能客服PRD

作者：Bass

本文由 @Bass 原創發布于人人都是產品經理。未經許可，禁止轉載。