UI 超新星 Supernova —— 只需 10 分钟，Ske

时至今日，开发一款移动端App仍然是一个缓慢又繁琐的过程。先要做出设计，之后写代码时若想高度还原设计还需要再花费许多人力。我们对这一过程已经忍无可忍，觉得是时候带来些改变了！

下面让我们隆重介绍 Supernova 登场，一款旨在完美消除设计师与工程师之间鸿沟、大幅提高工作效率的移动端开发工具。它可以帮助设计师创建出可以「直接在iOS/Android设备上运行」的原生 App（不是原型哦），帮助工程师们大大减少花费在拼 UI 上的时间消耗。

Supernova 作为一款全能型工具，可以帮你自动实现以下功能：
✅ 将设计图层转化为 iOS/Android 原生控件 🔥
✅ 生成控件的样式、对控件进行进一步设计
✅ 创建页面之间的关系链
✅ 全自动生成响应式布局 🔥
✅ 智能检测、自动切图，快速导出资源
✅ 创建基础动效、对动效进行细节调整
✅ 导出代码、资源、项目、字体、界面等 iOS、Android 或 React（即将支持）原生项目所需要的一切 🔥
⭐ Supernova 还很贴心！拯救无数个加班的深夜，预置深色/浅色两套界面主题

最强杀手锏：你可以将任何（整理过的）Sketch 设计文件直接导入到 Supernova 中！
好了，让我们继续深入了解吧。

墙内视频链接 https://www.bilibili.com/video/av12693203/
（简书的Markdown模式居然不支持插入视频……）

从 Sketch 到 Supernova

Supernova 不会按照 sketch 的方式来处理图层，而是会将设计稿转换成适用于App开发的基础内容模块——图片、文本以及视图，当然所有设计信息都会被保留。
不仅如此，它还会优化设计。比如移除冗余元素、修正颜色及透明度、创建或智能合并路径、导出图片资源、运用遮罩等等。总值，程序员们再也不会因为处理这类元素而烦躁到想砍人了!

导入 Sketch 文件后创建出 App 所有页面——瞬间就能完成优化

原生控件 & 交互式预览

在大多数情况下，基本的开发模块还不够，我们需要更复杂的控件组来提供额外的功能，比如滚动、加载数据、点击事件等。Supernova 支持在各种控件组之间无缝切换，或是将多个控件和合并成诸如表格这类更复杂的元素。
为了使你所做的修改一目了然、也为了清晰地体现应用的运行状态，Supernova拥有独特的实时预览功能——当你完成编辑之后，只需要点击「Interactive」切换到交互式预览模式，就可以看到整个App实际展现给用户的面貌。在预览模式下，从组件、动效，到交互状态、响应式布局，全部都会得到展现。

将图层转换成复杂的控件——按钮、文本框、表格等

Starlight——响应式布局的自动生成引擎

以当今的标准而言，制作能够支持各种屏幕尺寸的响应式 App 已经是必须的基本要求了。
因此，我们已经为大家实现了自动布局功能。
Supernova 允许你使用与 iOS 或 Android 一样的自动布局系统来实现布局，并且已经为你去除了最复杂的那部分工作——计算各种约束限制。我们会根据各种位置信息、外边距、控件类型、样式以及内容等等，自动为你计算好。
在你创建了按钮、表格之类的控件之后，只需点击「Solve screen」，自动布局就完成了。再切换到「Interactive」模式，就可以在各种尺寸的设备上预览了。

“Solve screen”选项会为你创建好各种约束限制

动效

制作优秀的动效是非常复杂的，单纯依靠人工操作把动效调至恰到好处更是一件几乎不可能的事情。为了使制作动效变得轻松、简单而愉悦，Supernova 提供了一套完善的动效引擎，它已经为你考虑好了一切，可以直接将设计转换成原生代码。
你可以在动效面板中实时预览你所创建的动效。可以手动设计或是直接使用预设模板，关键帧、弹性动效（spring animations）这些基本功能都包含在内。所有这些动效及其交互效果都会立即直观地展现在你面前。

动效让按钮更鲜活

页面关系链

Supernova 支持直观地以线条连接页面来表示页面之间的关系。
创建关系链时能够以按钮、表格、单元格、控件组等作为起点，连接至其他页面，或者你也可以先直接将页面连接起来，然后再去代码中做进一步调整。

创建导航关系图

为开发原生应用而准备的自动导出功能

如果你对在Supernova中创建的这一切已经非常满意了，那是时候将 Supernova 中的原型导出为 iOS 或 Android 项目了（即将支持 React Native）。根据你的具体设置和导出平台，会自动生成：

• 最新版本的源代码（Swift, Java, Kotlin）
• UI框架及布局的定义 (Storyboards, XMLs)
• 各个分辨率的图片资源
• 所需字体
• 可修改的项目工程，包括所有的关联文件和相关配置
• 更能凭借这股黑魔法，吸引各路小伙伴们的注意力🔮

欢迎使用公开Beta测试版——免费开放中

在经历了数年的开发和数月的内测之后，我们怀着万分激动的心情，终于发布了这一版可以面向大众的
Supernova。你现在可以免费下载并在整个Beta测试阶段中尽情使用。我们想让 Supernova 满足尽可能多的用户、出现尽可能少的问题。在将所有你认为「Supernova 应该能做到」的功能加进产品之前，我们将竭力使 Supernova 更完美、并且保持免费。
（Supernova 目前需要 OS X 10.12 以上的操作系统，将来会支持 Windows 系统）

邮箱注册以获取下载链接: https://supernova.studio/subscribe/
官方网站：https://supernova.studio/
教程文档：https://docs.supernova.studio/
或加入我们的 Facebook 和 Slack 一起讨论你想了解的内容、查看即将发布的新功能，比如 React 支持、创建网络、服务整合、插件等等。

期待你立即尝试体验我们的Beta测试版，Supernova 欢迎你❤️

译者：UXplayer , shimomiaizo
原文链接： Introducing Supernova
本译文已获得开发者授权，欢迎转载，转载请保留此段信息。