用 Hype3 做 Prototype:基礎過場


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

這篇是最簡單的過場設定、最偷吃步、不需要技術,只要會寫簡報 PTT 或是 Keynote 就做的出來,所以連 Planner 和 PM 也保證上手無問題。

會選 Hype3 的原因在Note:Prototype 製作軟體 有提過,就不多說,直接從範例開始吧。

Hype3

官網:http://tumult.com/hype/
App Store:https://itunes.apple.com/tw/app/hype-3/id685096913?l=zh&mt=12

場景設定

示範: iPhone 內建的音樂 App


1.打開 Hype3 ,官網下載的試用版可以用很久,還有簡中介面,先抓下來玩看看,喜歡再買。(這套定價也很便宜!)


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


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

匯入圖檔


4.手機截圖,直接扔進 Hype3 裡。


(表示做自己的東西實可以直接拿 Mockup 的 jpg 或 jpg 圖直接上!)

設定動作範圍


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

Prototype 專用 Browser

Frameless - a full-screen web browser

官網:http://stakes.github.io/Frameless/
App Store:https://itunes.apple.com/us/app/id933580264

這是個連「狀態列」都沒有,真正全螢幕的瀏覽器。免費
輸入你的Prototype網址,就可以像真的 App 一樣,用手機做測試了。

祝順利!

範例

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

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

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

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close