app界面设计尺寸规范大全

目前主流的是以iPhone 6为主，设计尺寸是750*1334px，4.7寸。

1、分辨率以iPhone 6 设计为主：750*1334px

2、（字体 Helvetica/华文细黑，实际中运用黑体简或者Hiti-sc 最接近系统中所带字体）

3、工具栏height：88px    如搜索、选择、删除、回复等。

4、顶部标签栏height：60px  位于状态栏或者状态栏下的文字/具有可切换功能的图标

1、导航栏

所有的字号，在750*1334px的设计尺寸下都是偶数，便于程序员操作。

所有可触发按钮必须≥44*44

所有可触发按钮必须≥22*22

左右内容与边距的间隔大概在20px

强调确定，填充有彩色。

例如：

搜索框右边要有一个取消、或者输入了之后有一个“x”

渐变和底纹效果和程序员商讨

设计尺寸：720*1280px

状态栏48px  导航栏96px  内容区1038px   标签栏112px

android app 界面设计是按720*1280的，切图上可以点9切图做到所有手机的适配。

状态栏、导航栏和主菜单栏，以720*1280的尺寸来设计，那么状态栏的高度应为50px，导航栏的高度96px，主菜单栏的高度96px，因为是开源的系统，这里的数值也只能作为参考。

Android为了区别于IOS，从4.0开始提出了一套HOLO的UI风格设计风格，鼓励将底部的主菜单栏放到导航栏下面，从而避免点击下方材料误点虚拟按键，很多APP的新版中也采用了这一风格。

扩展资料：

注意事项：

1、通常情况要定位一个Icon只需给出 上/下边距，左/右边距，标注图标距离只需标到可点击范围外

通用型颜色、字体单独标明一份，通用型模块只需单独标明一份，如导航栏。

2、手机可视区域通常为宽度固定，长度超出边界可滑动，所以标注物体宽度时可按比例说明，如果要标注内容上下居中，左右居中，或等比可不标注。

3、当交付的是一张完整图片时，不需做机型适配，只需给高清图(1920*1080)即可，注意进行压缩。

4、若图标在不同页面重复出现，且尺寸相差不大，直接给出最大一份切图，并在圆形图标明尺寸，程序会根据需求缩放。

5、当背景是纯色时只需给出色值，Android使用16进制色值。

参考资料来源：百度百科-Android

参考资料来源：百度百科-界面设计

参考资料来源：百度百科-状态栏

参考资料来源：百度百科-导航栏

参考资料来源：百度百科-开源系统

参考资料来源：百度百科-切图

参考资料来源：百度百科-UI设计

现在iOS app 的尺寸也变多了，要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配，以前一般用的是iphone5的尺寸，iPhone6 plus出现后，iPhone6尺寸成了大多数设计师的选择。

一、iPhone6的界面布局是：

屏幕是4.7英寸的，设计稿的大小750x1334px

☆ 状态栏(status bar)：就是电量条，其高度为：40px；

☆ 导航栏(navigation)：就是顶部条，其高度为：88px；

☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；

☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

二、关于iPhone6的图标的尺寸是：

☆导航栏的图标高度为44px（绝大部分功能按钮）左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。

☆关闭按钮34px*34px，返回按钮26px，简单笔画图标40px。

三、常用的可点击高度-登陆框、密码框、功能列表等，统一设成88px。

四、搜索栏、输入框、评论框、地址框的高度，在iPhone6的原型图上，统一设成58px或60px。

五、在iPhone6设计稿中，界面元素之间的常用距离。

常用间距-亲密距离：20px（与边缘距离）；疏远距离：30px；

其它距离-10px，44px等；

区块间隔：30-40px。

A、疏远距离：比如，改图标距离手机屏幕最左边的距离；

B、亲密距离：比如，左边图标与右边文字之间的距离。

六、黑白灰颜色常用的数值是：

① 文字黑色#333

② 文字深灰色#666

③ 文字浅灰色#999

④ 边框浅灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

一、注意事项

1、在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。

2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。

3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配

二、界面中文字选用的规则

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式，网页中会有常用的几个字体。

以下是在72像素/英寸下的规范

移动端常规字体

IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好， 方正兰亭黑和方正黑体简 、方正中等线也运用的比较多。

三、字体的大小

1、导航栏的文字大小是36-38px；

2、标题字号：32px ，34px；

3、内容区域的正文文字大小是：28px，30px；

4、辅助性文字：20px ， 24px，26px；

5、标签栏（或主菜单栏）的图标下方的文字大小为20px；

6、终极原则：不大于所在要件高度的一半

7、行间距：字号的1.2-1.5倍。

下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小：

不同手机的APP界面尺寸是不一样的。iphone 5：设计尺寸是640px*1136px安卓的与苹果的不一样有两种尺寸，460*800 px和1280*720 pxo

app的界面设计要根据手机的尺寸而来的，而且是要设计成那种多个款式的才能够满足，所以不能够将app的界面设计的尺寸弄死。

大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。

而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。

今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是plus版本，这种一般切图命名为@3X。

今天我们的主题就是探讨iOS的界面尺寸规范。

首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px，6s plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。

来分析一下界面的尺寸规范：

首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。

而下边的底部栏（导航栏）高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？

☆ 关于图标部分

苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。

另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

1、选择一种尺寸作为设计和开发基准；

2、定义一套适配规则，自动适配剩下两种尺寸；

3、特殊适配效果给出设计效果。

手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

为什么选择iPhone 6作为基准尺寸？

当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone （750px/375pt）作为基准，基于几个原因：

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。

2、iPhone 6 plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。

我之前按480*320来设计，不过现在大屏幕手机越来越多，所以都按450*800（是720*1280等比例缩放）来设计（因为Ui也是按这个尺寸来设计的）

一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。

如：

iPhone4 320*480

iPhone5 320*568

iPhone6 375*667

iPhone 6 Plus 414*736

Samsung Galaxy S4 360*640

你可以按比例进行缩放

了解XCODE里的控件，知道控件的属性以及动作，会写一些简单的代码，就可以了。

今天的这篇，不涉及任何代码编程，纯粹通过大量图片与少许说明来展示实践方式；作者还提供了该案例的完整项目文件，我们可以边参考边学习。我个人建议，可以先读一遍我们之前的“设计师应该了解的iOS应用开发基础知识”一文，对相关的一点点理论知识有所认知，然后再跟着今天这篇文章进行实践。那我就不多念叨了。

这里进入译文。过去几个月里，我每天都早上7点起床，然后持续工作到晚上7点，为的就是既能把我自己的应用Ripple搞出来，同时又能保住我在Carshare.hk的全职工作。这个月里，我整个人都扑在iOS的体验设计上了，我的挑战有两点：确保上面说的两个应用在年内发布，并且在这些项目中同时扮演设计师与前端开发的角色。

拥抱Xcode的Storyboard

在这期间，我遇到一名很棒的iOS开发工程师，他很认同Storyboard的使用。我曾经用Storyboard制作过简单的原型，但我的梦想始终是自己打造具有功能性的真正的iOS应用。在他的帮助下，我个人项目的开发工作变得相当简单：由他来负责那些更高级和复杂的功能与交互实现，而我则聚焦在布局、动效以及像素极精确的前端界面的实现上。幸运的是，苹果的官方文档绝对是世界级的，另外，时不时的到Stackoverflow中寻求解决方案也能让你感受到一个庞大而友好的设计开发社区随时可以帮到你。

我们是设计师

作为时常需要在交互、视觉和前端角色之间游走的设计师，我不能让自己的工作再增加任何复杂度了。如果我必须去学习Objective-C编程才能完成工作的话，我很快就会失去动力。本文所介绍的实践方法不涉及代码编写，而是聚焦于设计师所熟悉的领域，以及怎样通过Xcode的Storyboard将UI原型实现出来。

iOS 7与Xcode 5

在iOS7里，视觉设计扮演的角色相对以前来说弱了一些，设计师需要更加关注视觉风格背后的功能实现。伴随iOS7一同到来的是Xcode5，相比于以前的版本，它是一个更加友好的开发工具。Xcode5为我们带来了资源库(Assets Library)，自动化设置(Automatic Configuration，使在实际设备上的测试工作更轻松)，Open Quickly，SpriteKit，以及一个更加强大的Storyboard。

上手Xcode

本文的案例原型可以在这里下载。这是一个完整的Xcode项目文件，也正是我们需要通过学习来实现的东西，不妨先大致看下。

安装好Xcode之后，创建一个新项目(Create a new Xcode project)：

在接下来的界面中选择Single-View Application，然后为项目起个名字：

Xcode5中，每个新项目里都会默认包含一个Storyboard文件：

以及资源库(Assets Library)：

资源库中所需的东西都是设计师们所熟悉的：应用图标与加载图片。你可以直接从Finder当中把相关的图片拖拽放置到资源库里：

资源库，我的最爱

怎样更有效的导出和导入设计稿中的图形素材，这曾经是设计师与开发者在合作过程中所面对的最大问题之一。要么是开发者去学习使用Sketch或Photoshop，然后自己切图，要么就是与设计师就切图方式问题进行频繁沟通。对多数设计师来说，这是不得不做的事情，我们需要花费大量的时间来导出图形素材，并进行相关的文档标注工作。后来，又出现了可伸缩图形素材，你必须知道怎样去制作这些让人焦虑的东西；这东西真的太复杂了，以至于很多人会去写这方面的教程。好了，这些都是往事了；如今，Xcode5可以帮你创建那些可伸缩的图形素材了。

在Sketch中，导出两个规格的所有图形素材。Sketch会针对不同规格的图形文件自动进行命名：

然后将所有的图形素材导入到Xcode当中。Xcode会自动为它们进行匹配：

要处理可伸缩的图形，点击“Show Slicing”按钮：

然后点击“Start Slicing”，开始切片工作：

点击3个按钮当中的某一个，以设置切片方式；具体点击哪个，取决于你希望素材向哪个方向伸缩：

然后，Xcode就自动帮你完成其余的工作喽：

接下来你可以对其他所有按钮或气泡素材进行相同的处理。

我们的第一个界面

我们来创建第一个界面(如下面左图所示)。点击左侧导航栏中的Storyboard文件，从右侧的对象库里拖出一个Image View到中间的编辑区当中(如下面右图所示)：

然后，在右侧的属性检查器(Attributes Inspector)面板中找到“Image”一项，通过它为该Image View设置图片内容。Xcode会在“Image”的列表中自动填充来自资源库的图形素材，选择那张你要设置成背景的图片就好：

再拖进来一个Image View，将它的图片设置为“bubble-white”。要调整尺寸，可以拖拽气泡四周的把手，你会看到图形在伸缩过程中的表现有多平滑：

接下来，以同样的方式，通过Image View来创建头像。如果你按住Alt键，会看到在Sketch当中的所熟悉的功能：

然后，我们为气泡填充文字内容。从右侧的对象库中拖出一个Label对象到我们的气泡当中。在属性检查器中将“Lines”设置为0，这样就可以输出无限行的文本了：

保持该Label对象的选中状态，在右侧尺寸检查器(Size Inspector)中通过具体数字来调整文本对象的宽度，这样更精确些：

长按Alt查看查看尺寸，我们做完美主义者：

至于字体，可以试试更符合iOS7纤细风格的Helvetica Neue Light：

创建信息输入栏

从右侧对象库中拖一个View出来到我们的界面中，调整高度并放置在底部。你可以把View视图理解为一个文件夹，它拥有自己的一套属性，你可以向里面放各种东西：

然后，从右侧对象库拖出一个Text Field对象，也就是文本输入框控件，放在刚刚的View当中。可以在右侧的属性检查器中看下Text Field对象包含的若干属性，如果你会写CSS，那么对这些概念大概会比较熟悉一些。注意“Border Style”，要确保我们的输入框不带边框：

还差一个按钮。从对象库中拖一个Button控件放到Text Field的右侧，在属性检查器中找到“Image”并设置为“icon-camera”。注意，我们还可以在属性检查器中为按钮的不同状态设置不同的样式：

制作导航栏

这里有点小技巧。在界面编辑区左侧的，在Help菜单中搜索“Embed”，然后选择“Embed in Navigation Controller”，这样我们就将之前的界面嵌入到一个导航体系当中了，你会看到我们的界面左侧出现了一个新的视图控制器Navigation Controller：

在编辑区左侧的文档大纲中找到“Navigation Bar”，然后可以在右侧面板中找到很多风格样式的参数设置：

导航栏中需要标题？选择我们界面所在的试图控制器当中的“Navigation Item”，在右侧属性检查器中设置Title即可：

导航栏中同样可以放置按钮。在右侧的对象库中，拉到最下面，找到“Bar Button Item”，拖一个出来到导航栏右侧。记得编辑一下属性面板中的Tint颜色，在Xcode中你可以自由的为按钮图片着色：

圆角样式

从前，在使用CSS的时候，通过图片来制作圆角矩形背景可不是件让人开心的事。在Xcode5当中，你可以像CSS3那样直接程序化的设置圆角样式。

制作“附近的聊天室”列表界面时，我们使用View视图来创建列表条目，并通过View自身的属性来实现圆角样式。选中View视图，在右侧属性检查器中勾选“Clip Subviews”。这相当于CSS里的“overflow:hidden”：

保持View视图的选中状态，然后点击属性检查器高亮图标左侧的“Identify Inspector”图标。在“User Defined Runtime Attributes”中添加一个“layer.cornerRadius”属性，将其类型(Type)设置为“Number”，值(Value)为“5”：

圆角样式的效果不会在Storyboard中立刻体现出来；当你运行项目时(Command+R)，会在实际界面中看到圆角已经被创建出来了：

将界面连接起来

我们要实现这样的导航结构：在“附近的聊天室”列表界面中点击一个一个条目，进入聊天对话界面，也就是我们前面做的第一个界面。(建议打开下载的案例文件了解一下要实现的路径结构 - 译者C7210注)

从对象库中拖一个按钮控件(不是Bar Button)出来，放到聊天室条目上，清空按钮文字，调整尺寸，使其能准确覆盖下面的条目：

按住Ctrl键，从刚刚的透明按钮区域开始向另外一个界面进行拖拽，拖拽的过程中会出现一条蓝线，当蓝线右端进入目标界面之后，停止拖拽，从弹出的菜单中选择“push”。这样，在模拟运行的时候，就可以通过点击列表条目进入对话界面了：

1像素的线条

Xcode以pt为单位，你没法把一个View视图设置为0.5pt或是1px，所以要在定制化的控件当中使用1像素的细线的话，还是需要首先创建图片素材：

制作标签栏

iOS的标签栏与工具栏的定制化程度还是很高的，你可以改变配色、文字和图标。

在Storyboard编辑区或其左侧的文档大纲中选择某个View Controller，在Help菜单中搜索“Embed”，这次选择“Embed In Tab Bar Controller”：

接下来便可以在右侧的检查器面板中对Tab Bar或Tool Bar进行设置：

有时，你希望界面在导航栏或标签栏的导航体系中，但又不希望导航栏或标签栏显示出来，那么可以在属性检查器中将“Bottom Bar”设置为“None”，并选中“Hide Bottom Bar on Push”：

滚屏

iOS中平滑的滚屏动效人见人爱。要实现这种效果，你通常需要使用Table View视图对象作为内容的容器。大致的结构可以是：Table View - View - 你的自定义对象：

需要注意，Table View和View默认都是白色的背景，你要根据需要在属性检查器中将它们设置为“Clear Color”：

另外，也可以通过使用Table View作为容器让界面当中的一部分成为可滚动的内容：

您好： APP store 上的应用 程序 是 基于

苹果Mac OS X 系统上的 XCode 编程环境开发的应用程序，

它主要用的语言是 Object C＋＋ 和 JavaObject C＋＋ 是 C ＋＋语言的 超集，而Java 又是 基于 C ＋＋ 上 改进的语言，两者 都是面向对象的编程如..

1.在Xcode5下，获取程序名字(app name)的方法为： NSString *proName = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleDisplayName"]NSLog(@"dicName ==== %@",[[NSBundle mainBundle] infoDictionary])打印之后可以看到

IOS界面设计尺寸规范（以iPhone6为例）

一、界面尺寸规范

1、界面尺寸大小是：750x1334px。

2、状态栏(status bar)：就是电量条，其高度为：40px

3、导航栏(navigation)：就是顶部条，其高度为：88px

4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px

5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

二、图标尺寸规范

1、导航栏和工具栏尺寸大小44x44px；

2、标签栏尺寸大小75x75px

3、导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是：20px 24px，26px，28px，30px，32px，34px。

三、设置界面的图标高度和开关滑动按钮的高度：58px

四、可点击高度规范

在iPhone6的原型图上，统一成88px。在iPhone6设计稿中，88px是一个常用的设计尺寸。

五、搜索栏高度规范

搜索栏的高度，在iPhone6的原型图上，统一成58px。

六、界面元素之间的距离规范

在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30p x。

A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

七、原型设计中，需要考虑不同屏幕尺寸的苹果手机，在@1x的情况下的适配情况。

1、iPhone5在@2x屏幕尺寸是，640x1136px对应的@1x，屏幕尺寸就是320x568px

2、iPhone6在@2x屏幕尺寸是：750x1334px对应的@1x，屏幕尺寸就是375x667px

3、iPhone6Plus在@3x屏幕尺寸是：750x1334px对应的@1x，屏幕尺寸就414x736px

八、iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介绍

1、iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸，也是安卓机目前最流行的大屏设计稿尺寸。

2、iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x889px-@1x。

3、iPhone5是4英寸屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x757px-@1x。

总结：iPhone6的原型规范如下：

1、界面尺寸布局：满屏尺寸750x1334px；

2、高度电量条高度40px，导航栏高度88px，标签栏高度98px；

3、各区域图标大小导航栏图标44px，标签栏图标50px；

4、各区域文字大小电量条文字22px，导航栏-文字32px，标签栏字20px；

5、常用的文字大小：32px，30px，28px，26px，24px，22px，20px；

6、常用的颜色：背景浅灰色#f2f2f2,文字深黑色#323232，边框色深灰#CCCCCC；

7、常用可点击区域的高度：88px；

8、单行文字的背景框的高度：88px，双行则为：176px，三行则为：264px；

9、常用间距：亲密距离：20px疏远距离：30px，其它距离：10px，44px等；

10、按钮和文本框，原型图做成直角的，圆角半径是多少，由Ui来设计；

11、这种情况，需要修改原型。单个页面的逻辑流程图或用户学习使用时间，超过其它页面平均数的3倍以上