教你用HYPE3做APP原型的基礎過場

 　　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 一樣，用手機做測試了。

　　祝順利!

　　范例

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

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

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