App切圖命名規(guī)范指南

===================

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

在APP開發(fā)過程中，切圖的命名遵循一定的規(guī)范至關(guān)重要。為了提高效率和減少誤解，我們應(yīng)遵循以下基本命名規(guī)則，這些規(guī)則適用于iOS和部分Android平臺(tái)。

全部使用小寫英文。這樣既可以避免代碼更改命名的麻煩，也符合開發(fā)團(tuán)隊(duì)的通用習(xí)慣。單詞間使用下劃線“_”作為連接符，這是為了避免在Android平臺(tái)上使用“-”帶來的不必要的麻煩。

二、切片文件命名

對(duì)于切片文件的命名，我們也需要明確的規(guī)則。首先是模塊特有規(guī)則，可以按照“模塊_類別_功能_狀態(tài)@2x.png”的格式進(jìn)行命名，例如：“”。對(duì)于重復(fù)的圖標(biāo)，可以使用數(shù)字序列如“icon1、icon2、icon3…”來避免命名沖突。

三、英文縮寫

為了減少命名長(zhǎng)度，我們可以對(duì)常用英文單詞進(jìn)行合理縮寫。但這需要團(tuán)隊(duì)統(tǒng)一縮寫規(guī)則，例如用“nav”代表“navigation bar”。這樣的縮寫不僅簡(jiǎn)化了命名，還提高了命名的專業(yè)性。

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

規(guī)范的命名不僅方便后期的文件管理和修改，還能提高團(tuán)隊(duì)的整體效率。統(tǒng)一命名有助于團(tuán)隊(duì)成員間的協(xié)作，減少學(xué)習(xí)成本。規(guī)范命名能大幅節(jié)省開發(fā)時(shí)間，減少溝通成本和重復(fù)切圖。命名的效率和專業(yè)性是至關(guān)重要的。

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

對(duì)于按鈕狀態(tài)的切圖命名，我們需要考慮其在不同狀態(tài)下的表現(xiàn)。常見的狀態(tài)包括正常(normal)、突出(highlighted)、選中(selected)、不可用(disabled)。在iOS平臺(tái)上，通常不需要為highlight狀態(tài)制作單獨(dú)的切圖。

六、工具與資源

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

七、切圖與截圖：二者有何區(qū)別

切圖和截圖并非一回事。截圖是簡(jiǎn)單地保存屏幕上的圖片，而切圖則是將圖片制作成可點(diǎn)擊的網(wǎng)頁元素。切片主要用于網(wǎng)絡(luò)傳播，將圖片切成多塊以加快加載速度。而切圖可能是指對(duì)圖片進(jìn)行裁剪，去除雜邊或不需要的部分。

理解和遵循這些切圖命名規(guī)范對(duì)于提高APP開發(fā)效率和團(tuán)隊(duì)協(xié)作至關(guān)重要。團(tuán)隊(duì)在實(shí)際應(yīng)用中應(yīng)根據(jù)自身需求調(diào)整命名規(guī)范，并定期回顧和優(yōu)化，以確保命名的準(zhǔn)確性和效率。關(guān)于蘋果APP與安卓APP切圖區(qū)別的文章

一、安卓版

在安卓版本設(shè)計(jì)中，面對(duì)多種尺寸，我們以480px800px為基準(zhǔn)尺寸進(jìn)行切圖。以一張?jiān)O(shè)計(jì)圖為例，我們來詳細(xì)解析切圖過程。

我們看到設(shè)計(jì)圖時(shí)，需要分析應(yīng)給技術(shù)切哪些圖，并在切圖前與技術(shù)溝通以避免后續(xù)修改。

1. 底部欄目的icon和背景：這部分的切圖一般有2種切法，考慮默認(rèn)和選中后的效果。

2. 頂部欄目的背景切圖：由于頂部導(dǎo)航欄是漸變樣式，切圖只需切一小條，技術(shù)團(tuán)隊(duì)會(huì)進(jìn)行平鋪拉伸。如果是花紋背景，則需切整條以保證拉伸后效果。

3. 標(biāo)注文字大小和行間距：以設(shè)計(jì)圖為例子，我們已經(jīng)標(biāo)注了相應(yīng)的文字大小和行間距。

需要注意的事項(xiàng)包括：

安卓主要有3種屏幕，即QVGA、WQVGA和WVGA屏，每種屏幕的density不同。

在apk的資源包中，根據(jù)屏幕density選擇相應(yīng)的資源標(biāo)簽，如hdpi、mdpi和ldpi。

我們標(biāo)注的是PX，但技術(shù)使用的是DP，因此需要進(jìn)行PX和DP的轉(zhuǎn)化。轉(zhuǎn)化的公式與密度有關(guān)。

因?yàn)槭腔?80800尺寸進(jìn)行設(shè)計(jì)，為了適配流行的尺寸如640960、7201280等，圖標(biāo)需要根據(jù)不同尺寸制作多套。

二、iOS版

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

分析應(yīng)給技術(shù)切哪些圖，并建議與技術(shù)溝通以避免后續(xù)修改。

1. 底部欄目的icon和背景：這部分的切圖方法類似安卓版本。

2. 頂部欄目的背景切圖：由于iOS頂部導(dǎo)航欄多顏色，需切一整條給技術(shù)，此外商圈的圖標(biāo)也要單獨(dú)切出。

3. 二級(jí)、主體欄目的切圖及相關(guān)標(biāo)注。

需要注意的事項(xiàng)包括：

我們標(biāo)注的尺寸是像素px，技術(shù)實(shí)際運(yùn)用中的尺寸是像素的一半。例如，“分類”二字，我們標(biāo)注36px，技術(shù)那邊則是18px。

所有文字、行間距的標(biāo)注尺寸都需為偶數(shù)。因?yàn)榧夹g(shù)那邊都是根據(jù)我們的尺寸的一半來進(jìn)行處理。

顏色的標(biāo)注可能因技術(shù)要求而異，需與技術(shù)溝通確認(rèn)。

三、DW切圖和PS切圖的區(qū)別

DW和PS的切圖方式有所不同。PS切出的圖片用的是table代碼，而DW寫出的代碼用的是div。雖然看上去差不多，但DW做出的網(wǎng)頁更精致。不建議直接使用PS切出的table代碼轉(zhuǎn)為asp動(dòng)態(tài)頁面，因?yàn)椴灰准尤氪a。

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

前端切圖與UI設(shè)計(jì)有所不同。前端的三項(xiàng)基礎(chǔ)是HTML、CSS和JS。UI設(shè)計(jì)主要專注于界面的視覺呈現(xiàn)，而前端切圖則更注重將UI設(shè)計(jì)轉(zhuǎn)化為可以在網(wǎng)頁上運(yùn)行的代碼。這需要掌握HTML、CSS和JS等技術(shù)，以確保界面在不同設(shè)備和瀏覽器上的兼容性和穩(wěn)定性。前端切圖需要考慮到頁面的交互效果、響應(yīng)式布局、性能優(yōu)化等多方面因素，以確保最終呈現(xiàn)的用戶體驗(yàn)流暢且高效。前端切圖詳解及其他相關(guān)問題探討

=====================

一、前端切圖的基礎(chǔ)知識(shí)

在網(wǎng)頁開發(fā)中，前端切圖是一項(xiàng)基礎(chǔ)技能。當(dāng)你拿到一張?jiān)O(shè)計(jì)圖時(shí)，需要在有限的時(shí)間內(nèi)將其轉(zhuǎn)化為網(wǎng)頁。這個(gè)過程需要兼容各大主流瀏覽器，確保網(wǎng)頁在各種設(shè)備上都能正常顯示。雖然切圖的門檻相對(duì)較低，但要想在這個(gè)領(lǐng)域立足，除了切圖技術(shù)，還需要投入大量時(shí)間在前端其他技術(shù)上，尤其是JS。

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

前端切圖和UI設(shè)計(jì)是兩個(gè)相輔相成的領(lǐng)域。UI設(shè)計(jì)師主要負(fù)責(zé)將頁面設(shè)計(jì)出來，而前端工程師則要將這些設(shè)計(jì)轉(zhuǎn)化為可以在web上顯示的網(wǎng)頁。切圖就是在這個(gè)過程中起到橋梁作用，將設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁元素，并通過代碼連接使其動(dòng)態(tài)交互。

三、什么是切圖及切圖的必要性

切圖，簡(jiǎn)單來說，就是將設(shè)計(jì)師的設(shè)計(jì)轉(zhuǎn)化為網(wǎng)頁的過程。這是一個(gè)將“理想”轉(zhuǎn)化為“現(xiàn)實(shí)”的工作。切圖主要是前端工程師的工作，涉及到將psd設(shè)計(jì)圖進(jìn)行切片重組，利用div+css、js等前端開發(fā)代碼來生成網(wǎng)頁。這個(gè)過程是必要的，因?yàn)闉g覽器無法直接解析設(shè)計(jì)圖，需要通過切圖將其轉(zhuǎn)化為瀏覽器能理解的代碼。

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

Axure和PS都是設(shè)計(jì)師常用的工具，兩者在圖片裁切方面有一定的重疊。在完整界面設(shè)計(jì)時(shí)，Axure可以利用圖片熱區(qū)元件來設(shè)置交互。而切圖后，每個(gè)小圖都可以單獨(dú)設(shè)置交互。但總體來說，UI的呈現(xiàn)效果是一致的。

五、網(wǎng)頁設(shè)計(jì)后的切圖流程

設(shè)計(jì)好網(wǎng)站后，切圖是下一步重要工作。這通常涉及將設(shè)計(jì)稿（如PS制作的效果圖）按需切割成相應(yīng)圖片。然后，使用Dreamweaver等工具將圖片按照網(wǎng)頁布局拼接起來。在這個(gè)過程中，圖片的大小會(huì)影響瀏覽器的加載速度。為了提高用戶體驗(yàn)，需要盡可能減小圖片大小，同時(shí)保證圖片質(zhì)量。

六、開發(fā)APP需要多少錢

開發(fā)一款A(yù)PP的價(jià)格主要取決于其功能和復(fù)雜程度。以下是一些關(guān)鍵因素和步驟：

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

2. 交互設(shè)計(jì)和UI設(shè)計(jì)：設(shè)計(jì)出原型圖和交互效果，并進(jìn)行切圖。這一步涉及到多種設(shè)計(jì)工具的使用，如Axure、Photoshop等。

3. 開發(fā)：使用ADT等開發(fā)環(huán)境進(jìn)行軟件開發(fā)，熟練掌握相關(guān)編程語言如Java等。

4. 服務(wù)器和數(shù)據(jù)庫開發(fā)：如果APP需要聯(lián)網(wǎng)，那么還需要開發(fā)服務(wù)器和數(shù)據(jù)庫。這涉及到WebService知識(shí)以及ASP.Net、PHP、JSP等開發(fā)語言的使用。

5. 其他技能：如算法開發(fā)、API接口開發(fā)等也需要一定的專業(yè)知識(shí)。

開發(fā)一款A(yù)PP需要多方面的技能和經(jīng)驗(yàn)，價(jià)格也取決于這些因素的復(fù)雜程度。在選擇開發(fā)團(tuán)隊(duì)或公司時(shí)，需要綜合考慮其經(jīng)驗(yàn)和技能水平。

以上就是對(duì)前端切圖及其他相關(guān)問題的詳細(xì)解析和探討。希望對(duì)你有所幫助！

網(wǎng)絡(luò)協(xié)議與App開發(fā)流程解析

第一章：TCP/IP與Socket協(xié)議基礎(chǔ)

在網(wǎng)絡(luò)技術(shù)中，TCP/IP與Socket是兩個(gè)至關(guān)重要的組成部分。深入了解這些協(xié)議對(duì)于App開發(fā)者而言尤為關(guān)鍵。TCP/IP是網(wǎng)絡(luò)傳輸控制協(xié)議和互聯(lián)網(wǎng)協(xié)議的集合，確保數(shù)據(jù)的可靠傳輸。而Socket則提供了一個(gè)通信的接口，使得不同的設(shè)備和應(yīng)用能夠通過網(wǎng)絡(luò)進(jìn)行交互。熟悉這些協(xié)議，意味著開發(fā)者能夠更流暢地處理網(wǎng)絡(luò)請(qǐng)求、響應(yīng)以及數(shù)據(jù)的傳輸與接收。

第二章：深入探索App開發(fā)網(wǎng)絡(luò)知識(shí)

在App開發(fā)中，除了基礎(chǔ)的協(xié)議知識(shí)外，還需要對(duì)App的網(wǎng)絡(luò)交互有深入的了解。這包括如何處理網(wǎng)絡(luò)請(qǐng)求、如何確保數(shù)據(jù)傳輸?shù)陌踩缘?。開發(fā)者需要熟悉各種網(wǎng)絡(luò)請(qǐng)求的方式，如GET、POST等，并了解如何在App中實(shí)現(xiàn)這些請(qǐng)求，從而與服務(wù)器進(jìn)行高效的數(shù)據(jù)交互。

第三章：真機(jī)調(diào)試技巧與證書管理

真機(jī)調(diào)試是App開發(fā)過程中不可或缺的一環(huán)。開發(fā)者需要熟練掌握真機(jī)調(diào)試的技巧，以便在實(shí)際設(shè)備上進(jìn)行測(cè)試和優(yōu)化。證書管理是App發(fā)布前的重要步驟，確保應(yīng)用的合法性和安全性。開發(fā)者需要了解如何申請(qǐng)證書、如何管理證書，并確保在發(fā)布前完成相關(guān)的配置。

第四章：App打包與發(fā)布流程

完成開發(fā)后，App的打包與發(fā)布同樣重要。開發(fā)者需要了解各種應(yīng)用商店的發(fā)布流程和要求，確保應(yīng)用能夠順利上架并為用戶提供服務(wù)。在這個(gè)過程中，開發(fā)者還需要處理應(yīng)用的簽名、版本控制等事項(xiàng)，確保應(yīng)用的穩(wěn)定性和安全性。

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

App開發(fā)是一個(gè)復(fù)雜的工程，涉及多個(gè)領(lǐng)域的知識(shí)和技能。個(gè)人開發(fā)者雖然能夠完成一些簡(jiǎn)單的應(yīng)用或基于現(xiàn)有框架的開發(fā)，但在面對(duì)復(fù)雜或大型項(xiàng)目時(shí)，團(tuán)隊(duì)協(xié)作顯得尤為重要。每個(gè)團(tuán)隊(duì)成員在自己的領(lǐng)域擅長(zhǎng)，通過協(xié)作能夠更高效地完成App的開發(fā)、測(cè)試、發(fā)布等流程。對(duì)于想要深入App開發(fā)的開發(fā)者來說，學(xué)會(huì)與他人協(xié)作，建立一個(gè)高效的團(tuán)隊(duì)，是走向成功的關(guān)鍵。

App開發(fā)不僅需要掌握各種技術(shù)和工具，還需要對(duì)網(wǎng)絡(luò)協(xié)議、真機(jī)調(diào)試、證書管理、打包發(fā)布等流程有深入的了解。團(tuán)隊(duì)協(xié)作在App開發(fā)中也扮演著至關(guān)重要的角色。只有掌握了這些知識(shí)和技能，才能為App的開發(fā)和發(fā)布打下堅(jiān)實(shí)的基礎(chǔ)。