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

一、切圖概述與重要性

我們都知道，一個完整的App往往包含眾多切圖。對于iPhone，我們有1x、2x、甚至3x的圖檔需求；而對于Android，至少要有hdpi、xhdpi、hdpi三種密度對應(yīng)的圖檔。在如此繁多的切圖之下，如何確保負責(zé)套圖的RD能夠迅速找到所需圖像？這就需要我們統(tǒng)一檔名命名方式，確保雙方都能便捷作業(yè)。制定一套既有效又方便的APP切圖命名規(guī)范至關(guān)重要。

二、iOS的切圖規(guī)范與適配方法

目前，iPhone有10種型號，5種屏幕尺寸。再加上iPhone 6plus的降采樣（Downsampling），以及iPhone 6和6+上的放大模式和默認模式，可能會讓人感到有些復(fù)雜。但其實，有一套超簡單的適配方法。看完后，你會發(fā)現(xiàn)其實并不難。

三、UI交付資料與開發(fā)協(xié)作

UI交付給開發(fā)的資料中，包含了各種尺寸和類型的切圖。開發(fā)在拿到這些標注圖后，可以通過簡單的計算得出其他尺寸的圖檔。例如，用上面的數(shù)字乘以1.5，就可以得到3X的數(shù)字。這樣，雙方都能更高效地協(xié)作。

四、具體的iOS與Android切圖尺寸

iOS的切圖尺寸包括但不限于：iPhone Portrait iOS 8-Retina HD 5.5（1242×2208）@3x、iPhone Portrait iOS 8-Retina HD 4.7（750×1334）@2x等。而Android的切圖尺寸則以720x1280為主。iOS還有一個重要的注意事項，那就是從2020年6月30日后，強制全部使用LaunchScreen.storyboard顯示啟動閃屏。

五、切圖的分類與命名規(guī)范

App的切圖大致可分為背景、按鈕、圖示、圖片、照片、TabBar icon等幾大類。為了便于管理，我們通常會根據(jù)圖片的性質(zhì)進行命名。例如，bg-x.png、btn-x.png、img-x.png等。當(dāng)這些圖檔需要用在Retina屏幕時，只需在文檔名前加上「@2x」就可以了。也要注意不同平臺（如iOS和Android）的命名規(guī)范差異。

掌握這些切圖規(guī)范和命名方式，將大大提高App開發(fā)過程中的效率，確保圖像在各種設(shè)備上都能完美呈現(xiàn)。一、設(shè)計切圖命名規(guī)范概述

一、前綴與后綴的命名規(guī)則

前綴，作為一種簡潔的記憶工具，能夠迅速識別切圖所屬的組件類別。優(yōu)秀的命名前綴往往遵循一定的規(guī)律。例如，畫布大小定位可以采用“尺寸_分辨率”的格式，如“720x1280_72dpi”。

后綴則多用于表示切圖的顏色、透明度及狀態(tài)等信息。通過后綴，我們可以明確圖像的具體屬性。例如，使用十六進制顏色代碼“FFFFFF”表示白色，而“90FFFFFF”中的“90”則表示透明度百分比。

在實際操作中，我們只需遵循前綴+位置用途+后綴的命名結(jié)構(gòu)，就能有效組織和管理切圖。例如，“畫布大小定位_720x1280_綠色主題”或“列表項高度_96px_半透明狀態(tài)”。

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

在APP開發(fā)過程中，規(guī)范的切圖命名對于提高效率和減少誤解至關(guān)重要。以下是一些適用于iOS和部分Android平臺的基本命名規(guī)則。

通用命名規(guī)則

遵循開發(fā)團隊的命名習(xí)慣，全部使用小寫英文，單詞間使用下劃線連接。這樣的命名規(guī)則有助于避免代碼更改命名的麻煩，同時也符合開發(fā)標準。例如，“settings_menu_button”。同時為了保持一致性，應(yīng)避免使用某些特殊字符或格式。確保命名的簡潔明了是非常重要的原則。通過統(tǒng)一縮寫規(guī)則來減少命名長度也是提高效率的好方法。例如，“nav”代表“navigation bar”。對于特殊字體或特殊標注的切圖也應(yīng)明確標注出來。在全局范圍內(nèi)約定統(tǒng)一的命名規(guī)范將有助于后期的文件管理和修改工作。通過遵循這些通用規(guī)則，開發(fā)者可以更加高效地協(xié)作，減少誤解和溝通成本。這對于團隊內(nèi)部協(xié)作以及與開發(fā)團隊的溝通至關(guān)重要。統(tǒng)一命名規(guī)范有助于減少學(xué)習(xí)成本并提高整個團隊的效率。規(guī)范命名還可以大幅節(jié)省開發(fā)時間并減少重復(fù)切圖的需求。這對于項目的整體進展和成本控制至關(guān)重要。同時也要注意文件格式的兼容性以及適配不同平臺的考慮因素等細節(jié)問題以確保命名的實用性和準確性在實際操作中能夠靈活應(yīng)用這些規(guī)則來確保項目的順利進行同時根據(jù)具體需求和團隊的工作流程來調(diào)整和補充這些規(guī)則以最大程度地提高工作效率和準確性。此外還需要注意保持命名的清晰性和一致性以便于團隊成員之間的溝通和理解同時不斷學(xué)習(xí)和更新關(guān)于命名規(guī)范的知識以適應(yīng)不斷變化的技術(shù)環(huán)境和發(fā)展趨勢從而更好地滿足用戶需求和提高用戶體驗總之規(guī)范的命名習(xí)慣是開發(fā)高效應(yīng)用的重要一環(huán)開發(fā)者應(yīng)高度重視并遵守相應(yīng)的規(guī)范來提高項目的質(zhì)量和效率同時推動整個行業(yè)的良性發(fā)展。

切片文件命名規(guī)范方面，建議遵循模塊特有規(guī)則采用“模塊_類別_功能_狀態(tài)@尺寸比例.格式”的格式進行命名。例如，“”。對于重復(fù)圖標可以使用數(shù)字序列進行區(qū)分以避免命名沖突。

在實際操作中還需要注意保持命名的清晰性和邏輯性以便團隊成員能夠快速理解和識別每個切圖的用途和功能從而避免不必要的誤解和重復(fù)工作同時還需要注意保持命名規(guī)則的靈活性和可擴展性以適應(yīng)不同項目需求的變化和團隊規(guī)模的變化從而確保命名的有效性和實用性。

總之通過規(guī)范的切圖命名可以大大提高開發(fā)效率和團隊協(xié)作能力對于每個開發(fā)人員來說都需要不斷學(xué)習(xí)和更新關(guān)于命名規(guī)范的知識并將其應(yīng)用到日常工作中去以推動項目的順利進行和提高整體的工作質(zhì)量。

三、命名效率與專業(yè)性的重要性

規(guī)范的命名不僅僅是一種效率工具，更是專業(yè)性的體現(xiàn)。

從自身層面來看，規(guī)范的命名方便后期的文件管理和修改。一個清晰、結(jié)構(gòu)化的命名規(guī)則，可以極大地提高開發(fā)者的工作效率，減少在尋找和識別文件上花費的時間。

從團隊層面來說，統(tǒng)一的命名有助于團隊協(xié)作。當(dāng)團隊成員都遵循同樣的命名規(guī)范時，溝通成本將大大降低，團隊成員之間能夠更好地理解彼此的意圖和工作進展。

從開發(fā)層面來看，規(guī)范的命名能大幅節(jié)省開發(fā)時間。對于開發(fā)人員來說，清晰明了的文件名意味著他們可以快速準確地找到所需的資源，從而減少在查找和修改資源上的時間消耗。

規(guī)范的命名也有助于減少重復(fù)切圖的需求和提高資源的復(fù)用率。

因此開發(fā)者應(yīng)該高度重視命名規(guī)范不斷提高自身的專業(yè)素養(yǎng)和團隊協(xié)作能力共同推動項目的順利進行。

一、UI設(shè)計基礎(chǔ)規(guī)范概覽

UI設(shè)計概述

UI設(shè)計作為現(xiàn)代產(chǎn)品設(shè)計的重要組成部分，涉及從用戶體驗到界面美觀的全方位設(shè)計。為提高團隊協(xié)作效率和項目質(zhì)量，制定一系列規(guī)范至關(guān)重要。本文將詳細介紹UI設(shè)計中的基礎(chǔ)規(guī)范，幫助設(shè)計師更好地理解和遵循這些規(guī)則。

特殊狀態(tài)處理

在UI設(shè)計中，按鈕等控件的不同狀態(tài)需要得到妥善處理，以確保用戶界面的友好性和易用性。常見的按鈕狀態(tài)包括：

正常(normal)狀態(tài)：按鈕的默認狀態(tài)。

突出(highlighted)狀態(tài)：當(dāng)按鈕被用戶懸停或聚焦時。

選中(selected)狀態(tài)：按鈕被點擊或選中時的狀態(tài)。

不可用(disabled)狀態(tài)：按鈕因某些原因不可用時。在iOS平臺上，通常不需要為highlight狀態(tài)制作單獨的切圖。

工具與資源

為提高工作效率，設(shè)計師需要借助各種工具與資源。其中，切圖插件是不可或缺的一部分。推薦使用如藍湖等工具，它們提供了自動標注、樹狀連線、交互原型制作和產(chǎn)品文檔共享等功能，極大地提高了設(shè)計到開發(fā)的轉(zhuǎn)化效率。

二、UI設(shè)計中的切圖規(guī)范詳解

切圖概述

設(shè)計師的切圖輸出物是體現(xiàn)其專業(yè)水準的重要標準。高質(zhì)量的切圖可以確保開發(fā)的APP界面效果與設(shè)計師的原設(shè)計效果高度一致。遵循切圖規(guī)范至關(guān)重要。

切圖資源尺寸規(guī)范

為保證切圖資源在開發(fā)時的清晰度，切圖資源尺寸必須為雙數(shù)。這是因為單數(shù)的切圖資源在開發(fā)時可能會被系統(tǒng)自動拉伸，導(dǎo)致質(zhì)量下降。設(shè)計師應(yīng)確保輸出的切圖資源尺寸符合這一規(guī)范。對于圖標切圖輸出，應(yīng)根據(jù)標準尺寸輸出并考慮到不同手機的適配問題。對于高分辨率手機，需要輸出@2x和@3x的切圖以滿足適配要求。其中，@3x的切圖是@2x尺寸的1.5倍，主要用于適配iPhone的各種Plus版本。

三、命名規(guī)范的重要性及實踐

命名規(guī)范的意義

命名規(guī)范在UI設(shè)計中同樣重要。理解命名背后的邏輯有助于設(shè)計師更深入地參與項目，甚至制定新的規(guī)范。良好的命名規(guī)范能提高團隊協(xié)作效率，確保項目質(zhì)量。團隊應(yīng)根據(jù)自身需求調(diào)整命名規(guī)范，并定期回顧和優(yōu)化。

學(xué)習(xí)與溝通

遵循命名規(guī)范還能促進團隊間的溝通與學(xué)習(xí)。當(dāng)團隊成員都能按照統(tǒng)一的標準進行命名時，溝通成本將大大降低，項目進展也將更加順利。通過學(xué)習(xí)和實踐命名規(guī)范，設(shè)計師可以不斷提升自己的專業(yè)素養(yǎng)和技能水平。