打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
UI 超新星 Supernova

时至今日,开发一款移动端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 系统)

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
CrossApp简介
原荐顶去它的h5,我还是用js写原生跨平台app吧
iOS快速开发框架Bee-Framework应用和解析(一) --- 为什么使用Bee
H5 手机 App 开发入门:技术篇
Phonegap VS AppCan
原生开发与跨平台技术
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服