當前位置：首頁 >ui設(shè)計培訓

ui設(shè)計怎么切圖

作者：腦洞君發(fā)布時間： 2025-06-29 08:39:27 瀏覽量：1718次

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

ui設(shè)計怎么切圖

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

ui設(shè)計怎么切圖

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