建材秒知道
登录
建材号 > 设计 > 正文

iPhoneX设计规范

爱笑的煎饼
默默的金毛
2022-12-30 17:35:54

iPhoneX设计规范

最佳答案
彪壮的冰棍
英勇的心情
2026-04-02 22:26:52

苹果近日发布了全新的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 4.7''、iPhone 5.5'' 放大模式宽度相同。通俗的说,iPhone X可看做是iPhone 4.7'' 的加长版

屏幕对比

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

屏幕对比

二、交互设计

   过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域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的操作。如果把功能放在角落里,用户操作起来也很费劲,尽量在用户手指可及区域内设计功能

Sout2322hEast.png

底部虚拟Home指示条

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

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

顶部高度

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

底部高度

整体设计图

整体设计图

iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point(134 px,@2x)

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

Sout22hEast.jpeg

S2outh2East.jpeg

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

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

三、图标设计

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

全屏视图设计

四、系统色系增强

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

色系描述

阅读拓展

1、 《designingforiPhoneX》

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

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

4、 iPhoneX设计规范

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

原文地址:https://www.jianshu.com/p/0f2516d165a3

最新回答
彩色的楼房
土豪的胡萝卜
2026-04-02 22:26:52

1、iPhoneX采用全面屏设计后,在屏幕顶端留了一个特殊的位置,用于放置前置摄像头、感光器和3D传感器等部件。

新iPhone不能像以前那样在屏幕顶部中间显示时间,而是会把状态信息放到两侧。

除了将状态栏分成两部分之外,新的状态栏将具有动态显示效果,会根据需要或者是手机状态给出不同的显示。

正常情况下“头帘儿”左侧显示时间、定位,右侧显示信号、WiFI和电量。当你给手机充电时,“头帘儿”右侧的电量图标会变大,并隐藏信号等信息当有电话打进来时,左侧时间底部会变成红色,当处于通话中但电话放入后台时,时间底部会变成绿色。

2、iPhoneX采用了全面屏设计,它的Home键将被彻底移除。

在屏幕最下面有一条横杠,通过这部分可以实现手机解锁(类似于滑动解锁),而向上拖动这条横杠可以切换到多任界面。

同时,电源键做的很长,结合超长电源键,实现部分Home键功能。

3、面部识别将代替指纹识别

在iOS11GM系统中,透露了iPhoneX的解锁方式。

在初始设置FaceID时,iPhoneX会显示一个3D人脸要求扫面用户面部,这时用户需要将脸部放入手机的圆圈画面中,按照3D人脸演示的动作移动面部完成扫面。

FaceID设置界面中,能设置使用FaceID解锁手机或是在AppStore购买应用。

4、3D表情

比如通过面部追踪3D传感器创建自定义3D表情符号。这个功能被称为“Animoji”,在泄露的系统代码中,它的描述为“使用您的声音和您的面部表情自定义动画消息”。

5、新的拍照模式:PortraitLighting(人像照明)

PortraitLighting(人像照明)。这个功能会模拟不同照明效果,营造一种类似单反相机景深的效果。感觉上和iPhone7Plus上的人像模式有点像,又好像会更近一步。另外,这项功能应该需要闪光灯做辅助。

6、新壁纸

7、新AirPods

新的AirPods在外观上变化很小,仅仅将充电指示灯从内部移到了外部。续航和方面,暂时还不清楚有没有改进和提升。

谦让的小馒头
怕孤单的荷花
2026-04-02 22:26:52

iphoneX是苹果手机。

iPhone X采用全面屏设计,采用超级Retina显示屏以及OLED技术。从外观上来看,正面由一块异形屏构成,整个前部只保留顶部的听筒、自拍相机和传感器。

扩展资料:

iphoneX的功能配置

iPhone X显示屏支持3D Touch压感操作,支持HDR显示。

iPhone X使用Face ID人脸识别。额头处除了传统的光线与距离传感器,集成了700万像素摄像头、泛光传感器、距离传感器、点阵投影器、红外镜头、点阵读取器。

前置摄像头700万像素,支持背景虚化自拍。

iPhone X加入了无线充电功能,支持IP67级别防水防尘。

iPhone X搭载的A11 Bionic处理器加入了人工智能神经网络和AR方面的支持,搭载了提升拍照的苹果独立设计的ISP。

参考资料来源:百度百科-iPhone X

朴实的柠檬
合适的奇迹
2026-04-02 22:26:52
iPhone12是目前苹果发布的旗舰手机中的一个型号,也是率先发售的两款机型中的一款,上市之后颇受关注。iPhoneX是目前苹果首款采用刘海屏设计的手机,也是首款将实体按键取消的手机。目前iPhoneX的售价为4899元起,而iPhone12的售价则是6299元起步,两部手机之间相差1400元,那么在设计上到底有什么区别呢?让我们一起来看下iPhone12和iPhoneX之间的真机上手深度对比。

在屏幕的尺寸方面,iPhoneX搭载的是一块5.8寸的屏幕,分辨率为2436x1125像素,屏幕像素密度为458PPi。iPhone12则搭载了一块6.1寸的屏幕,分辨率为2532x1170像素,屏幕像素密度为460PPi。iPhone12和iPhoneX均是采用的OLED材质屏幕,但是iPhone12搭载的是超瓷晶材质设计,所以在耐摔程度上比iPhoneX要更好。由于屏幕尺寸的大小区别,所以在机身上对比,iPhone12明显要比iPhoneX大一圈。

iPhone12和iPhoneX在手机边框部分的设计,也有着比较大的区别。iPhone12采用的是扁平化的机身边框设计,这个设计和iPhone4的外观设计较为相似。而iPhoneX作为第一代的无实体按键的iPhone,也是率先采用的比较圆润的机身边框的设计。由于机身边框设计的不同,所以在机身的实体按键上,iPhone12和iPhoneX之间也存在区别。

iPhone12和iPhoneX在机身方面均采用的是玻璃材质机身设计,但是在机身背面的摄像头模块和苹果标志的设计方面,还是存在一定的区别。iPhone12机身背面采用的是方形的镜头模块设计,包含了后置双摄像头,苹果标志的位置在机身中间,iPhone的字样给取消。iPhoneX机身背面的后置双摄像头则是上下排列,苹果标志在机身靠上的位置,同时保留iPhone字样。仅从机身背面来看,iPhone12和iPhoneX中间的区别还是非常明显的。

iPhone12和iPhoneX的后置摄像头均为1200万像素的镜头组合,iPhone12搭载的是超广角镜头和广角镜头,光圈为f/2.4+f/1.6。而iPhoneX的后置双摄像头则是广角镜头和长焦镜头,镜头的光圈为f/1.8(广角)+f2.4(长焦)。虽然都是1200万像素的镜头,但是在拍照效果方面还是有着很大的区别,尤其是在夜景拍照方面。

在机身内部的硬件参数方面,iPhone12搭载的是苹果最新的A14仿生处理器,iPhoneX搭载的则是苹果 A11+M11协处理器。iPhoneX的内存为3GB,电池容量为2716毫安,支持4G网络。iPhone12的内存为4GB,电池容量为2851毫安,支持5G网络。硬件方面的差距还是十分明显的,毕竟iPhoneX和iPhone12之间间隔了iPhoneXS和iPhone11两代手机的迭代更新。

娇气的毛豆
舒适的美女
2026-04-02 22:26:52
1、iphonex,即iphone10。

2、

3、iPhoneX是苹果公司设计、开发与销售的一款iPhone系列智能手机,于2017年9月13日由苹果CEO蒂姆・库克在史蒂夫・乔布斯剧院发布,是苹果公司iPhone上市十周年的纪念机款。iPhoneX操作系统使用iOS11,采用了AppleA11仿生处理器,拥有6个处理核心,属于高端版机型。其外观上采用了全新设计,搭载色彩锐利的OLED屏幕,并使用3D面部识别(FaceID)传感器,是苹果的一款经典产品。

4、

5、苹果公司(AppleInc.)是美国的一家高科技公司,由史蒂夫・乔布斯、斯蒂夫・沃兹尼亚克和罗・韦恩等人于1976年4月1日创立,并命名为美国苹果电脑公司,2007年1月9日更名为苹果公司,总部位于加利福尼亚州的库比蒂诺,于1980年12月12日公开招股上市。其主要业务包括设计、开发和销售消费电子、计算机软件、在线服务和个人计算机等。

更多关于iphonex是iphone几,进入:https://m.abcgonglue.com/ask/4068a11616107873.html?zd查看更多内容

重要的云朵
超级的魔镜
2026-04-02 22:26:52
1、苹果x是5.8英寸屏幕。

2、iPhoneX是苹果手机十周年的纪念款,苹果x手机的高度:143.6毫米(5.65英寸),宽度:70.9毫米(2.79英寸),厚度:7.7毫米(0.30英寸),重量:174克(6.14盎司)。

3、iPhoneX显示屏采用曲线优美的圆角设计,四个圆角位于一个标准矩形内。按照标准矩形测量时,屏幕的对角线长度是5.85英寸(实际可视区域较小)。

4、iPhoneX有银色、深空灰色两种外观,本来边框就很宽,加上黑色整体感导致边框和中框视觉融为一体,更显得宽。银色稍微好些。玻璃背板还是跟白色更配,虽然是灰白,关键黑色也是灰黑。灰白高光下也略有偏银色的质感。

壮观的羽毛
彪壮的枫叶
2026-04-02 22:26:52
2017年9月3日,iphoneX发布了,它带来了刘海屏,也是首款全面屏机型,使手机行业进入了全面屏时代。到现在2021年了,它的设计可以说依旧是毫不过时,甚至它的后代iphone12也是刘海屏,可以说是设计理念非常超前了。

当年我觉得这部手机应该是最好看的了,因为除了它的刘海,底部和两边的控制都非常好,下巴窄很讨人喜欢。而18年,就有许多手机厂商也陆续地推出了全面屏,水滴屏、美人尖、挖孔屏,可以说是花样百出。

刘海屏对于我来说还是挺好看的,令我印象深刻的是小米8,不能说iphoneX很相似,但也能说简直就是一模一样,但是控制得不太行的就是它的大下巴。iphoneX的边框控制可以说在那一年没有厂商可以超越的。

iphoneX搭载的是A11仿生芯片,而采用的是10nm工艺,功耗上就有点小拉胯了,但是在性能上就可以说是绰绰有余。在日常使用是挺流畅的,毕竟有ios的加持,在动画方面以及各个细节都做得很到位,玩 游戏 就可能有点烫手了。

iphoneX的电池容量不到3000毫安,电池小是苹果的一个短处,而发布至今已经快4年了,这也意味着电池的 健康 度已经大不如前,甚至可能要随身携带一个充电宝,毕竟处理器的功耗有点大,除非你去换一个电池。

拍照方面,配备了1200万像素主摄像头,具备f/1.8光学防抖广角镜头,以及1长焦摄像头,具备f/2.4光学防抖广角镜头。整体参数虽说不太行,但是在整体的一个表现上,几乎超过了当时的所有安卓旗舰机型。而且它支持光学防抖,支持4k60fps视频,加上苹果的调教,可以说是挺不错。

手机尺寸大小是5.8英寸,与当前的手机相比可以说是小巧了不少,因为现在大部分手机大概都6.5英寸左右,甚至有一些达到了7英寸以上,可以说是小号的平板了。

在解锁方面这款手机运用的是face ID,可以说是比指纹解锁更方便,但是经过长时间的使用,face ID也可能就会识别不了,就只能手动密码解锁了。

总结一下,这款机子的有点主要可以体现在处理器,屏幕的边框控制,ios系统,拍照能力;缺点就是主要体现在电池以及大功耗,如果在2021年的你想要考虑购买,可以参考我的这篇文章再自行考虑。

喜欢的点赞鼓励支持一下,我会继续更新!有什么不对的可以在评论区点出,感谢!

香蕉睫毛
寂寞的老鼠
2026-04-02 22:26:52

iphonex是苹果于2017年发布的一款新机型,iphonex采用了全新设计,和以往的任何一款苹果机都不一样。也因为iphonex的发布,现在的手机基本上都是全面屏的设计了。虽然现在已经发布到了苹果12,但是iphonex也是值得入手的,它们的尺寸也没有很大的区别。

iphonex屏幕尺寸多大厘米

Phone X屏幕尺寸达到5.88英寸。1英寸=2.54 厘米,换算过来,5.88英寸的屏幕就是14.9352厘米。分辨率为2436 * 1125,具备458PPi。

iPhone X的机身高度为143.6mm,宽度和厚度分别为70.9mm和7.7mm。

苹果x和苹果12尺寸大小

iPhone12的屏幕尺寸6.1英寸,宽度:71.5 毫米(2.82 英寸),高度:146.7 毫米(5.78 英寸),厚度:7.4 毫米(0.29 英寸);

iPhone X屏幕尺寸5.8英寸,高度143.6mm,宽度和厚度分别为70.9mm、7.7mm。

所以,单从屏幕尺寸来看,苹果12是比苹果x要大的。

手机屏幕越大越伤眼睛吗

手机屏幕的大小与是否伤眼睛无关。它与屏幕的亮度、光线,以及所使用的规格有关,例如,OLED有机发光二极管显示技术优于TFT液晶技术。 长时间盯着屏幕看,眼睛一直处于调整状态,很长时间以来,很容易引起视觉疲劳。

您可以打开夜间模式,降低光线亮度以保护深色背景的眼睛,并尝试使用大字体浏览以防止视觉疲劳。

平常的小馒头
愉快的戒指
2026-04-02 22:26:52

iPhoneX的主板,其面积只有iPhone8Plus的70%,苹果在本就集成度超高的主板上,硬生生的减少了30%的面积,还添加了更多新的模块和功能,其技术十分的惊人,维修难度也变的极高。

iPhoneX的整体设计精密,是集成度极高的主板,以及首例双电池设计的iPhone,底下还放着一个Taptic Engine震动模块,苹果完全可以去除掉这个巨大的Taptic Engine震动模块,使用占位置极小的马达震动。

但是苹果一直以来追求极致的细节,宁愿花大心思将主板变小拿来放电池,也不会去除Taptic Engine震动模块来换取电池位置。

外观特色

iPhone X的正面由一块异形屏构成,整个前部只保留顶部的听筒、自拍相机和传感器。iPhone X的机身尺寸为143.6毫米高,70.9毫米宽,7.7毫米厚,重量为174克。iPhone X采用“刘海屏”形式的全面屏设计。

取消了苹果沿用了10年的底部Home键,采用双面玻璃+不锈钢材质中框设计,采用了防油渍防指纹涂层,底部的接口和两侧的按键设计没有变化。

iPhone X屏幕采用圆角设计,四个圆角位于一个标准矩形内,背面采用纵向的双摄,闪光灯位于双摄的中间,闪光灯右下角还有一个降噪麦克开孔。

灵巧的路人
敏感的魔镜
2026-04-02 22:26:52
iphoneX长和宽分别为14.36厘米、7.09厘米。

iPhoneX是美国Apple于北京时间2017年9月13日凌晨1点,在ApplePark新总部的史蒂夫・乔布斯剧院会上发布的新机型。其中“X”是罗马数字“10”的意思,代表着苹果向iPhone问世十周年致敬。iPhoneX属于高端版机型,采用全新设计,搭载色彩锐利的OLED屏幕,配备升级后的相机,可使用3D面部识别传感器解锁手机,支持AirPower无线充电。

更多关于iphonex有多长厘米,进入:https://www.abcgonglue.com/ask/2c138f1615823868.html?zd查看更多内容