10分鐘用PPT快速做出原型交互演示的方法

10 評論 38217 瀏覽 97 收藏 7 分鐘

在畫出高保真原型后,如何給老板或者客戶演示產品的原型交互?本文作者與大家分享了一種方法。enjoy~

對于產品經理來說,在畫出高保真原型后,如何給老板或者客戶演示產品的原型交互,一直是比較令人頭疼的問題。

AXURE公司雖然發布了用于移動端原型演示的客戶端AxShare,但是經過時間證明,這個產品也有很多問題:

  1. 速度慢:因為服務器在國外,所以常常連不上或者反應遲鈍。試想這個場景,當你拿著手機要給老板或者客戶演示的時候,突然卡頓或者怎么劃拉手機都沒反應的時候,是不是很尷尬。
  2. 尺寸的自適應不好
  3. APP不能把原型一次性緩存到本地,導致頁面切換加載時間長。

另外,對于很多新手產品經理來說,AXURE的交互效果需要通過動態面板、設置參數等一系列復雜的邏輯去實現。有時候動態面板設置好了后,仍然無法實現自己想要的效果,甚至有時候連效果沒出來也不知道問題在哪。其他軟件,像AE也可以實現交互動畫,但是學會AE不亞于重新去好好研究一下AXURE。還有可以在iOS上演示APP原型的方法和工具,但看起來都紛繁復雜,在試過之后其實并不理想。

之所以選擇PPT,首先PPT確實能實現原型演示的交互效果,其次PPT作為我們最常用的工具之一,上手快,簡單易學,效率高,下面給大家簡要介紹下PPT做原型交互演示的步驟。

一、素材準備

如果希望展示的逼真完美,最好是高保真原型界面,包括每一步的界面,一些復雜的按鈕和手機機身的圖片等?;镜男螤?,通過PPT可以直接畫出來。

二、給素材添加動畫

素材準備好后,就可按照演示的先后,給每一步的素材添加動畫。

1、插入形狀和添加動畫


點擊PPT菜單欄的“動畫”標簽,選擇該元素出現的效果

2、隱藏文字或區域

比如做一個輸入框輸入文字的效果,因為輸入框在光標進入前是有提示文字的,因此要隱藏掉這些文字。
首先,插入一個白色的矩形,大小剛好可以蓋住輸入框的文字,并給這個矩形添加動畫進入的效果為“出現”。

其次,在輸入框處輸入一段文字,并添加進入的動畫效果為“出現”,同時對文字出現的效果進行詳細設置。

這里要注意的幾點是:

(1)每個素材或是界面動畫的“開始”應選擇“上一動畫之后”,少數情況是“與上一動畫同時”。

(2)同一個界面需要先出現后消失的元素添加兩次動畫,一次選“進入”的效果,一次選“退出”的效果。

比如上圖的圓形用來做點擊演示,就包括“進入”和“退出”兩個效果

(3)輸入文字打字的效果

首先輸入一行要展示的文字,然后點擊“添加動畫”,“進入”的效果選擇“出現”。在動畫窗格點擊黑色下角圖標,在下拉菜單選擇“效果選項”。在彈出的提示框里的“動畫文本”選擇“按字/詞”,還可以選擇每個字出現的時間。

最后,就可以按F5預覽和調整效果了。

將PPT發送手機查看演示效果,這里我用的是“Polaris Office”打開PPT。

另外,如果覺得PPT還是不方便,還可以將其保存為視頻的格式,在手機或電腦設備中播放視頻演示。

保存PPT的時候選擇“另存為”,在“保存類型”的彈出菜單中選擇mp4或wmv其中一種視頻格式即可。

文中的示例可見網盤

鏈接: https://pan.baidu.com/s/1pKGPnLL 密碼: vryc

 

本文由 @哆啦美夢?原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 推薦Balsamiq 容易上手

    來自上海 回復
  2. 其實開VPN后Axshare 挺快的…

    來自四川 回復
    1. 曾經試過,和沒用一個效果,還換了好幾條線來試

      回復
  3. 用PPT做原型…看著都好累,做靜態的我寧愿用omnigraffle

    來自四川 回復
    1. 不是做原型,是做交互用于演示那部分噢

      回復
  4. 好牛啊 :mrgreen:

    來自廣東 回復
  5. 感覺使用墨刀速度還行,方便手機原型演示,PPT透出來一個二維碼就好。

    來自北京 回復
    1. 墨刀收費吧,如果要演示的話

      來自廣西 回復
    2. 展示可以用,限制圖片格式上傳大小,高保真有壓力,線框圖交互問題不大~

      來自北京 回復
  6. 我們要從“做一顆螺絲釘”的思維,轉變為“做一艘航空母艦”。

    回復