下面讓我們隆重介紹 Supernova 登場(chǎng)，一款旨在完美消除設(shè)計(jì)師與工程師之間鴻溝、大幅提高工作效率的移動(dòng)端開(kāi)發(fā)工具。它可以幫助設(shè)計(jì)師創(chuàng)建出可以「直接在iOS/Android設(shè)備上運(yùn)行」的原生 App（不是原型哦），幫助工程師們大大減少花費(fèi)在拼 UI 上的時(shí)間消耗。
Supernova 作為一款全能型工具，可以幫你自動(dòng)實(shí)現(xiàn)以下功能：
? 將設(shè)計(jì)圖層轉(zhuǎn)化為 iOS/Android 原生控件 ??
? 生成控件的樣式、對(duì)控件進(jìn)行進(jìn)一步設(shè)計(jì)
? 創(chuàng)建頁(yè)面之間的關(guān)系鏈
? 全自動(dòng)生成響應(yīng)式布局 ??
? 智能檢測(cè)、自動(dòng)切圖，快速導(dǎo)出資源
? 創(chuàng)建基礎(chǔ)動(dòng)效、對(duì)動(dòng)效進(jìn)行細(xì)節(jié)調(diào)整
? 導(dǎo)出代碼、資源、項(xiàng)目、字體、界面等 iOS、Android 或 React（即將支持）原生項(xiàng)目所需要的一切 ??
? Supernova 還很貼心！拯救無(wú)數(shù)個(gè)加班的深夜，預(yù)置深色/淺色兩套界面主題
最強(qiáng)殺手锏：你可以將任何（整理過(guò)的）Sketch 設(shè)計(jì)文件直接導(dǎo)入到 Supernova 中！
好了，讓我們繼續(xù)深入了解吧。
墻內(nèi)視頻鏈接 https://www.bilibili.com/video/av12693203/
（簡(jiǎn)書(shū)的Markdown模式居然不支持插入視頻……）
Supernova 不會(huì)按照 sketch 的方式來(lái)處理圖層，而是會(huì)將設(shè)計(jì)稿轉(zhuǎn)換成適用于App開(kāi)發(fā)的基礎(chǔ)內(nèi)容模塊——圖片、文本以及視圖，當(dāng)然所有設(shè)計(jì)信息都會(huì)被保留。
不僅如此，它還會(huì)優(yōu)化設(shè)計(jì)。比如移除冗余元素、修正顏色及透明度、創(chuàng)建或智能合并路徑、導(dǎo)出圖片資源、運(yùn)用遮罩等等?？傊?，程序員們?cè)僖膊粫?huì)因?yàn)樘幚磉@類(lèi)元素而煩躁到想砍人了!
在大多數(shù)情況下，基本的開(kāi)發(fā)模塊還不夠，我們需要更復(fù)雜的控件組來(lái)提供額外的功能，比如滾動(dòng)、加載數(shù)據(jù)、點(diǎn)擊事件等。Supernova 支持在各種控件組之間無(wú)縫切換，或是將多個(gè)控件和合并成諸如表格這類(lèi)更復(fù)雜的元素。
為了使你所做的修改一目了然、也為了清晰地體現(xiàn)應(yīng)用的運(yùn)行狀態(tài)，Supernova擁有獨(dú)特的實(shí)時(shí)預(yù)覽功能——當(dāng)你完成編輯之后，只需要點(diǎn)擊「Interactive」切換到交互式預(yù)覽模式，就可以看到整個(gè)App實(shí)際展現(xiàn)給用戶的面貌。在預(yù)覽模式下，從組件、動(dòng)效，到交互狀態(tài)、響應(yīng)式布局，全部都會(huì)得到展現(xiàn)。
以當(dāng)今的標(biāo)準(zhǔn)而言，制作能夠支持各種屏幕尺寸的響應(yīng)式 App 已經(jīng)是必須的基本要求了。
因此，我們已經(jīng)為大家實(shí)現(xiàn)了自動(dòng)布局功能。
Supernova 允許你使用與 iOS 或 Android 一樣的自動(dòng)布局系統(tǒng)來(lái)實(shí)現(xiàn)布局，并且已經(jīng)為你去除了最復(fù)雜的那部分工作——計(jì)算各種約束限制。我們會(huì)根據(jù)各種位置信息、外邊距、控件類(lèi)型、樣式以及內(nèi)容等等，自動(dòng)為你計(jì)算好。
在你創(chuàng)建了按鈕、表格之類(lèi)的控件之后，只需點(diǎn)擊「Solve screen」，自動(dòng)布局就完成了。再切換到「Interactive」模式，就可以在各種尺寸的設(shè)備上預(yù)覽了。
制作優(yōu)秀的動(dòng)效是非常復(fù)雜的，單純依靠人工操作把動(dòng)效調(diào)至恰到好處更是一件幾乎不可能的事情。為了使制作動(dòng)效變得輕松、簡(jiǎn)單而愉悅，Supernova 提供了一套完善的動(dòng)效引擎，它已經(jīng)為你考慮好了一切，可以直接將設(shè)計(jì)轉(zhuǎn)換成原生代碼。
你可以在動(dòng)效面板中實(shí)時(shí)預(yù)覽你所創(chuàng)建的動(dòng)效。可以手動(dòng)設(shè)計(jì)或是直接使用預(yù)設(shè)模板，關(guān)鍵幀、彈性動(dòng)效（spring animations）這些基本功能都包含在內(nèi)。所有這些動(dòng)效及其交互效果都會(huì)立即直觀地展現(xiàn)在你面前。
Supernova 支持直觀地以線條連接頁(yè)面來(lái)表示頁(yè)面之間的關(guān)系。
創(chuàng)建關(guān)系鏈時(shí)能夠以按鈕、表格、單元格、控件組等作為起點(diǎn)，連接至其他頁(yè)面，或者你也可以先直接將頁(yè)面連接起來(lái)，然后再去代碼中做進(jìn)一步調(diào)整。
如果你對(duì)在Supernova中創(chuàng)建的這一切已經(jīng)非常滿意了，那是時(shí)候?qū)?Supernova 中的原型導(dǎo)出為 iOS 或 Android 項(xiàng)目了（即將支持 React Native）。根據(jù)你的具體設(shè)置和導(dǎo)出平臺(tái)，會(huì)自動(dòng)生成：
最新版本的源代碼（Swift, Java, Kotlin）
UI框架及布局的定義 (Storyboards, XMLs)
各個(gè)分辨率的圖片資源
所需字體
可修改的項(xiàng)目工程，包括所有的關(guān)聯(lián)文件和相關(guān)配置
更能憑借這股黑魔法，吸引各路小伙伴們的注意力??
在經(jīng)歷了數(shù)年的開(kāi)發(fā)和數(shù)月的內(nèi)測(cè)之后，我們懷著萬(wàn)分激動(dòng)的心情，終于發(fā)布了這一版可以面向大眾的
Supernova。你現(xiàn)在可以免費(fèi)下載并在整個(gè)Beta測(cè)試階段中盡情使用。我們想讓 Supernova 滿足盡可能多的用戶、出現(xiàn)盡可能少的問(wèn)題。在將所有你認(rèn)為「Supernova 應(yīng)該能做到」的功能加進(jìn)產(chǎn)品之前，我們將竭力使 Supernova 更完美、并且保持免費(fèi)。
（Supernova 目前需要 OS X 10.12 以上的操作系統(tǒng)，將來(lái)會(huì)支持 Windows 系統(tǒng)）
聯(lián)系客服
