新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

隨著前幾年可交互設(shè)計(jì)軟件一番大戰(zhàn)之后,很多紅極一時(shí)的產(chǎn)品都由于各種原因慢慢淡出了設(shè)計(jì)師們的視野:

主打 H5 的 Hype 好像慢慢沒(méi)聲音了、Pixate 被 Google 收購(gòu)之后不久就宣告死亡、同是 Google 家的 Form 也沒(méi)有做起來(lái)、Facebook 的 Origami 更新到了 2.0 但至少在國(guó)內(nèi)沒(méi)什么市場(chǎng)。

目前,拋開(kāi) AE、C4D 這種更為專(zhuān)業(yè)的視頻類(lèi)軟件不談,市面上最火的三個(gè)動(dòng)效原型制作工具分別是 Principle、Flinto 和 Framer Studio。關(guān)于他們的優(yōu)缺點(diǎn)網(wǎng)上足夠多了,我也不再多說(shuō)。

今天要聊的是這兩天慢慢在設(shè)計(jì)圈擴(kuò)散的一個(gè)新玩具 —— Kite Compositor。沒(méi)錯(cuò),又是一款可交互原型動(dòng)效設(shè)計(jì)軟件,Only for Mac and iOS。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

先從我的主觀感受向大家介紹一下新朋友。

一言以蔽之,對(duì)這款工具的第一印象是:在單一的頁(yè)面里通過(guò)時(shí)間軸的方式實(shí)現(xiàn)各種各樣的動(dòng)畫(huà),同時(shí)也支持 Javascript 手動(dòng)編寫(xiě)代碼來(lái)達(dá)到更高自由度的效果。

工具自身的交互模式上,更類(lèi)似于一個(gè)單畫(huà)板的 Principle 與 Framer 相結(jié)合。這注定了首先上手門(mén)檻不會(huì)很高,但又允許了解 Coding 的設(shè)計(jì)師進(jìn)一步挖掘工具的潛力。

常規(guī)的圖層可操作屬性如尺寸、位置、顏色、透明度等都支持,比較特別的是還支持高斯模糊、陰影,尤其對(duì)陰影的原生操縱感覺(jué)還不錯(cuò)。

至少不用像 Principle 一樣要自己切個(gè)陰影圖貼進(jìn)去;另外,還可以直接用畫(huà)筆編輯圖層形狀。

常規(guī)的動(dòng)畫(huà)過(guò)程如設(shè)置開(kāi)始結(jié)束時(shí)間、速度和動(dòng)效曲線(Curve)等都有,比較特別的是它在位移上支持自由繪制路徑動(dòng)畫(huà)。

這意味著你可以很容易地實(shí)現(xiàn)物體的曲線運(yùn)動(dòng),而這在很多競(jìng)品中是沒(méi)有的。

交互方式上,常規(guī)的點(diǎn)擊、滑動(dòng)、長(zhǎng)按都支持,此外還支持鍵盤(pán)按鍵監(jiān)控、鼠標(biāo)監(jiān)控。

多媒體和擴(kuò)展性上,支持視頻和GIF導(dǎo)出,也支持 Sketch 圖層導(dǎo)入。

像 Framer 一樣,Sketch 導(dǎo)入的圖層是可編輯的,不像 Principle 只是變成一張圖片。

大家比較關(guān)心的設(shè)計(jì)導(dǎo)出代碼部分。

首先 Kite 可以通過(guò)自帶的一個(gè)框架(kitekit)將動(dòng)畫(huà)直接集成到 App 中,聽(tīng)起來(lái)非常美好,所以明天上班打算和開(kāi)發(fā)哥哥試一試。

另外, Kite 也支持直接導(dǎo)出 iOS 原生的動(dòng)畫(huà)參數(shù)代碼,看示例感覺(jué)具體效果和 Origami 差不多,也就是能表達(dá)參數(shù)、屬性,但是不能表達(dá)動(dòng)畫(huà)邏輯。

別的就不多說(shuō)了,直接看我翻譯的官方宣傳文檔,我把哪些特性沒(méi)啥特別的,哪些特性挺牛逼的標(biāo)注出來(lái),然后大家玩玩看吧。

(挺牛逼的)路徑編輯:通過(guò)畫(huà)筆工具,設(shè)計(jì)師可以繪制動(dòng)畫(huà)路徑,還可以編輯圖層形狀。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(沒(méi)啥的)演示模式:全屏展示你的設(shè)計(jì),也可以自由設(shè)置展示的窗口尺寸。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(誰(shuí)都應(yīng)該做到的)靈活的界面:易于上手但足夠強(qiáng)大的界面可以幫助你處理各種設(shè)計(jì)需求。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(大概是個(gè)噱頭)支持 Touchbar:通過(guò)新款 Mac 的 Touchbar 功能,可以在不使用鼠標(biāo)的前提下方便地切換工具、控制時(shí)間軸等。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(很棒的)時(shí)間軸:靈活智能的內(nèi)置時(shí)間軸功能讓設(shè)計(jì)師可以自由地操縱、編輯動(dòng)畫(huà)關(guān)鍵幀,并精細(xì)地調(diào)整動(dòng)畫(huà)時(shí)間。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(還不錯(cuò)但有點(diǎn)復(fù)雜的)編輯器(Inspector):一個(gè)強(qiáng)大的對(duì)象編輯器讓你通過(guò)短短幾次點(diǎn)擊設(shè)置顏色、調(diào)整動(dòng)畫(huà)曲線或?yàn)閳D片添加濾鏡。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(挺方便直觀的)豐富的動(dòng)畫(huà)和圖層庫(kù):可以直接拖動(dòng)圖層、動(dòng)畫(huà)或交互到畫(huà)板中,還可以將常用的模塊組件化后添加到庫(kù)里,便于反復(fù)調(diào)用。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(沒(méi)啥的)Mac 上設(shè)計(jì),iOS 上查看:下載 Kit Compositer for iOS 之后,就可以在 iOS 設(shè)備上查看原生動(dòng)畫(huà)效果了。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(還不錯(cuò)的)Sketch 素材導(dǎo)入:輕松地從 Sketch 中導(dǎo)入可編輯的圖層和素材(主要是文字和路徑)。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(理所應(yīng)當(dāng)?shù)模?dǎo)出:可以將設(shè)計(jì)導(dǎo)出為視頻或GIF文件。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(挺牛逼的)腳本:通過(guò)內(nèi)置的 JavaScript 腳本引擎可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)和交互,內(nèi)置了 JS 控制臺(tái),可以以代碼的方式快速設(shè)置動(dòng)畫(huà)、添加圖層或改變屬性等等。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(還不錯(cuò),Principle 也是的)原生動(dòng)畫(huà)引擎:所有動(dòng)畫(huà)都基于 Apple 的原生動(dòng)畫(huà)技術(shù) Core Animation,這保證了動(dòng)畫(huà)效果在設(shè)備上運(yùn)行時(shí)的高幀率。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(沒(méi)啥的)實(shí)時(shí)繪制:不像其他應(yīng)用,Kite 通過(guò) Core Animation 引擎實(shí)現(xiàn)了圖形的實(shí)時(shí)繪制,這意味著不需要對(duì)任何交互效果做預(yù)處理,可以隨時(shí)看到動(dòng)畫(huà)的效果。

(一般般的)擴(kuò)展性:Kite 文件將數(shù)據(jù)扁平化存儲(chǔ),可以非常簡(jiǎn)單地修改其中的屬性、數(shù)據(jù)等。同時(shí),它也非常易于解析為 JSON 文件,供其他應(yīng)用程序調(diào)用。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(看起來(lái)很屌,實(shí)際有待測(cè)試的)將動(dòng)畫(huà)集成至 App:通過(guò) KiteKit Framework,開(kāi)發(fā)者可以容易地將動(dòng)畫(huà)效果集成到 iOS 或 macOS 應(yīng)用中。具體文檔和示例可以參考:kitecomp/kitekit

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(還可以的)豐富的模板:如下圖所示,我們還提供了豐富的內(nèi)建模板。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(很可能淪為雞肋的)方便地將設(shè)計(jì)轉(zhuǎn)化為代碼:動(dòng)效設(shè)計(jì)師可以精確地將動(dòng)畫(huà)曲線、持續(xù)時(shí)間、彈性動(dòng)畫(huà)和位置等等參數(shù)描述給工程師。Kite 中所用的參數(shù)與 iOS 或 macOS 代碼中的參數(shù)一致。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(人人都有的)動(dòng)畫(huà)曲線編輯:除了給出常用的曲線外,也支持非常細(xì)節(jié)地調(diào)整。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

(降低上手難度的)內(nèi)建幫助系統(tǒng):搞不懂怎么用的時(shí)候可以快速地調(diào)用內(nèi)置的幫助功能。

新晉神器!超厲害的原型設(shè)計(jì)新玩具Kite Compositor 深度測(cè)評(píng)

這東西賣(mài)99刀,支持免費(fèi)試用一段時(shí)間,文檔也比較齊全。

自家官網(wǎng)也有很多 Showcase,幫助大家下載學(xué)習(xí)。

就這樣啦,下載和官網(wǎng):Kite Compositor

「新晉神器推薦

  1. 可能是最簡(jiǎn)單的3D建模軟件PROJECT FELIX
  2. 超全面!新晉設(shè)計(jì)神器FIGMA 深度評(píng)測(cè)
  3. 這款圖標(biāo)神器,讓你體驗(yàn)用完即走的暢快感

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

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

收藏 6
點(diǎn)贊 1

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