iPhoneX设计规范

苹果近日发布了全新的iPhone X全面屏手机，这也是首款采用OLED屏幕的iPhone手机，它的正面设计被更多人吐槽，之前被戏称为“刘海”的凹槽现在有了更多其他名称，“眉毛”、“头帘”等等。对于用户而言，iPhone X 的刘海可能是让人又爱又恨的设计。

   爱的是，这一刘海像司马昭之心一样传达着「我在使用 iPhone X」这一个事实，正如 iPhone 7 的亮黑色一般。当然，包括 Face ID 以及 Animoji 等在内的新颖功能也会让人爱不释手。恨的原因，也很明显，这个刘海让屏幕不再方正圆润，就像一块膏药般永远的贴在你的屏幕上。看视频、看照片亦或其他，当你使用大部分应用时，它可能都会很显眼。

   这几天被iPhone X一顿刷屏，标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子，与设计图无关的内容通通不提，开始。

一、设计尺寸

屏幕尺寸

设计尺寸

   发布的iPhone 8属于常规升级，屏幕与以往的iPhone6、6S、7系列相同。在发布的新机中，只有iPhone X的分辨率发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去我们熟知的iPhone 47''、iPhone 55'' 放大模式宽度相同。通俗的说，iPhone X可看做是iPhone 47'' 的加长版

屏幕对比

然而，事情并不是设计图加长这么简单。

屏幕对比

二、交互设计

   过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域Safe Area，而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来说，这个刘海带给他们的是更多的麻烦。Apple 更新了 Human Interface Guidelines来为开发者提供适配 iPhone X 指南，从中可以看出，Apple 希望开发者将这个刘海毫无遮掩地呈现在 iPhone X 的「脑袋上」。

指南一 ：当为 iPhone X 适配应用时，请确保布局填充整个屏幕，同时不被设备的圆角、传感器和下方的 Home 条所遮挡。

确保布局填充整个屏幕

   在使用时，请注意长宽比差异。iPhone X具有不同于其它iPhone的长宽比，因此，全屏其它iPhone在iPhone X上全屏显示时会出现裁剪。同样，全屏iPhone X在其它iPhone也会出现裁剪，所以请注意两种设备适配。

指南二 ：不要尝试去隐藏设备的圆角、刘海或 Home 条，比如故意在屏幕顶部和底部使用黑色素材。参考iOS 原生应用可看出 Apple 的意思：刘海上下不要放任何内容。

   大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhone X！Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。如果app使用自定义控件或非标准布局，要在iPhone X上运行良好需要一点修改。

苹果给出的安全区域如下

安全区域图示

页面内容不能超出安全区域（Safe Area）

   iPhone X 状态栏高度更高，在电话和定位等后台任务时，高度不会变化（就是打电话和导航时，原先顶部增加的彩色带，现在变成时间信息底部的彩色气泡，见下图）

iPhone X 状态栏高度更高

iPhone X 状态栏高度更高

iPhone X tabbar

iPhone X tabbar

避免将触发交互行为的按钮放在屏幕的底部，人们会在屏幕底端使用手势进入主屏或切换应用。（底部横条是Home键）

值得注意的是，iPhone X 底部 *** 作栏目进行了细微的放大。除了常见的底部导航栏外，Safari底部 *** 作栏也有放大讲完竖屏，再说横屏。和竖屏一样，横屏的内容也要放置在Safe Area中

横屏放置的Safe Area

   避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局 *** 作优先于App的 *** 作。如果把功能放在角落里，用户 *** 作起来也很费劲，尽量在用户手指可及区域内设计功能

Sout2322hEastpng

底部虚拟Home指示条

   作为去除实体Home按键后的衍生物，底部将出现一个虚拟的Home指示条，用以实现常用的交互功能，锁屏状态下向上滑动解锁，应用内向上滑动回到主屏，向上滑动并停止片刻进入多任务切换窗口，虚拟Home指示条大多数情况下将会存在于屏幕的下方，而这个虚拟Home指示条只有黑、白两种颜色。在底部有导航栏的app中，将会形成屏幕内的双下巴，部分应用如果具备从底部上滑的 *** 作，为了和底部上滑回到主屏相区分，苹果提供了一个边缘保护的方案，第一次上滑是唤醒Home指示条，第二次才会激活原功能。而对于最受关注的全屏状态，虚拟Home指示条则会自动隐藏，不过尴尬的是，如果这时候是横屏状态，虚拟Home指示条也会跟随转动，而安卓虚拟按键则会始终存在于屏幕下方。全屏状态下点击屏幕后，虚拟Home指示条才会显示。

   最后说下最核心的问题，Safe Area 范围有多大？比对了官网上所有与iPhone X相关的界面，可以确定，Safe Area区间如下：

顶部高度

   对于习惯用750x1334作图的设计师而言，iPhone X的到来并不会带来太大影响，iPhone X与iPhone 47’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异

底部高度

整体设计图

整体设计图

iPhone 47 与iPhone X 的Safe Area高度仅相差67 Point（134 px，@2x）

   对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

Sout22hEastjpeg

S2outh2Eastjpeg

   由于 iPhone X的屏幕比例发生变化，对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响，需要对页面结构进行适当微调。如果应用程序需要隐藏状态栏，请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 47''提供了更多的内容高度，状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。

iPhone X可以提供更多的内容高度

三、图标设计

   底部导航栏图标，过去的做法是当前激活模块的图标为剪影风格，其他图标为线性风格。设计师需要做两套图标。分别是一套剪影，一套线性。而现在统一为剪影，而当前激活模块的图标使用平铺色代表激活。

全屏视图设计

四、系统色系增强

   iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，增强视觉体验！

色系描述

阅读拓展

1、 《designingforiPhoneX》

2、 三分钟弄懂iPhoneX设计尺寸和适配

3、 iPhone X的全面屏 让设计师 *** 碎了心

4、 iPhoneX设计规范

1、 设计师如何设计iPhoneX视觉稿

原文地址：>

iphone 6 plus设计版：12422208

ppi:401ppi

状态栏高度：60px

导航栏高度：132px

标签栏高度：147px

iphone 6 plus放大版：11252001

ppi:401ppi

状态栏高度：54px

导航栏高度：132px

标签栏高度：147px

iphone 6 plus物理版：10801920

ppi:401ppi

状态栏高度：54px

导航栏高度：132px

标签栏高度：147px

物理版、放大版、设计版的区别：

物理版就是iphone 6plus实际实际的屏幕像素，而设计版就是我们截屏iphone 6plus的界面在ps中去量，发现的尺寸。很明显，量出来的分辨率也就是设计版要比物理版的分辨率要大，这可能由于苹果采用了缩放显示的。至于放大版，其实就是iphone 6的尺寸等比放大15倍得出的分辨率。

iphone 6：7501334

ppi:326ppi

状态栏高度：40px

导航栏高度：88px

标签栏高度：98px

iphone 5-5c-5s：6401136

ppi:326ppi

状态栏高度：40px

导航栏高度：88px

标签栏高度：98px

iphone 4-4s：640960

ppi:326ppi

状态栏高度：40px

导航栏高度：88px

标签栏高度：98px

iphone&ipod Touch第一代、第二代、第三代：320480

ppi:163ppi

状态栏高度：20px

导航栏高度：44px

标签栏高度：49px

图标尺寸：

iphone 6 plus(@3X)

App store：10241024px(180px)

非retina：512512px(9090px)

程序应用：180180px0000

主屏幕：114114px(20px)

spotlight搜索：8787px

工具栏和导航栏：6666px

iphone 4、5、6(@2X)

App store：10241024px

程序应用：120120px

主屏幕：114114px

spotlight搜索：5858px(10px)

工具栏和导航栏：4444px

iphone&ipod touch第一代、第二代、第三代：

App store：10241024px

程序应用：120120px

主屏幕：5757px(10px)

spotlight搜索：2929px

测量标注工具为：

MarkMan马克鳗，Dorado标注，PXcook像素大厨。

iphone6图标尺寸

导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。

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

ip 6 plus的图标高度和开关滑动按钮为：8787px。

iPhone6文字尺寸

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

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

文字颜色：

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

① 文字黑色#282828

② 文字深灰色#656565

③ 文字浅灰色#98989

④ 边框浅灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

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

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

在iPhone6设计稿中，58px 也是一个常用的设计尺寸。

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

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

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

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

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

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

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

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

区块间隔：30-40px。

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

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

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

① 文字黑色#333

② 文字深灰色#666

③ 文字浅灰色#999

④ 边框浅灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

移动端常规字体

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

字体的大小

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

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

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

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

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

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

7、行间距：字号的12-15倍。

IOS

长文本

可接受下线（80％用户接受）:26px

见小值（50％用户认为偏小）:30px

舒适值（用户认为最舒适）:32～34px

短文本

可接受下线（80％用户接受）:28px

见小值（50％用户认为偏小）:30px

舒适值（用户认为最舒适）:32px

注释

可接受下线（80％用户接受）:24px

见小值（50％用户认为偏小）:24px

舒适值（用户认为最舒适）:28px

颜色值

IOS颜色值取 RGB各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)

内部设计

1、所有能点击的不得小于44px（Retina需要88px）

2、单独存在的部件必须是双数尺寸

3、两倍图以@2x作为命名后缀

4、充分考虑每个控制按钮在4中状态下的样式，如默认、按下、选中、不可点击。

短文本:

注释:

逻辑分辨率

lPPI（像素密度）

表示沿着对角线，每英寸所拥有的像素（pixel）数目，PPI的数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高，颗粒感越弱，图像更清晰。

1 inch= 254cm = 254mm

早期的iPhone3GS的屏幕屏幕分辨率是320 480,iOS绘制图形（CGPoint/CGSize/CGRect）均已point为单位。

l点（point）和像素（pixel）换算关系

iPhone3GS

1point = 1pixel

iPone4/4s、iPhone5/iPhone5s、iPhone6/iPhone6s

1point = 2pixel

iPhone6Plus/iPhone6s Plus

1point = 3pixel

iphone手机英寸如何制定

pt以及倍率之间的换算关系

建立色彩标准卡

ps有没有标注工具

图标栅格系统

以上就是关于iPhoneX设计规范全部的内容，包括:iPhoneX设计规范、iPhone各个控件尺寸、iphone界面尺寸规范等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！