iOS App图标和启动画面尺寸 |
您所在的位置：网站首页 › ios启动图标尺寸是多少的 › iOS App图标和启动画面尺寸 |
|
转载：http://www.jianshu.com/p/adpKye 注意：iOS所有图标的圆角效果由系统生成，给到的图标本身不能是圆角的。 image.png 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone 6/5s/5/4s/4(@2x) : 120 x 120 系统搜索框图标 (Spotlight search results icon) for iPhone6 plus(@3x) : 120 x 120 for iPhone6/5s/5/4s/4(@2x) : 80 x 80 系统设置图标 (Settings icon) for iPhone6 plus(@3x) : 87 x 87 for iPhone6/5s/5/4s/4(@2x) : 58 x 58 启动图片 (launch image) for iPhoen5s/5(@2x) : 640 x 1136 for iPhoen4s/4(@2x) : 640 x 960 iPhone6/iPhone6 plus 建议使用 launch file 或 storyboard ；如果依然想使用图片，尺寸数值为： for iPhone 6(@2x) : 750 x 1334 for iPhone 6 plus (@3x) : 1242 x 2208 另一种根据iOS系统的分类法 Spotlight iOS 5,6 base: 29pt, 需要 @1x, @2x, @3x，得出：29 x 29, 58 x 58, 87 x 87 iOS 7,8 base: 40pt, 需要 @2x, @3x，得出：80 x 80, 120 x 120 iPhone App iOS 5,6 base: 57pt，需要 @1x, @2x, 得出：57 x 57, 114 x 114 iOS 7,8 base: 60pt，需要 @2x, @3x，得出：120 x 120, 180 x 180 Settings iOS 5,6,7,8 base: 29pt，需要 @1x,@2x,@3x，得出：29 x 29, 58x58, 87x87 尺寸总结： 图标尺寸输出列表： 180x180 120x120 87x87 80x80 58x58 57x57 29x29 启动图片尺寸输出列表： 640x960 640x1136 750x1334 1242x2208转载:http://www.cnblogs.com/wzlblog/p/5706495.html 以下内容都是我在做App时通过自己的经验和精品的分析得来的，希望会帮助到你。但是有时个别情况也要个别分析，要活学活用。 一. App Icon 在设计iOS App Icon时，设计师不需要切圆角，直接矩形就可以。 下面是App Icon需要的尺寸和命名（尺寸和命名不做解释）： 尺寸 命名 1.57x57 px Icon 2.114x114 px Icon@2x 3.40x40 px Icon-40 4.80x80 px Icon-40@2x 5.120x120 px Icon-40@3x 6.120x120 px Icon-60@2x 7.180x180 px Icon-60@3x 8.72x72 px Icon-72 9.144x144 px Icon-72@2x 10.76x76 px Icon-76 11.152x152 px Icon-76@2x 12.29x29 px Icon-Small 13.58x58 px Icon-Small@2x 14.87x87 px Icon-Small@3x 15.50x50 px Icon-Small-50 16.100x100 px Icon-Small-50@2x 二. 启动页 下面是启动页需要的尺寸和命名（尺寸和命名不做解释）： 尺寸 命名 1.320x480 px Default 2.640x960 px Default@2x 3.640x1136 px Default-568h@2x 4.750x1334 px LaunchImage-800-667h@2x 5.2208x1242 px LaunchImage-800-Landscape-736h@3x 6.1242x2208 px LaunchImage-800-Portrait-736h@3x 三. App内图标 我会把App内的图标分成四类进行规范设计：第一类顶部栏内的图标；第二类底部导航栏内的图标；第三类内容区域的图标；第四类弹窗、浮层内的图标。 1.顶部栏内的图标 在设计顶部栏内的图标时应注意，图标的高度不能超过顶部栏高度的一半。以750x1334 px的尺寸为例，顶部栏高度为88 px，图标不能超过顶部栏的一半就是44 px， 但为了页面的美观感与整体性，图标的高度最好与顶部栏标题的字高度保持一直，一般图标的高度控制在32-36 px左右。 2.底部导航栏内的图标 底部导航栏内不仅只有图标，一般每个图标下都会有对应的文字，这种情况就比较复杂，因为你需要把图标距上间距、图标与文字间距、文字距下间距等因素考虑进去。图标与文字上下间距一般控制在20 px左右，文字大小在20 px左右，图标与文字间距控制在14 px范围内，最终图标的大小在40-44 px左右。 和顶部栏的原则一样，底部导航栏的图标不能超过其高度的一半，若底部导航栏高度为98 px，图标不要超过48 px， 再加上底部导航栏的文字48 px高的图标也不太合适，所以以我的经验之谈，最佳高度是44 px。 3.内容区域的图标 其实仔细研究就会发现，App里的图标分为两种，一种是可点击的，一种是起修饰作用的不能点击的。可点击的图标往往比起修饰作用的图标大。我在做内容区域的图标时为了使整体的App看上去比较统一，图标的大小范围和顶部栏、底部导航栏的图标上下不超过2-4个像素，基本和文字的高度一致。可点击图标范围在32-36 px左右， 不可点击图标范围在24-28 px左右。 上述内容都是我在做App时通过自己的经验和精品的分析得来的，希望会帮助到你。但是有时个别情况也要个别分析，要活学活用。 参考文献 Icon and Image Sizes [Launch Images]@2x 为：for iPhone 6/5s/5/4s/4 @3x为：for iPhone6 plus IOS各型号尺寸 类型 屏幕尺寸 显示像素 需要倍数 切图尺寸 命名规范 iPhone6 plus 414*736 @3 1242×2208 5.5Retina HD iPhone6 375*667 @2 750×1334 4.7Retina HD iPhone5 320*568 @2 640×1136 4Retina HD iPhone4 320*480 @2 640×960 3.5Retina iPhone3 320*480 @1 320*480 3.5APPIcon图片 类型 桌面图标 显示像素 需要倍数 切图尺寸 命名规范 notification（ios 7-10） 推送通知图标 20pt 2x 3x 40pt和60pt Icon-Small-20@2x,Icon-Small-20@3x spotlight(iOS5-6) 手机搜索 29pt 2x 3x 58pt和87pt Icon-Small-29@2x,Icon-Small-29@3x settings(iOS 5_10) 设置页面 29pt 2x 3x 58pt和87pt Icon-Small-29@2x,Icon-Small-29@3x spotlight(iOS7-10) 搜索 40pt 2x 3x 80pt和120pt Icon-Small-40@2x,Icon-Small-40@3x APP(iOS 7-10) 桌面图标 60pt 2x 3x 120pt和180pt Icon-60@2x,Icon-60@3x APP 应用市场 1024 APPIconForAppStore.png启动图片设置 类型 横竖屏 系统版本 屏幕尺寸 切图尺寸 命名规范（1，表示第一个版本，P竖屏L横屏） iphone6 plus 竖屏 ios8,9 RetinaHD5.5 1242×2208 [email protected] iphone6 竖屏 ios8,9 RetinaHD4.7 750×1334 [email protected] iphone6 plus 横屏 ios8,9 RetinaHD5.5 2208x1242 [email protected] iphone5/5s 竖屏 ios7-9 retina 4 640×1136 [email protected] iphone4/4s 竖屏 ios7-9 2x 640×960 [email protected] ipad 竖屏 ios7-9 1x 768×1024 [email protected] ipad 竖屏 ios7-9 2x 1536×2048 [email protected] ipad 横屏 ios7-9 1x 1024×768 [email protected] ipad 横屏 ios7-9 2x 2048×1536 [email protected]图片命名规范 一个简单的命名规范，作用就不说了～～～～ 不要用拼音，尽量使用英文 下划线 nav_right_back 注意区分倍图@2x 和@3x 的后缀，不然效果差强人意命名的组成部分： 逻辑板块（可由Tabbar来判断，如果我：My），定位到哪一个页面(personMessage)，哪一个功能描述（比如说设置setting），状态（选中，高亮，不可使用，正常状态） 例：my_personMessage_setting_s 表示个人中心选项卡中的个人信息中的设置图标的选中状态。 除此之外，就是对于一下公共的图片： 如果是整个项目都要用到的，就为pub_message,pub_nav_back(导航栏返回按钮) 如果是某个模块要用到的，就为my_pub_message这样效果显而易见了，当然在设计目录结构的时候也一定按照相应的层次结构进行设计，千万不要偷懒，放在同一级目录里，版本迭代多了后，你会哭的。 (https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |