中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

Hype3

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

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

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

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

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

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

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

匯入圖檔

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

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

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

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

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

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ì)了沒有。

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

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

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

過場(chǎng)方式

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

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

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

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

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

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

匯出 HTML 檔

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

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

如果想預(yù)覽自己做的如何，工具欄上有個(gè) Chrome 或 Safari 的 icon，按下去就是了。不過它不是實(shí)時(shí)的，每次修改存盤就要再點(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)欄」都沒有，真正全屏幕的瀏覽器。免費(fèi)！

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

祝順利！

作者： @Akane_Lee

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

原文地址：blog.akanelee.me