寻找利用3D和AR创建UI的最简单方法,来Vectary认识新开发的先进的SVG导入功能
UI设计前所未有的方式
随着创意产业的不断发展,想要突破界限并实现跨越式发展,就有必要掌握新趋势。专注于2D的平面设计人员在为新UI创建原型时通常使用基于矢量的格式和工具。 Vectary的新功能提供了3D和2D创意工具之间的交集,旨在简化设计过程。 3D设计平台Vectary是唯一一款能使3D和AR设计更接近2D设计师的软件。
该功能背后的主要思想是,今天的2D设计师肯定会成为未来的3D UI设计师。大多数界面现在都在慢慢过渡到AR和3D空间。
Vectary 新的SVG导入的优点
SVG导入为该领域带来了许多好处:
1.Vectary现在将SVG文件存储为矢量对象,您可以完全控制路径质量,网格划分和光栅化。
2.所有SVG文件设置都可以在一个面板中轻松调整,并在创作过程中随时复原。
3.您可以选择是将SVG文件用作2D图像还是3D几何图形。
如何开始利用3D和AR的UI模型的原型设计:
1.下载您的SVG文件。
2.将文件拖放到Vectary中。首先,它将显示为光栅化的2D图像。在右侧面板中,将出现一个SVG对象菜单。
3.在“几何体”选项中,您将找到可以编辑的3个属性:“分段数”,“偏移”和“挤出”。
通过提高“增长”值,您的对象将呈现3D外观 - 值越高,对象越厚。
“分段”定义转换为3D几何体的2D形状的质量 - 值越高,对象变得越精确。也请注意这将增加导出文件的大小。
“偏移”功能基本上是指基于SVG结构将对象分解为不同的层。然后将这些层分隔成第三维,从而为您提供分解视图。
4. 通过单击SVG的“几何体”设置中的“转换为几何体”,SVG文件将转换为3D。现在,通过进入编辑模式,可以调整3D模型的网格。
5. 基本的3D模型准备就绪。现在您可以开始添加各种背景和照明选项。
6. 完成后,您可以将项目导出为PNG文件,3D文件或将其嵌入到您的网站中,以便任何人可以将其视为具有AR预览的交互式3D元素。
提示:如何在Figma中设置正确的SVG文件以获得3D分层的UI效果
1. 您的SVG文件结构决定了3D中对象之间的间距。根结构中的图层或组越深,当在Vectary中使用设置“偏移结构”时,它显示得越深。
2. 当您在Figma中导出SVG文件时,请勾选“ 包含’id’属性”。
灵感启发
创建3D / AR UI
有许多使用矢量格式的UI中心和原型设计工具 - 如Figma,InVision Studio,Adobe XD,Framer和Sketch。现在,您可以将SVG格式的UI原型导入Vectary并创建3D模型。
创建3D和AR徽标
使用Vectary创建的3D徽标可以将其视为在网站上的交互式3D元素,或者是增强现实中的对象。只需将2D徽标的SVG文件拖放到场景中,然后在右侧面板的几何设置中使用挤出工具即可。
包装和变形UI和3D徽标
另一个使用示例是在对象周围包裹UI或徽标。这可以是可以在增强现实中呈现的UI或者包裹在瓶子上的标签。您可以尝试“变形”工具,例如“弯曲”来实现这一目标。特别是在创建模型和测试不同场景时,Vectary 新的SVG文件导入为2D设计人员开辟了新的可能性。
常见问题
1. SVG导入付费功能吗?
SVG导入和它的编辑属于免费计划。导出2D和3D文件属于付费计划。
2. 如何导入SVG文件?
您只需将文件拖放到场景中,或者可以通过单击菜单按钮并使用导入功能将其导入。
3. 我可以将我的作品嵌入网站吗?
当然可以!只需使用Vectary Viewer将文件嵌入您的网站,或生成链接并将其发送给任何人。只要他们的设备支持该功能,就可以在3D和AR中查看它。