當(dāng)前位置：首頁 >ui設(shè)計(jì)培訓(xùn)

ui設(shè)計(jì)怎么切圖

作者：超帥怎心情發(fā)布時(shí)間： 2025-05-29 08:39:27 瀏覽量：1709次

互聯(lián)網(wǎng)產(chǎn)品從構(gòu)思到落地，大致分為以下環(huán)節(jié)：發(fā)現(xiàn)商機(jī) – 市場調(diào)研 – 頭腦風(fēng)暴 – 產(chǎn)品策劃/功能設(shè)計(jì) – 原型繪制 – 交互設(shè)計(jì) – 項(xiàng)目立項(xiàng) – 流向圖繪制 – UI設(shè)計(jì) – 切圖標(biāo)注 – 技術(shù)開發(fā) – 產(chǎn)品測試 – 項(xiàng)目上線。切圖是指在設(shè)計(jì)稿里整理出技術(shù)開發(fā)所需要的素材或圖片，今天我們就來聊一聊一名合格的ui設(shè)計(jì)師應(yīng)該如何切圖吧！

ui設(shè)計(jì)怎么切圖

其一切圖也是有著一定的原則的，這是什么原因呢？因?yàn)樵O(shè)計(jì)切圖輸出的目的是跟下游的工程師團(tuán)隊(duì)協(xié)同工作，那么在團(tuán)隊(duì)協(xié)作過程中其一應(yīng)該保證切圖輸出能夠滿足工程師設(shè)計(jì)效果圖的高保真還原的需求。其二切圖輸出應(yīng)該盡可能的降低工程師的開發(fā)工作量，避免因切圖輸出而導(dǎo)致的不必要的工作量。其三輸出的切圖應(yīng)當(dāng)盡可能的壓縮大小，以降低APP的總大小，提升用戶使用時(shí)的加載速度。所以切圖輸出應(yīng)當(dāng)做到切圖精準(zhǔn)、便與協(xié)同和壓縮大小。

ui設(shè)計(jì)怎么切圖

其二，切題一定要量身定做，要根據(jù)自己的所需要的切圖。UI切圖一般都會(huì)用到專門的軟件，比如摹客，Sketch、Adobe XD、PS的設(shè)計(jì)稿都支持，設(shè)計(jì)師只需在設(shè)計(jì)稿上進(jìn)行切圖標(biāo)記，然后用摹客的插件上傳到平臺(tái)，就可以自由下載和使用切圖了。以PS的插件為例：安裝摹客的PS插件，安裝好之后在PS的「窗口>擴(kuò)展功能」找到摹客插件，選擇并打開；標(biāo)記切圖：在完成的設(shè)計(jì)稿上，選中需要切圖的圖層或編組，點(diǎn)擊「標(biāo)記切圖」。當(dāng)圖層或編組的名稱前增加了“-e-”，「標(biāo)記切圖」變?yōu)椤溉∠袌D標(biāo)記」，就可以了。標(biāo)記切圖后，點(diǎn)擊插件的上傳按鈕，開發(fā)工程師就可以在摹客平臺(tái)自主下載不同尺寸和平臺(tái)的切圖了。大家對(duì)于UI設(shè)計(jì)切圖還有哪些不了解的內(nèi)容呢？可以多多關(guān)注火星時(shí)代官網(wǎng)，更多有關(guān)ui設(shè)計(jì)內(nèi)容等你來發(fā)現(xiàn)！