為什麼在國外會有人用 Keynote 做動畫和交互？這能為交互設計提供哪些幫助？

【李志超的回答(110票)】:

蘋果就自己有個專門製作原型的團隊，他們流竄在各個項目組之間包攬所有的原型製作工作，包括動畫和交互。他們的主要工具就是Keynote。

這來自於WWDC 2014 Session Videos里有個視頻Prototyping: Fake It Till You Make It ，就是他們指導如何用Keynote做出逼真的交互原型的，這段我也是剛看到，其實一直想補到之前的答案里。下面結合這個視頻的截圖可以介紹下他們是怎麼充分發揮Keynote的特點的。

綜述一下先：

1. 靜態圖
1. 先用畫好的線框圖或者直接在keynote里用色塊布局
2. 填充圖片，可調整陰影等基本效果
3. 導出圖片放進手機里
4. 根據用戶反饋調整
2. 動畫效果
1. 利用Keynote自帶的物件動畫
2. 活用Keynote最棒的「神奇移動」轉場效果
3. 手機裝上keynote app打開演示文檔
4. 根據反饋調整效果
3. 交互事件
1. 調整圖片尺寸導入xcode
2. 僅用針對圖片的簡單代碼
3. 僅用簡單的交互手勢 代碼

首先：製作靜態圖。

1. 先用畫好的線框圖或者直接在keynote里用色塊布局，keynote提供了多種智能的對齊，布局，格式等等設計方式，整個過程會非常的輕鬆。比如自動標尺吸附等距等等，比絕大多數原型製作軟體都簡單人性化。

2. 對照一些線框圖可以繼續鋪色塊和布局，這個過程中你會發現這個對齊和吸附的過程是多麼的神奇。2. 對照一些線框圖可以繼續鋪色塊和布局，這個過程中你會發現這個對齊和吸附的過程是多麼的神奇。

3. 導入圖片，Keynote有很多種方式可以調整素材樣式，包框，陰影，透明圖，實時遮罩等等。是的，你可以用PS慢慢玩，也可以用keynote一鍵完成。3. 導入圖片，Keynote有很多種方式可以調整素材樣式，包框，陰影，透明圖，實時遮罩等等。是的，你可以用PS慢慢玩，也可以用keynote一鍵完成。

4. 很多人用原型軟體是看中那些控制項，其實大多數控制項還不如自己在Keynote里製作快速。而且Keynote自帶了很多標誌和Icon，完全不用到處去找了。比如這個例子里的打分用五星，改個黃色就可以了。4. 很多人用原型軟體是看中那些控制項，其實大多數控制項還不如自己在Keynote里製作快速。而且Keynote自帶了很多標誌和Icon，完全不用到處去找了。比如這個例子里的打分用五星，改個黃色就可以了。

5. 依次類推，可以很快做出很多頁面，導出圖片格式，在手機中查看5. 依次類推，可以很快做出很多頁面，導出圖片格式，在手機中查看

第二階段，假互動，加入動畫效果。具體關於為何這麼做，每個階段完後的反饋過程，目標等等原理的東西請大家看視頻或者PDF吧，這裡主要說下過程和他們是怎麼充分發揮Keynote在原型製作中的特點的。

比如這個假互動的階段，如果你不用Xcode的話，這個就是交互原型的最後階段了。基本原理就是活用圖片，活用物件動畫，活用轉場動畫，足以做出以假亂真的原型，只要你的測試用戶不要瞎點......

關於Keynote自帶的動畫有非常多種和微調效果，起初我不是很理解，因為很多花哨的效果很難用到幻燈片里，直到開始做原型發現，其實很多動畫經過調整都是很好的交互效果，包括現在看到的一些令人驚艷的反彈，延遲等逼真的細節動作，Keynote早就可以微調模擬了。

據說鎚子手機和蘋果的很多交互效果，都是先用Keynote做出來再給工程師寫出來的。（是文末附的許岑視頻中說的，好像是，記不清了，無責任據說預警）

1. 製作動畫有很多方式，可以根據你的職業，習慣選擇不同的方法。

也有很多很巧妙的方式，其中最簡單，最快的就是一定要靈活運用圖片。靈活到什麼程度，我舉個視頻裡面全場爆笑的例子。動畫是這樣的：敲擊鍵盤，字元一個個的蹦著出現在屏幕上。裡面說，我可以只用一行或者乾脆不用代碼就做出來。這個用Keynote就可以實現，各位可以想想。也有很多很巧妙的方式，其中最簡單，最快的就是一定要靈活運用圖片。靈活到什麼程度，我舉個視頻裡面全場爆笑的例子。動畫是這樣的：敲擊鍵盤，字元一個個的蹦著出現在屏幕上。裡面說，我可以只用一行或者乾脆不用代碼就做出來。這個用Keynote就可以實現，各位可以想想。

他們是這樣做的：他們是這樣做的：

每個字母做了個圖片......

還可以通過調整圖片的排序大小製作不同的效果。

2. 特別提到一個Keynote獨有的「神奇移動」效果。可以把前一頁中的物件移動或放大到下一頁中。效果非常出眾。

好了，其實至此，絕大多數的動畫效果都可以做出來了。如果不滿足於此，學點簡單的語法，在Xcode里只用針對圖片和交互相關的代碼就可以做出更加逼真的原型了。好了，其實至此，絕大多數的動畫效果都可以做出來了。如果不滿足於此，學點簡單的語法，在Xcode里只用針對圖片和交互相關的代碼就可以做出更加逼真的原型了。

然後比較一下如果用代碼實現和用Keynote的差別然後比較一下如果用代碼實現和用Keynote的差別

回顧一下三個階段：回顧一下三個階段：

這裡就是蘋果官方的原型是如何以Keynote為主要工具製作一個足以亂真的App。這裡就是蘋果官方的原型是如何以Keynote為主要工具製作一個足以亂真的App。

我把視頻和文檔都傳到了百度盤裡Keynote_免費高速下載

另外關於Keynote的使用方法，推薦大家在 http://weibo.com/xucen 里跟著學習，足以從零開始做完原型，還可以做個漂亮的幻燈片忽悠投資去，一舉兩得！

【林韜的回答(9票)】:

第一，因為Keynote免費。

第二，Keynote內建常用的動畫效果而且品質不錯。

第三，Keynote很容易學。

第四，Keynote可以在iPhone和iPad上面跑。所以如果你用的是Mac，你基本就白撿了一個做快速原型的工具。如果你想做一個簡單的初期概念原型（Proof Of Concept），用Keynote真的是一個簡單快速便宜的工具。我覺得它的價值在於用很低的成本讓設計師快速驗證一些早期的想法。

【MaggieKuo的回答(4票)】:

Keynote 的超便捷以及容易學的這些特點，造就了設計團隊裡的」人人都能做UI demo」, 「人人都能探索 UI 的動態效果」。

最怕設計師早期在跟團隊溝通設計想法的時候，就拿出一個靜態的東西，然後要大家想像這個按鈕按下去會變色還會放大，那個頁面換頁是從左邊翻滾進來，諸如此類的。這種做法的問題在於，這無法確保大家腦海裡的畫面是同步的，我也就不提團隊想法不同步的後果了。大多時候並不是這些設計師不懂得做 demo，而是要用After Effect或者其他專業動畫軟體來做出效果圖，實在費時又耗精神。

Keynote基本上不需要設計師級別的專業技巧，只要你會做報告，曾經用過Keynote或者 PowerPoint, 都能在幾個小時內上手。這對交互設計團隊來說的幫助就是，讓內部的設計溝通變得更有快，更精準，更有效率。

【知乎用戶的回答(4票)】:

我現在所在的團隊也有成員使用 Keynote 製作動畫，有交互動畫也有產品宣傳動畫。我自己還用 Powerpoint 製作過視覺完成度很高的動畫。

幾個原因：

1. （ 所謂）扁平化設計的視覺風格 UI 細節並不複雜，可以較簡單的用 Keynote 實現。

2. Keynote 有很多簡單好用的 transition 可以使用，Magic Move 更是神器，整體製作過程很快。

3. 為展現交互的動畫通常都不複雜。

4. Keynote 能直接輸出 mov 等常用視屏格式，易於在下一步的編輯（例如 iMovie） 中使用。

5. 相對之下，Flash 或 AE 雖然強大，但速度會比較慢，對於新手難度也比較大。

提供幫助。

0. 有些交互問題可以通過動畫來解決，這裡暫不展開。可以參考 iOS 7 及扁平化設計給交互設計帶來哪些啟發？

1. 對任務流的說明: 經常遇到合作方對 keyscreen 之間的轉換關係，甚至產品整體的工作流，沒有直觀認識（主要是因為沒有深入到項目中啊喂），動畫可以很生動的向對方說明這些問題。

2. 對細節的說明：有時候 keyscreen 之間的中間態或特殊態用大量的圖或絮叨的文字很難描述具體，而一個動畫經常能無聲地傳遞這些信息。

3. Engaging：會動的、完成度高的、Alive 的設計 demo 是很有吸引力的。非常有助於提升合作方對 design proposal 的認同感。

4. 提高對實現的要求：上下游此時對最終實現的期許已經提高了，具體、詳盡、直觀的動畫也限制了設計稿與實現之間的灰色地帶。

【李江華的回答(3票)】:

作為一個工具控，我曾經用keynote做過原型，如果不是keynote不支持各種動作事件（懸停、雙擊、滑動、長按...各種），我認為keynote幾乎可以把市面上各種交互原型軟體爆出翔來。

1.用keynote畫各種原型，低高保真，keynote簡直是毫無壓力，這個可以說不會輸給市面上任何一款交互原型軟體

2.用keynote做各種動畫效果，秒殺市面上的各種號稱交互原型軟體

【nfsking的回答(2票)】:

我在上上家公司打工的時候，公司老總還用PPT做呢，有什麼好奇怪的。。。。。

雖然這類工具在某些場合下確實不那麼順手，但現在很多人做原型也好，做交互也好，偏離了這件事的本質：能讓做後續工作的同事看懂並嚴格執行就好，何必非要為了用某個工具而用某個工具？

【知乎用戶的回答(1票)】:

謝邀。

快速原型是在軟體開發中，交互設計階段比較有用的方法。目的在於：

1、交互設計師設計平面稿後，其實還有很多問題尚不明確，這時可簡單交互的原型就可以幫助設計師、產品經理更早的評估自己的設計是否可行；更重要的是，類似Keynote的原型可以直接交由用研團隊（或由設計師本人）進行可用性測試，獲得一手的反饋，這個反饋比紙面原型來的更加直接，包括簡單視覺、顏色、動畫的展示都可以豐富的集成在這類原型中；

2、對於軟體工程師，較豐富的交互原型可以更好的理解設計師的意圖，從而更有效率的進行開發，或評估設計；

3、對於測試團隊，也可以藉由此來測試軟體界面的實現程度，幫助把控質量；

4、對於其他關係職業，可交互的原型能夠幫助產品設計在項目組內部更好被理解，從而減少缺乏溝通帶來的開發風險點；

5、也非常重要的一點，是由於這類由Keynote、PPT或asure生產的原型，製作簡單，好玩容易不傷手，能非常好的貼合敏捷開發、快速迭代的產品周期。通常設計師本人稍加練習，1~2個小時就能很快的做出某些功能或交互的原型。至於哪個工具我覺得並不重要，看個人習慣和喜好了。

總之，在要求快速迭代的大部分移動互聯網產品中，一些改良、精簡過的設計和測試方法，比起完整的UCD流程更加實用和好用。各類方法、技術，其中關鍵是快、好用、簡單，幫助設計師不用花大精力在「製作上原型上」，而是「思考解決方法中」，這才應是設計的本質。思考才為設計，文檔只是承載，切勿本末倒置。

【曉生的回答(0票)】:

易用，做完直接在PPT當中展示方案，不用多個工具之間切換。

【邢風的回答(0票)】:

瀉藥

沒用過這個，交互設計中，用什麼工具都可以，只要能完整的表達自己的想法。給兄弟團隊解釋清楚，就可以了。此外，跟團隊的習慣有關係吧，阿里這邊，還是用AXURE的多，工具不重要的，想法才是優先的，哪怕你用Word呢

【毛斌的回答(0票)】:

好的工具可以事半功倍，提高效率，也有個人習慣在裡面，一前同事專業交互，原型基本都是用ppt畫的，效果也是非常震撼。

各種工具好比十八班武藝，挑一個自己使用最順手的即可，核心還是對用戶使用場景的理解和需求的揣摩。

各位PMer切勿本末倒置。

【威廉孫的回答(0票)】:

其實我也用Keynote做過類似於動畫的東西，當然我做的原因是這樣的：

1. 數字傳播技術老師要我們交一個動畫（flash的）作期末作業打分用。

2. 我幾乎沒聽flash課而且我對所有技術類課程都不感興趣。

3. 我平常經常要用Keynote做pre，那時候iCloud還沒有出iWork的那幾個件，所以我知道可以把Keynote文件導出成.mov格式然後用windows上面的QT放出來，效果和Keynote差不多。

4. 我當時下載的converter可以把所有格式的視頻轉換成flash文件。

根據1，2，3和4，我的做法就是：

1. 根據老師給出的主題，做出一個Keynote文件。

2. 排練好這個Keynote，根據我自己看著舒服的順序調好時間軸還有動畫效果等等。

3. 導出為.mov格式。此時這個mov文件會自動播放，因為你已經排練好了。

4. 導出為flash動畫。

這樣做的直接結果是：

1. 我沒聽flash課也得了分（雖然這樣投機取巧很不好）。

2. 由於keynote自帶的動畫效果比較絢麗，做出來的效果遠遠超出一學期2學分的flash課能夠達到的水準，從而得到了老師積極評價。

這樣做的間接後果是：

這門課拿個非常不錯的分數。

此外Keynote的很多功能在你想偷懶的時候都很好用。比如懶得摳圖的話就把圖片粘貼到Keynote文稿當中，點Alpha，它就自動幫你把圖摳好了，截屏出來就可以用，粘貼到你想要的背景當中。

什麼？你說背景顏色不符？……Mac OS X上面自帶的測色筆，你測一下你要用的那個背景顏色（僅限於單色），然後設置背景RGB值，就可以了呀XD

僅供參考。

【cellier的回答(0票)】:

瀉藥。

————

最近一直在用Keynote做原型，最深的體會是，Keynote真的做到了簡『單』優雅，稍微有點審美的人都能做出『大片級』的效果。

現在動效越來越流行，但是一大部分的應用是因為動效而動效，而又因為自身沒把動效真正的內涵搞清楚，所以做出來的動效不符合『情感運動曲線』，這也是我當前的團隊所缺的，而Keynote裡面提供的動畫，多是有『擬現實運動』性的，非常有慣性感，讓用戶沒有突兀感。

當然，我最愛用keynote的一點是，當你站在投影儀前，使用remote，（我用的是Remoter app），在眾人面前，使用手勢，然後流利操控著幻燈片，腦海中浮現著...jobs WWDC上那惟妙的... ...

咳咳，by the way，導出HTML的功能真不錯。

【金璐的回答(0票)】:

1. 交互設計師交付產物一般是靜態設計文檔，但有時一個好的Idea很難通過靜態圖表達或有特殊動效呈現時，設計師為了讓項目成員能夠最大化知曉設計思路及創意點，會通過動態形式傳達語意。

2. 一般繪製交互圖的工具有以下幾種：Visio、Axure、PPT、Keynote、Omnigraffle、Mockup、Flash等，其中Axure、PPT、Keynote、Flash可實現動態跳轉，在這其中PPT和Keynote又屬於操作即可得的低成本工具，Keynote屬於OS平台使用工具，PP他屬於Windows平台使用工具，但Keynote上又有很多ppt不及的功能（如一樓 @李志超所答動畫多樣，操作簡單，效果完美等），而其直接對圖片的處理效果也是ppt不可匹及的，當然深受設計師的喜愛。

【徐濤的回答(1票)】:

因為他們用的apple不是windows

原文地址:知乎