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

金城江網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

會(huì)選 Hype3 的原因在《Note：Prototype 制作軟件》有提過(guò)，就不多說(shuō)，直接從范例開(kāi)始吧。

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

Hype3

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

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

場(chǎng)景設(shè)定

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

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

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

3. 因?yàn)楫?huà)面是長(zhǎng)型的，所以我把時(shí)間軸和圖層從下方挪到右邊去。

匯入圖檔

4. 手機(jī)截圖，直接扔進(jìn) Hype3 里。

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

設(shè)定動(dòng)作范圍

5. 來(lái)做「動(dòng)作觸發(fā)的范圍」，在圖上先拉個(gè)矩形。

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

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

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

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

10. 像 Keynote 一樣，可以一次做了好幾個(gè)組件，選起來(lái)好拷貝到其他場(chǎng)景貼上。

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

過(guò)場(chǎng)方式

11. 點(diǎn)著個(gè) BTN、播放中的頁(yè)面是由右往左推進(jìn)。

12. 所以記得把過(guò)場(chǎng)動(dòng)效改成「推動(dòng)」（由右往左）。

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

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

15. 點(diǎn)了「完成」后，頁(yè)面會(huì)由上往下。

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

匯出 HTML 檔

選 HTML5、活頁(yè)夾，檔名命名好。

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

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

原型專用瀏覽器 ——Frameless

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

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

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

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

祝順利！

本文標(biāo)題：無(wú)代碼動(dòng)效神器！教你用HYPE3做APP原型的基礎(chǔ)過(guò)場(chǎng)（附神器）
文章網(wǎng)址：http://chinadenli.net/article12/chddgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、做網(wǎng)站、定制網(wǎng)站、App開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)