苹果x尺寸

交互设计：iOS原型尺⼨规范

最近公司安排我带⼀下新来的交互设计师，我想给他制定⼀份交互设计规范。这样⼀来，即使新来的交互设计师没什么基础，也可以根据这

⼀份规范，做出⼤致标准的原型图。

因为Ui设计稿是先做iPhone6的，⽅便向上适配iPhone6Plus，也⽅便向下适配iPhone5和iPhone4的尺⼨。所以，交互设计稿的尺⼨，就按

照iPhone6的尺⼨来做。

在这⾥我还是要推荐下我⾃⼰建的iOS开发学习群：680565220，群⾥都是学ios开发的，如果你正在学习ios，⼩编欢迎你加⼊，今天分享的

这个案例已经上传到群⽂件，⼤家都是软件开发党，不定期分享⼲货（只有iOS软件开发相关的），包括我⾃⼰整理的⼀份2018最新的iOS进

阶资料和⾼级开发教程

1、iPhone6的界⾯布局是：屏幕是4.7英⼨的，设计稿的⼤⼩为750x1334px。

状态栏(statusbar)：就是电量条，其⾼度为：40px；

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

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

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

截图如下：

推荐3款测量⼯具为：MarkMan马克鳗，Dorado标注，PXcook像素⼤厨。

2、关于iPhone6的图标的尺⼨：

导航栏的图标⾼度为44px左右，标签栏的图标尺⼨为50x50px左右，最⼤为96x64px。

关于iPhone6的⽂字的尺⼨：

导航栏的⽂字⼤⼩最⼤值是34px，标签栏的图标下⽅的⽂字⼤⼩为20px。内容区域的⽂字⼤⼩是：24px，26px，28px，30px，32px，34px。

3、（iPhone6设计稿尺⼨是@2x），做原型图的时候，可以做成@2x的，即750x1334px；也可以做成@1x的，即375*667px。

4、设置界⾯的图标⾼度和开关滑动按钮的图标⾼度：58px。

参考下图：

5、关于颜⾊，⾃从我做了3套⾼保真的交互原型图之后，发现后⾯还是改成画线框图来的快。

线框图的⿊⽩灰之纯美，有利于专⼼布局界⾯，⽽不⽤在意界⾯的颜⾊搭配。

⿊⽩灰颜⾊常⽤的数值是：

⽂字⿊⾊#282828

⽂字深灰⾊#656565

⽂字浅灰⾊#98989

边框浅灰⾊#C3C3C3

背景淡灰⾊#f2f2f2

按钮背景纯⽩⾊#ffffff

6、常⽤的可点击⾼度，在iPhone6的原型图上，统⼀成88px。在iPhone6设计稿中，88px是⼀个常⽤的设计尺⼨。参考图⽚如下，

7、搜索栏的⾼度，在iPhone6的原型图上，统⼀成58px。在iPhone6设计稿中，58px是⼀个常⽤的设计尺⼨。参考图⽚如下，

8、在iPhone6设计稿中，界⾯元素之间的常⽤距离，亲密距离：20px；疏远距离：30px。

疏远距离：⽐如，所有元素距离⼿机屏幕最左边的距离。

亲密距离：⽐如，左边图标与右边⽂字之间的距离。

参考图⽚如下，

9、原型设计中，需要考虑不同屏幕尺⼨的苹果⼿机，在@1x的情况下的适配情况。⽐如：

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

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

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

参考图⽚如下：

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

iPhone6Plus是5.5英⼨屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x736pt-@1x。物理尺⼨是1080x1920px。这个物理尺⼨，也是

安卓机⽬前最流⾏的⼤屏设计稿尺⼨。

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

iPhone5是4英⼨屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x568pt-@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倍以上；

12.以上规范具备如下的⼀个条件，即可修改：

准备有已经上线的截屏参考页⾯；

产品和开发协商修改。