編者按：今天@大蔚陳?給同學們演示一個利用Keynote制作高保真交互原型的過程，那些用幾百行代碼才能實現的動效，Keynote兩頁就輕松搞定，給交互的同學多一個酷炫的選擇，感受下 >>>

讓我們通過做一個案例來感受一下吧！先看視頻鏈接：http://v.youku.com

Keynote 在一定程度上，制作高保真原型是非常快速的。

比如我下面的這個例子，在 Framerjs 的官網有用 Framer.js 的樣例，我用 Keynote 重做了一遍。在這個例子里，相比用 Framerjs 的令設計人員忘而生畏的一兩百行代碼， Keyonte 可謂簡單快速便捷。我把一些資源也放在 GitHub 上了 ：infodavid/keynote-prototype · GitHub。

用 Keynote 制作交互動效設計

- 硬件準備：Mac

- 軟件準備：Keynote

- 素材資源（如果你想自己畫的話，也沒問題）：Google Logo，Avantar，Android L Icons，Roboto 字體

第一步，基本設置

新建一個 Keynote 文件，然后在 **文檔** 的 **幻燈片尺寸** 中選擇 **定制幻燈片尺寸**，并在輸入框中輸入寬為：640，高為：1136。我一般選擇使用 iPhone5 的分辨率，以免尺寸過大導致的投影效果欠佳。

在 **格式** 中選擇 **背景顏色**，輸入 H:238 S:0 B:94。RGB 對機器友好，但 HSB 是對人更友好的色彩模式，推薦使用 HSB 模式。

第二步，畫圖

我圖方便，頂部條部分直接在 Sketch 里畫了圖，導成 PNG 放在 Keynote 里。其實 Keynote 里也同樣可以完成這個操作，下面就介紹下 keynote 里如何完成：

1. 自行繪制。Keynote 中的鋼筆工具非常強大，你可以繪制任何你想要的圖形，同時也可以讓圖形之間合并，相減相交。但是缺點是無法導成單獨的圖片。

2. 運用資源：圖標字體，IconFont，安裝此圖標字體，即可使用。優點是你可以任意放大縮小不失真，缺點也很明顯，要導出圖片是麻煩的事情。

其他都較為簡單，就不多贅述。

唯一需要注意的是在第二頁中，并不是簡單的一個矩形背景，而是由圓和矩形拼接成的。稍后介紹動效時，會介紹到 Magic Move 的運用。

第三步，添加動效

畫好圖之后，就可以添加動效了。其實我們分析一下就知道點擊頭像后，兩個頁面的交互動效是如何的：

1. 頭像后的原型放大，并最后形成一個矩形。
2. 頂部條有輕微的上移漸隱效果。
3. 第二頁的標題，文字等上移
4. 麥克風出現
5. 頭像背后的圓放大并持續一小段時間

當然，哪個象征光標的圓圈也是有一個移入，并進行 Pop 效果的。

Keynote 里的 Magic Move（神奇移動），真的很 Magic，兼職就是無縫銜接。當你運用 Magic Move 時，注意要是相同的兩個對象。比如說在這個 Demo 里，你把第一頁中的藍色圓背景，復制，黏貼到第二頁，同時放大尺寸，那么在運用 Magic Move 之后，過渡就會非常自然。

同時，Build Order（構件順序）也是非常重要的，你在此選擇動效的持續時間，是否運用延遲，在點擊還是在某構建之后開始。其中的妙處是需要自己去把玩的，說一百遍不如實地做一遍。

優化一下

1. 復制第二頁的標題和文字到第一頁的畫布底下。

1. 把首頁中底部的矩形背景復制到第二頁，然后調整其高度為450，

這樣，運用 Magic Move 的時候，就會更自然了。

最后幾句

其實頁面還有很多可以進化的地方，各位可以再試試。

現在有很多的工具可以幫助我們展現 Demo，比如說 Origami, Form，Framer Studio，InVision，Adobe Effects，Xcode，等等等等。

這些工具各有各的優勢，也各自存在缺點。比如說同樣這個 Demo，用 Framerjs 來做的話，都快200行代碼了（前提還是你得畫好圖），但是用 Keynote 去做，連畫圖帶動效，也就兩頁。

按照時間和要求的不同，選擇合適的工具，才是最好的。更為重要的是你的想法，畢竟，這些都只是用來實現你得想法的。

@大蔚陳?同學的博客：www.idavidchen.com，歡迎關注唷。

【從新人到大牛的交互設計完全修煉手冊】

菜鳥入門必讀好文！
《網易美女設計主管！交互設計菜鳥如何入門？》

阿里資深設計師手把手帶你認識交互設計！
《交互設計那些事兒（一）》
《交互設計那些事兒（二）》

多位資深前輩經驗合集！交互設計師自學指南！
《交互設計師修煉指南！教你從零開始成為優秀交互設計師》

原文地址：zhihu
作者：@大蔚陳

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

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