上手親測!資深交互設計師推薦的6大必備神器(附教程) - 優設網 - UISDC

上手親測!資深交互設計師推薦的6大必備神器(附教程)

2015/09/22 41537評論區

6-best-interactive-design-tools-1

云南体彩网編者按:不想在毛病的軟件上花功夫?花五分鐘看完這篇!今天推薦的這6款交互設計工具全是經過?上手研究過的,優缺點都總結出來了,看完相信同學們就有謎底了。

1.??After Effects

云南体彩网你想在短時間內制作復雜演示效果。 請使用AE,曲線/錨點等使用MOTION V2腳本進行快速調劑(在曲線界面中 鼠標拖動選擇關鍵幀–>拖動腳本上的滑塊–>對比緩動曲線 獲得你想要的曲線效果,比其他腳本好用的在于曲線你可以進行自界說,表達式也好修改–>不會改的話學點JS咯),你熟練AE的話能很快獲得比較好的效果。AE缺點就是弗成交互+精準度很難控制,當然有一個點就是,你想要什么效果 AE都能實現。但是法式上能不克不及實現就難說啦。

2.?PIXATE,圖層類交互原型軟件

最近被GOOGLE購買了,然后免費了(說實話GOOGLE 可以說是產品殺手,進去的產品。。。我不敢茍同樓上們的那些說法)。

云南体彩网優點:可交互,共享性強,有團隊討論以及回復模塊(此處有點像justinmind)【有windows版本】,對GOOGLE MATERIAL DESIGN的支持比較好,MD相關預設會越來越多哦。

具體拜見:

缺點:圖層類軟件你們都理解,用AE做可交互已經很煩了,更何況再加上一個交互模塊,而且沒有時間線啊。

用Pixate煩人的一點是,我是用750*1334做的,然后導進去發現,這貨是依照375*667啊,而且不克不及直接從sketch粘貼,能別這么麻煩么。

云南体彩网Form和origami都是支持粘貼的。還有 動畫預設較少。不過GOOGLE是動畫狂,他們肯定會加預設的啊哈哈。聽說以后版本會支持code export,觀望中。

UI and Wireframe Kits

3. FRAMER STUDIO.

其實我并不想推薦,不過作為寫得起前端扛得起大旗的交互大神必用咯。

優點:你想干什么 就能干什么。而且分享起來特別簡單,所以有很多案例,我們可以直接把代碼拷過來用。關于這個你們可以去FRMAER的facebook群組看看就知道啦。基于coffeescript開發的你還能導入Sketch、PS文件。很方便。能夠精確控制每一個圖層的屬性。究竟人家是強大的JS,你還想怎樣。

缺點:你是視覺,你是交互,你大學/培訓班 研究過JS么。如果不會,請略過。

云南体彩网如果你會JS而且你寫代碼的速度很快,那恭喜,這絕對好用。其實說白了 就是套代碼模板。

4. FORM

節點類軟件。如果用過nuke的人 ,那就很熟悉咯,被GOOGLE買了。

優點:節點類軟件,原型的可維護性強。GOOGLE的孩子,MD設計規范里的那些動畫預設它最新版本里包含了。而且還有好多MD相關的PATCH了。還出了IOS SDK,用來創建自界說PATCH什么的,這塊學的其實是QC…準備跟開發快速融合..以后可能能夠導出MD 的android代碼呢,期待期待。

缺點:不克不及在電腦上預覽。腎六壞了還得跟同事借!還有就是支持從Sketch里粘貼了,結果不支持Retina,我用750 1334做的,結果發現Form是375 *667啊。我都得縮放成0.5能力繼續。嚇死朕了。還有就是不克不及共享啊。IOS工程師都是我們的大爺,你這樣還要給他裝FORM,會把他氣shi的!

Android UI Mockup Templates from GUI Toolkits Illustrator, Fireworks, Axure, OmniGraffle, Visio, Keynote and PowerPoint

5. ?ORIGAMI+QC

云南体彩网目前比較好用的節點類軟件,FACEBOOK的天才們出的。

云南体彩网優點:可導出有一定使用價值的代碼。?可維護性強。可在設備+電腦上都能預覽。現在靠譜點的就這個啦。用的人也相對多些。你可以直接從SKETCH粘帖過來。不過只有在使用POP ANIMATION?的PATCH時才可導出代碼哦。不過開發那邊真的能用這些代碼。關于和開發溝通這個下面再寫吧 。

缺點:有一些BUG不忍直視。

不克不及分享:有時給你的IOS工程師裝了QC也沒卵用。為什么?因為QC絕對燒死CPU+吃內存啊。就算你把FPS調到最低,如果圖層夠多夠復雜,會把工程師電腦卡死的。XCODE都死了工程師怎么活嘛。還有就是目前功能上缺陷比較多(好比Swipe不克不及選擇具體方向等,可以用自界說的PATCH進行界說,但是初級人員就用不了啊),有時你需要各種綜合各種條件各種patch能力獲得一個簡單的效果。

關于ORIGAMI和開發的結合問題 :

1、ORIGAMI只能夠導出POP animation PATCH相關的代碼(CLASSIC ANIMATION和BOUNCY ANIMATION都是不克不及的哦–聽說下個版本會有),代碼里面的位移(POSITION TRANSITION)信息都是絕對位置,所以適配上你和開發需要進一步討論解決方案。我的建議是?QC中的定位系統嚴格統一為TOP LEFT或CENTER等。這個對適配問題很重要,如果你的外部GROUP的定位用的CENTER,而里面圖層用的各種各樣的其他參考坐標系,那么你導出的位移信息基本沒卵用了。

云南体彩网2、如果有DELAY的話,請把DELAY放在POP ANIMATION PATCH的前面,如果不放在前面,代碼導出的主要屬性變更部分是空的(這應該是個BUG啊)。聽說下個版本會導出delay的數值。

現在是我把DELAY用文檔形式給開發,開發自己輸入。還有一些循環動畫也是弗成導出的,這些也是以文檔形式給的(其實就是讓IOS哥哥坐在我旁邊,用我的另一個顯示給他看效果,一個顯示器看我的QC工程直接溝通了,并沒有用什么卵文檔。如果你是大公司,流程化嘛肯定需要咯)。

3、你的ANCHOR POINT就算是TOP LEFT,圖層旋轉是不會繞他的左上角旋轉的。不過縮放是會縮放的。這個很坑啊。還有代碼導出并沒有導出ANCHOR POINT信息。

不過解決方案有的。但是都很麻煩。就是AE中的空白層類似的概念,留空切圖。

4、很給力的東東叫PAINTCODE.?可以直接把SKETCH粘貼的圖層轉為代碼。而且PAINTCODE的官方提供了能夠和ORIGAMI結合的PATCH,稍微研究一下(研究一兩個小時,看看PAINTCODE的那個APPLE WATCH教程),就能夠從PAINTCODE里解決ORIGAMI的一些雞肋的問題。

從安裝到實戰教程:

Android L Icon Grid PSD

6. HYPE 3 PRO.?

云南体彩网人家是做HTML5的啦。不過,如果你不會用Framer,那可以用這個,這個還有時間線,不過我喜歡從SKECTH里直接粘貼過來,然而Hype不支持粘貼過來,直接PASS了。不過做HTML界面確實很給力啊。簡直就是神器。不過用來做原型的人還是少數咯。

有夸FORM的,有夸AE的。作為MOTION DESINGER 還是最愛AE。

但從交互設計師的角度,關于哪個更好用,哪個淘汰,關我鳥事,哪個好用時用哪個。從目前看,ORIGAMI還是不錯的。不過這些軟件更新夠慢的。全都有問題的時候,只能選自己愛用的好了。NOODLE我沒提是因為它的BUG太多,還不足以有資格跟上面這些競爭。

【動效設計全攻略】

需要的思考:
《80%是沒需要的!動效該潛移默化OR引人注目?》

靠譜的總結:
《漲姿勢!動效設計如何從四個維度吸引你的注意力?》

真實的案例:
《引導有門道!YEP!教你用動效闡釋APP運作機制》

原文地址:
作者:

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量101萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/6-best-interactive-design-tools

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里