阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

設計 設計師 JSON 大設計 動畫 iOS 技術 獅覺設計工坊 2019-07-11

阿里作為中國互聯網企業的標杆,不僅一直在為廣大人民群眾提供快捷便利的服務。也不斷引領行業,在各個專業領域,給專業人員提供了優質的工具與服務。對設計師而言,無論是每年一度的 UCAN大會,還是 Kitchen、語雀、Ant Design 等設計開發工具,都給廣大設計師帶來很大的便利。

而最近,阿里又推出了一款基於 Lottie 的動效設計平臺 ── 獁良。能夠快速生成設計師想要的動態效果,並交付給開發,極大地提高了設計效率和設計還原度。

獁良是什麼?

它是一個積累了很多通用動效素材的平臺,讓不會動效的同學們也能基於動效庫和素材庫快速生成一個通用動效創意,你只需要簡單地編輯圖片、顏色或者文字即可。同時平臺集成了以 Lottie 為代表的動效技術,讓曾經令人苦惱的安裝包大小和性能問題一併解決。

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

△ 官網:https://design.alipay.com/emotion

獁良的應用場景

獁良支持全平臺 iOS、Android、H5、小程序。無論是營銷展位、活動頁面、空狀態還是產品icon。獁良編輯器對接投放平臺,一站式完成動效創意製作和投放。

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

豐富的動效素材能夠滿足多種場景需要。

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

獁良怎麼用?

方式一:基於模版直接製作(適用於設計師進行動態banner製作)

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

  1. 選擇模版
  2. 從動畫倉庫選擇動畫進行當前動畫的替換
  3. 通過替換圖片或修改顏色來自定義動畫
  4. 自定義模板文字內容
  5. 選擇模板背景圖片
  6. 完成編輯選擇是否帶背景(banner模版默認帶背景)
  7. 導出成功下載 json

方式二:自定義畫布製作(適用於設計師進行模板覆蓋不到的動效應用場景)

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

使用獁良一分鐘做出來的效果,大家感受下:

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

體驗感受

綜合體驗了一下獁良,相對於鹿班人工智能隨意擼圖。猛良其實是一款基於人工的動效模板網站。所有的動態效果都是設計師提前做好的。基於 Lottie 的特性,將可編輯的屬性進行模塊化。

說到這裡有些設計師可能有疑問了,Lottie 究竟是什麼?在優設已經有相關文章介紹的比較全面了,這裡就不贅述了,閱讀鏈接:http://www.uisdc.com/tag/lottie/。

簡言之 Lottie 就是一個快速將 AE 中設計的動效快速調出,並且開發可以直接調用的動效庫。

Lottie 的原理是將矢量圖形和動態效果通過代碼實現,複雜的圖形導出圖片資源。最終生成 json 文件+圖片資源。獁良所做的就是,將 json 裡的顏色屬性提取出來,用戶可以從外部修改。同樣只需要替換圖片資源,就可以讓用戶自己設計的圖形根據 json 寫好的運動方式來展示。如果你把一隻移動的豬替換成貓了,那麼你看到的效果就是一隻移動的貓。

而它的文字編輯功能,我覺得就比較神奇了。因為 Lottie 貌似不能從外部修改字體,應該是阿里自己寫的。如果有知道的同學也歡迎解惑。因為我們在實際工作中經常遇到這樣的問題,就是如果動效包含文本了,需要適配國際化,就沒法從外部修改語言。如果能解決這個問題,將會減少很多麻煩。

從現有的素材來看,其主要應用場景還是電商和運營方面。相信未來會增加更多的素材和應用場景。希望以後能夠開放出讓設計師可以將自己做的動效分享出來供大家使用,或者提供優質付費內容也是不錯的選擇。

就個人的工作經驗來看,Lottie 還是有豐富的應用場景的。比如可以做動態圖標、動態閃屏頁、表情貼紙、直播禮物、空白頁、動態banner……

其實 Lottie 官方社區也有很多的動效資源,都是來自全世界的設計師上傳的,大家可以去下載參考,如果要商用,可能需要聯繫作者。

阿里新開發了一款神器,零基礎也能輕鬆做出酷炫動效

△ 附上鍊接:https://lottiefiles.com/popular

本文資料,很多都是來自語雀的分享。再次感謝相關人員的辛勤付出。大家可以在此處查看獁良的完整介紹:https://www.yuque.com/dapolloali/news/ui43vg。

再次附上官網:https://design.alipay.com/emotion

因為獁良是基於 Lottie 的工具,所以有相關基礎的設計師很容易上手。還不瞭解的同學也可以在各大設計網站搜索到。

相關推薦

推薦中...