App切圖命名規(guī)范

一、通用命名規(guī)則

在APP開發(fā)中，切圖的命名遵循一套規(guī)范是提高開發(fā)效率、減少誤解的關(guān)鍵。所有的命名應(yīng)遵循以下基本規(guī)則：

1. 全部使用小寫英文。這不僅方便了開發(fā)團(tuán)隊(duì)的日常操作，也在一定程度上避免了因代碼更改而引發(fā)的命名問(wèn)題。

2. 單詞間使用下劃線“_”作為連接符。在Android平臺(tái)上，應(yīng)避免使用“-”作為連接符，以免引起不必要的混淆。

二、切片文件命名

對(duì)于切片文件的命名，我們有更具體的規(guī)則：

1. 模塊特有規(guī)則。按照“模塊_類別_功能_狀態(tài)@2x.png”的格式進(jìn)行命名，如“”。這樣的命名方式，既清晰又直觀。

2. 對(duì)于重復(fù)的圖標(biāo)，可以通過(guò)添加數(shù)字序列如“icon1、icon2、icon3…”來(lái)區(qū)分，避免命名沖突。

三、英文縮寫

為了縮短命名長(zhǎng)度，我們可以對(duì)常用的英文單詞進(jìn)行合理的縮寫。但需要注意的是，這些縮寫應(yīng)在團(tuán)隊(duì)內(nèi)統(tǒng)一，比如“nav”代表“navigation bar”。

四、命名效率與專業(yè)性

規(guī)范的命名不僅關(guān)乎效率，更是專業(yè)性的體現(xiàn)：

1. 從個(gè)人層面來(lái)看，規(guī)范的命名方便后期的文件管理和修改，使得工作流程更加順暢。

2. 從團(tuán)隊(duì)層面出發(fā)，統(tǒng)一的命名規(guī)范有助于團(tuán)隊(duì)成員之間的協(xié)作，降低學(xué)習(xí)成本，提高團(tuán)隊(duì)整體效率。

3. 從開發(fā)層面來(lái)看，規(guī)范的命名能大幅節(jié)省開發(fā)時(shí)間，減少溝通成本和重復(fù)切圖，從而提高整體的開發(fā)效率。

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

在APP中，按鈕往往有多種狀態(tài)，如正常(normal)、突出(highlighted)、選中(selected)、不可用(disabled)等。在iOS平臺(tái)上，通常不需要為highlight狀態(tài)制作單獨(dú)的切圖。

六、工具與資源

為了提高效率，我們可以使用一些切圖插件，如藍(lán)湖工具。這些工具提供了自動(dòng)標(biāo)注、樹狀連線、交互原型制作和產(chǎn)品文檔共享等功能，極大地提高了我們的工作效率。

七、切圖和截圖、載圖的區(qū)別

切圖、截圖和載圖并不是一回事。截圖是簡(jiǎn)單地保存一個(gè)圖片，而切圖是把圖片切成一個(gè)可點(diǎn)擊的網(wǎng)頁(yè)元素。對(duì)于網(wǎng)絡(luò)傳播的切片，主要是將圖片切成多塊以加快加載速度；而裁去雜邊或不需要的部分則稱為載圖或切圖。理解這些概念有助于我們更深入地參與項(xiàng)目，甚至制定新的規(guī)范。因此在實(shí)際操作中需要根據(jù)具體需求和場(chǎng)景選擇正確的處理方式。此外在制定命名規(guī)范時(shí)還需要考慮項(xiàng)目需求和團(tuán)隊(duì)特點(diǎn)根據(jù)實(shí)際情況進(jìn)行調(diào)整和優(yōu)化以提高團(tuán)隊(duì)協(xié)作效率和項(xiàng)目質(zhì)量。問(wèn)題三：蘋果與安卓APP切圖差異的詳解

一、Android版設(shè)計(jì)解析

在Android版本設(shè)計(jì)中，尺寸多樣，因此需選定一個(gè)基準(zhǔn)尺寸作為設(shè)計(jì)起點(diǎn)。常見的基準(zhǔn)尺寸為480px800px。在設(shè)計(jì)完成后，進(jìn)入切圖環(huán)節(jié)。以一張?jiān)O(shè)計(jì)圖為例：

1. 底部欄目的icon和背景：這部分設(shè)計(jì)通常有兩種切法，分別對(duì)應(yīng)默認(rèn)和選中后的效果。

2. 頂部欄目背景切圖：由于頂部導(dǎo)航欄采用漸變樣式，切圖時(shí)只需截取一小條，技術(shù)團(tuán)隊(duì)會(huì)進(jìn)行平鋪拉伸。若為花紋背景，則需整體切割。

3. 文字大小和行間距標(biāo)注：在設(shè)計(jì)圖中已標(biāo)注，需注意不同屏顯密度的調(diào)整。

在Android系統(tǒng)中，主要有三種屏幕密度：

QVGA和WQVGA屏，density=120；

HVGA屏，density=160；

WVGA屏，density=240。

對(duì)于apk的資源包，根據(jù)屏幕density選擇相應(yīng)的資源標(biāo)簽，如ldpi、mdpi、hdpi。雖然我們標(biāo)注的是PX，但技術(shù)實(shí)現(xiàn)中常用DP單位，因此需進(jìn)行PX與DP的轉(zhuǎn)化，轉(zhuǎn)化公式與密度相關(guān)。

注意：基于480800尺寸的設(shè)計(jì)，要適配其他流行尺寸如640960、7201280等，需為不同尺寸制作不同圖標(biāo)。若產(chǎn)品要求不嚴(yán)格，也可只做一套圖，但在大尺寸屏幕上可能會(huì)出現(xiàn)圖標(biāo)拉伸虛化的現(xiàn)象。

二、iOS版設(shè)計(jì)解析

iOS版本設(shè)計(jì)的尺寸有3種：320480、640960、6401136。以640px960px為基準(zhǔn)尺寸進(jìn)行設(shè)計(jì)后切圖。同樣以一張?jiān)O(shè)計(jì)圖為例：

1. 底部欄目的icon和背景：切圖方法與Android類似，考慮默認(rèn)和選中后的效果。

2. 頂部欄目背景切圖：因?qū)Ш綑诙嗌?，需整條切割提供。

3. 二級(jí)、主體欄目及文字大小和行間距的切圖和標(biāo)注。

在iOS設(shè)計(jì)中，需注意以下幾點(diǎn)：

標(biāo)注的尺寸是像素px，技術(shù)實(shí)現(xiàn)中用的是一半像素。

所有文字、行間距的標(biāo)注尺寸需為偶數(shù)。

顏色的標(biāo)注可能涉及16進(jìn)制或RGB格式。

問(wèn)題四：DW切圖與PS切圖的差異

PS切出的圖片多為table格式，而DW寫出的代碼則使用div。雖然兩者在頁(yè)面展示上差異不大，但DW制作的網(wǎng)頁(yè)更為精致，適合前端開發(fā)。而PS切圖在轉(zhuǎn)為asp動(dòng)態(tài)頁(yè)面時(shí)，不易添加代碼。

問(wèn)題五：前端切圖與UI設(shè)計(jì)的區(qū)別及前端三要素

一、前端切圖的基礎(chǔ)

前端切圖，顧名思義，就是將設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁(yè)的過(guò)程。面對(duì)設(shè)計(jì)圖，時(shí)間緊迫，需快速而精準(zhǔn)地將之切成網(wǎng)頁(yè)，并兼容各大主流瀏覽器。切圖看似門檻較低，但要精通并非易事。僅會(huì)切圖難以立足職場(chǎng)，即使就業(yè)，薪資也難達(dá)理想水平。實(shí)際上，前端的大部分時(shí)間都在JS上度過(guò)。

二、前端切圖與UI設(shè)計(jì)的區(qū)別

UI設(shè)計(jì)主要負(fù)責(zé)將頁(yè)面呈現(xiàn)出來(lái)的理想狀態(tài)表現(xiàn)出來(lái)。而前端切圖則是將UI設(shè)計(jì)師的成果通過(guò)代碼連接，實(shí)際呈現(xiàn)在web上。簡(jiǎn)單來(lái)說(shuō)，UI設(shè)計(jì)更注重頁(yè)面的美觀，而前端切圖更注重頁(yè)面的實(shí)現(xiàn)和交互功能。

三、UI中的“切圖”詳解

在UI設(shè)計(jì)中，“切圖”是一個(gè)重要環(huán)節(jié)。它指的是將設(shè)計(jì)師的創(chuàng)意轉(zhuǎn)化為實(shí)際的網(wǎng)頁(yè)。這個(gè)過(guò)程通常由前端工程師完成。切圖涉及將psd設(shè)計(jì)稿進(jìn)行切片、重組，利用div+css、js等前端開發(fā)代碼生成網(wǎng)頁(yè)。這也是將設(shè)計(jì)師的“理想”轉(zhuǎn)化為“現(xiàn)實(shí)”的工作。

四、Axure圖片裁切與PS切圖的異同

Axure圖片裁切與PS切圖在本質(zhì)上并無(wú)太大區(qū)別。在完整界面設(shè)計(jì)時(shí)，可以使用圖片熱區(qū)元件來(lái)設(shè)置交互。而在切圖完成后，每個(gè)小圖都可以獨(dú)立設(shè)置交互。但無(wú)論是哪種方式，UI的呈現(xiàn)效果是一致的。

五、開發(fā)APP的費(fèi)用與注意事項(xiàng)

開發(fā)一款A(yù)PP的價(jià)格主要取決于其功能和復(fù)雜性。開發(fā)過(guò)程中需要注意以下幾點(diǎn)：

1. 前期需求規(guī)劃：制定完整的需求文檔、功能文檔、流程圖及時(shí)序圖。

2. 交互設(shè)計(jì)與UI設(shè)計(jì)：設(shè)計(jì)原型圖和交互效果，然后進(jìn)行切圖。設(shè)計(jì)師需要掌握px、pt和dp之間的換算，以及屏幕密度的換算，以確保APP適應(yīng)不同分辨率設(shè)備。

3. 軟件開發(fā)：使用如ADT等開發(fā)環(huán)境，并熟練掌握相關(guān)編程語(yǔ)言如java。

4. 服務(wù)器知識(shí)：如果不是單機(jī)版APP，需要掌握WebService相關(guān)知識(shí)和開發(fā)語(yǔ)言，如ASP.Net、PHP、JSP等。

5. 數(shù)據(jù)庫(kù)開發(fā)：熟悉并能自主開發(fā)數(shù)據(jù)庫(kù)。

6. 算法與API接口：某些功能需要做算法，這還需要一定的數(shù)學(xué)基礎(chǔ)和API接口開發(fā)能力。

開發(fā)一款A(yù)PP需要多方面的技能和知識(shí)，費(fèi)用也是根據(jù)其復(fù)雜程度而定的。

第一章：TCP/IP與Socket網(wǎng)絡(luò)協(xié)議

深入理解TCP/IP協(xié)議是每一位開發(fā)者必備的技能。TCP/IP是一套通信協(xié)議，它為互聯(lián)網(wǎng)上的數(shù)據(jù)傳輸提供了基礎(chǔ)。而Socket則是這一協(xié)議的接口實(shí)現(xiàn)，使得應(yīng)用程序可以基于這些接口進(jìn)行網(wǎng)絡(luò)通信。掌握這些基礎(chǔ)，可以幫助開發(fā)者在應(yīng)用開發(fā)中更加高效地處理網(wǎng)絡(luò)通信問(wèn)題。在網(wǎng)絡(luò)應(yīng)用開發(fā)中，理解并運(yùn)用TCP/IP和Socket等網(wǎng)絡(luò)協(xié)議的能力被視為一種寶貴的技能。

第二章：App開發(fā)中的真機(jī)調(diào)試技巧

真機(jī)調(diào)試是應(yīng)用開發(fā)過(guò)程中的關(guān)鍵環(huán)節(jié)，因?yàn)樗_保了應(yīng)用的實(shí)用性和用戶體驗(yàn)的優(yōu)化。熟練掌握真機(jī)調(diào)試技巧，可以幫助開發(fā)者快速定位并修復(fù)潛在問(wèn)題。在這一過(guò)程中，開發(fā)者需要熟悉應(yīng)用的發(fā)布流程，包括證書管理、打包和上架等環(huán)節(jié)。每個(gè)步驟都有其特定的要求和技巧，需要開發(fā)者具備豐富的經(jīng)驗(yàn)和知識(shí)。

第三章：證書管理與應(yīng)用安全

在App開發(fā)過(guò)程中，證書管理是一個(gè)重要的環(huán)節(jié)。它不僅涉及到應(yīng)用的簽名和發(fā)布，還關(guān)乎應(yīng)用的安全性。開發(fā)者需要熟悉如何生成、管理和使用證書，以確保應(yīng)用的安全性和穩(wěn)定性。開發(fā)者還需要了解如何保護(hù)應(yīng)用免受網(wǎng)絡(luò)攻擊和惡意軟件的侵害，這也是確保應(yīng)用質(zhì)量的重要一環(huán)。

第四章：App的打包與上架流程

完成應(yīng)用開發(fā)后，開發(fā)者需要將應(yīng)用打包并上架到相應(yīng)的應(yīng)用商店供用戶下載和使用。這個(gè)過(guò)程涉及到多個(gè)步驟，包括應(yīng)用的打包、測(cè)試、提交審核等。每個(gè)步驟都有其特定的要求和注意事項(xiàng)，需要開發(fā)者具備豐富的實(shí)踐經(jīng)驗(yàn)。熟練掌握這些流程，可以幫助開發(fā)者提高應(yīng)用上架的效率，并確保應(yīng)用的質(zhì)量。

第五章：團(tuán)隊(duì)協(xié)同開發(fā)的重要性

App開發(fā)是一個(gè)復(fù)雜的工程，涉及到多個(gè)領(lǐng)域的知識(shí)和技能。一個(gè)人獨(dú)立完成一個(gè)復(fù)雜的App開發(fā)可能會(huì)面臨諸多挑戰(zhàn)，如時(shí)間、精力和技能的限制。團(tuán)隊(duì)合作成為了一個(gè)更加高效的選擇。每個(gè)團(tuán)隊(duì)成員都可以專注于自己擅長(zhǎng)的領(lǐng)域，共同完成一個(gè)高質(zhì)量的應(yīng)用開發(fā)。團(tuán)隊(duì)合作還可以促進(jìn)知識(shí)的共享和交流，提高團(tuán)隊(duì)的整體技能水平。對(duì)于想要成功完成App開發(fā)的團(tuán)隊(duì)來(lái)說(shuō)，掌握這些知識(shí)和技能是至關(guān)重要的。

App開發(fā)是一個(gè)復(fù)雜而又充滿挑戰(zhàn)的過(guò)程，需要開發(fā)者具備豐富的知識(shí)和技能。從網(wǎng)絡(luò)協(xié)議到真機(jī)調(diào)試技巧，再到團(tuán)隊(duì)協(xié)同開發(fā)的重要性，每一個(gè)環(huán)節(jié)都至關(guān)重要。只有不斷學(xué)習(xí)和實(shí)踐，才能成為一名優(yōu)秀的App開發(fā)者。