尋找利用3D和AR創(chuàng)建UI的最簡單方法脉幢,來Vectary認(rèn)識新開發(fā)的先進(jìn)的SVG導(dǎo)入功能
UI設(shè)計前所未有的方式
隨著創(chuàng)意產(chǎn)業(yè)的不斷發(fā)展辜伟,想要突破界限并實(shí)現(xiàn)跨越式發(fā)展,就有必要掌握新趨勢。專注于2D的平面設(shè)計人員在為新UI創(chuàng)建原型時通常使用基于矢量的格式和工具抄谐。 Vectary的新功能提供了3D和2D創(chuàng)意工具之間的交集,旨在簡化設(shè)計過程扰法。 3D設(shè)計平臺Vectary是唯一一款能使3D和AR設(shè)計更接近2D設(shè)計師的軟件蛹含。
該功能背后的主要思想是,今天的2D設(shè)計師肯定會成為未來的3D UI設(shè)計師塞颁。大多數(shù)界面現(xiàn)在都在慢慢過渡到AR和3D空間浦箱。
Vectary 新的SVG導(dǎo)入的優(yōu)點(diǎn)
SVG導(dǎo)入為該領(lǐng)域帶來了許多好處:
1.Vectary現(xiàn)在將SVG文件存儲為矢量對象,您可以完全控制路徑質(zhì)量祠锣,網(wǎng)格劃分和光柵化酷窥。
2.所有SVG文件設(shè)置都可以在一個面板中輕松調(diào)整,并在創(chuàng)作過程中隨時復(fù)原伴网。
3.您可以選擇是將SVG文件用作2D圖像還是3D幾何圖形蓬推。
如何開始利用3D和AR的UI模型的原型設(shè)計:
1.下載您的SVG文件。
2.將文件拖放到Vectary中是偷。首先拳氢,它將顯示為光柵化的2D圖像。在右側(cè)面板中蛋铆,將出現(xiàn)一個SVG對象菜單馋评。
3.在“幾何體”選項中,您將找到可以編輯的3個屬性:“分段數(shù)”刺啦,“偏移”和“擠出”留特。
?通過提高“增長”值,您的對象將呈現(xiàn)3D外觀 - 值越高,對象越厚蜕青。
?“分段”定義轉(zhuǎn)換為3D幾何體的2D形狀的質(zhì)量 - 值越高苟蹈,對象變得越精確。也請注意這將增加導(dǎo)出文件的大小右核。
?“偏移”功能基本上是指基于SVG結(jié)構(gòu)將對象分解為不同的層慧脱。然后將這些層分隔成第三維,從而為您提供分解視圖贺喝。
?????4.? ? 通過單擊SVG的“幾何體”設(shè)置中的“轉(zhuǎn)換為幾何體”菱鸥,SVG文件將轉(zhuǎn)換為3D。現(xiàn)在躏鱼,通過進(jìn)入編輯模式氮采,可以調(diào)整3D模型的網(wǎng)格。
?????5.? ? 基本的3D模型準(zhǔn)備就緒∪究粒現(xiàn)在您可以開始添加各種背景和照明選項鹊漠。
?????6.? ? 完成后,您可以將項目導(dǎo)出為PNG文件茶行,3D文件或?qū)⑵淝度氲侥木W(wǎng)站中躯概,以便任何人可以將其視為具有AR預(yù)覽的交互式3D元素。
提示:如何在Figma中設(shè)置正確的SVG文件以獲得3D分層的UI效果
?1. 您的SVG文件結(jié)構(gòu)決定了3D中對象之間的間距畔师。根結(jié)構(gòu)中的圖層或組越深楞陷,當(dāng)在Vectary中使用設(shè)置“偏移結(jié)構(gòu)”時,它顯示得越深茉唉。
?2.? 當(dāng)您在Figma中導(dǎo)出SVG文件時,請勾選“ 包含’id’屬性”结执。
靈感啟發(fā)
創(chuàng)建3D / AR UI
有許多使用矢量格式的UI中心和原型設(shè)計工具 - 如Figma度陆,InVision Studio,Adobe XD献幔,F(xiàn)ramer和Sketch《現(xiàn)在,您可以將SVG格式的UI原型導(dǎo)入Vectary并創(chuàng)建3D模型蜡感。
創(chuàng)建3D和AR徽標(biāo)
使用Vectary創(chuàng)建的3D徽標(biāo)可以將其視為在網(wǎng)站上的交互式3D元素蹬蚁,或者是增強(qiáng)現(xiàn)實(shí)中的對象。只需將2D徽標(biāo)的SVG文件拖放到場景中郑兴,然后在右側(cè)面板的幾何設(shè)置中使用擠出工具即可犀斋。
包裝和變形UI和3D徽標(biāo)
另一個使用示例是在對象周圍包裹UI或徽標(biāo)。這可以是可以在增強(qiáng)現(xiàn)實(shí)中呈現(xiàn)的UI或者包裹在瓶子上的標(biāo)簽情连。您可以嘗試“變形”工具叽粹,例如“彎曲”來實(shí)現(xiàn)這一目標(biāo)。特別是在創(chuàng)建模型和測試不同場景時,Vectary 新的SVG文件導(dǎo)入為2D設(shè)計人員開辟了新的可能性虫几。
常見問題
1. SVG導(dǎo)入付費(fèi)功能嗎锤灿?
SVG導(dǎo)入和它的編輯屬于免費(fèi)計劃。導(dǎo)出2D和3D文件屬于付費(fèi)計劃。
?2. 如何導(dǎo)入SVG文件?
您只需將文件拖放到場景中呜舒,或者可以通過單擊菜單按鈕并使用導(dǎo)入功能將其導(dǎo)入激才。
?3. 我可以將我的作品嵌入網(wǎng)站嗎?
當(dāng)然可以钟哥!只需使用Vectary Viewer將文件嵌入您的網(wǎng)站,或生成鏈接并將其發(fā)送給任何人。只要他們的設(shè)備支持該功能浪箭,就可以在3D和AR中查看它。