用 Keynote 快速製作高保真交互原型，有哪些技巧？

01-21

對於一個有過工作經驗的交互設計師或者視覺設計師來說，用Keynote 做交互原型，基本上沒有什麼技巧。除非是對於從來沒有使用過 Keynote 或者 Powerpoint 的人，或許需要花上幾個小時的時間熟悉一下這個軟體，但我相信不到一天就可以搞懂了。

這個是我用 Keynote 在兩天內做出來的原型：http://vimeo.com/22923342

3月14日更新：這個視頻是為某客戶製作的 H5 頁面的高保真交互原型。Keynote 有很多的優勢，但並非是像 AE 一般的專業動效設計工具，所以視頻里的動效只是簡略版（或者理解為 Demo）。

關鍵技巧有幾個：

1. Build In Build Out 的使用

2. Builder Order 里的 With Builder XX 和 After Builder XX 的運用

3. Delay 的運用

4. Magic Move 的運用（在這個視頻中並未用到 Magic Move，但是其他項目中很多會用到

看視頻：

Keynote 製作 HTML5 頁面動效視頻

=======================以下為2月27日原回答=======================

讓我們通過做一個案例來感受一下吧！先看視頻鏈接。視頻封面

Keynote 製作高保真原型及動及動效設計教程視頻

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 去做，連畫圖帶動效，也就兩頁。

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

註：轉載或商業用途請私信我。

複雜的交互動作都是由一些簡單的動作疊加而成的。比如淡入淡出加上位移就變成一種常見的交互。

Keynote在這方面的渲染和合成很方便。

https://vimeo.com/100377108

Keynote does Material Design

推薦關注簡書賬號DMo，不定期更新Keynote動畫教程，這是最新一期教程：

Keynote動畫沒你想的那麼難＃6——畫線

也可以關注微信公眾號：webdesign_edu