概述
Devices such as the iPhone 4 and 4S use a high resolution Retina display with twice the pixel density of other devices. Sizes can also vary for the iPad, and these are both indicated where applicable.
Guidelines
∅ = Corner Radius
Sizes (px) | Format and naming | Notes |
---|---|---|
Application Icons | ||
57px - 10px ∅ 72px - 12px ∅ (iPad) 114px - 20px ∅ (iPhone 4+) 144px - 24px ∅ (iPad 3+) | .png Name icon for Retina display with a suffix of @2x.png | Do not include the corner radius in the artwork, and be aware that this portion is cropped |
Web clip icons | ||
57px - 10px ∅ 72px - 12px ∅ (iPad) 114px - 20px ∅ (iPhone 4+) 144px - 24px ∅ (iPad 3+) | apple-touch-icon-precomposed.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-114x114-precomposed.png apple-touch-icon-144x144-precomposed.png | These are shown on the home screen when saving a bookmark. Leave off the '-precomposed' portion of the filename if you want iOS to add the glossy overlay. See chapter 3 of the Icon Handbook for more information |
Document icons | ||
22x29px 44x58px (iPhone 4+) 64px (iPad 1-2) 128px (iPad 3+) | .png | These icons are overlaid on top of the standard document icon (white sheet of paper), hence the odd sizes. The iPad has a safe area of 44x59px. |
Settings icon | ||
29px - 5px ∅ 58px - 10px ∅ (Retina Display) | .png | iPad 1-2 sizes are the same as for non-Retina displays, although the final visual size of this icon is 48x48px as iOS trims 1px from each side of the artwork and adds a drop shadow. |
Spotlight Search Results icon | ||
29px - 5px ∅ 50px - 10px ∅ (iPad 1-2) 58px - 10px ∅ (iPhone 4+) 100px - 20px ∅ (iPad 3+) | .png | iPad 1-2 sizes are the same as for non-Retina displays, although the final visual size of this icon is 48x48px as iOS trims 1px from each side of the artwork and adds a drop shadow. |
Toolbar and navigation bar icons | ||
20px 40px (Retina Display) | .png | iOS will use the alpha channel, applying shadow effects for you, so don't include any shadow in your artwork |
Tab bar icon | ||
30px 60px (Retina Display) | .png | |
App Store icon | ||
512px/90px ∅ 1024px/180px ∅ (Retina Display) | Must be named 'iTunesArtwork' without the .png extension | The App Store icon is reduced to 176px square for the app's listing. iPad will use a scaled version of this icon for custom document icon, if one hasn't been provided. |
最后
以上就是眼睛大柜子为你收集整理的IOS图标规范的全部内容,希望文章能够帮你解决IOS图标规范所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复