經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?(2)
對(duì)于我這種以AE作為動(dòng)效設(shè)計(jì)起始的人來說,這點(diǎn)太重要了。它意味著無需任何重復(fù)勞動(dòng),只需要在Flash中添加一些基于AS3.0的交互代碼,就可以完成原型的制作,并保證自己最初的設(shè)計(jì)思路在原型階段不打折扣的實(shí)現(xiàn)。
(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ī)上,輕松又愉快。
(左一就是通過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)效這塊,很多邏輯是可以共通的。
(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使用的代碼
(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í) · 提示
相關(guān)教程
推薦教程
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- Photoshop初級(jí)教程-命令的技巧
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示