APP切圖詳細(xì)規(guī)范終極指南

一、切圖概述與命名規(guī)范

在現(xiàn)代APP開(kāi)發(fā)中，一套完整的App往往包含眾多切圖，針對(duì)iPhone和Android設(shè)備，切圖要求各不相同。為了確保開(kāi)發(fā)團(tuán)隊(duì)能夠高效、準(zhǔn)確地找到所需圖像，制定一套統(tǒng)一的切圖命名規(guī)范至關(guān)重要。

二、設(shè)備型號(hào)與屏幕尺寸

目前，iPhone有眾多型號(hào)，不同的型號(hào)意味著不同的屏幕尺寸。再加上各種分辨率和采樣技術(shù)，如6plus的降采樣和iPhone6及6+的放大模式，確實(shí)讓人頭疼。但實(shí)際上，只要我們掌握了一套簡(jiǎn)單的適配方法，就能輕松應(yīng)對(duì)。

三、UI交付資料及開(kāi)發(fā)需求

UI設(shè)計(jì)師交付給開(kāi)發(fā)團(tuán)隊(duì)的資料中，應(yīng)包含詳細(xì)的切圖以及對(duì)應(yīng)的標(biāo)注。開(kāi)發(fā)團(tuán)隊(duì)可以根據(jù)這些標(biāo)注自行計(jì)算出不同分辨率下的圖像尺寸。例如，看到標(biāo)注圖上的數(shù)字后，乘以相應(yīng)的系數(shù)（如1.5）即可得到3X尺寸的數(shù)字。

四、iOS圖標(biāo)尺寸規(guī)范

iOS設(shè)備的圖標(biāo)尺寸有嚴(yán)格的標(biāo)準(zhǔn)。例如：iPhone Portrait iOS 8-Retina HD 5.5的尺寸為（1242×2208）@3x；iPhone Portrait iOS 8-Retina HD 4.7的尺寸為（750×1334）@2x等。

需要注意的是，從2020年6月30日后，iOS強(qiáng)制使用LaunchScreen.storyboard來(lái)顯示啟動(dòng)閃屏。

五、Android與iOS的切圖差異

Android和iOS在設(shè)備分辨率和屏幕尺寸上存在差異，因此在切圖時(shí)需要注意。例如，Android的常用分辨率為720×1280，而iOS的圖標(biāo)命名中可能會(huì)使用“-”作為分隔符。若切圖同時(shí)用于A(yíng)ndroid和iOS，則需統(tǒng)一命名規(guī)則，避免混淆。對(duì)于A(yíng)ndroid設(shè)備，由于不支持使用“-”命名，建議使用“_”代替。

為了更好地管理切圖，通常建議根據(jù)圖片性質(zhì)進(jìn)行命名，如背景（bg-x.png）、按鈕（btn-x.png）、圖片（img-x.png）等。若圖像用于Retina屏幕，可在文件名前加上“@2x”。例如：。同時(shí)也要注意避免以數(shù)字或符號(hào)開(kāi)頭命名，以免造成不必要的麻煩。最后還要特別關(guān)注圖像質(zhì)量?jī)?yōu)化和適配問(wèn)題以提供更好的用戶(hù)體驗(yàn)。在保持美觀(guān)的同時(shí)簡(jiǎn)化工作流程非常重要，這有助于提高開(kāi)發(fā)效率和產(chǎn)品質(zhì)量。遵循這些規(guī)范進(jìn)行切圖和命名管理將使得團(tuán)隊(duì)協(xié)作更加高效順暢并提升產(chǎn)品質(zhì)量。一、關(guān)于前綴、后綴與命名規(guī)范

前綴與后綴概述

在設(shè)計(jì)與開(kāi)發(fā)中，前綴和后綴的標(biāo)記語(yǔ)言為我們提供了一種簡(jiǎn)單而高效的命名方式。前綴主要用于標(biāo)識(shí)切圖的類(lèi)別或位置用途，而后綴則常用來(lái)表示顏色、透明度、狀態(tài)等信息。通過(guò)合理使用前綴與后綴，我們能夠迅速識(shí)別和理解切圖的用途與特性。

常見(jiàn)命名規(guī)范實(shí)例

1. 畫(huà)布大小定位：如“720x1280_canvas”或“1080x1920_screen”。這里的尺寸單位可能是像素或dp值。

2. 尺寸與字體單位：推薦使用偶數(shù)單位，如“96px列表項(xiàng)高度”，“24pt字體大小”。

3. 尺寸與字體交付值：設(shè)計(jì)完成后，尺寸值需除以約定的倍數(shù)（如除以2）轉(zhuǎn)換為dp或sp數(shù)值，以便工程師使用。例如，“72px/2=36dp”。

4. 切圖交付資源：所有切圖應(yīng)分為不同尺寸版本，如原始大小、縮小1.5倍和縮小2倍，分別作為xhdpi、hdpi和mdpi資源交付給工程師。這樣確保在不同分辨率的屏幕上都能良好顯示。

顏色值與透明度

顏色值通常采用十六進(jìn)制表示。透明度計(jì)算方式為：透明度百分比乘以225后轉(zhuǎn)為十六進(jìn)制。例如，50%的透明度等于FF（不透明）的半數(shù)，即9C（或近似值）。而FF代表不透明，7F代表半透明，00代表完全透明。在實(shí)際應(yīng)用中，還需要根據(jù)具體需求進(jìn)行微調(diào)。

二、App切圖命名規(guī)范詳解

App開(kāi)發(fā)中切圖命名的重要性

在A(yíng)PP開(kāi)發(fā)過(guò)程中，規(guī)范的切圖命名至關(guān)重要。它不僅有助于提高開(kāi)發(fā)效率，還能減少誤解和沖突。以下介紹一些適用于iOS和部分Android平臺(tái)的命名規(guī)范。

通用命名規(guī)則

1. 全部使用小寫(xiě)英文：確保命名的統(tǒng)一性和可讀性，降低因命名更改帶來(lái)的成本。同時(shí)遵循開(kāi)發(fā)團(tuán)隊(duì)的特定習(xí)慣。

2. 單詞間使用下劃線(xiàn)：“_”作為連接符是常見(jiàn)的選擇，特別是在跨平臺(tái)（如Android）使用時(shí)。避免使用可能引發(fā)混淆的符號(hào)，如“-”。每個(gè)單詞都應(yīng)適當(dāng)分隔，保持清晰的結(jié)構(gòu)和語(yǔ)義。例如：“settings_button”。

切片文件命名規(guī)范

1. 模塊特有規(guī)則：采用“模塊_類(lèi)別_功能_狀態(tài)@尺寸比例.格式”的格式，如“”。這樣開(kāi)發(fā)人員可以快速理解每個(gè)切圖的作用和功能狀態(tài)。當(dāng)存在多個(gè)相似圖標(biāo)時(shí)，可以使用數(shù)字序列進(jìn)行區(qū)分，例如“icon1、icon2”。

2. 英文縮寫(xiě)：為減少命名長(zhǎng)度和提高效率，可以使用合理的英文縮寫(xiě)。但縮寫(xiě)應(yīng)在團(tuán)隊(duì)內(nèi)部統(tǒng)一并達(dá)成共識(shí)，避免歧義。例如，“nav”代表“navigation”。這樣的縮寫(xiě)有助于保持命名的簡(jiǎn)潔性并提高工作效率。此外還需注意避免使用某些可能引起誤解或混淆的縮寫(xiě)形式。使用縮寫(xiě)時(shí)應(yīng)確保團(tuán)隊(duì)成員都能準(zhǔn)確理解其含義并遵循一致的使用規(guī)則以確保信息的準(zhǔn)確傳遞和理解。這將有助于增強(qiáng)團(tuán)隊(duì)間的溝通和協(xié)作減少學(xué)習(xí)成本并提高工作效率同時(shí)保持代碼的可讀性和可維護(hù)性以節(jié)省開(kāi)發(fā)時(shí)間和成本并減少溝通成本和重復(fù)切圖的需求從而推動(dòng)項(xiàng)目的順利進(jìn)行和團(tuán)隊(duì)的協(xié)同合作提升整體的開(kāi)發(fā)效率和項(xiàng)目質(zhì)量。UI設(shè)計(jì)與切圖規(guī)范：細(xì)節(jié)決定成敗

一、概覽

在UI設(shè)計(jì)和開(kāi)發(fā)中，規(guī)范和標(biāo)準(zhǔn)是提高效率和保證質(zhì)量的關(guān)鍵。本文將從特殊狀態(tài)處理、工具與資源、命名規(guī)范等方面展開(kāi)討論，旨在為團(tuán)隊(duì)提升協(xié)作效率和項(xiàng)目質(zhì)量提供指導(dǎo)。

二、特殊狀態(tài)處理

1. 按鈕狀態(tài)

在UI設(shè)計(jì)中，按鈕的狀態(tài)通常包括正常、突出、選中、不可用等。對(duì)于iOS設(shè)計(jì)而言，一般情況下不需要為highlight狀態(tài)制作單獨(dú)的切圖。

2. 工具與資源

為提高工作效率，推薦使用如藍(lán)湖等切圖插件工具。這些工具具備自動(dòng)標(biāo)注、樹(shù)狀連線(xiàn)、交互原型制作和產(chǎn)品文檔共享等功能。

3. 命名規(guī)范的重要性

遵循命名規(guī)范有助于更深入地參與項(xiàng)目，甚至制定新的規(guī)范。團(tuán)隊(duì)?wèi)?yīng)根據(jù)自身需求調(diào)整命名規(guī)范，并定期回顧和優(yōu)化，以確保溝通順暢，提高工作效率。

三、UI設(shè)計(jì)中的切圖規(guī)范

1. 切圖概述

設(shè)計(jì)師的切圖輸出物是體現(xiàn)其專(zhuān)業(yè)水準(zhǔn)的重要標(biāo)準(zhǔn)，同時(shí)也是設(shè)計(jì)師對(duì)設(shè)計(jì)態(tài)度的有力表達(dá)。合適的切圖可以最大限度地還原設(shè)計(jì)圖，起到事半功倍的效果。

2. 切圖資源尺寸要求

為保證開(kāi)發(fā)工程師能高清顯示切圖資源，切圖資源尺寸必須為雙數(shù)。低質(zhì)量的切圖資源會(huì)導(dǎo)致切圖元素邊緣模糊，進(jìn)而造成APP界面效果與設(shè)計(jì)效果差距甚遠(yuǎn)。如果是單數(shù)切圖的話(huà)，手機(jī)系統(tǒng)可能會(huì)自動(dòng)拉伸切圖，導(dǎo)致切圖質(zhì)量降低。所有UI設(shè)計(jì)師都應(yīng)遵循這一規(guī)范。

3. 圖標(biāo)切圖輸出要求

圖標(biāo)切圖是切圖資源輸出中的重要部分。由于各機(jī)型的屏幕分辨率不同，需要針對(duì)一些大屏機(jī)型進(jìn)行適配。為此，在切圖時(shí)應(yīng)輸出@2x和@3x的切圖。其中@2x的切圖可以滿(mǎn)足雙平臺(tái)大部分機(jī)型的適配要求，而@3x則是用來(lái)適配iPhone的各種plus版本手機(jī)。@3x的尺寸是@2x的1.5倍。

四、總結(jié)與展望

UI設(shè)計(jì)切圖是UI設(shè)計(jì)師最重要的設(shè)計(jì)輸出物之一。遵循合適的切圖規(guī)范可以最大限度地還原設(shè)計(jì)圖，提高開(kāi)發(fā)效率，保證項(xiàng)目質(zhì)量。在實(shí)際應(yīng)用中，團(tuán)隊(duì)?wèi)?yīng)根據(jù)自身需求調(diào)整命名規(guī)范，并定期進(jìn)行回顧和優(yōu)化，以確保團(tuán)隊(duì)協(xié)作的順暢和效率的提升。希望本文的經(jīng)驗(yàn)之談能對(duì)正在路上的設(shè)計(jì)師有所幫助。