亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國推薦設(shè)計師 (詳情)
//百度統(tǒng)計 20220402 uicn

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時了解您的意見

提交需求

賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯(lián)系!

0/20
0/200

設(shè)計大賽

  • 設(shè)計大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對UI中國的支持和信賴!
重量級更新 Flinto 2.0
0.0°
2016-12-05 自譯外文 教程 原作者: Flinto 舉報 4717 26 26 5

如果你日理萬機沒有時間,可以滾到文章最下方下載打包好的福利并親自上手體驗。


歡迎來我的追波逛逛  https://dribbble.com/Zhuyuxuan 


Flinto for Mac 2 已經(jīng)出了好一段時間了,不過國內(nèi)好像沒有啥關(guān)注度(我猜是因為他們的官網(wǎng)沒翻墻登不上的緣故),其實這回更新非常給力,新增的Behavior Designer功能讓它成為我制作可交互原型的第二選擇(第一選擇肯定是我的大FramerJS啦),那么到底這個Behavior Designer是什么,下面就來給大家介紹下。


文章最后有特大福利,關(guān)于Behavior Designer這個新功能的詳細官方教程,雖然詳細,但卻短小精悍,一看就懂。翻墻搬運,且下且珍惜。



何為Behavior Designer?

Flinto for Mac 2的Behavior Designer功能專門為各種微交互效果而設(shè)計。市面上的許多可交互原型設(shè)計軟件的基本功能都能夠滿足設(shè)計師們的需求,但是問題就總愛出在一些微小的地方,Behavior Designer這個強大功能的面世正是為了解決這些問題。比如基于滾動的一些小交互、無限自動循環(huán)的動效、更接近真機的switches效果、一些按鈕的微交互效果等等。Behavior能夠被打斷(這一點真的是要給個大大的贊),也能夠像我們熟悉的transition效果一樣被無限復用,讓你在制作更高水平的可交互原型的同時提高效率。



Behavior Designer性能良好而且易于使用(上面這個是介紹視頻,需要Behavior Designer的教程視頻的朋友請滾到文章末尾下載。),無需一行代碼,完全圖形化操作。



Image title



運用Behavior對groups的狀態(tài)加以定義,然后在各個狀態(tài)之間添加連接,boom!一切就做好了。(不得不說Flinto 2.0的這個功能真的是非常強大,要知道在Framer里面處理這些微交互效果是需要一些功夫的。)


Image title



以上面這個動圖里面的switches為例,他們在兩個狀態(tài)之間以tap gesture(點擊)為連接創(chuàng)作出了細節(jié)非常豐富且真實的效果,而如果你想要你的原型更加貼近現(xiàn)實,那么你可以加入一個swipe gesture(滑動),讓這個switches效果能夠被打斷。(真的是太厲害了?。。?/p>


Image title



如果你需要一個無線循環(huán)的動畫,譬如說一個loading動畫,這玩意在別的原型制作軟件里面也是蠻麻煩的。使用Behavior功能的話你只需要定義你想要的幾個位置,然后用timer link將他們連接起來。


Image title



一些基于滾動的效果制作起來也非常簡單,用被重新設(shè)計過的scroll gesture來連接這些元素,一切盡在你的掌握之中。從一個狀態(tài)轉(zhuǎn)換到另外一個狀態(tài)的動畫基于滾動操作而發(fā)生,上面動圖中的例子使用了兩個behavior(是的,你可以在同一個組內(nèi)多次使用behavior)。一個用于控制標題的狀態(tài),一個用于控制圖片的狀態(tài),動效的發(fā)生都基于滾動操作事件的發(fā)生。


完成了Behavior Designer的操作之后直接退出編輯模式,該干嘛干嘛去,Behavior Designer不會對其它效果產(chǎn)生任何影響,模塊化編輯的思維簡直是設(shè)計師的最愛了好嗎。


復用性能被增強了

動效的時候大家都有一個痛點,就是復用性較低,我們無法像在sketch里面復制一個圖片一樣復制一個交互效果,**這就導致了有許多效果即使我們10分鐘之前才做過,但是每當你需要的時候你還是要重新再做一遍,**(Framer的復用性也是無與倫比的強,這就是為什么我非常喜歡Framer)其實做動效并不是大家想象中那樣浪費時間,真正吃掉大家時間的其實是這些無法復用的困局。


Flinto 2 對效果可復用性的提升非常給力,它所有的transitions和behaviors效果都能夠輕松地粘貼復制,以運用于其他項目文件之中!同樣的事情你再也不用做上無數(shù)遍了。同時這也意味著你跟同事之間能夠一起定義一套動效的標準并一直復用下去了?。?/p>



Transition Designer也有所提升

老功能也沒有被忘記,提升的空間總是有的,以前的Transition Designer有時候總是讓問感到困惑(我就不多說了,真的非常繞,有時候我連哪個狀態(tài)是前,哪個是后都搞不懂啊?。?。同時我們也添加了“aligned screen”的新功能。



Image title



  • 我們用縮略圖來準確地告訴用戶,哪個是start screen哪個是end screen。
  • 本來用于控制整個screen的顏色邊界被去掉了(去的真好,這兩個東西真的讓人非常困擾)?,F(xiàn)在你直接拖拽就是控制整個screen,而雙擊才能控制組內(nèi)的其他元素。
  • 新增的“aligned screen”小功能讓你不必再為一些細碎的對齊工作而炸毛。










[福利資源包] 私人七牛云服務(wù)器,速度極快無廣告,各位輕點兒


BTW,如果有空的話,還可以來我Dribbble逛逛!

更新:2016-12-05

收藏

26人已收藏

zhuyuxuan

??知乎專欄:DesignCoder

  • 24

    作品

  • 2044

    粉絲

  • 32

    關(guān)注

  • 你是不是對設(shè)備的屏幕一無所知
  • 不整虛的,12 條提高產(chǎn)品可用性的動效設(shè)計的原理
  • 「冷知識」Sketch還能這樣操作?!
  • 「寫給設(shè)計師」技術(shù),要懂多少才算懂?

    猜你喜歡

      2016-12-05 自譯外文 教程 原作者: Flinto 舉報 4717 26 26 5

      重量級更新 Flinto 2.0

      0.0°

      你確定要舉報重量級更新 Flinto 2.0

      如果查出惡意舉報,十天內(nèi)禁止提交任何舉報申請。

      0/200

      上傳證據(jù): 超過10M的附件請使用網(wǎng)盤地址

      點擊上傳附件

      對誰可見:

      全部設(shè)計師
      • 全部設(shè)計師
      • 推薦設(shè)計師和認證設(shè)計師

      您確認要推薦?

      該作品發(fā)布時間:2016年12月04日

      評分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      26
      26
      5

      賬號或密碼錯誤,請重新輸入

      賬號或密碼錯誤,請重新輸入

      登錄

      手機號

      發(fā)送驗證碼 120s 驗證碼錯誤

      登錄
      第三方賬號登錄