扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
很多IOS APP UI设计稿都是以iphone6为基准的，方便向上适配iphone7的尺寸，也方便向下适配iphone5的尺寸。所以我给大家分享iPhone6的界面设计尺寸有哪些规范。
创新互联是一家专业的成都网站建设公司，我们专注成都网站设计、网站制作、网络营销、企业网站建设，卖友情链接，一元广告为企业客户提供一站式建站解决方案，能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高，创新互联力求做到尽善尽美。
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倍以上
iOS和Android两个不同的平台，肯定是有很多区别的，下面就从交互的角度，谈谈区别。
以前就读过IOS和Android的规范，但是觉得没啥大用处，因为现在APP为了保持一致性，通常在IOS和Android上的设计是一样的，而且一些小公司只设计IOS的交互原型，因为只要IOS上能用，安卓上肯定没问题，前段时间，和一个人聊，问我它俩的区别，当时一脸懵逼，不知从何说起。毕竟是两个不同的平台，肯定是有很多区别的，下面就从交互的角度，谈谈区别。
一、全局导航
IOS：通常放在底部，方便用户点击
Android：通常放在上面，下面有物理按键，防止误操作。
解析：因为Android比IOS多了物理按键，为了防止误操作，所以只能将全局导航放在上面，但是随着屏幕越来越大，上面是手指无法触及的区域，所以切换起来相对成本较高。
二、二级导航
IOS：通常放返回、上一级标题、标题（居中），操作通常只有一个
Android：通常返回控件、logo、下拉菜单、重要操作、更多操作
解析：IOS显示了上一级的名称，让用户点击返回后，心里有预期，Android放了APP的logo，增加了品牌性，但是就使用来讲，用户不知道点击会回到哪，下拉菜单和更多操作都需要点击才能显示，增加了操作步骤。
三、工具栏
IOS：通常放在最下面，方便操作
Android：放在导航栏里，将重要操作放在外面，其他放在更多里。
解析：IOS将操作都放在底部，区域更大，操作更方便。Android将操作放在了顶部，显得很拥挤，并且还收起了一部分，需要用户查找，但是却节省了空间，让内容显示区更大。
四、提示框
IOS：出现在屏幕中间，可以带图标，可以不带，可以是静态的，也可以是动态的。
Android：不可以带图标，不能是动态的，最多只可以带一个操作按钮，最多只能出现一个提示，不能和低端的悬浮按钮重合。
解析：IOS的设计理念是尽量不打扰用户，只要用户能看见变化，轻易不会出现提示，只有一些用户无法感知时，才会出现提示框，所以可以是动态的，像调节音量。Android的提示要比IOS重一些，因为它可以带一个按钮。
五、警示框
IOS：标题和按钮是必须的，可以有内容和输入
Android：主要有四种：用途、内容、事件、表现。
1、用途包含了标题，内容和事件。
六、手势定义
IOS的手势规定有8种，如下：
解析：IOS只有8种手势，Android有14种，但是很多都不常用，个人感觉IOS的8种已经完全够用了，定义那么多种，用户的学习成本就会提高，而且Android的有些手势并没有定义可以做什么，所以给出这么多手势也没有用。
结语
本文对IOS和Android的规范进行了对比，Android的规范那是相当详细，但是IOS的只给出了设计原则，所以，一些是我自己总结的，可能对比的还不够全面，欢迎大家一起讨论。
在现在的互联网行业中，有一个职业叫做UI设计师，UI的日常工作就是保证高保真设计稿的设计，对于IOS以及Android来说都是有不同的设计规范的，下面我们一起来了解一下IOS UI的设计规范。
01
先来说说设计稿的尺寸，一般来说在做IOS设计稿的时候，设计稿尺寸我们都是选择650*1334这个尺寸，如果是1x的话，就是375*667。
02
我们从上到下以1x的规范来进行了解，最上边的就是状态栏了，状态栏的高度是20，宽度都是375。
03
那么状态栏都是有哪些元素呢？实际上就是信号、网络状态、时间以及电量和通知等。
04
在信号栏下边就是我们的导航栏，导航栏的高度为44px。
05
导航栏中肯定是有导航文字的，导航文字一般来说我们都是居中对齐，并且导航文字的大小应该为18px。
06
接下来就是最底部，最底部就是我们的标签栏了，标签栏中都是我们的切换图标，标签栏的高度为49px。
07
标签栏中的图标大小也是有规范的，最小的点击区域我们必须保证为24px，低于这个范围的话是不方便进行操作的。
08
在图标的下方一般都还有文字，这里文字的大小比较小，可以根据图标大小来进行调整，一般来说文字大小为11、10px。
09
总的来说着就我们IOS UI的设计规范了，其他还有就是内容区域的文字大小规范了，一般来说都是16、15、14、12这四个文字大小，具体根据需求进行设计。
现在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倍。
下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小：
状态栏：40px 导航栏：88px 标签栏：98px
状态栏：40px 导航栏：88px 标签栏：98px
状态栏：60px 导航栏：132px 标签栏：147px
状态栏：132px 导航栏：132px 标签栏：147px
状态栏：88px 导航栏：88px 标签栏：98px
全局边距： 32px、30px、24px、20px（建议最小20px，边距数字选择偶数）
卡片间距： 20px、24px、30px、40px（通常上下间距最小不低于16px，过小的间距会造成用户的紧张情绪）
最常用的两种布局方式，列表式和卡片式
「信息」页面通常采用列表式布局。注：列表舒适体验的最小高度是80px，最大高度视内容而定。
例： 微信高度：136px QQ高度：132px 自如高度110px 唯品会高度：106px。
每张卡片的内容和形式都是相互独立的互不干扰。
卡片本身一般是白色，而卡片之间的间距颜色一般是浅色，不同产品风格颜色可能不同。
双栏卡片布局形式，常见于图片信息为主导，每一屏显示至少4张卡片。
常见图片尺寸比例：16:9、4:3、1:1、1:0.618(黄金比例)等
对齐、对称、分组
文字是APP中最核心的元素，是产品传达给用户的主要内容。
在APP中字号范围一般在20-36之间（@2x）。iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。
36px： 用在少数标题。例：导航标题、分类名称等。
32px： 用在少数标题。例：店铺标题等。
30px： 用在较为重要的文字或操作按钮。例：列表性标题分类名称等。
28px： 用于段落文字。例：列表性商品标题等。
26px： 用于段落文字。例：小标题模块描述等。
24px： 用于辅助性文字。例：次要的标语等。
22px： 用于辅助性文字。例：次要的备注信息等。
iOS 主流设备的分辨率分别是：
640x1136px：【（@2x）iPhone SE 】
750 x1134px：【（@2x）iPhone6s/7/8 】
1242x2208px：【（@3x）iPhone 6s/7/8 Plus 】
1125x2436px：【（@3x）iPhone X 】
750x1624px：【（@2x）iPhone X 】
注： 基准设计尺寸：750px x 1334px。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网