我有特別的設計工具！教你用keynote做出APP原型

編者按：武林中，高手摘花飛葉皆可傷人，設計領域里，蘋果團隊告訴我們，人家用Keynote也可以做出動畫交互俱佳的APP原型，今天分享出這篇教程，為同學們示范一下設計方法，設計師們不要囿于工具了，這樣省時高效的軟件趕緊學起來！

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

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

插播一個簡單大氣的WWDC海報教程，超有范兒！《PS教程：手把手教你做蘋果WWDC2014 風格海報》

綜述一下先：

1，靜態圖

1. 先用畫好的線框圖或者直接在keynote里用色塊布局
2. 填充圖片，可調整陰影等基本效果
3. 導出圖片放進手機里
4. 根據用戶反饋調整

2，動畫效果

1. 利用Keynote自帶的物件動畫
2. 活用Keynote最棒的“神奇移動”轉場效果
3. 手機裝上keynote app打開演示文檔
4. 根據反饋調整效果

3，交互事件

1. 調整圖片尺寸導入xcode
2. 僅用針對圖片的簡單代碼
3. 僅用簡單的交互手勢 代碼

第一階段：制作靜態圖

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

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

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

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

同學你家Photoshop缺圖標嗎？1000+圖標正躺在這里等你來下載?→?《圖標素材哪里找？1000+圖標資源打包免費下載！》

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

第二階段：假互動，加入動畫效果

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

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

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

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

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

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

他們是這樣做的：

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

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

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

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

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

回顧一下三個階段：

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

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

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

（非廣告，放輕松）

木有iMac？那就來學習PPT全面提高教程！

PPT該怎么做？就看這組教程了！
《精彩絕倫！設計師的PPT就應該這樣做》

據說上班人會PPT的工資比會Excel的高？
《PPT設計寶典！十招教你做出拿得出手的PPT》

向高手學習！一個PPT達人的成長之路！
《設計師也來煉PPT！一個新手小白的PPT修煉之路》

原文地址：zhihu
作者：@超兒

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量83萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：