Axure炫技:如何讓你的原型圖動起來
前不久我進入一家創業型公司,我開始發現,老板不看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 原創發布于人人都是產品經理。未經許可,禁止轉載。
親,請教下,怎么在中繼器添加行里通過函數形式添加圖片
移動端可以很簡單墨刀演示+ios11自帶錄屏……AXURE就比較麻煩了
各有千秋,主要還是看原型需求
還有這種操作?
是哇
sketch配合墨刀也很快
輕量級的可以
現在flinto不是可以直接配合高保真UI設計稿做出這種效果嗎
哥們,那個是sketch體系的
axure畫的圖 sketch里切 轉到flinto也快 最快的話就是直接sketch畫圓形配合flinto
一直不知道怎么弄 碰巧看到這篇 通俗易懂 感謝大神 ??
??