前不久我進(jìn)入一家創(chuàng)業(yè)型公司，我開始發(fā)現(xiàn)，老板不看xxx.Html 原型圖的，老板只看視頻版本的原型圖，而給開發(fā)人員的原型圖就是xxx.Html的，所以每次做原型的時(shí)候我都會(huì)做兩套。一個(gè)簡(jiǎn)單的視頻原型展示：查看視頻

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

目錄

一、使用工具介紹

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

• 第一步，設(shè)計(jì)草圖
• 第二步，設(shè)置事件
• 第三步，視頻錄制
• 第四步，排序整理文件
• 第五步，加入交互、文字說(shuō)明
• 第六步，附加音樂(lè)
• 第七步，導(dǎo)出視頻

三、總結(jié)

一、使用工具介紹

Mac系統(tǒng)下使用工具： Axure、 Final cut pro / iMovie、QuickTime Player

Win系統(tǒng)下使用工具：Axure、繪聲繪影x6、xbox

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

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

2.1 ?第一步，設(shè)計(jì)草圖

本篇文章主要是講如何讓原型圖動(dòng)起來(lái)，所以不詳細(xì)說(shuō)明原型圖怎么畫哈~

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

2.2 第二步，設(shè)置事件

將畫好的原型圖，設(shè)置事件

2.3 第三步，視頻錄制

開始錄屏了，為了視頻能夠流暢，錄屏之前將原型先導(dǎo)出來(lái)，然后再打開index.html

打開QuickTime Player

選擇新建屏幕錄制

2.4 第四步，排序整理文件

用數(shù)字排序后，直接導(dǎo)入視頻編輯軟件內(nèi)方便合成視頻做排序

2.5 第五步，加入交互、文字說(shuō)明

推薦用

打開后，一個(gè)初始畫面

點(diǎn)擊此按鈕將視頻導(dǎo)入

然后將視頻拖入視頻編輯區(qū)域，在控件區(qū)域點(diǎn)擊T圖標(biāo)，可選擇不同的文字樣式，選擇一款拖入“視頻編輯區(qū)域即可”

文字編輯完后，是這個(gè)樣子就對(duì)了

之后可以加一些轉(zhuǎn)場(chǎng)，切換頁(yè)面用(最常見的漸變)

做到這個(gè)時(shí)候就差不多了

2.6 第六步，附加音樂(lè)

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

2.7 第七步，導(dǎo)出視頻

點(diǎn)擊導(dǎo)出按鈕

導(dǎo)出視頻并設(shè)置參數(shù)(一般選擇720p就可以了)

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

三、總結(jié)

這個(gè)技能也不是產(chǎn)品經(jīng)理必備的，不過(guò)我倒感覺(jué)挺加分的，比如一些外包公司，需要給客戶提供一些方案，這個(gè)時(shí)候給一個(gè)能動(dòng)的原型不是更有勝算嗎？也方便客戶理解，對(duì)于外行人來(lái)說(shuō)，畢竟看一個(gè)原型圖是比較費(fèi)腦的，如果再配上設(shè)計(jì)師的高保真的UI做這個(gè)的話，效果更贊，比如查看視頻

分享作品

• PRD文檔?干貨分享｜「病利貼」產(chǎn)品需求文檔
  
• PRD文檔?分享PRD：「我是紅人」產(chǎn)品需求文檔
• 原型技巧?Axure炫技：如何讓你的原型圖動(dòng)起來(lái)
• 新手運(yùn)營(yíng)?「我是紅人」的初步運(yùn)營(yíng)計(jì)劃
• 產(chǎn)品技能?分分鐘教你使用手機(jī)預(yù)覽原型圖（MAC版）
• 原型技巧?如何優(yōu)雅地做一個(gè)抽獎(jiǎng)轉(zhuǎn)盤
• PRD文檔?分享 | JO+管家智能客服PRD

作者：Bass

本文由 @Bass 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。