一、iOS 常用Appicon圖標尺寸大小詳解

在iOS應用設計中，Appicon圖標的尺寸大小是至關重要的。下面是本人在學習iOS app制作設計過程中的一些常用尺寸總結，希望能為開發(fā)者們提供參考。

二、圖標尺寸歸納

所有的尺寸歸納都是以1PX的像素單位為基礎，這有助于我們在進行iOS APP設計時準確使用。

三、常見Appicon圖標尺寸

在iOS系統(tǒng)中，Appicon圖標通常有以下幾種尺寸規(guī)格：

• iOS 7及更高版本的App Store圖標尺寸為1024px x 1024px。
• iPhone的Spotlight搜索結果的圖標尺寸為58px x 58px。
• iPhone應用程序列表中的圖標尺寸為60px x 60px。
• iPad應用程序列表中的圖標尺寸為76px x 76px。

這些尺寸是標準的，但具體可能會因不同的iOS版本和設備型號有所變化。在設計Appicon圖標時，最好同時考慮多種尺寸規(guī)格以適應不同場景。

四、其他注意事項

除了上述標準尺寸外，開發(fā)者還需要注意以下幾點：

• 確保圖標清晰易識別。


• 遵循iOS的設計規(guī)范和用戶習慣。
• 考慮不同設備的屏幕大小和分辨率。

在實際設計過程中，開發(fā)者應根據(jù)具體需求進行調整和優(yōu)化。隨著iOS系統(tǒng)的更新，新的尺寸規(guī)格和規(guī)范也可能出現(xiàn)，開發(fā)者需要保持關注并及時更新。

五、總結

以上就是本人在學習iOS app制作設計時總結的一些常用Appicon圖標尺寸大小。這些尺寸僅供參考，在實際開發(fā)過程中，開發(fā)者還需要根據(jù)具體需求進行調整和完善。也歡迎大家提出寶貴的建議和反饋，共同完善這一內容。希望通過本文的分享，能對開發(fā)者們在iOS app設計過程中有所幫助。

iOS設計尺寸概覽及適配指南

一、iOS設計基本尺寸

圖標尺寸輸出列表：

180x180

120x120

87x87

80x80

58x58

57x57

29x29

啟動圖片尺寸列表：

設計版：640x960、640x1136、750x1334、1242x2208

物理版：1080×1920（針對特定機型）

二、桌面圖標（App Icon）尺寸

iPhone不同型號及版本對應的桌面圖標尺寸如下：

iPhone 7/6 plus(@3x)：180 x 180

iPhone 7/6/5s/5/4s/4(@2x)：120 x 120

三、搜索框圖標（Spotlight）尺寸

針對iPhone不同型號及版本設計的搜索框圖標尺寸如下：

iPhone 7/6 plus(@3x)：120 x 120

iPhone 7/6/5s/5/4s/4(@2x)：80 x 80

四、設置圖標（Settings Icon）尺寸

針對iOS系統(tǒng)的設置圖標尺寸如下：

iPhone 7/6 plus(@3x)：87 x 87

公司不同，流程各異，但終究有共通之處。在此分享一種工作方法，并非規(guī)范，望大家靈活應用。技術日新月異，此文主要針對IOS系統(tǒng)設計進行探討，Android系統(tǒng)暫不涉及。篇幅較長，建議分次閱讀，避免產(chǎn)生厭煩感。

Part 1：項目啟動與歸檔整理

在項目立項完善階段，公司會聚集相關員工。產(chǎn)品經(jīng)理會以原型展示產(chǎn)品細節(jié)，包括定位、市場需求、賣點、性質及功能模塊等。評估項目時間后，各部門協(xié)同合作，項目正式啟動。接到原型后，我們應做好哪些準備工作？

項目之初，應進行歸檔整理。我習慣采用“項目名稱+版本序列”的方式。每位設計師都有自己的工作習慣，有的喜歡將所有文件放入一個文件夾，但文件過多時，這種方式的弊端就顯現(xiàn)了。我建議將不同類型的文件分類存放，便于管理。

對于界面設計，我主要使用PS和AI。推薦版本較高的工具，因為低版本可能缺少某些功能。標注工具如PxCook在Windows上操作順手。雖然它具備切圖功能，但我認為該功能較為基礎，更推薦使用專門的切圖工具如Cutterman和AssistorPS。這些工具在官方網(wǎng)站上都有詳細的安裝和使用教程。

Part 2：Photoshop設計尺寸的選擇

目前常用的設計尺寸有幾種。首先是640960尺寸，這是APP設計初盛行擬物風格時的常見尺寸。隨著iPhone的更新，我們選擇了6401136尺寸以適應時代。目前我主要使用7501334尺寸進行設計，這個尺寸能兼顧iPhone 4、5、6及6 Plus。建議在設計時優(yōu)先考慮使用iPhone 6的尺寸，因為它具有較好的適配性。設計時，很多系統(tǒng)控件尺寸并未變化，只是內容顯示區(qū)域的高度有所調整。在設計文檔時，建議設置參考線，養(yǎng)成良好的工作習慣。

Part 3：頁面標注的重要性與方法

標注是設計的重中之重，關乎工程師能否完整還原設計稿。與工程師溝通標注方式至關重要，因為每位工程師的實現(xiàn)效果方法不同。不必每張效果圖都進行標注，關鍵是要保證工程師開發(fā)時能順利進行。

頁面元素標注與切片資源輸出詳解

一、首頁設計元素標注

1. 標題欄：

背景色值選擇。

文字大小與顏色標注。

2. Banner：

高度標注。撐滿橫屏的大圖無需橫向尺寸標注。

3. 菜單圖標：

圖標大小標注。

可點擊區(qū)域的標注，確保點擊的準確性和流暢性。

圖標與屏幕邊緣的距離標注。

4. 模塊間隔：

關鍵位置的間距標注，簡潔明了。

5. 圖片+文字組合：

圖片的寬高標注。

圖片與周圍元素距離標注。

文字大小與顏色標注。

二、TabBar標注與圖標設計

TabBar的圖標和文字可以作為一個整體控件進行標注和切片輸出。

圖標和文字的具體位置標注，確保顯示準確。

三、列表頁標注要點

行高標注，確保列表整齊有序。

行內元素的居中標注，以及元素之間的間距標注。

元素位置標注，特別是距離屏幕左側的距離。

四、切片資源的輸出

在切圖前與工程師溝通，確保切圖方式與開發(fā)習慣相符。

設計尺寸使用偶數(shù)，便于技術開發(fā)的尺寸轉換。例如字體大小、圖形效果等。

根據(jù)設備分辨率提供不同尺寸的切片資源，如@1x、@2x、@3x，滿足不同的顯示效果。但具體需要提供哪些尺寸應與工程師溝通確定。某些老舊設備可能不需要提供全部尺寸。共用資源的圖片只需提供一張即可，文字描述由技術團隊添加。切片命名應清晰明確，方便iOS設備自動選取合適尺寸。

五、總結

頁面標注的核心是：標文字、標圖片、標間距、標區(qū)域。與工程師的密切溝通是確保標注準確性和開發(fā)效率的關鍵。每種頁面的標注方法可能不同，因此需要根據(jù)實際情況靈活調整。在設計過程中注意細節(jié)，如偶數(shù)尺寸的使用和切圖的輸出方式等，以確保最終的設計效果和技術實現(xiàn)無縫對接。共同工作的團隊成員之間應該保持良好的溝通習慣，確保項目的順利進行。

一、圖片提供的建議與規(guī)范

在視覺設計領域，圖片的選用與處理方式至關重要。對于尺寸問題，理論上應提供多尺寸的圖片以適應不同需求。但在實際操作中，為簡化流程，通常只需提供最大尺寸的圖片。關于格式，JPG和PNG是常用的兩種格式。若圖片大小相差不大，推薦使用PNG格式，因其質量較高。如大小差異顯著，則考慮使用JPG，以優(yōu)化加載速度。

二、圖標與點擊區(qū)域的注意事項

在設計IOS應用的界面時，圖標和點擊區(qū)域的尺寸需特別關注。IOS人機指導手冊推薦的最小可點擊元素尺寸為44x44point，約等于7mm。此尺寸下，用戶點擊不易出現(xiàn)誤操作。在設計圖標時，雖可追求精致小巧，但切圖輸出時，需確保用戶點擊的便捷性。對于普通屏幕，圖標切圖尺寸應為44px；對于高清屏，則需增大至88px。如有透明區(qū)域，可用來補充不足。

三、圖標與圖片的不同狀態(tài)處理

圖標或圖片在不同狀態(tài)下，如正常、按下、選中、禁用等，每一狀態(tài)都需要單獨切片輸出。例如，按鈕的常見狀態(tài)包括正常、被按下后的反應以及被選中等。這些狀態(tài)的切片命名需遵循一定規(guī)范，如“切片種類+功能+圖片描述+狀態(tài).png”的格式。命名應使用英文，避免以數(shù)字或符號開頭，推薦使用下劃線連接。

四、Tabbar（底部欄）的切圖與命名

Tabbar的設計在手機應用中極為特殊。若僅包含圖標，則直接切圖即可。但實際上，通常建議采用圖標加文字的模式。其中，圖標應單獨切出，文字部分則由程序后續(xù)添加。同一模塊的圖標切片大小需保持一致，即使原圖尺寸不同，切圖時也應保持相同的陰影大小，便于工程師開發(fā)使用。關于命名，建議依據(jù)“切片種類+功能+圖片描述（可選）+狀態(tài)”的格式進行命名。若有特殊需求或英文有困難，可適當使用拼音代替。

五、工作常用數(shù)據(jù)參考

關于字體，Mac用戶可直接使用蘋果黑體。Windows用戶則可選擇其他接近IPhone字體的替代方案，如“蘋果麗黑HiraginoSansGBW3（普通）/W6（粗體）”或“黑體-簡STHeitiSC-Light”。至于字體大小，頂部操作欄文字大小建議為34-38px，標題文字大小28-34px，正文文字大小26-30px，輔助性文字大小20-24px，Tabbar文字大小則為20px。這些字體和字號僅供參考，實際設計時應根據(jù)視覺效果靈活調整。

一、iPhone設計尺寸介紹

在iOS設計中，了解不同iPhone型號的設計尺寸是至關重要的。以下是各型號的標準分辨率和設計尺寸：

iPhone 3GS：設計尺寸為320480（圖片僅在網(wǎng)上見過）。

iPhone 4/4s（4時代的設計）：設計尺寸為640960或6401136。

iPhone 5/5s/5c（5時代的設計）：設計尺寸為7501334。

iPhone 6：目前最新的設計尺寸，標準分辨率為12422208，這是現(xiàn)在制作iOS應用設計時最常用的尺寸。

iPhone 6 Plus：除了標準分辨率外，還存在物理分辨率為10801920的版本。Plus還涉及橫屏設計，可參考iPad的設計模式。橫屏尺寸是22081242。

二、啟動頁面設計尺寸

在開發(fā)iOS應用時，啟動頁面的設計尺寸至關重要。根據(jù)iPhone的型號不同，啟動頁面的設計尺寸也有所不同。以下是工程師要求提交的尺寸列表：

iPhone 4/4s：使用640960的設計尺寸。

iPhone 5/5s/5c：使用6401136的設計尺寸。

iPhone 6：使用7501334的設計尺寸。

iPhone 6 Plus：提交包含標準分辨率（橫屏尺寸為22081242）的啟動頁面圖。由于iOS系統(tǒng)可以自動裁剪圖片為圓角，因此提交的正方形圖標尺寸為正方形的PNG格式。需要的圖標尺寸包括：主屏幕圖標尺寸為10241024（Retina版）、普通屏幕的APP Store圖標尺寸為512512等。具體提交尺寸需要根據(jù)工程師的要求來確定。因此建議設計師與工程師緊密溝通，了解所需的具體尺寸列表。蘋果提供的開發(fā)文檔中有更詳細的尺寸說明，但實際應用中并不需要所有手冊上的尺寸，重點在于與工程師溝通并確保提交正確的尺寸。需要注意提交的圖標應符合圓角裁剪的要求，提交正方形的PNG格式圖標即可。由于需要的圖標數(shù)量眾多，設計師應選擇最佳尺寸的圖標進行提交。例如主屏幕圖標尺寸為：iPhone 6的主屏幕尺寸為120120；iPhone 5/4s/4的主屏幕圖標尺寸為114114等。

三、iOS開發(fā)中Icon圖標的設置方法

三、設置Icon圖標步驟解析：

第一步：在Photoshop中新建一個文件，大小設定為標準的App Icon尺寸——即尺寸為1024x1024像素的文件。這是為了設計出符合蘋果要求的圖標大小。設計師可以根據(jù)需求自行設計圖標內容并填充背景顏色或使用PS自帶的形狀和文字元素進行設計。第二步：完成設計后，“存儲為web所用格式”，選擇PNG后綴的格式進行保存。這樣生成的圖片格式是符合蘋果要求的PNG格式圖標文件。第三步：打開Xcode工程文件后找到Assets.xcassets文件，這個文件內包含了AppIcon對象，需要添加指定尺寸的圖標圖片共六張。這些圖片將作為App的圖標展示在設備上。第四步：使用Photoshop或其他軟件工具生成指定尺寸的六個圖標文件，可以使用軟件工具如“App Icon Gear”來簡化生成過程。第五步：將生成的圖標文件拖動到Xcode中的對應指定尺寸的Assets.xcassets位置中即可完成設置。最后一步則是運行App并返回到主屏幕查看App圖標效果是否達到預期效果。