交互原型設(shè)計(jì)軟件Drama

Drama是一款專業(yè)的交互原型設(shè)計(jì)工具，這款軟件便捷三合一功能將設(shè)計(jì)，動(dòng)畫和原型設(shè)計(jì)獨(dú)特地集成到一個(gè)熟悉的工具中。不再需要在應(yīng)用程序之間切換或?qū)W習(xí)新東西。

使用體驗(yàn)：

Drama只涉及了一般的元素功能。其實(shí)如果不制作復(fù)雜的頁面效果時(shí)，是完全夠用的。但如果想要達(dá)到無需其他App來輔助制作的話，還需要不斷地去更新迭代功能。但僅僅是這樣的話，Drama就沒資格站出來了。事實(shí)上，Drama在交互原型制作方面，不僅綜合了Principle和InVision Studio等工具的優(yōu)點(diǎn)，還有著自己獨(dú)特而吸引人的地方。

Principle火熱的原因在于其Driver和Animation功能投入市場(chǎng)時(shí)間早，可導(dǎo)入Sketch文件，既實(shí)用效果又好。之后又更新了iOS 端直接讀取動(dòng)效文件，一些設(shè)計(jì)師就開始嘴叼攝像機(jī)錄屏開始忽悠新人——這都是后話了。就像Ps的特色為圖層驅(qū)動(dòng)，MagicaVoxel為顏色驅(qū)動(dòng)（至少我這么理解）一樣，理解了其背后邏輯的思路便可以更好地上手軟件，提高上限。你可以看到Drama里也是綜合了Driver和Animation，只不過Drama的Animation可以單頁里去執(zhí)行，并不依賴于多頁面間的過渡，其做法和Ae一樣取元素信息做關(guān)鍵幀：

就使用體驗(yàn)上而言其實(shí)還有不小的提升空間，比如Drama是自動(dòng)做出一段時(shí)間后的關(guān)鍵幀節(jié)點(diǎn)的，而不是像Ae一樣手動(dòng)在某個(gè)時(shí)間定位關(guān)鍵幀，沒有可控感。以及時(shí)間軸（/ Driver軸）的放大縮小單位里程等還有些難用。但這些不妨礙Drama的獨(dú)立動(dòng)畫功能讓交互整體更自由，比如可以搭配Automatic事件去完成一系列連續(xù)動(dòng)畫（類似AdobeXD團(tuán)隊(duì)曾做過的這個(gè)案例），或者像是css animation一樣做載入后的動(dòng)畫。官網(wǎng)也有動(dòng)畫相關(guān)的演示，做的是一個(gè)倒計(jì)時(shí)效果：

至于最常見的畫板（注：Drama里叫Scene，后面為了方便依然稱之為畫板）之間切換動(dòng)畫，這個(gè)動(dòng)效思路從一開始便沿用到了至今。Ae的單畫板工作流對(duì)多頁面（/畫板）的UI很不友好，像是Hype、Principle等一眾都開始簡(jiǎn)化關(guān)鍵幀模型，變?yōu)樽詣?dòng)的元素對(duì)照與制作關(guān)鍵幀。Framer（/ Framer X）和Origami比較特殊，前者總是找不準(zhǔn)自己的定位；后者是另外一個(gè)世界，讓人感覺不愧是工程師思維所主導(dǎo)公司的產(chǎn)品。Hype3之后我就沒用過了不多說，聽說他們挺專注于HTML5的。Principle和InVision Studio 一開始都采用了比較迷的元素識(shí)別方式，后來Principle不知哪個(gè)版本開始使用順應(yīng)直覺的「圖層命名」來識(shí)別跨畫板的同一元素，這一點(diǎn)上Drama一開始就在官網(wǎng)明確說明了。InVision Studio到現(xiàn)在依然不支持，這導(dǎo)致一旦我在后續(xù)畫板丟失了什么元素想要回頭補(bǔ)齊時(shí)，InVision Studio直接無視了。但I(xiàn)nVision Studio明顯在UI繪制層面上更優(yōu)于Principle，或者說Principle幾乎沒什么元素選擇器，大部分資源需要依靠Sketch或Figma來導(dǎo)入（而且圖層效果支持并不全），涉及到臨時(shí)編輯的話更是需要返工非常麻煩。而后Adobe XD開始對(duì)InVision Studio補(bǔ)刀，除了組件動(dòng)畫和支持圖層命名識(shí)別外，其「自動(dòng)制作動(dòng)畫」甚至連矢量圖形的錨點(diǎn)也能追蹤，加上其「原特色」功能重復(fù)網(wǎng)格（雖然早已不是特色），可以說是Windows設(shè)計(jì)用戶除Figma外（？）的首選設(shè)計(jì)工具了。