Bendi新闻
>
新一代跨平台UI开发工具VGG——无代码还原设计稿的静态视觉效果

新一代跨平台UI开发工具VGG——无代码还原设计稿的静态视觉效果

6月前

背景

VeryGoodGraphics(VGG)是一种新型跨平台 UI 开发工具,倡导 Design as Code 的理念,支持无代码将设计稿变为 UI。

VGG 底层的运行时是一个开源的矢量图形引擎,支持将 UI 设计稿嵌入任意应用中 ,并将其精确渲染为可交互的用户界面。

VGG 运行时的硬核能力我们将拆分为系列文向大家介绍,本文将重点介绍 VGG 对静态视觉效果的高质量还原。该系列文章包括:

  • 精准还原设计稿中的静态视觉效果
  • 精准还原设计稿中的动态交互效果
  • 跨平台、对开发框架的嵌入式支持


使用 Figma 做设计

Figma 设计中会包含复杂的矢量图形,他们可以在任何级别缩放而没有马赛克。而且还有许多高级视觉效果,例如支持多重阴影和平滑圆角等特性。这里我们拿使用了这两个特性的 VGG 首页的设计稿来举例说明。

VGG 首页的 Figma 设计稿

让我们仔细看一下使用了这两个特性的地方:

由 Figma 的 SmoothShadow 插件实现的光滑阴影,包含了 8 重阴影

使用平滑圆角特性实现的“苹果圆”按钮


传统低代码实现思路

鉴于这样的设计,如果开发人员想要使用 HTML 和 CSS 开发这些视觉效果,可能会很棘手、耗时,而且最终实现的效果性能较差。比如说上述的“苹果圆”按钮,其实在 CSS 没有好的办法实现。在这里我们就不展开基于代码实现的讨论。


传统低代码也是解决思路之一。我们可以利用低代码工具将这个设计快速发布为网站。例如:使用流行的低代码网站构建器 Framer,Framer 提供 Figma 插件,允许用户将 Figma 设计导入到 Framer 的工作区。


使用 Figma-to-HTML-with-Framer 插件

基于这个插件,我们可以通过复制粘贴在 Framer 工作区中得到与 Figma 中相同的设计。然后借助 Framer 的发布能力,我们可以立即获得一个可公开访问的网站。

Framer 工作空间

使用 Framer 发布的网站


但,在这里您是否注意到页面上奇怪的视觉效果?


首先是第一眼就能看出来的问题:大部分文本位置都不正确;一些边框有一些讨厌的黑色;VGG Logo 周围有奇怪、并且被截断的灰色区域。


如果进一步观察,会发现更多的问题,例如:缺少平滑圆角功能、文本布局的宽度不正确等等。


详细视觉效果对比


从设计师的角度来看,Framer 无法满足他最初的设计意图。而且在大多数情况下,设计师也会因为各种原因向开发者妥协,得到一个哭笑不得的应用或者网站。


使用 VGG 精准还原

得益于 VGG 的跨平台渲染引擎,无论是设计师还是开发者,都能够以更快的速度实现更精准的视觉效果还原。


欢迎观看我们第一个面向开发者的视频教程《如何在 6 分钟内开发和修改 VGG 落地页》:

在这个视频当中,我们以 VGG 主页为例,演示了 VGG 实现的高质量静态渲染效果。下面是使用 VGG 构建的最终网站的样子


但这只是冰山一角。
VGG 拥有完整的矢量图形规范,它流行设计格式的超集,包括 Figma、Sketch 和 Adobe Illustrator。VGG 社区正在不断将这些视觉效果实现并集成到 VGG 运行时当中。


后续我们也会有一系列的文章干货,向大家详细阐述 VGG 的每一个特性,以及相比之下 SVG 会存在的问题。

总结


本软文主要简单介绍了设计工具中的复杂视觉效果,低代码工具的无能为力,以及 VGG 对这种静态视觉效果的精确还原能力。

在接下来的文章中,我们将继续发表一些软文章,介绍 VGG 对动态交互的还原能力与跨平台能力,敬请期待。

VGG 运行时引擎现已开源,欢迎大家一起参与 VGG 开源社区共建。





关于 VGG

VGG(VeryGoodGraphics)是新一代跨平台应用开发解决方案。VGG 倡导 Design-as-Code 的理念,让开发者可直接基于设计稿编程,快速将设计原型交付为可交互的应用。
特性一:无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节,可直接将设计稿作为用户界面,省去前端与客户端开发者使用代码去复原设计稿的开发工作,降低他们与设计师之间的沟通摩擦成本。
特性二:原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式,支持在任意一种已有的 APP 基础上进行增量式开发,主持主流平台与框架。
特性三:脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块,在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四:高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容(Figma/Sketch/Adobe Illustrator),并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具,打通从应用 UI 设计到应用研发的完整流程。
  • GitHub:https://github.com/verygoodgraphics
  • 官网https://verygoodgraphics.com/
  • 博客https://blog.verygoodgraphics.com/

微信扫码关注该文公众号作者

来源:OSC开源社区

相关新闻

聆通科技—助听赛道的新一代引擎制造者:突破欧美技术封锁,助力行业变革发展面壁 WAIC 新发布:新一代高效低能耗架构面壁小钢炮、一键开发大模型 APP 的全栈工具集一秒打造直角肩,穿出小蛮腰,竟然有短袖可以达成这样的视觉效果?BCG工具及解决方案 | Growth AI的新一代收入管理功能字节豆包、武大提出 CAL:通过视觉相关的 token 增强多模态对齐效果别亲老板屁股了!海外视觉广告效果炸裂,创意上天!网友:很厉害,看的很爽!“明星减肥药”Wegovy的减重效果可长达4年;新型建筑设计或能预防全楼倒塌 | 环球科学要闻无弦吉他是怎么成为新一代电子废物之王的新一代的奥运营销,已经诞生240731 跑步的效果显现全景相机的失误用法,这意想不到的效果也太搞笑了!一文梳理有效提升RAG效果的方法洛杉矶影响力:99大华的新一代D5的效果图,到底“骗”了多少人?外国“长城”都是如何修建的,效果如何呢缓存与效果的极限拉扯:从MHA、MQA、GQA到MLA客厅不要茶几、沙发、背景墙?学别人这样设计,效果惊艳!【装修干货】思合基因:瞄准三大疾病领域开发新一代ASO药物【5月CFA密卷】最后一套题刷出10倍的效果!宫内自组装、消除植入疼痛感,它研发出新一代无框架节育器老师我可以用AI降重吗?AI降重的效果好吗?老师:可以是可以,就是……眼霜用不对,一年老3岁!这款片仔癀高效抗老眼霜,效果无敌了!吴恩达:别光盯着GPT-5,用GPT-4做个智能体可能提前达到GPT-5的效果为什么你用D5出的效果图,这么假!
logo
联系我们隐私协议©2024 bendi.news
Bendi新闻
Bendi.news刊载任何文章,不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。文章信息的合法性及真实性由其作者负责,与Bendi.news及其运营公司无关。欢迎投稿,如发现稿件侵权,或作者不愿在本网发表文章,请版权拥有者通知本网处理。