App切圖命名規(guī)范

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

在APP開發(fā)中，規(guī)范的切圖命名是提高工作效率與減少誤解的關(guān)鍵。我們遵循以下基本的命名規(guī)則，這些規(guī)則適用于iOS和部分Android平臺。

1. 全部使用小寫英文：為保持團隊命名的一致性，避免代碼更改命名的麻煩，我們遵循全部小寫的英文命名規(guī)則。

2. 單詞間使用下劃線：我們使用“_”作為連接符來連接不同的單詞，避免在Android平臺使用“-”。

二、切片文件命名

對于切片文件的命名，我們有特定的規(guī)則。

1. 模塊特有規(guī)則：按照“模塊_類別_功能_狀態(tài)@2x.png”的格式進行命名。例如：“”。

2. 重復(fù)圖標處理：對于重復(fù)的圖標，我們使用數(shù)字序列如“icon1、icon2、icon3…”來避免命名沖突。

三、英文縮寫

為減少命名長度，我們對常用的英文單詞進行合理縮寫。團隊需要統(tǒng)一縮寫規(guī)則，例如，“nav”代表“navigation bar”。

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

規(guī)范的命名不僅方便后期文件的管理和修改，還有助于團隊協(xié)作，減少學(xué)習(xí)成本，并大幅節(jié)省開發(fā)時間，減少溝通成本和重復(fù)切圖。

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

對于按鈕狀態(tài)，我們有明確的命名規(guī)則，包括正常(normal)、突出(highlighted)、選中(selected)、不可用(disabled)等。在iOS上，通常不需要為highlight狀態(tài)制作單獨的切圖。

六、工具與資源

為提高效率，我們推薦使用如藍湖的工具。這些工具提供自動標注、樹狀連線、交互原型制作和產(chǎn)品文檔共享功能。

七、命名規(guī)范的重要性

理解命名背后的邏輯有助于更深入地參與項目，甚至制定新的規(guī)范。團隊應(yīng)根據(jù)自身需求調(diào)整命名規(guī)范，并定期回顧和優(yōu)化。

關(guān)于切圖和截圖的問題解答：

一、切圖和截圖有什么區(qū)別

問題一：切圖和截圖是一回事嗎？

答：不一樣。截圖是簡單地保存當(dāng)前屏幕的圖片，而切圖則是將圖片制作成可點擊的網(wǎng)頁元素。

問題二：PS切圖和切片的區(qū)別是什么？

答：切片主要是將圖片切成多塊，以便于在網(wǎng)絡(luò)上傳播，加快加載速度。而切圖更多的是指對圖片進行裁切，去除雜邊或不需要的部分。問題三：蘋果與安卓APP切圖差異分析

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

一、Android版設(shè)計解析與切圖要點

--

在Android版本設(shè)計中，尺寸多樣，我們需選定一個基準尺寸來開展工作，這個基準尺寸為480px800px。以一張設(shè)計圖為例，我們來詳細解析切圖過程。

1. 底部欄目的icon和背景切圖

底部欄目的icon和背景切圖一般有兩種切法，分別對應(yīng)默認和選中后的效果。

2. 頂部欄目背景切圖

由于頂部導(dǎo)航欄采用漸變樣式，只需切一小條，技術(shù)團隊會進行平鋪拉伸。如果是花紋背景，則需要切整條以保證拉伸后效果不變。

3. 文字大小和行間距標注

標注文字大小和行間距時，需要注意Android主要有三種屏幕密度，即QVGA、WVGA和HVGA，密度不同，資源包中的hdpi、mdpi和ldpi標簽的使用也不同。我們標注的是PX，但技術(shù)團隊使用的是DP，因此需要進行PX和DP之間的轉(zhuǎn)化。

注意：在設(shè)計基于480800尺寸時，要想適配其他流行尺寸，如640960或7201280，需要為不同尺寸制作不同的圖標。但如果產(chǎn)品要求不嚴格，也可以只做一套圖，只是在大于480尺寸屏幕上可能會出現(xiàn)圖標被拉大變虛的情況。

二、iOS版設(shè)計解析與切圖要點

--

iOS版本設(shè)計的尺寸有3種，分別是320480、640960、6401136。我們以640px960px為基準尺寸來講解切圖過程。

1. 底部欄目icon和背景切圖

與Android類似，底部欄目的icon和背景也有兩種切法。

2. 頂部欄目背景切圖

由于iOS頂部導(dǎo)航欄多顏色，需切一整條給技術(shù)團隊，同時商圈的圖標要單獨切出。

3. 二級、主體欄目及文字標注

還需注意二級標題欄目、主體欄目的切圖以及文字大小和行間距的標注。需要注意的是，我們標注的尺寸是像素px，技術(shù)那邊實際運用的是像素的一半作為尺寸。顏色的標注也有技術(shù)要求，有的要求16進制，有的要求RGB。

問題四：DW切圖與PS切圖的差異

DW和PS切圖的主要區(qū)別在于輸出的代碼形式。PS切圖輸出的代碼多是table形式，而DW寫出的代碼則使用div。雖然看上去差別不大，但DW制作的網(wǎng)頁更為精致，更適合動態(tài)頁面的開發(fā)。對于轉(zhuǎn)為ASP動態(tài)頁面的需求，DW更為友好，方便后期代碼的加入和修改。

問題五：前端切圖與UI設(shè)計的區(qū)別及前端基礎(chǔ)要素

--

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

前端切圖，就像是將設(shè)計師的宏偉藍圖轉(zhuǎn)化為現(xiàn)實中的建筑。當(dāng)你拿到一張設(shè)計圖時，需要在有限的時間內(nèi)將其切成網(wǎng)頁格式。這個過程需要兼容各個主流瀏覽器，確保網(wǎng)頁在各種環(huán)境下都能展現(xiàn)出最佳效果。雖然切圖的門檻相對較低，但要想在這個領(lǐng)域立足，不僅需要熟練掌握基礎(chǔ)技能，還需要不斷深造，因為在前端領(lǐng)域，競爭是激烈的。

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

UI設(shè)計是創(chuàng)造理想中的頁面，而前端切圖則是將設(shè)計師的這些理想轉(zhuǎn)化為現(xiàn)實。前端工程師需要將設(shè)計圖切片，并運用代碼將其在Web上完美呈現(xiàn)。這是一個橋梁的角色，將設(shè)計師的創(chuàng)意與用戶的體驗緊密相連。

三、UI中的“切圖”及其重要性

在UI設(shè)計中，“切圖”是前端工程師的重要工作。切圖并非簡單地將設(shè)計轉(zhuǎn)化為網(wǎng)頁，它是一個將設(shè)計師的創(chuàng)意轉(zhuǎn)化為用戶可感知體驗的過程。這涉及到將PSD設(shè)計稿進行切片，利用DIV+CSS、JS等前端開發(fā)代碼來生成網(wǎng)頁。每一個細節(jié)都需要精確無誤，以確保最終的網(wǎng)頁效果與設(shè)計師的初衷一致。

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

Axure圖片裁切和PS切圖在本質(zhì)上都是將設(shè)計轉(zhuǎn)化為網(wǎng)頁的過程。在完整界面設(shè)計時，可以使用圖片熱區(qū)元件來設(shè)置交互。而在切圖完成后，每一個小圖都可以獨立設(shè)置交互。但無論哪種方式，UI的呈現(xiàn)效果都是一致的。

五、APP開發(fā)的相關(guān)知識與費用

開發(fā)一款A(yù)PP的價格主要取決于其功能的復(fù)雜程度。這個過程涉及到多個環(huán)節(jié)，包括需求規(guī)劃、交互設(shè)計、UI設(shè)計、軟件開發(fā)、服務(wù)器開發(fā)、數(shù)據(jù)庫開發(fā)等。每一個環(huán)節(jié)都需要專業(yè)的知識和技能，從java語言到android環(huán)境和機制，從WebService相關(guān)知識和開發(fā)語言到數(shù)據(jù)庫開發(fā)，都需要一一掌握。如果涉及到某些特殊功能，還需要一定的算法知識和數(shù)學(xué)基礎(chǔ)。而開發(fā)的費用，則是根據(jù)這些需求的復(fù)雜程度來決定的。

前端切圖是基礎(chǔ)，但要想在這個領(lǐng)域取得成功，需要不斷學(xué)習(xí)和實踐。無論是UI設(shè)計還是APP開發(fā)，都需要深厚的專業(yè)知識和豐富的實踐經(jīng)驗。TCP/IP與Socket：網(wǎng)絡(luò)協(xié)議的關(guān)鍵要素及App開發(fā)流程詳解

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

一、TCP/IP與Socket網(wǎng)絡(luò)協(xié)議基礎(chǔ)

在現(xiàn)代的互聯(lián)網(wǎng)技術(shù)領(lǐng)域，熟悉TCP/IP和Socket等網(wǎng)絡(luò)協(xié)議是至關(guān)重要的。TCP/IP作為互聯(lián)網(wǎng)的核心協(xié)議之一，為各種互聯(lián)網(wǎng)應(yīng)用提供了數(shù)據(jù)傳輸?shù)幕A(chǔ)。而Socket則是網(wǎng)絡(luò)應(yīng)用程序之間的通信接口，是實現(xiàn)網(wǎng)絡(luò)數(shù)據(jù)傳輸?shù)年P(guān)鍵所在。深入理解這兩個協(xié)議，能夠幫助我們更好地進行網(wǎng)絡(luò)通信編程和問題解決。

二、深入探索Socket相關(guān)知識

除了基礎(chǔ)的TCP/IP協(xié)議，Socket在網(wǎng)絡(luò)編程中扮演著更為具體的角色。通過Socket，我們可以實現(xiàn)不同設(shè)備間的通信，完成數(shù)據(jù)傳輸。掌握Socket編程意味著對網(wǎng)絡(luò)通信有了深入的了解和實踐經(jīng)驗。這包括但不限于Socket的創(chuàng)建、連接、通信、關(guān)閉等過程，以及相關(guān)的錯誤處理和優(yōu)化技巧。

三、App開發(fā)流程及真機調(diào)試技巧

在App開發(fā)過程中，掌握發(fā)布的流程同樣關(guān)鍵。從開發(fā)到真機調(diào)試，再到證書的獲取、打包和上架，每一步都不能馬虎。真機調(diào)試是確保App在實際設(shè)備中運行穩(wěn)定的關(guān)鍵環(huán)節(jié)。開發(fā)者需要熟練掌握各種調(diào)試技巧，解決可能出現(xiàn)的問題。對于證書的獲取和管理、應(yīng)用的打包格式和上架流程也要了然于胸。

四、團隊協(xié)同開發(fā)的重要性

App開發(fā)是一個復(fù)雜而繁瑣的過程，不一定適合一個人獨立完成。尤其是在面對大型項目或復(fù)雜應(yīng)用時，團隊協(xié)作顯得尤為重要。每個人都有自己的擅長領(lǐng)域，通過團隊協(xié)作，可以更有效地完成各自的任務(wù)，提高開發(fā)效率和質(zhì)量。除非是一些簡單的單機版應(yīng)用或基于現(xiàn)有框架的第三方應(yīng)用開發(fā)，否則建議還是組建團隊進行開發(fā)。

五、總結(jié)與展望

掌握TCP/IP和Socket等網(wǎng)絡(luò)協(xié)議是互聯(lián)網(wǎng)時代的必備技能。對于App開發(fā)流程的真機調(diào)試技巧以及團隊協(xié)同的重要性也要有所了解。隨著技術(shù)的不斷進步和需求的日益增長，未來的互聯(lián)網(wǎng)應(yīng)用領(lǐng)域?qū)⒏訌V闊。只有不斷學(xué)習(xí)和實踐，才能跟上這個時代的步伐，為互聯(lián)網(wǎng)的發(fā)展貢獻自己的力量。