首款专为网页设计师打造的 3D UI 生成器

探索创建 3D 和 AR UI 的最简单方法。体验 Vectary 先进的 SVG 导入功能。

前所未有的 UI 设计方式

随着创意行业不断发展、突破边界、实现跨越，紧跟最新趋势变得至关重要。专注于 2D 的设计师在为新 UI 创建原型时，通常会使用矢量格式和工具。Vectary 的新功能融合了 3D 与 2D 创意工具，旨在简化设计流程。Vectary 是唯一一个能让 3D 和 AR 设计更贴近 2D 设计师的 3D 设计平台。

该功能背后的核心理念是，当今的 2D 设计师必将成为未来的 3D UI 设计师。如今，大多数界面都在慢慢向 AR 和 3D 空间过渡。

Vectary 全新 SVG 导入功能带来的优势

SVG 导入为该领域带来了诸多优势：

• Vectary 将 SVG 文件存储为矢量对象，因此你可以完全控制路径质量、网格化和栅格化。
• 所有 SVG 文件设置均可在单个面板中轻松调整，并可在创作过程中的任何时候还原。
• 你可以自由选择是将 SVG 文件作为 2D 图像还是 3D 几何体来处理。

如何开始制作 3D 和 AR UI 模型原型：

1. 下载你的 SVG 文件。
2. 将文件拖放到 Vectary 中。起初，它会显示为栅格化的 2D 图像。在右侧面板中，会显示 SVG 对象菜单。
3. 在 “几何” 选项卡中，你会发现 3 个可以编辑的属性：“Segments”、“Offset” 和 “Extrude”。通过增加 “Extrude” 值，你的对象就会呈现出 3D 外观 —— 数值越高，对象越厚。“Segments” 定义了 2D 形状转换为 3D 几何体时的质量 —— 数值越高，对象越精确。请注意，这会增加导出文件的大小。至于 “Offset” 功能，它基本上会根据 SVG 结构将对象分解为不同的图层。然后，这些图层会在第三维度上拉开距离，从而为你提供爆炸视图。
4. 右键点击对象，然后选择  “Convert To Geometry”，SVG 文件就会转换为 3D。现在你可以更改它的颜色和材质、使用 “Bend” 等各种 3D 功能，或者通过进入编辑模式（选中时按下 Enter 键）来编辑整个网格
5. 基础 3D 模型已准备就绪。现在你可以开始添加各种背景和光照选项。
6. 完成后，你可以将项目导出为 PNG 文件、3D 文件，或将其嵌入到你的网站中，让任何人都能将其作为带有 AR 预览的交互式 3D 元素进行查看。

提示：如何在 Figma 中导出 SVG 文件，以在 Vectary 中实现分层 3D UI 效果

1. 你的 SVG 文件结构决定了 3D 中对象之间的间距。文件根结构中的图层或组越深，在使用 “Offset by structure” 时，它在 Vectary 的 “Geometry” SVG 设置中显示得就越高。

创建 3D 和 AR Logo

使用 Vectary 创建 3D Logo，这些 Logo 可以作为网页上的交互式 3D 元素进行查看，也可以作为增强现实中的对象。只需将你的 2D Logo 的 SVG 文件拖放到场景中，并在右侧面板 of “Geometry” 设置中对其进行挤出。

在你的网站和增强现实中展示你的 3D UI 设计

包裹和变形 UI 与 3D Logo

另一个应用示例是将 UI 或 Logo 包裹在对象周围。这可以是在增强现实中展示的 UI，或者是包裹在瓶子上的标签。你可以尝试使用 “Deform” 工具（如 “Bend”）来实现这一效果。Vectary 全新的 SVG 文件导入功能为 2D 设计师开辟了新的可能性，尤其是在创建模型原型和测试不同场景时。