史蒂芬說：蘋果就自己有個(gè)專門制作原型的團(tuán)隊(duì)，他們流竄在各個(gè)項(xiàng)目組之間包攬所有的原型制作工作，包括動(dòng)畫和交互。他們的主要工具就是Keynote。

WWDC 2014 Session Videos

這來自于WWDC 2014 Session Videos里有個(gè)視頻Prototyping: Fake It Till You Make It ，就是他們指導(dǎo)如何用Keynote做出逼真的交互原型的，這段我也是剛看到，其實(shí)一直想補(bǔ)到之前的答案里。下面結(jié)合這個(gè)視頻的截圖可以介紹下他們是怎么充分發(fā)揮Keynote的特點(diǎn)的。

綜述一下先：

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

首先：制作靜態(tài)圖。

1. 先用畫好的線框圖或者直接在keynote里用色塊布局，keynote提供了多種智能的對齊，布局，格式等等設(shè)計(jì)方式，整個(gè)過程會(huì)非常的輕松。比如自動(dòng)標(biāo)尺吸附等距等等，比絕大多數(shù)原型制作軟件都簡單人性化。

色塊布局

2. 對照一些線框圖可以繼續(xù)鋪色塊和布局，這個(gè)過程中你會(huì)發(fā)現(xiàn)這個(gè)對齊和吸附的過程是多么的神奇。

對齊和吸附很輕松

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

調(diào)整圖片樣式

4. 很多人用原型軟件是看中那些控件，其實(shí)大多數(shù)控件還不如自己在Keynote里制作快速。而且Keynote自帶了很多標(biāo)志和Icon，完全不用到處去找了。比如這個(gè)例子里的打分用五星，改個(gè)黃色就可以了。

自制圖標(biāo)

5. 依次類推，可以很快做出很多頁面，導(dǎo)出圖片格式，在手機(jī)中查看

?手機(jī)查看

插入一段來自知乎評論里的內(nèi)容，關(guān)于如何讓keynote在手機(jī)上豎屏的
@Marc :下載 Apple 官方給出的 Keynote 你就明白了，每個(gè) xxx.key 文件都對應(yīng)著一個(gè) xxx-iPhone.key，這個(gè)逆時(shí)針旋轉(zhuǎn)90度之后的文件才是最終用來在 iPhone 上面演示的文件。

第二階段，假互動(dòng)，加入動(dòng)畫效果。

具體關(guān)于為何這么做，每個(gè)階段完后的反饋過程，目標(biāo)等等原理的東西請大家看視頻或者PDF吧，這里主要說下過程和他們是怎么充分發(fā)揮Keynote在原型制作中的特點(diǎn)的。

比如這個(gè)假互動(dòng)的階段，如果你不用Xcode的話，這個(gè)就是交互原型的最后階段了?；驹砭褪腔钣脠D片，活用物件動(dòng)畫，活用轉(zhuǎn)場動(dòng)畫，足以做出以假亂真的原型，只要你的測試用戶不要瞎點(diǎn)……

關(guān)于Keynote自帶的動(dòng)畫有非常多種和微調(diào)效果，起初我不是很理解，因?yàn)楹芏嗷ㄉ诘男Ч茈y用到幻燈片里，直到開始做原型發(fā)現(xiàn)，其實(shí)很多動(dòng)畫經(jīng)過調(diào)整都是很好的交互效果，包括現(xiàn)在看到的一些令人驚艷的反彈，延遲等逼真的細(xì)節(jié)動(dòng)作，Keynote早就可以微調(diào)模擬了。

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

1. 制作動(dòng)畫有很多方式，可以根據(jù)你的職業(yè)，習(xí)慣選擇不同的方法。

動(dòng)畫效果

也有很多很巧妙的方式，其中最簡單，最快的就是一定要靈活運(yùn)用圖片。靈活到什么程度，我舉個(gè)視頻里面全場爆笑的例子。動(dòng)畫是這樣的：敲擊鍵盤，字符一個(gè)個(gè)的蹦著出現(xiàn)在屏幕上。里面說，我可以只用一行或者干脆不用代碼就做出來。這個(gè)用Keynote就可以實(shí)現(xiàn)，

各位可以想想。

逐字出現(xiàn)的動(dòng)畫效果

他們是這樣做的：

每個(gè)字母做了個(gè)圖片……

還可以通過調(diào)整圖片的排序大小制作不同的效果。

圖片的排序

2. 特別提到一個(gè)Keynote獨(dú)有的“神奇移動(dòng)”效果?？梢园亚耙豁撝械奈锛苿?dòng)或放大到下一頁中。效果非常出眾。

神奇移動(dòng)

好了，其實(shí)至此，絕大多數(shù)的動(dòng)畫效果都可以做出來了。如果不滿足于此，學(xué)點(diǎn)簡單的語法，在Xcode里只用針對圖片和交互相關(guān)的代碼就可以做出更加逼真的原型了。

針對圖片和交互相關(guān)的代碼

然后比較一下如果用代碼實(shí)現(xiàn)和用Keynote的差別

代碼實(shí)現(xiàn)和用Keynote的差別

回顧一下三個(gè)階段：

回顧

對比

這里就是蘋果官方的原型是如何以Keynote為主要工具制作一個(gè)足以亂真的App。

另外關(guān)于Keynote的使用方法，推薦大家在http://weibo.com/xucen?里跟著學(xué)習(xí)，足以從零開始做完原型，還可以做個(gè)漂亮的幻燈片忽悠投資去，一舉兩得！

本文作者：李志超；轉(zhuǎn)載自：zaodula