我們都知道UI設(shè)計剪紙是最重要的設(shè)計輸出。不規(guī)則的摳圖輸出命名規(guī)范也直接影響工程師能否很好地還原設(shè)計效果。網(wǎng)上這樣的教程有很多，大部分都比較籠統(tǒng)。今天我們將從兩個基本方面來教大家如何剪切圖片并命名。文章附帶圖片剪切工具，關(guān)注下載吧！

&剪切圖片

1、設(shè)計裁剪原則

設(shè)計切出輸出的目的是與下游工程團(tuán)隊協(xié)作。在團(tuán)隊協(xié)作過程中，首先要保證摳圖輸出能夠滿足工程師設(shè)計效果圖的高保真還原要求。

其次，削減產(chǎn)出要盡可能減少工程師的開發(fā)工作量，避免削減產(chǎn)出帶來不必要的工作量。因此，我們需要在程序中放置多組剪切圖，然后讓程序判斷“主人”手機的型號，并顯示不同的剪切圖。只有這樣，才能完美的呈現(xiàn)給用戶最好的體驗。最后，輸出的剪切圖像應(yīng)盡可能壓縮，以減少APP的總大小，提高用戶使用時的加載速度。因此，圖像切割輸出應(yīng)準(zhǔn)確、方便、協(xié)調(diào)、尺寸壓縮。

1. 切割資源的大小必須是偶數(shù)。

眾所周知，智能手機的屏幕尺寸都是偶數(shù)值。例如7的屏幕分辨率為750*1334 px。裁剪資源的大小必須為偶數(shù)，以保證工程師開發(fā)裁剪資源時高清顯示。因為1px是智能手機可以識別的最小單位。換句話說，在智能手機上，1 個像素?zé)o法分為各 0.5px 的兩部分。

因此，如果是奇數(shù)個摳圖，手機系統(tǒng)會自動拉伸摳圖，導(dǎo)致?lián)笀D元素邊緣模糊，導(dǎo)致開發(fā)出來的APP界面效果與原來的設(shè)計效果相差甚遠(yuǎn)。

2.剪切圖標(biāo)輸出多種平臺尺寸

在切割資源輸出中，圖標(biāo)切割輸出是至關(guān)重要的一環(huán)。開發(fā)過程中，由于各機型屏幕分辨率不同，需要針對部分大屏機型進(jìn)行適配。

為了適應(yīng)大分辨率手機（如7plus），圖標(biāo)在裁剪時需要輸出@2x和@3x剪圖。 @2x切口可以滿足大多數(shù)雙平臺車型的適配要求。 @3x 用于適配各種plus版本手機（后面會有文章專門講解適配問題）。 @3x 是 @2x 大小的 1.5 倍。例如，如果圖標(biāo)的 @2x 大小為 44px，則 @3x 大小為 66px。

3、為了提高APP加載速度，盡量減小圖片尺寸

在圖片裁剪資源的輸出中，圖標(biāo)裁剪是非常重要的一部分，比如新手引導(dǎo)頁、啟動頁、默認(rèn)圖片、廣告圖片等。一般圖片裁剪的文件體積都比較大，不利于用戶在使用應(yīng)用程序時加載頁面。因此，在剪切圖片時應(yīng)盡可能壓縮圖片文件的大小。

4. 對于可點擊的組件，請注意點擊區(qū)域不能小于88px。

44px的點擊面積值是在3（320×480px）普通顯示器下制定的?，F(xiàn)在手機的分辨率已經(jīng)有了很大的提高，這個數(shù)據(jù)自然需要與時俱進(jìn)。

在 (750*) 顯示屏上，44 像素的點擊區(qū)域變?yōu)?88 像素。但無論是320*480px尺寸中的44px，還是750*尺寸中的88px，換算成物理尺寸時，大致在7mm-9mm之間。所以在 @2x 中它是 44pt (88px)。蘋果的導(dǎo)航欄、列表和工具欄都充滿了神秘的數(shù)字44pt（88px）。我們在設(shè)計時還必須考慮手指點擊區(qū)域。因此，iOS官方的空間大小經(jīng)常顯示為88px的值。例如，菜單欄的高度為88px。

各處均為 44 磅（88 像素）

5、按鈕組件需要剪掉所有相關(guān)狀態(tài)并輸出。

在剪切圖片的過程中，不僅要輸出正常狀態(tài)下的剪切圖片，還要注意其他狀態(tài)下的剪切圖片，如正常狀態(tài)、點擊狀態(tài)、不可點擊狀態(tài)等。這也是設(shè)計師經(jīng)常犯的錯誤。例如，當(dāng)使用按鈕剪切圖片時，點擊剪切圖片的狀態(tài)可能會被忽略。因此，設(shè)計師在制作設(shè)計圖的時候，最好盡量將頁面上會出現(xiàn)的各種狀態(tài)都顯示出來，避免后期剪圖時漏掉狀態(tài)。

2. 切割輸出類型

1.桌面應(yīng)用程序圖標(biāo)剪切輸出

應(yīng)用程序的桌面圖標(biāo)會顯示在很多不同的地方，比如手機桌面、應(yīng)用商店、手機的設(shè)置列表等。因此，應(yīng)用程序的桌面圖標(biāo)需要輸出多種不同的尺寸。這兩個平臺對于相應(yīng)的桌面圖標(biāo)設(shè)計也有不同的輸出尺寸。輸出時，必須將兩個平臺的所有這些尺寸都輸出并切割成圖像。剪切桌面圖標(biāo)只需提供直角圖標(biāo)剪切，手機系統(tǒng)會自動生成圓角效果。

2.系統(tǒng)圖標(biāo)剪切輸出

一組圖片適配雙平臺：

iOS平臺（6plus版本除外）和平臺共享44*44px裁剪素材，可以實現(xiàn)一套裁剪適應(yīng)兩個平臺的開發(fā)。

適配大屏：

為了適應(yīng)6plus和7plus，單獨剪切了一組比原來的44*44px的剪切圖大1.5倍的剪切圖，即66*66px的剪切圖。

2.圖片類切割輸出

圖片摳圖主要是指需要完整摳圖的圖片，如啟動頁、新手引導(dǎo)頁、默認(rèn)提示、廣告圖片等。

同一類型的圖片切割一般應(yīng)保持相同的尺寸，以方便工程師開發(fā)和使用。另外，這些剪切圖像的文件一般都較大，在圖像剪切過程中需要控制剪切圖像文件的大小。

全屏剪切圖片類別：

偏切類：

空白頁提示案例圖：

3、動效元素剪切輸出

動效元素?fù)笀D一般是指應(yīng)用程序中加載動態(tài)效果所需的摳圖元素。例如，下拉加載動畫是由幾個剪切片連續(xù)播放形成的。

這些圖片按照序列號的順序播放。我們的頁面將它們稱為序列剪切圖片。順序圖片裁剪是UI設(shè)計過程中不可避免會遇到的問題。這種畫面裁剪需要設(shè)計者仔細(xì)考慮需求，保證動畫播放流暢自然。

序列圖剪切：

時序圖實現(xiàn)效果：

4. 可拉伸元件的切割輸出

可拉伸元素一般是指按鈕、輸入框等在裁剪過程中可以瘦身、壓縮的元素。通過瘦身和壓縮，這些元素可以大大減小圖像的大小，提高用戶應(yīng)用程序的加載速度。在iOS中，這種切割方法稱為平鋪切割，在中，這種切割方法稱為點九切割方法。

橫向拉伸和切割：

垂直拉伸切割：

5、不需要剪掉的部分

重新設(shè)計輸出中的許多元素不需要輸出。您可以直接使用系統(tǒng)原生的設(shè)計元素來修改參數(shù)。

作為設(shè)計師，你需要知道哪些元素需要被裁剪，哪些元素應(yīng)該與系統(tǒng)一起使用，以避免不必要的裁剪。例如，文本、卡片背景、線條和一些標(biāo)準(zhǔn)集合圖形不需要提供切口。

例如，搜索框只需標(biāo)明注釋中的尺寸、圓角尺寸、描邊粗細(xì)和顏色值。工程師會根據(jù)設(shè)計效果通過代碼來實現(xiàn)這個效果。

3. 縮小圖像尺寸的方法

1.點九切法

九點分割圖像是平臺上一種獨特的圖像處理方法。由于文件擴(kuò)展名為.9.png，因此稱為點九分割圖像方法。點九切圖的功能主要是適配各種安卓手機型號。這種方法可以在不破壞圖像效果的情況下，對圖像進(jìn)行水平和垂直拉伸。另一個重要的功能是減少不必要的圖像文件的大小，大大提高頁面加載速度。是平臺上重要的圖片切割方法。

制作第九點的軟件是“”。制作點九圖并預(yù)覽裁剪后的展開效果非常方便。非常方便。作為設(shè)計師，您還可以使用 PS 中的鉛筆工具來繪制傻瓜圖像。

下載：

下載鏈接：

第九點切割方法：

案例描述：

對于水平拉伸，只需在可拉伸區(qū)域做一個黑色標(biāo)記，并在周邊投影一條黑線：

對于水平和垂直拉伸，只需在可拉伸區(qū)域做一個黑色標(biāo)記，并在周邊投影一條黑線：

2.

使用“”智能png、jpg在線壓縮工具，剪切較大圖片并進(jìn)行壓縮，且不影響圖片質(zhì)量。在線壓縮工具可以在圖像質(zhì)量和文件大小之間找到完美的平衡。它不會降低圖像的視覺質(zhì)量，但會大大壓縮圖像尺寸。是一款強烈推薦的圖像壓縮工具，也是現(xiàn)在使用最廣泛的在線壓縮工具。

透明png圖片原始大小為57kb，壓縮后變?yōu)?5kb。圖片尺寸直接縮小了74%，但圖片效果的差異用肉眼基本無法區(qū)分。不得不說，智能壓縮效果實在是太神奇了。

簡要說明如何使用

1. 點擊紅框，本地選擇需要壓縮的鏡像文件。一次最多可以上傳 20 張圖像。每張圖片的總大小不超過5mb。

2. 點擊紅框中的下載按鈕sketch視覺設(shè)計教程，下載單個壓縮鏡像。如果您上傳了多張圖片，您可以選擇單擊全部下載按鈕一次性下載所有壓縮圖片。下圖是這次壓縮的大小比例，可以清楚的知道它的作用。

3. 恭喜您已經(jīng)完成壓縮。

3.（PS插件）

它是現(xiàn)在設(shè)計師最主流的圖片剪切工具，它可以自動輸出你需要的剪切圖片。大大減輕了設(shè)計人員的工作量，提高了繪圖效率。支持多種圖像格式、尺寸、形狀輸出，兼容、iOS、WEB等多種系統(tǒng)的一鍵輸出。下面介紹一下如何使用。此處不包含下載鏈接。您可以直接在PS擴(kuò)展功能中免費下載安裝。

1.一鍵剪切圖片，真正解放雙手

它讓你只需點擊一個按鈕，就能自動輸出你需要的各種圖片，快到你沒朋友了！

2.支持iOS平臺

輸出支持IOS平臺單雙圖，支持6/6P尺寸比例。

3.支持平臺

輸出支持平臺的各種分辨率和尺寸的圖片，XHDPI、HDPI等，全部自動輸出，節(jié)省您更多的時間和朋友一起玩。

4.支持多種圖像格式輸出

PNG、JPG、GIF都包含在內(nèi)，您還可以自己縮放和壓縮它們。從此告別所謂的“以網(wǎng)頁使用的格式保存”功能~~

5.合并多個圖層并分別輸出

層數(shù)太多？沒有關(guān)系！您可以選擇多個！支持選擇多個圖層合并輸出，也可以一層一層輸出，極其方便！

6.固定尺寸輸出

如果你想輸出固定大小的ICON，可以秒選擇多種姿勢~~

4.

它是最新的切割插件，使用非常簡單。它可以一鍵生成Html注釋文件sketch視覺設(shè)計教程，并且可以自動生成設(shè)計規(guī)范文件。非常高端。

下載鏈接：

雙擊完成安裝

＆姓名

關(guān)于剪切圖片的命名標(biāo)準(zhǔn)，這是UI設(shè)計師最基本的知識之一，但是非常有用。它可以幫助您高效地與同事和開發(fā)人員聯(lián)系，提高整體工作效率。建議學(xué)習(xí)。

關(guān)于切圖的命名標(biāo)準(zhǔn)，我個人認(rèn)為關(guān)鍵是團(tuán)隊必須有一個統(tǒng)一的規(guī)則，所有成員都嚴(yán)格遵守并與所有開發(fā)人員溝通，否則一切都是空談。

不同的團(tuán)隊使用不同的軟件。如果你經(jīng)常使用該軟件，命名時可能會考慮更多的內(nèi)容。不過考慮到使用PS作畫的同學(xué)還是不少，這里只介紹一種常見的。當(dāng)然，大家可以根據(jù)自己的實際情況制定命名規(guī)則。這里僅提供一種方法和思路，僅供參考。

1、為什么要建立標(biāo)準(zhǔn)化的命名規(guī)則？

1.自我水平

對我們自己的文件整理有很大的幫助。后期修改文件和圖層更加方便快捷，標(biāo)準(zhǔn)化的命名也讓我們更加專業(yè)。

2、團(tuán)隊層面

如果命名不統(tǒng)一，大家就很難達(dá)成共識，交接任務(wù)時需要很大的學(xué)習(xí)成本。因此，標(biāo)準(zhǔn)化的命名也可以極大地促進(jìn)團(tuán)隊協(xié)作。

3、發(fā)展水平

這是最重要的?？梢源蟠蠊?jié)省程序開發(fā)的時間和成本，并且減少很多不必要的溝通和重復(fù)切圖的概率，因為只要我們的命名足夠規(guī)范，和開發(fā)人員達(dá)成共識，就可以直接使用。我們在不更改切片名稱的情況下進(jìn)行切片。稍后我們更改切片圖像。只要切片名稱不變，開發(fā)者無需查看就可以直接替換。

2. 所有姓名必須為小寫英文字母。

原因很簡單。我們的目標(biāo)是讓開發(fā)者可以直接使用我們的cut，而不是隨意修改名稱。但是，我們需要知道，開發(fā)者的代碼只有小寫英文字母。如果你給的名字都是中文，那么他們肯定會一一改掉。你想讓他凌晨一點加班嗎？你想讓他拿著4米大刀在上班路上攔你嗎？因此，為了挽救您的生命，請全部使用小寫英文字母。

！

3. 命名格式

眾所周知，一個大型的項目會被分成很多模塊，每個模塊都是由不同的設(shè)計者獨立完成的，并且會有人專門管理通用的組件，比如等等，這樣的話就會分為切割圖有兩種，一種是普通類型的切割圖，另一種是各個模塊特有的切割圖。

常見切片命名格式：

@2x.png

示例：ault@2x.png

（對應(yīng)中文：tab fault@2x.png）

模塊特定圖命名規(guī)則：

@2x.png

示例：ssed@2x.png

（對應(yīng)的中文為：ault@2x.png）

當(dāng)然，這兩個例子都是比較基本的情況。很多時候，一個詞可能無法清楚地描述其功能。例如，如果有兩個名稱相同但大小不同的搜索圖標(biāo)，這種情況下你可以這樣命名：@2x.png，我們的原則是清晰表達(dá)切片的具體內(nèi)容，不重復(fù)名稱。我們希望每個人都能學(xué)習(xí)和使用它。 （大家注意，名字不能有空格?。?/p>

常用英語單詞列表：

如果所有名字都寫成全名，名字就會很長，所以我們可以縮寫一些常用的英文單詞，以減少工作成本和開發(fā)代碼資源。至于如何縮寫，任何縮寫規(guī)則都可以接受，只要整個團(tuán)隊能夠達(dá)成共識并輸出縮寫列表即可。

以下提供一些命名中常用的英文單詞列表（部分已縮寫，僅供參考）

有些人可能覺得寫這么多英文太麻煩，但實際上，為了提高自己的專業(yè)能力，這種標(biāo)準(zhǔn)化的命名方式是必須要經(jīng)歷的過程。當(dāng)你習(xí)慣了這種命名方式后，你會發(fā)現(xiàn)非常方便！

＆總結(jié)

最后，我想告訴大家，如果有什么不明白的地方，確實需要多向開發(fā)同事請教。你不能站在自己的角度去思考問題，因為每個公司的架構(gòu)不一樣，所以別人剪圖的命名方式可能會不一樣。它們都略有不同。建議您在剪圖前先與開發(fā)商溝通。您需要什么類型？這對你來說可以嗎？ Apple和開發(fā)的剪切圖像文件管理機制是什么？有什么區(qū)別？如果你不知道這么基本的問題，而直接套用別人的規(guī)范，結(jié)果就是被別人引導(dǎo)；好啦，我們下一期適配再見！

值得閱讀的系列文章

如有侵權(quán)請聯(lián)系刪除！