使用 Keynote 做高保真動效交互設計原型，有哪些教程或學習資料？

12-29

如題，
最近見到了有用Keynote做的Google新發布的material design短視頻：https://vimeo.com/100377108
還有用Keynote做的Facebook paper：Move Over Origami: How To Prototype Facebook App Using Apple Keynote
覺得Keynote用來做交互設計比origami要簡單很多，動效也可以做的不錯，想學習一下這方面的技能，但是找到的全是比較舊的教程，除了Keynote，還有更好的更簡單的用來做交互的原型工具么？
-------------------------------------------------------------------------------------------------------------
補充：
最近發現這個問題突然得到了非常多的關注和回答，感謝大家分享自己的經驗！
我個人是個UI設計師兼職產品經理，用sketch+keynote做高保真的交互原型，但不是大家說的那種演示用keynote，我直接就把畫布做成1136X640的尺寸，最後做成一個手機屏幕大小的keynote，然後同步到IOS端的keynote，打開全屏播放就儼然一個真的軟體運行在手機上了。
看好keynote的一個很大的原因是因為keynote的動畫，對移動端app的原型製作有很大的幫助，之前也嘗試過origami，跟著教程走了一會就放棄了，相比之下為了有更真實的動效，keynote已經算是簡單的了。不過畢竟keynote沒有針對這個細分的使用目的做優化，所以諸如大家所說的圖層選擇的功能就沒有。
還有朋友說去看許岑的教程，我本人在許岑發售當天第一時間就買了教程，也很快就看完了，非常受啟發，不過教程本身還是注重keynote的演講目的，並不是作為原型工具的使用目的。
-------------------------------------------------------------------------------------------------------------
今天發現@許岑老師的教程里更新了Keynote 軟體應用於 App 原型交互設計，裡面提到了本條問題，同時還有一個關於蘋果原型製作團隊的回答：為什麼在國外會有人用 Keynote 做動畫和交互？這能為交互設計提供哪些幫助？把地址貼出來，方便大家查看。

我原來嘗試找過，但是沒有找到。不過因為Keynote的教程有很多，裡面的所有功能都可以學習到，結合自己的設計稿，可以嘗試自己製作下。不用教程其實也是可以的。

這個是我做的 Keynote 製作的產品交互原型，視頻中有幾處問題，當時因為時間很趕，也就沒再調試。這個視頻完全依靠我本來對keynote的了解，根據自己設計的動態效果製作出來的。

其實想製作這樣程度的原型很簡單，只使用了【添加動畫】這個功能（新版 keynote 右上角第二個），具體包含：

出現
動作
消失

（Ps：其實還有【神奇移動】，在我做的這個原型中沒有用到，但從其他人做的視頻以及自己後續的嘗試來看，【神器移動】是做原型一個很好用的功能，只是當時對這個功能沒什麼概念，所以沒有使用）

下面說說我用 keynote 製作原型時總結的一些要點，不算詳細，算是拋磚引玉吧。

【構件出現】設置這個屬性後，控制項一開始會變成隱藏狀態。這裡我一般選擇「出現」「漸隱漸現」，然後設置時間參數，自己可以根據效果調試。

【動作】主要用於展示用戶操作的反饋。常用的有「移動」「翻轉」「放大」，都是軟體常見的反饋效果。這些動作都有各自的參數，比如坐標，時間，抹入/抹出等。

【構件消失】同樣屬於用戶操作的反饋，新控制項的出現以及原有控制項的動作，可能會伴有一部分控制項的消失。這裡立刻消失應該是最常見的，當然你也可以根據自己的需要選擇不同的效果。

【構件順序】這部分內容是用 keynote 做原型的重中之重。可以看下我的截圖

在構件順序的面板里，我們可以自由設置【出現】【動作】【消失】的出現時間。想要實現複雜的效果，往往就意味著，當有一個用戶「點擊」的輸入後，我們需要安排後來n秒內的界面變化。其中可能包含了原有控制項的變化，新控制項的出現，還需要設置所有事件的觸發事件，持續時間，後續觸發事件。

總的來說，用 keynote 做原型主要包含了以下環節

添加界面元素，以及將一部分元素【打包成組】
為元素（組）添加【出現】【動作】【消失】事件
利用【構件順序】功能，設置不同事件之間的邏輯

（Ps：用「【】」框住的都是 keynote 裡面的功能）

下面說一些自己總結的Tips

控制項元素的分組在開始前最好想清楚。因為添加了「事件」以及「構建順序」後，如果取消分組，這些原來的設置都需要重新來過。當事件非常多的時候，很麻煩。
有「模塊思維」。平時常見的程序反饋，是由「原來控制項的動作」和「新控制項的動作」組成，而後者很可能又可以分為不同的部分，比如新控制項的「出現」「動作（移動之類）」，以及跟原有控制項之間的互動。「模塊思維」幫助我們在【構件順序】面板中，面對著可能多達幾百個事件時，不會太混亂。
利用PPT注釋添加「用戶輸入」。原型主要是為了演示，所以我們一般會在演示時加上自己描述，比如「這時用戶會點擊一下XXX」，把用戶輸入寫在PPT的注釋區域，可能幫助我們梳理這個頁面所表現的內容。
在開始做原型之前，一定要對所有能夠添加的效果有個了解，根據自己的需要進行調用。
還有就是找一個大一點的屏幕，原因嘛設計師都懂的。

至於其他的原型工具，常見的還有

Axure 特點是，可以在瀏覽器中預覽，保真度高的時候可以直接給用戶操作，因為原型會根據用戶操作滑鼠的輸入進行反饋。很強大。
keynote 做純演示時，憑藉本身豐富的動態效果，可以做出讓人驚艷的小視頻。具體可以參看問題描述中的鏈接。但問題是，原型展示時像是放電影，無法讓用戶模擬真實的可以隨意輸入的場景。
Balsamiq mockups 手繪風格，適合設計前期。

其實工具真的很多，前端加瀏覽器也可以。要說的是，不同的工具有不同的優勢，根據自己的時間，經驗，目的（是給老闆看，還是給用戶測試）等因素選擇。補充一點：設計新手都喜歡追求高大上的工具，以為學會的工具就立刻高端起來。其實工具都是浮雲，設計過程才是最重要的，工具只是幫你把過程的結果展示出來，切忌捨本逐末。

以上內容算不上詳細教程，算是自己的一個經驗總結吧。
感謝收看。

以我們動效設計師的視角來說，大部分Keynote做的原型，很Low,一點也不Hi。如果要用Keynote做原型，那麼目的是為了迅速給予開發者提供簡單效果的工具。高保真不但要求視覺細膩、交互接近實際情況、動畫感也要接近實際應用。這些Keynote是不具備的。

當然，凡事無絕對，開發和設計師基情無限，一切盡在不言中/開發者實現前端動效的能力非常屌/產品、交互需要快速展示理念的情況下，keynote依然是非常非常不錯的工具，原因有以下：
1.用mac的人基本能迅速上手
2.支持手機預覽
3.製作速度快
4.模板多
5.有部分keynote超級高手做出來的東西確實也很棒

但是，一般技能水平的人（假設他/她 QC/Form/FramerJS水平和Keynote水平持平），以同樣的時間製作Keynote「高保真原型」，所能達到的高保真程度，是比不了其他專業工具的。

雖然說工具不重要，工具僅僅是工具，但是優秀的人會根據場景選擇最優工具。

更新下：個人覺得Keynote做原型最大的優勢是快，可以低成本、低門檻地快速展示個別頁面的交互效果，不建議花太多心思把這個工具用到高保真的程度，也不建議浪費時間用Keynote實現太複雜的動畫轉場。
---
推薦gibbon上的Prototyping with Keynote by Rodny Lobos，基本涵蓋用Keynote做原型的各種學習資源了，也有現成的wireframe toolkit for Keynote 可以快速prototyping。

Animating your UI designs in Keynote in 7 simple steps
可以看看invision做的一期些關於keynote製作的原型視頻教程。
軟體使用挺簡單的，非常傻瓜，比AE要簡單很多。
個人感覺這東西不大需要什麼學習資料，只要有想法就可以了。
不過做太精確的動效演示還是不大能勝任～

打一廣告：

羅方可_ App 原型製作視頻教程（Keynote 版）_ 預告—在線播放—優酷網，視頻高清在線觀看視頻

Keynote學習資料，可以參考一下這個實例資料的：Mac 版 Keynote 實例教程視頻。用在個人興趣、培訓、提案甚至發布會還是不錯的。

國外有幾個比較大的培訓廠商，我最喜歡的就是Lynda,Digital Tutors.您搜搜看。

看到這個問題，就把寫的一個公眾號的文章po過來

為什麼選擇keynote？

1. Flash、AE學習難度較大，製作周期較長，不易上手

2. keynote將每個動效的前、中、後動作拆分，日常可見的交互動作大都可以實現

3. 可以同步到iPhone、ipad設備上查看效果，通過添加超鏈接，輕鬆實現點按跳轉操作，效果逼真（只要不亂點）

4. 可以直接生成mov視頻格式導出，方便到沒朋友

5. 畫布尺寸可以自定義

關於怎麼用keynote做原型我分了三次講完

第一期：

keynote動畫功能怎麼用

製作動效前應如何思考、如何添加單一或多個動作、如何使用轉場效果

第二期：

keynote動效實例

如何設置畫布尺寸、如何設置熱區實現手機端的點按操作、案例實踐

第三期：

綜合運用製作可操作App原型

可操作原型製作流程、如何導出

##第一期##

1、製作動效前不得不說的秘密

正式開講之前，我們先來了解一下keynote動效功能面板

keynote操作頁面

keynote動畫效果的基本原理就是將每一個元素的動態分解為「構件出現」、「動作」、「構件消失」三個環節（上圖紅框區域）。

現在你心裡要對兩件事情非常清楚：#敲黑板劃重點#

A. 大致想像出你想要的動態效果是怎麼樣的，然後將每一個動作拆解為元素如何出現、出現後有什麼動作、如何消失三個步驟（對應keynote添加動作的邏輯）。

B. 腦海中對這一組動效的前後關係有一個清晰的時間軸，最燒腦的環節就是就是不斷調整「構件順序」、「起始時間」、「延遲速度」。

把握這兩點，依次按照元素出現的先後順序，為元素添加動畫效果，就是製作成功的關鍵！

2、如何添加單一或多個動作

舉幾個小例子：

eg.1執行一個動作

需求：方塊從A點出現後移動到B點消失

方法：繪製方形——點擊「構件出現」選擇一種動效——點擊「動作」選擇移到——調整移動路徑——點擊「構件消失」選擇一種消失效果——調整構件順序

添加「移到」動作

eg.2添加動作

需求：方塊從A點彈出後弧形路徑移動到B點彈跳4下

方法：繪製方形——點擊「構件出現」選擇「彈入彈出」——點擊「動作」選擇「移到」——調整移動路徑——點擊添加動效（紅色菱形加號）選擇「彈跳」——調整構件順序

添加第二個動作

eg.3兩個動作同時進行

需求：方塊從A點邊旋轉邊移動到B點

方法：繪製方形——點擊「動作」選擇「移到」——點擊添加動效（紅色菱形加號）選擇「旋轉」——調節參數——調整構件順序「與構件1一起」

調整構件順序

通過三個小例子基本就能跟大家說清楚keynote動畫製作的基本原理了。其實原理非常簡單，大家能添加的動作都是一樣的，是否能製作出細膩的動態效果主要在於耐心的反覆調試各種動作的細節參數（持續時間、角度、構件順序…)，做動效是個體力話啊～

3、Amazing的轉場效果

keynote頁面之間的過渡效果也非常神奇，合理的選擇一款動畫效果，就能讓你的App原型更佳細膩逼真。本期青檸就著重介紹一個「神奇移動」效果，就是把第一張中的對象動態移動到下一張幻燈片中，超炫酷！

方法：選擇第一張幻燈片——點擊「動畫效果」——點擊「添加效果」——選擇」瞬間移動「

添加「神奇移動」效果

「神奇移動」效果有哪些實際的應用呢？

應用1:位移

應用2:變形

應用3:變色

是不是看似高端實則很簡單呀，keynote的轉場效果和動態效果還有很多，大家多多嘗試，通過調節參數細節，製作完美的可操作原型。

可以關注我自己的公眾號：Hello_qingning

第一次回答知乎問題，怕怕~~感謝指正么么

推薦關注簡書賬號DMo，不定期更新Keynote動畫教程，這是最新一期教程：
Keynote動畫沒你想的那麼難＃6——畫線
也可以關注微信公眾號：webdesign_edu

建議pixate。google把它收購以後，國外用的人更多了。差不多40分鐘可以做ui prototype，上手也容易，YouTube上有教學視頻

秒拍視頻
之前嘗試用PPT製作的交互動效演示
keynote本質上和PPT沒有太大區別在製作時間上可能要沒有PPT那麼繁瑣

但就實際情況來講
用keynote製作交互動效在實際利用場景中沒有多大價值
製作一個交互動效演示需要花費的時間以及繁瑣成都和能夠達到的結果不太成比例
不知道樓主是出於什麼原因有這樣的需求
如果是交互設計師，AE往往要比keynote來的更加逼近於實際效果。
如果是產品經理，在花費時間製作交互示例上相比與交互直接勾通還要費事。

不過，在製作過程中不可否認的會對產品交互有更深的概念，起碼對於產品界面元素的概念以及層的概念會有更清晰的認識。
另外，如果能夠利用PPT或者keynote製作交互動效。只要再懂一點審美，你的幻燈片技巧一定也不差了。

強烈不建議做高保真原型，因為實在太耗時，頁面跳轉上下邏輯關係用axure實現草圖即可，PS做靜態的高保真圖，UI控制項動畫效果用after effects，做產品最關鍵的是和開發人員溝通，即使是在Google內部團隊也不是完全實現高保真的原型，而是強調溝通的重要性。這是Google IO 2014 design 團隊解答觀眾疑惑的時候說的。

淘寶許岑。