上一篇認(rèn)識(shí)了切圖的主要方式和格式，文章鏈接：

這一篇，就針對(duì)切圖中常見(jiàn)的幾個(gè)問(wèn)題來(lái)做出解釋?zhuān)瑏?lái)看看具體的切圖實(shí)例。

首先第一個(gè)要討論的肯定是關(guān)于圖標(biāo)的切圖了，作為UI切圖占比最高的類(lèi)型，圖標(biāo)是最不應(yīng)該出問(wèn)題的一部分。

在我們圖標(biāo)分享的課程中提過(guò)，

文章鏈接：

課程鏈接：

圖標(biāo)本身的視圖區(qū)域和圖形尺寸是不同的，前者必然大于后者。對(duì)于布局和開(kāi)發(fā)來(lái)說(shuō)，只需要關(guān)注它的視圖尺寸。

所以任何圖標(biāo)都需要添加一個(gè)透明的視圖背景，用于在選中時(shí)可以清晰的看到它的邊緣并用于對(duì)齊和排版。

當(dāng)我們進(jìn)行圖標(biāo)切圖時(shí)，就一定要保證圖標(biāo)本身是帶有完整視圖區(qū)域的。但往往因?yàn)樵O(shè)計(jì)過(guò)程中包含大量的更改，或操作的不規(guī)范，導(dǎo)致圖標(biāo)的編組丟失，然后程序員就糊里糊涂的按圖形尺寸導(dǎo)出切圖，導(dǎo)致同級(jí)圖標(biāo)中很多尺寸不一致，實(shí)現(xiàn)的界面布局就東倒西歪。

想要避免這些問(wèn)題，我的建議就是把圖標(biāo)編組后全部組件化，確保設(shè)計(jì)布局上的嚴(yán)謹(jǐn)性。同時(shí)，將這些組件的父級(jí)組件全部置入到同一個(gè)畫(huà)板中（設(shè)計(jì)規(guī)范的畫(huà)板）。

這么做的好處，一方面只要在畫(huà)布中全選它們，再進(jìn)行導(dǎo)出就能一次性完成圖標(biāo)的切圖。另一方面就是方便我們做檢查，包括圖標(biāo)本身格式的準(zhǔn)確性，以及圖標(biāo)不同狀態(tài)的完整性。

即使一定要通過(guò)藍(lán)湖、Codesign、Zeplin 等工具讓開(kāi)發(fā)自己切圖，我也建議上傳這個(gè)畫(huà)板讓它們直接在這個(gè)畫(huà)板中導(dǎo)出。

投影也是一個(gè)非常常見(jiàn)的問(wèn)題，尤其在移動(dòng)端設(shè)計(jì)中，我們經(jīng)常會(huì)設(shè)計(jì)一些帶有投影的視覺(jué)元素，不管是圖標(biāo)還是按鈕。但帶有投影的元素，在設(shè)計(jì)稿中的尺寸和導(dǎo)出的尺寸是不一致的。

因?yàn)樵谠O(shè)計(jì)軟件中，投影本身并沒(méi)有被記入圖層的長(zhǎng)和寬之中，而導(dǎo)出時(shí)則會(huì)將陰影所擴(kuò)散的所有區(qū)域都一起覆蓋，最終這個(gè)切圖文件的實(shí)際尺寸就大了非常多，自然在開(kāi)發(fā)布局中間距的參數(shù)就無(wú)法和設(shè)計(jì)稿中的對(duì)齊，造成一連串的問(wèn)題。

但也不代表重新計(jì)算間距就能解決切圖帶投影的問(wèn)題，如果多個(gè)帶有投影的切圖元素并排，那么圖層肯定有上下排序，就會(huì)出現(xiàn)上層的切圖投影覆蓋在下層的切圖圖形上。

要避免這個(gè)問(wèn)題，就必須使用代碼來(lái)編寫(xiě)投影。在我們導(dǎo)出帶有投影的切圖前，就需要先關(guān)閉投影導(dǎo)出，確保導(dǎo)出圖形和軟件中選中的尺寸一致。

但這還沒(méi)結(jié)束，代碼中實(shí)現(xiàn)的投影效果和設(shè)計(jì)稿中的投影是不一致的，尤其在移動(dòng)端，即使開(kāi)發(fā)中使用相同的設(shè)計(jì)參數(shù)實(shí)現(xiàn)效果也不一樣。這是因?yàn)橄到y(tǒng)的投影擴(kuò)散曲線和設(shè)計(jì)軟件是不一致的，這在我之前的投影分享中有提過(guò)。

確保開(kāi)發(fā)實(shí)現(xiàn)的效果最終和設(shè)計(jì)稿一致（或極為接近）也是切圖的一部分，所以你需要和開(kāi)發(fā)溝通，并根據(jù)他們做出來(lái)的效果給出參數(shù)調(diào)整反饋。

全屏切圖指的就是需要全屏覆蓋展示的圖片，最常見(jiàn)的就是啟動(dòng)閃屏中的廣告圖。

全屏切圖的主要矛盾是要適配多機(jī)型，不同機(jī)型的屏幕比例不同，所以如何確保不同機(jī)型的顯示正常？

這應(yīng)該是個(gè)非?；A(chǔ)的東西，但是今年到現(xiàn)在已經(jīng)好幾個(gè)人問(wèn)過(guò)我這個(gè)問(wèn)題了，最離譜的還有同學(xué)的開(kāi)發(fā)要求他導(dǎo)出點(diǎn)9圖來(lái)實(shí)現(xiàn)多機(jī)型適配……

在 iOS 之前的官方規(guī)范中有過(guò)說(shuō)明（更新后沒(méi)掉了），直譯過(guò)來(lái)很奇怪，叫信箱模式 (Letterboxing) 和郵筒(Pillarboxing) 模式。信箱模式就是縮放到覆蓋全屏，郵筒模式則是縮放到貼緊屏幕邊緣（類(lèi)似視頻全屏）。

全屏的圖像展示就是信箱模式，將原圖像進(jìn)行縮放，放大到完全覆蓋屏幕窗口的邊緣為止。如果有超出的部分，則直接裁切掉。當(dāng)我們使用全屏切圖的時(shí)候也要遵循一樣的邏輯，就是提前設(shè)計(jì)并導(dǎo)出一張大圖，讓它在不同的屏幕比例中隱藏掉邊緣的部分。

這個(gè)尺寸應(yīng)該以什么為標(biāo)準(zhǔn)可以和程序員核對(duì)，常用的有 720p 和 1080p，不需要使用過(guò)大的尺寸。同時(shí)，在設(shè)計(jì)過(guò)程中主體物盡量確保在畫(huà)面的 2/3 區(qū)域內(nèi)，確保在不同的比例下邊緣被隱藏也能正確顯示出來(lái)。

不管你用哪個(gè)尺寸，都得獨(dú)立常見(jiàn)一個(gè)畫(huà)板出來(lái)，而不是使用你項(xiàng)目的普通畫(huà)板尺寸，同時(shí)導(dǎo)出的文件只需要使用 1x 的 JPG 即可，避免圖像文件的體積過(guò)大，占用不必要的網(wǎng)絡(luò)資源或硬盤(pán)空間。

毛玻璃效果是個(gè)很常見(jiàn)的UI視覺(jué)效果，在iOS 系統(tǒng)中就有大量使用透明毛玻璃的場(chǎng)景和組件。

很多設(shè)計(jì)師在設(shè)計(jì)過(guò)程中也會(huì)添加毛玻璃，在軟件中實(shí)現(xiàn)使用的是 “背景模糊” 效果。但發(fā)現(xiàn)導(dǎo)出的時(shí)候這個(gè)圖層只有透明度但不能實(shí)現(xiàn)模糊。因?yàn)閳D層脫離軟件的環(huán)境，那么自然這個(gè)效果就消失了。直接把這個(gè)圖形丟進(jìn)開(kāi)發(fā)環(huán)境，實(shí)現(xiàn)的效果也只有普通的透明度。

解決這個(gè)問(wèn)題的方式有兩種，一種是放棄使用特殊的背景模糊。另一種，就是在導(dǎo)出切圖的時(shí)候，直接關(guān)閉帶有模糊的這個(gè)圖層，讓開(kāi)發(fā)在實(shí)現(xiàn)它的時(shí)候額外做一層毛玻璃層至于這個(gè)切圖的下方，然后使用相同的模糊參數(shù)……

你看，這是一個(gè)非常蛋疼的實(shí)現(xiàn)方法，這里還沒(méi)有討論不同系統(tǒng)對(duì)毛玻璃效果實(shí)現(xiàn)的差異。如果沒(méi)有絕對(duì)的必要，就盡量放棄在特殊切圖中應(yīng)用毛玻璃的效果。

響應(yīng)式廣告大圖，就是網(wǎng)頁(yè)中適配響應(yīng)式效果的廣告圖，常見(jiàn)于網(wǎng)站的頂部廣告圖或者全屏背景圖，比如下面的案例。

相信看到這個(gè)你們已經(jīng)會(huì)想到前面提的信箱模式了，只要做張圖進(jìn)行縮放不就行了？

對(duì)也不對(duì)，信箱模式的縮放是必要條件，但網(wǎng)頁(yè)設(shè)計(jì)中切圖的最大阻力就是對(duì)少數(shù)極限情況的匹配。比如這張圖像我們一般會(huì)導(dǎo)出 1080p 的 JPG 切圖，它的文件體積已經(jīng)不小了。

而現(xiàn)在很多顯示器的寬度是不止 1920px的，還有2560、3440、5120 等，要適配這些顯示器，光靠一張1080p 切圖強(qiáng)行放大是非常勉強(qiáng)的，而做4K以上的切圖那整個(gè)網(wǎng)站的圖片讀取可能就要等非常久的時(shí)間。

所以，為了解決這樣的問(wèn)題，在一開(kāi)始的設(shè)計(jì)方案上就會(huì)做出調(diào)整，讓廣告圖本身的邊緣使用純色，并給出一個(gè)相同顏色的背景，那么在瀏覽器寬度極大的時(shí)候，圖片本身達(dá)到最大值就不會(huì)繼續(xù)放大，而超過(guò)的區(qū)域會(huì)有銜接上的背景色，就能符合正常顯示的需要。

而沒(méi)有考慮到這個(gè)問(wèn)題的網(wǎng)站，在高分辨率模式下就會(huì)有空白區(qū)域，看起來(lái)非常不專(zhuān)業(yè)。

如果是輪播廣告圖，要實(shí)現(xiàn)這樣的方案就等于每張圖的背景色是不同的，而這個(gè)背景色顯然用16進(jìn)制代碼就能實(shí)現(xiàn)而不用我們切個(gè)純色背景圖出來(lái)。所以這就又增加一個(gè)問(wèn)題，需要后臺(tái)添加一個(gè)功能，每次上傳一張廣告圖還需要手動(dòng)設(shè)置背景色（也有自動(dòng)識(shí)別的，但是問(wèn)題更多）。

最后一個(gè)案例，就是一些復(fù)雜的邊框圖形了。最常見(jiàn)的就是大屏項(xiàng)目中，即使使用3D為主的主視覺(jué)區(qū)域，也會(huì)包含大量的普通二維圖形。

這些模塊想必有相關(guān)經(jīng)驗(yàn)的同學(xué)都沒(méi)少見(jiàn)，站酷、畫(huà)板、即時(shí)社區(qū)等都有大量的素材和案例。

這種圖形作為模塊背景，是不可能用代碼寫(xiě)出來(lái)的，所以肯定得切圖，但光把圖1：1 切出來(lái)有用嗎？

大概率沒(méi)用，因?yàn)楹芏啻笃另?xiàng)目是有響應(yīng)式需求的，當(dāng)頁(yè)面發(fā)生尺寸變化的時(shí)候，模塊也會(huì)發(fā)生尺寸的調(diào)整，所以如何保證這個(gè)背景切圖能有效的進(jìn)行縮放？

根據(jù)圖形的類(lèi)型和場(chǎng)景，實(shí)現(xiàn)的方法有很多種，這里就舉例其中一種。如果對(duì)安卓切圖足夠有經(jīng)驗(yàn)的同學(xué)應(yīng)該知道 .9 圖，即通過(guò)橫豎的某一像素點(diǎn)進(jìn)行延長(zhǎng)，確保圖形的任意拉伸，在網(wǎng)頁(yè)中這個(gè)邏輯也是可用的（實(shí)現(xiàn)得比安卓更早）。

設(shè)計(jì)師要在一開(kāi)始時(shí)設(shè)計(jì)一個(gè)樣式主要集中在左右兩側(cè)，中間可以橫向拉長(zhǎng)的模式，然后在切圖的過(guò)程中切出左右兩個(gè)部分和中間的一個(gè)像素（為了讓大家看清我拉長(zhǎng)了），并合并成雪碧圖（也叫Sprite精靈圖）。

通過(guò)這種做法，前端的實(shí)現(xiàn)就是在這個(gè)視圖區(qū)域左右引入相關(guān)的圖形，并在中間使用那條豎線進(jìn)行重復(fù) （repeat-x 水平重復(fù)）。如果高度上也要修改，那就需要切出四個(gè)角，和一條額外的橫線，加入高度重復(fù)的效果……

所以如果實(shí)現(xiàn)難度超過(guò)一定的范疇，成熟的設(shè)計(jì)師就肯定要規(guī)避這種復(fù)雜的樣式，轉(zhuǎn)用更容易被代碼實(shí)現(xiàn)的樣式，減少高光、異形、紋理的使用。

結(jié)尾

最后再重復(fù)一遍上一篇說(shuō)的，切圖是把切圖文件有效交付給程序員進(jìn)行開(kāi)發(fā)的過(guò)程，我們是要保證設(shè)計(jì)稿被有效落地的，同時(shí)還要關(guān)注實(shí)現(xiàn)它們的效率，而不是設(shè)計(jì)稿丟給程序員完不管不問(wèn)。

這些和切圖有關(guān)的認(rèn)知和知識(shí)儲(chǔ)備也是一個(gè)設(shè)計(jì)師最基礎(chǔ)的素養(yǎng)之一，很多同學(xué)一直在糾結(jié)如何成為高級(jí)設(shè)計(jì)，但依舊對(duì)這些核心技能不屑一顧，那是永遠(yuǎn)成長(zhǎng)不起來(lái)的，所以建議大家好好在項(xiàng)目中積累對(duì)應(yīng)經(jīng)驗(yàn)。

特殊的切圖方式遠(yuǎn)遠(yuǎn)不止我們提到的這些，剩下的就需要大家自己發(fā)揮了。

新一期B端產(chǎn)品設(shè)計(jì)課程還在招生中，掃描下方二維碼加我報(bào)名課程～

課程介紹：

想要變強(qiáng)的同學(xué)拉到文章底部加我二維碼，開(kāi)啟變強(qiáng)之路！