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

金城江網站制作公司哪家好，找創新互聯！從網頁設計、網站建設、微信開發、APP開發、成都響應式網站建設公司等網站項目制作，到程序開發，運營維護。創新互聯公司2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯。

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

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

Hype3

官網：http://tumult.com/hype/

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

場景設定

示范： iPhone 內建的音樂 App

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

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

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

匯入圖檔

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

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

設定動作范圍

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 重新整理看到的會是修改前的樣子。

原型專用瀏覽器 ——Frameless

官網：http://stakes.github.io/Frameless/

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

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

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

祝順利！

本文標題：無代碼動效神器！教你用HYPE3做APP原型的基礎過場（附神器）
文章網址：http://vcdvsql.cn/article12/chddgc.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、做網站、定制網站、App開發、網頁設計公司、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯