推薦語：@Akane_Lee?：這篇是最簡單的過場設(shè)定、最偷吃步驟、不需要技術(shù)，只要會寫簡報 PTT 或是 Keynote 就做的出來，所以連 Planner 和 PM 也保證上手無問題 >>>

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

會選 Hype3 的原因在《Note：Prototype 制作軟件》有提過，就不多說，直接從范例開始吧。

（好像得搭梯子才可以訪問，木有梯子同學(xué)可參見：《Sketch神助攻！無代碼做動效神器Hype3入門教程》）

Hype3

官網(wǎng)：http://tumult.com/hype/

App Store：https://itunes.apple.com

場景設(shè)定

示范： iPhone 內(nèi)建的音樂 App

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

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

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

匯入圖檔

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

（表示做自己的東西實可以直接拿 Mockup 的 jpg 或 png 圖直接上?。?/p>

設(shè)定動作范圍

5. 來做「動作觸發(fā)的范圍」，在圖上先拉個矩形。

6. 右邊選單設(shè)定無填色、無筆劃。

7. 下方 Tab Bar 第 2 顆的位置就有一塊透明的區(qū)域，也就是「動作觸發(fā)的范圍」。

8. 設(shè)定動作，雖然手機上不會有光標(biāo)，但我還是喜歡把可觸發(fā)的區(qū)域光標(biāo)換成手指，在 Browser 預(yù)覽時可以快速確認(rèn)自己Link設(shè)對了沒有。

9. 記得，所有場景、圖層什么的，要重新命名成有意義的名字，當(dāng)頁數(shù)和組件一多時才不容易出錯。

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

（圖層前后會影響操作和組件顯示，如果有時候發(fā)現(xiàn)某個地方怎么點都沒效果、或是看不到，檢查下圖層順序。）

過場方式

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

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

13. 秒數(shù)我習(xí)慣設(shè) 0.3s，依個人感覺不同，請自己試看看。

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

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

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

匯出 HTML 檔

選 HTML5、活頁夾，檔名命名好。

會出現(xiàn)一個 HTML 檔和一個文件夾。把這兩個檔傳到服務(wù)器上，就可以用手機開網(wǎng)址測試了。

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

原型專用瀏覽器 ——?Frameless

官網(wǎng)：http://stakes.github.io/Frameless/

App Store：https://itunes.apple.com

這是個連「狀態(tài)欄」都沒有，真正全屏幕的瀏覽器。免費！

輸入你的Prototype網(wǎng)址，就可以像真的 App 一樣，用手機做測試了。

祝順利！

作者： @Akane_Lee

來源：優(yōu)設(shè)網(wǎng)

原文地址：blog.akanelee.me