動態效果、轉場動畫對UI的戲份越來越重…其實一直都很重只是大多用在遊戲上，功能型 App 運用這種技巧最近越吃越兇，且製作真正能裝在手機、拿在手上操作的擬真 Prototype 對不會寫 Code 的設計師來說有難度。我找到好用的方式可以解決這個問題：Hype3＋Frameless。

這篇是最簡單的過場設定、最偷吃步、不需要技術，只要會寫簡報 PTT 或是 Keynote 就做的出來，所以連 Planner 和 PM 也保證上手無問題。

會選 Hype3 的原因在Note：Prototype 製作軟體 有提過，就不多說，直接從範例開始吧。

Hype3

官網：http://tumult.com/hype/
App Store：https://itunes.apple.com/tw/app/hype-3/id685096913?l=zh&mt=12

場景設定

示範： iPhone 內建的音樂 App

1.打開 Hype3 ，官網下載的試用版可以用很久，還有簡中介面，先抓下來玩看看，喜歡再買。（這套定價也很便宜！）

2.既然是 iPhone 的 Prototype，來改一下場景尺寸。我用的是 640x1136px，畫質比較細。

3.因為畫面是長型的，所以我把時間軸和圖層從下方挪到右邊去。

匯入圖檔

4.手機截圖，直接扔進 Hype3 裡。

（表示做自己的東西實可以直接拿 Mockup 的 jpg 或 jpg 圖直接上！）

設定動作範圍

5.來做「動作觸發的範圍」，在圖上先拉個矩形。

6.右邊選單設定無填色、無筆劃。

7.下方 Tab Bar 第 2 顆的位置就有一塊透明的區域，也就是「動作觸發的範圍」。

8.設定動作，雖然手機上不會有游標，但我還是喜歡把可觸發的區域游標換成手指，在 Browser 預覽時可以快速確認自己Link設對了沒有。

9.記得，所有場景、圖層什麼的，要重新命名成有意義的名字，當頁數和元件一多時才不容易出錯。

10.像 Keynote 一樣，可以一次做了好幾個元件，選起來好拷貝到其他場景貼上。

（圖層前後會影響操作和元件顯示，如果有時候發現某個地方怎麼點都沒效果、或是看不到，檢查下圖層順序。）

過場方式

11.點著個 BTN、播放中的頁面是由右往左推進。

12.所以記得把過場動效改成「推動」（由右往左）。

13.秒數我習慣設 0.3s，依個人感覺不同，請自己試看看。

14.這個 Btn 點下去、會由下往上出現歌曲列表頁。記得設定「推動」（由下往上）

15.點了「完成」後，頁面會由上往下。

（當很多頁面都有一樣的回前頁、Tab 的Link要處理時，可以先做完一頁，剩下 Copy、Past 就好。）

匯出 HTML 檔

選 HTML5、文件夾，檔名命名好。

會出現一個 HTML 檔和一個資料夾。把這兩個檔傳到伺服器上，就可以用手機開網址測試了。

如果想預覽自己做的如何，工具列上有個 Chrome 或 Safari 的 icon，按下去就是了。不過它不是即時的，每次修改存檔就要再點一次這 icon 重新產生預覽，直接點 Browser 重新整理看到的會是修改前的樣子。

Prototype 專用 Browser

Frameless - a full-screen web browser

官網：http://stakes.github.io/Frameless/
App Store：https://itunes.apple.com/us/app/id933580264

這是個連「狀態列」都沒有，真正全螢幕的瀏覽器。免費！
輸入你的Prototype網址，就可以像真的 App 一樣，用手機做測試了。

祝順利！

範例

上面做的範例請用手機開 http://goo.gl/0X0sWV
或是掃這個 QRcode。

最好的瀏覽方式請用 Frameless 開啟。

（熟練了大約20分鐘內絕對搞的定上述步驟。範例有些細節、瑕疵、落差就不調整了。比如由下往上推不該是真的推走，有些更精緻的設定我留著下次經驗分享。）