經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?(2)

來源:阿里高級(jí)視覺設(shè)計(jì)師 作者:TCWison 學(xué)習(xí):2929人次

對(duì)于我這種以AE作為動(dòng)效設(shè)計(jì)起始的人來說,這點(diǎn)太重要了。它意味著無需任何重復(fù)勞動(dòng),只需要在Flash中添加一些基于AS3.0的交互代碼,就可以完成原型的制作,并保證自己最初的設(shè)計(jì)思路在原型階段不打折扣的實(shí)現(xiàn)。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Action Script是可視化很強(qiáng)的一門語言,結(jié)合AE的素材,你設(shè)計(jì)的動(dòng)效基本可以完美復(fù)現(xiàn))

優(yōu)勢(shì)2:可以導(dǎo)出.apk或.ipa的安裝包,共享給任何有手機(jī)的人。

由于本人的工作經(jīng)常需要異地溝通,原型的可傳遞性就是個(gè)很關(guān)鍵的需求了(總不能把電腦快遞過去給人家看吧…)。Flash的打包發(fā)布功能,這時(shí)就派上了用場(chǎng)。做好的原型通過Air for Android打包一個(gè)apk文件,郵件發(fā)過去安裝在對(duì)方手機(jī)上,輕松又愉快。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(左一就是通過Flash打包生成的.apk文件,可以直接復(fù)制到手機(jī)上安裝)

另外一些可關(guān)注的工具,還有Pixate和Form,它們都可以通過共享工程文件的方式遠(yuǎn)程傳遞,還能通過官方App將原型投射在手機(jī)上實(shí)時(shí)預(yù)覽,缺點(diǎn)是只能做一些基礎(chǔ)的效果,創(chuàng)新一點(diǎn)兒的就搞不定了,不過他們都在不斷地迭代更新,尤其是后者,剛被Google收購,未來說不定會(huì)有快速的發(fā)展。

我個(gè)人的第二個(gè)工具選擇,是Framer Studio。當(dāng)我把制作好的原型拿給工程師看的時(shí)候,經(jīng)常被問到這樣一個(gè)問題:“能不能把源碼給我們看一下?”這時(shí)氣氛通常會(huì)比較尷尬,因?yàn)镕lash也好Form也罷,它們制作的原型只能起到演示的作用,而無法直接生成對(duì)開發(fā)有幫助的代碼。此時(shí),除了報(bào)班現(xiàn)學(xué)Android或iOS開發(fā)外,還有沒有別的辦法呢?答案是:“有!” Framer Studio給了我們一線曙光。

Framer Studio是一個(gè)純編程實(shí)現(xiàn)的原型制作工具,有很強(qiáng)的動(dòng)效實(shí)現(xiàn)能力,它的語言是基于Javas cript衍生出的Coffees cript。雖然語法與AndroidiOS有不小的區(qū)別,但僅就動(dòng)效這塊,很多邏輯是可以共通的。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Framer的界面,左側(cè)是代碼區(qū),右側(cè)可以直接看到實(shí)現(xiàn)效果,很方便)

當(dāng)然,它的學(xué)習(xí)成本也會(huì)高一些,不過當(dāng)你拿著一段Framer的源碼給工程師看的話,當(dāng)中的一些動(dòng)畫參數(shù)和實(shí)現(xiàn)邏輯,多少能給到他們些實(shí)際的幫助,所以付出和回報(bào)還是成正比的。

另外,如果你專注于iOS平臺(tái),也可以直接嘗試一下Origami,這是個(gè)由Facebook團(tuán)隊(duì)開發(fā)的原型工具,通過鏈接節(jié)點(diǎn)式的操作,無需自己寫代碼,在它最新的更新中,已經(jīng)支持導(dǎo)出可供iOS和Android使用的代碼

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Origami最新版支持代碼的導(dǎo)出,雖然可用性還有待提升,但絕對(duì)值得持續(xù)關(guān)注)

三、協(xié)助開發(fā):參數(shù)文檔

有了視頻Demo,有了交互原型,相信工程師們已經(jīng)理解你要做什么了,那他們是否就可以愉快的把動(dòng)效實(shí)現(xiàn)了呢?答案是:不一定。一些簡(jiǎn)單的動(dòng)效,工程師或許可以憑經(jīng)驗(yàn)搞定。如果你的動(dòng)效設(shè)計(jì)很復(fù)雜,涉及眾多的參數(shù)與速率變化,那僅憑你的描述與工程師肉眼的感覺,恐怕要出偏差。這時(shí),就需要參數(shù)文檔的幫助了。

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!