以下内容都是我在做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. linux配置网卡绑定

    1.确定好要绑定的那两个网口 我这边要绑定的是两个业务口  em2.em3 2.配置ifcfg-bond0.em2.em3 3.修改配置文件/etc/modprcode.d/disk.conf 底部添 ...

  2. 如何判断js中的数据类型?

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  3. CALayer笔记

    1.Core Animation是跨平台的,支持IOS和Mac OS X环境 2.核心动画操作的对象不是UIView而是CALayer,CALayer是核心动画的基础, 可以做圆角.阴影.边框等效果 ...

  4. js①

    JavaScript的引入方式 直接在script标签内部书写代码 ```html <!DOCTYPE html> ``` 2. 通过script标签的src属性,引入外部的JavaScr ...

  5. win7配上的网关会自动消失?解决

    前几天遇见一台计算机,发现手动设置的ip和网关等...在使用了一会就变成,网关丢失,其他不变...奇怪啊...第一次遇见.后来找了一下.有答案了. 先将客户端卸载掉,再打开网络和共享中心-->本 ...

  6. JAVA编程讲座-吴老

    JAVA系列公开课第4讲:多态系列课程:从JAVA编程零基础讲起,同时结合工作中遇到的具体实例,语言清晰易懂,连续10周+深入讲解,打下编程基础,让我们一起打来自动化测试的大门时间:4月25日(周一) ...

  7. qt做触摸屏演示程序

    界面效果图: 参考资料: http://blog.csdn.net/orz415678659/article/details/9136575     这个最重要.. https://www.oschi ...

  8. JS弹窗数据带回

    父窗口代码: function selectCar_Team_Info(){ //var url = "<%=basepath_%>ec/jsp/carLoading/carTe ...

  9. Caliburn.Micro学习笔记目录——li-peng

    Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 Caliburn.Micro学习笔记(二)----Actions Caliburn.Micro学习笔记(三)----事件聚合IE ...

  10. 服务器列表里找不到OracleOraDb10g_home1TNSListener

    先安装的ORACLE DB,后配置的数据库,TNSNAMES.ORA, LISTENER.ORA配置完毕,客户端连接不上TNS服务器,发现服务列表里没有OracleOraDb10g_home1TNSL ...