在交互設(shè)計(jì)UI設(shè)計(jì)稿完成后，我們可以通過Mockup樣機(jī)效果，快速展示設(shè)計(jì)的成果，好的Mockup可以化腐朽為神奇。本文UXD將為正在準(zhǔn)備作品集的同學(xué)們，介紹兩款好用的Mockup樣機(jī)效果插件。

本次介紹的優(yōu)秀插件均基于UXD日常教學(xué)使用平臺(tái)Figma之上的，作為一家頂級(jí)的交互/服務(wù)類設(shè)計(jì)咨詢和教育機(jī)構(gòu)，UXD目前的工作設(shè)計(jì)/設(shè)計(jì)教學(xué)工作流已經(jīng)完全和一線大廠，包含Google/Facebook/騰訊/阿里實(shí)現(xiàn)同步。

01?軸測視角Mockup

首先在figma的搜索界面搜索 angle，點(diǎn)擊install，下載Angle Mockups軸側(cè)視圖插件。

之后可以在angle官網(wǎng)angle.sh下載樣機(jī)模型。

樣機(jī)模型如圖所示：

選擇樣機(jī)模型中的UI界面圖片Screen。

之后鼠標(biāo)右鍵選擇plugins-Angle Mockups。

之后在App Design Frame中選擇需要展示的UI界面；Pixel Density可以根據(jù)項(xiàng)目要求進(jìn)行選擇；Quality也可以進(jìn)行調(diào)整。

之后點(diǎn)擊Apply Mockup，即可得到相應(yīng)的效果。

02?透視視角Mockup

在figma的搜索欄中搜索 Clay Mockups 3D，并且點(diǎn)擊安裝。

之后選中UI展示界面，鼠標(biāo)右鍵選擇plugins-Clay Mockups 3D。

展示效果如圖所示，其中可以改變設(shè)備的角度、相機(jī)角度與設(shè)備顏色信息。在確定好角度與顏色之后，點(diǎn)擊Save as Image即可保存圖片。

更多知識(shí)干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計(jì)分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對(duì)于設(shè)計(jì)初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計(jì)想法積累，基于這樣的基礎(chǔ)再進(jìn)行個(gè)性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費(fèi)拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計(jì)學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計(jì)專業(yè)的頂級(jí)設(shè)計(jì)學(xué)院。除了一對(duì)一設(shè)計(jì)課、基礎(chǔ)技能課程、小組課題、設(shè)計(jì)評(píng)圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計(jì)劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計(jì)理論系統(tǒng)講座、申請必備知識(shí)解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡(luò)

如有侵權(quán)請與我們聯(lián)系