LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line

更真實的提案!Proto.io讓原型動起來

icon_fb icon_twitter icon_google LINE it!
article_main_img

文/圖、G小編

 

網站名稱:Proto.io

網站特色:Design, prototype, test. All in one tool

網址:https://Proto.io/


 

 

Proto.io已經出到版本6了,透過影片可以更快速的了解Proto.io。
 

Introducing Proto.io 6 from Proto.io on Vimeo.

https://vimeo.com/search?q=Proto.io

 

 

來看看Proto.io可以做到那些動態呢?
https://Proto.io/en/demos/
現在就來開始簡單的小教學囉!

 

 

1. 選擇try it for free,建立新帳戶,可享有15天免費試用。

 

 

2. 接著選擇你的職務,就可以開始建立新專案囉!
 
 

 

3. 立刻開始一個新的專案吧!首先為你的專案命名,並且,選擇所要製作的專案類型。

 

 

4. 編輯的畫面分為三欄,左欄是頁面、中間是製作區、右欄是素材區,素材包含了內建的元素,也可自行上傳素材。

 

 

透過右下角的Preferences,可以自訂你的工作面板。

 

 

5. 選擇按鈕後,會出現閃電的符號,就可以與頁面做連結,就可以製作出頁面中的關聯性。

 

 

6. 如果要製作其他動畫時,可新增畫面下方的Stage。

 

 

7. 新增Stage2後,畫面依想要的動態呈現。

 

 

8. 像按鈕與頁面關聯的方式一樣,在Stage1選擇欲點擊的物件,將閃電符號連結至Stage2。

 

 

9. 接著會跳出詢問畫面,按下create即可。


 

 

10. 就可以依照個人喜好去調整動畫及秒數的設定。

 


 

11. 在右上方選擇share,就可以分享給朋友囉!
 
 

除了連結提供外,檔案的下載也提供了HTML、PNG、PDF…等檔案格式。

 

 

 

12. 當然Proto.io也有提供自動化的設計模式,比較常用的動態效果可以直接加到你的專案中,節省不少時間。

在上方選單選擇Patterns,即可看到Proto.io所提供的樣式,每個樣式都有提供簡短的影片說明,非常貼心。
 

 


13. 在每個專案的設定選項中,可以針對該專案的內容設定,例如專案名稱、裝置大小、Google Analytics帳戶的串連、APP icon圖形…等。
 
 

 

 

14. 最後Proto.io也有提供iOS與Android的App下載,透過App可以看到帳戶內的專案。
 
 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w