综合久久国产九一剧情麻豆,国产精品99久久久久久宅男 ,国产韩国精品一区二区三区久久

<li id="kg4ii"></li>

開發(fā)協(xié)作-切圖類別與規(guī)范

2019-6-16 鶴鶴

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

一個互聯(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ā)所需要的素材或圖片。

合格的、嚴(yán)謹(jǐn)?shù)那袌D可以大大減少技術(shù)人員開發(fā)返工率，減少技術(shù)人員的開發(fā)工期，提升開發(fā)流暢度，從而減少項(xiàng)目人力成本，最終開發(fā)出有利于交互，擁有良好視覺感的產(chǎn)品。

切圖標(biāo)注作為連接UI設(shè)計(jì)到技術(shù)開發(fā)兩者的工作模塊，缺其不可。熟悉工具使用、理解設(shè)計(jì)尺寸與切圖倍數(shù)的關(guān)系，設(shè)計(jì)師才能在切圖時(shí)進(jìn)行判斷：目前的設(shè)計(jì)稿尺寸與切圖單位是否正確匹配。

一、切圖標(biāo)注

如今，設(shè)計(jì)切圖插件能夠?qū)⒃O(shè)計(jì)稿里所選中的圖層、圖層組按不同開發(fā)規(guī)范寬度，倍數(shù)、進(jìn)行合并裁剪切片。與傳統(tǒng)切圖方法“調(diào)整圖像尺寸-選中切圖圖層/圖層組-調(diào)整畫布尺寸-導(dǎo)出web所用格式”相比，這一系列“動作”被進(jìn)行了一鍵化處理，只需要在插件中選擇好開發(fā)語言、保持文件夾位置便可一鍵標(biāo)記或?qū)С觯瑯O大地減縮了對每一個切圖素材都需要進(jìn)行一系列繁瑣流程的操作。

二、Lanhu插件

藍(lán)湖插件在設(shè)計(jì)稿做切片標(biāo)記，上傳至平臺的畫板便帶有切圖下載。

三、Cutterman插件

3種開發(fā)語言（iOS，Android，Web）：根據(jù)不同的項(xiàng)目選擇不同的開發(fā)語言，下方小箭頭可進(jìn)行素材輸出“倍數(shù)”選擇。

倍數(shù)：插件在導(dǎo)出選中圖層時(shí)以“@2x”和“XHDPI”為標(biāo)準(zhǔn)進(jìn)行對設(shè)計(jì)稿進(jìn)行等比放大縮小，如750px寬度的設(shè)計(jì)稿導(dǎo)出“@3x”和“@1x”時(shí)，導(dǎo)出切圖時(shí)會分別放大1.5倍和縮放至0.5倍，然后進(jìn)行圖層導(dǎo)出。

導(dǎo)出選中圖層：插件根據(jù)已選語言、倍數(shù)，對已選中的所有圖層、圖層組進(jìn)行合并裁剪然后導(dǎo)出。裁剪大小為所有圖層合并后總寬度高度。

固定尺寸：插件在導(dǎo)出選中圖層時(shí)對已選中的所有圖層、圖層組進(jìn)行合并后，再調(diào)畫布或者圖像至固定尺寸大小，然后進(jìn)行圖層導(dǎo)出。已選圖層大小〉固定尺寸設(shè)定，則被調(diào)整圖像，素材被壓縮。已選圖層大小〈固定尺寸設(shè)定，則被調(diào)整畫布，圖層素材大小不變，素材尺寸變?yōu)楣潭ǔ叽绱笮　?

四、設(shè)計(jì)稿尺寸與切圖倍數(shù)

UI設(shè)計(jì)師需要在正確的設(shè)計(jì)稿尺寸下進(jìn)行切圖，切圖素材才能正常供給開發(fā)人員使用。否則產(chǎn)品開發(fā)落地后會出現(xiàn)圖標(biāo)變形，像素低下等情況。

手機(jī)端常用的設(shè)計(jì)尺寸與它們對應(yīng)的切圖倍數(shù)：

APP-iOS端：采用750x1334的來設(shè)計(jì)，@2x切圖直接適配750x1334 分辨率的機(jī)型，并向上向下適配主流分辨率（@2x/@3x）

設(shè)計(jì)稿750x1334px——切圖倍數(shù)iOS@2x，iOS@3x

APP-Android端：采用720 x 1280來設(shè)計(jì)，XHDPI切圖直接適配720 x 1280分辨率的機(jī)型，并向上向下適配主流分辨率（XHDPI/XXHDPI）

設(shè)計(jì)稿720x1280px——切圖倍數(shù)XHDPI，XXHDPI

微信小程序（它的單位都是以i6的750px為劃分點(diǎn)）

設(shè)計(jì)稿750x1334px——切圖倍數(shù)png24

手機(jī)端網(wǎng)頁、公眾號鏈接等（與微信小程序統(tǒng)一使用i6，方便做單位轉(zhuǎn)化）

設(shè)計(jì)稿750x1334px——切圖倍數(shù)

五、設(shè)計(jì)搞尺寸與切圖倍數(shù)對應(yīng)關(guān)系

APP-iOS

APP-Android

微信小程序

手機(jī)端網(wǎng)頁、公眾號鏈接

注意事項(xiàng)

必須要在正確的畫布尺寸上切圖，如不能在750px寬度的設(shè)計(jì)稿上去切XHDPI，XXHDPI圖，必須要在720px上處理XHDPI，XXHDPI圖。

關(guān)于750px設(shè)計(jì)稿上切@2x，@3x圖時(shí)，只要所選圖層是智能對象或者是矢量圖層，就不用擔(dān)心分辨率問題。

六、切圖格式與大小

切圖格式常用PNG，這是因?yàn)镻NG體積小（K值），減少安裝包大小；無損壓縮，保持素材清晰度；支持透明效果，只保留圖層內(nèi)容本身。也是由于PNG圖片的特點(diǎn)，給切圖帶來了3個需要注意的知識點(diǎn)：

雙數(shù)像素切圖：750x1334px與720x1280px的切圖資源大小都必須為雙數(shù)像素，才能保證開發(fā)時(shí)素材被高清顯示。

實(shí)際切圖與展示區(qū)域（桌面圖標(biāo)）：桌面圖標(biāo)/應(yīng)用icon會被運(yùn)用在不同的位置，比如手機(jī)桌面，產(chǎn)品平臺，手機(jī)系統(tǒng)列表……因此在輸出桌面圖標(biāo)切圖素材時(shí)，不需要對桌面圖標(biāo)切圖進(jìn)行圓角處理。

點(diǎn)擊區(qū)域大小：畫布大小≠素材大小，一般情況下素材分兩種，裝飾素材與可點(diǎn)擊素材，裝飾素材直接按圖層貼邊切圖，點(diǎn)擊素材需要考慮點(diǎn)擊區(qū)域的位置與大小，適當(dāng)調(diào)整素材的畫布，再進(jìn)行素材切圖。

內(nèi)存大小：為了方便用戶再使用產(chǎn)品中快速加載頁面，需要對大素材或者圖片進(jìn)行壓縮，常用的工具有ppduck、熊貓壓圖，都是業(yè)內(nèi)較優(yōu)秀圖片壓縮工具，壓縮出來既保持了清晰度又減小的K值。（切圖全靠擼，工具靠百度）

七、切圖分類

八、CSS盒子模型——多狀態(tài)切圖

盒子模型是網(wǎng)頁開發(fā)中經(jīng)常用到的CSS技術(shù)思維模型，模型具有內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)4個屬性。所有的控件和信息都需要在每一個盒子里完成多狀態(tài)展示，所以可以先理解工程師們在搭建頁面時(shí)先在頁面上畫一個又一個的格子（盒子），它們都是矩形格子，與我們的切圖矩形相匹配，同一種控件的格子大小一摸一樣，就像復(fù)制粘貼一樣。

同一類型的控件與它們所有狀態(tài)的切圖都需要統(tǒng)一尺寸。