以下内容都是我在做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时通过自己的经验和精品的分析得来的,希望会帮助到你。但是有时个别情况也要个别分析,要活学活用。

[摘抄]iOS App icon、启动页、图标规范的更多相关文章

  1. iOS程序的启动图片图标规范

     

  2. iOS app 程序启动原理

    iOS app 程序启动原理 Info.plist: 常见设置     建立一个工程后,会在Supporting files文件夹下看到一个"工程名-Info.plist"的文件, ...

  3. Asset Catalog Help (五)---Migrating an iOS App Icon Set or Launch Image Set

    Migrating an iOS App Icon Set or Launch Image Set Simplify image management by moving existing app i ...

  4. Asset Catalog Help (四)---Adding an iOS App Icon Set or Launch Image Set

    Adding an iOS App Icon Set or Launch Image Set Organize different resolutions of your app icons and ...

  5. 怎样做一个iOS App的启动分层引导动画?

    一. 为什么要写这篇文章? 这是一个很古老的话题,从两年前新浪微博开始使用多层动画制作iOS App的启动引导页让人眼前一亮(当然,微博是不是历史第一个这个问题值得商榷)之后,各种类型的引导页层出不穷 ...

  6. iOS App的启动过程

    一.mach-O Executable 可执行文件 Dylib 动态库 Bundle 无法被连接的动态库,只能通过 dlopen() 加载 Image 指的是 Executable,Dylib 或者 ...

  7. iOS开发 关于启动页和停留时间的设置

    引言: 在开发一款商业App时,我们大都会为我们的App设置一个启动页. 苹果官方对于iOS启动页的设计说明: 为了增强应用程序启动时的用户体验,您应该提供一个启动图像.启动图像与应用程序的首屏幕看起 ...

  8. Android APP应用启动页白屏(StartingWindow)优化

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 StartingWindow 的处理方式: 使用系统默认的 StartingWindow :用户点了应用图标启动应用,马上弹出系统默 ...

  9. [转]iOS证书(.p12)和描述文件(.mobileprovision)申请

    转载于:http://ask.dcloud.net.cn/article/152 iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试,在HBu ...

随机推荐

  1. scanf_s 可能会出现的死循环

                                        VS2015中提供了scanf_s().在调用时,必须提供一个数字以表明最多读取多少位字符. scanf_s("%s& ...

  2. zookeeper集群安装与配置

    转自: http://my.oschina.net/u/2377453/blog/464739 1.解压zookeeper 2.在$ZOOKEEPER_HOME/conf下创建zoo.cfg文件(参考 ...

  3. JS 数字,金额 用逗号 隔开(数字格式化)

    <script> function fmoney(s,n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s ...

  4. [网络技术][转]网卡的offload概念

    网络数据包分析 网卡Offload 对于网络安全来说,网络传输数据包的捕获和分析是个基础工作,绿盟科技研究员在日常工作中,经常会捕获到一些大小远大于MTU值的数据包,经过分析这些大包的特性,发现和网卡 ...

  5. 5、 Android 之Fragment

    上:http://blog.csdn.net/lmj623565791/article/details/37970961 下:http://blog.csdn.net/lmj623565791/art ...

  6. javascript语言精粹

    内容选自:<javascript语言精粹> 1.6种值会为假(==false),分别是false,null,undefined,' ',0,NaN 2.typeof有6种值,分别是'num ...

  7. lucene5学习 - 索引基本操作(创建,查询,更新,删除,分页)

    package lucene5; import java.io.IOException; import java.nio.file.Paths; import java.text.SimpleDate ...

  8. response设置相应头的方法

    response 设置响应头的常用几种方法 1.Location 的用法 response.setStatus(302)//临时定向响应码 response.setHeader("Locat ...

  9. 了解JavaWeb,一篇就够

    把HTML.CSS.JSP.JS.JavaScript,JQuery,STRUTS,String,MVC,DOM 柔和起来,贯穿成一篇完整的内容,让读者明白JavaWeb的前前后后. 从Servlet ...

  10. 编程等宽字体Source Code Pro(转)

    Source Code Pro - 最佳的免费编程字体之一!来自 Adobe 公司的开源等宽字体下载     每一位程序员都有一套自己喜爱的代码编辑器与编程字体,譬如我们之前就推荐过一款"神 ...