不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

@JingDesign?:作為一款好用的,號稱不用一行代碼就可以簡單方便完成動效及交互設計的工具,V2.0版本確實帶給我們了更多的驚喜。在之前,F(xiàn)linto完成交互操作主要依靠兩個畫板之間做過度動畫,雖然表面上看起來很方便,但是在真正的實際工作中,由于沒有類似于Symbols或者Flash的影片剪輯一樣的功能,因此使用受到不少限制,靜電之前也吐槽過這類連線工具的弊端,不過現(xiàn)在Flinto中新加入了Behavior Designer功能,使用此功能后,可以實現(xiàn)不少微交互效果,特別是在同一個屏幕中,我們可以展示N個微交互,而不用來來回回的跳轉畫板,真的很方便,靜電的印象真的已經(jīng)大為改觀。不得不說,Flinto越來越成熟了,可以作為大家做交互動效的主力工具。下面,來跟著靜電一起來看看吧。

試用版過期?現(xiàn)在你可以再次免費試用

如果你之前下載的試用版Flinto 已經(jīng)過期,現(xiàn)在更新到新版本的Flinto V2 即可再次開啟14天的試用。不過,這么好的工具,還是推薦大家去官網(wǎng)購買吧。(購買地址:https://www.flinto.com/mac ? 目前99美刀,Mac Appstore或者獨立版本均可)

全新的Behavior Designer

新的Behavior Designer區(qū)別于之前的Transition方式,此功能主要用來設計UI界面中的微交互效果。比如基于滾動的交互,循環(huán)播放的動畫,開關按鈕,以及按鈕的點擊效果等等,都可以使用Behavior Designer來完成,從此一個界面中可以承載更多獨立的交互效果。同時,動作(Behavior)是可以復用的,就像Transitions一樣;并且,Behaviors可以被打斷,比如超響應交互方式。

使用Behavior Designer設計動畫效率非常高,并且修改動畫也很直觀。你修改的就是你實際看到的效果,所以不用擔心自己的思維與工作實際顯示效果脫節(jié)。

不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

行為可以被應用于組和一系列的狀態(tài)中。通過在每個狀態(tài)中添加鏈接,你可以在這些狀態(tài)之間跳轉,同時動畫會自動被觸發(fā)(類似于Principle中的Drive效果)。

不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

要設計開關按鈕,首先我們要創(chuàng)建一個“開”和“關”的狀態(tài)。每一個狀態(tài)應該有一個點擊手勢做對應。當然,你也可以添加左右滑動手勢作為附加效果以增加真實性。

不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

要制作循環(huán)播放動畫效果,首先將動畫的起始狀態(tài)做出來,然后使用定時器將這些狀態(tài)鏈接在一起即可。

不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

對基于滾動的動畫效果,使用新的“滾動”手勢將兩個狀態(tài)相連。然后當你在定義的范圍內滾動頁面的時候,基于兩個狀態(tài)直接的漸變動畫就會生效。如上面的例子,演示了在一個組中的兩個不同行為:一個用于收縮頭部對象文字,另一個用于右側的視差動畫。

退出Behavior Designer后,你可以繼續(xù)專注于原型中其它部分的設計,而不用擔心交互效果的具體細節(jié)。

可用于多個文檔的動作和轉場效果

全新的Flinto 2可以在多個文檔中共享轉場效果和動作。從一個文檔中拷貝鏈接到另一個文檔中即可在新文檔中復用效果。當然,應用于組的行為也可以被拷貝到新文檔中復用。

此功能對于團隊協(xié)作非常有幫助,同時,我們可以更方便的使用別人分享到網(wǎng)絡中的動畫效果。

可用于多個文檔的動作和轉場效果

Flinto2中新的轉場編輯器同樣引人注目,因為它現(xiàn)在更好用了。我們解決了使用者在之前的轉場編輯器中常見的令人困惑的問題,并增加了新的設置來創(chuàng)建“對齊屏幕”轉場效果。

不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

· 新的起始于結束屏幕中的縮略圖讓使用者可以更明確的分辨哪個狀態(tài)是開始,哪個狀態(tài)是結束

· 屏幕邊框被移除,以便于把它們當作組來處理。點擊并拖動屏幕將移動整個畫面。雙擊或者按住Command點擊鼠標則可以進入組內部來編輯其中的元素。

· 新的“對齊屏幕”選項可以鎖定屏幕的對齊位置,減少在調整過程中位置的出錯。

馬上現(xiàn)在下載Flinto for Mac 2:https://www.flinto.com/mac

歡迎關注譯者公眾號:

不用一行代碼做交互稿?設計師神器Flinto V2.0 新功能講解

適合交互設計師的軟件:

交互神器推薦

原文地址:blog.flinto.com

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內人氣最高的網(wǎng)頁設計師學習平臺,專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ,歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網(wǎng)站推薦,設計師必備導航:http://hao.uisdc.com

收藏 9
點贊

復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網(wǎng)立場,未經(jīng)允許不得轉載。