全网首发!一份超详细的iPhone X设计规范!

iPhone X是Apple今年秋季推出的最新手机之一!带来了全面屏新设计、能以你的脸作为密码的面容 ID 功能,以及iPhone迄今最强大、最智能的芯片!国行iPhone X将于10月27号开始接受预约购买,售价人民币8388起!


全网首发!一份超详细的iPhone X设计规范!



尺寸


在纵向方向上,iPhone X上的显示屏的宽度与iPhone 6,iPhone 7和iPhone 8的4.7英寸显示屏的宽度相匹配。然而,iPhone X上的显示屏比4.7英寸显示屏高145pt,大约20%的内容垂直空间。


全网首发!一份超详细的iPhone X设计规范!

屏幕分辨率 1125 x 2436px(375pt×812pt @3x)


所以从页面视觉来看,我们依然采用老办法,从2x的iPhone7做为基准去做一稿设计,唯一变化的是可能我们需要采用更高的导航栏,更高的底部标签栏。所以,iPhone X将延用@3x,不会采用@4x!



布局


在设计iPhone X的界面时,您必须确保布局填满屏幕,并且不会被设备的圆角,传感器外壳或被主屏幕的指示灯遮蔽。


全网首发!一份超详细的iPhone X设计规范!

全网首发!一份超详细的iPhone X设计规范!


大部分使用系统提供的标准UI元素(如导航栏)的APP会自动适应iPhone X!


全网首发!一份超详细的iPhone X设计规范!

左图:4.7英寸iPhone  右图:iPhone X


如果是自定义布局的APP,适配iPhone X也应该比较容易,特别是您的APP布局遵守了安全区域和边距布局指南。在上架APP之前,您最好使用Simulator(Xcode内置)来预览APP,检查是否存在布局问题。但如果是测试功功或色彩校对,最好在实际设备上预览。


如果提供全屏体验时,设计师需要付出更多的时间来测试页面,看看在横竖屏切换的时候,有没有元素遮蔽的现象。!


全网首发!一份超详细的iPhone X设计规范!


注意状态栏的高度。iPhone X的状态栏比在其他iPhone上更高。如果您的APP内容定位在状态栏的下方,则必须更新您的APP。请注意,当背景任务(如录音和位置跟踪)处于活动状态时,iPhone X上的状态栏不会改变高度。


如果您的APP目前隐藏状态栏的话,请重新考虑iPhone X布局。因为iPhone X提供了更多的内容垂直空间,可以让用户获得更多有用的信息,比隐藏隐藏价值大。


全网首发!一份超详细的iPhone X设计规范!


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


还有要注意不要将交互控件放置在屏幕底部和角落。因为这些区域是用户不好操作的位置,或者操作起来不舒服!



图标设计


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


全网首发!一份超详细的iPhone X设计规范!



配色


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


全网首发!一份超详细的iPhone X设计规范!



立即下载:iPhone 8模型样机PSD+XD+SKETCH源文件! 

立即下载:iPhone X模型样机PSD+XD+SKETCH源文件!

立即下载:iOS 11 UIKit PSD+XD+SKETCH源文件!

64
作者

图翼君

全部软件设计师必备软件神器

  • 通过命令行来执行Sketch各项操作Runner v0.98
    通过命令执行Sketch
  • Sketch创建自定义网格插件gutter cutter
    Sketch自定义网格
  • Sketch快速生成阴影插件Elevation Shadows
    Sketch快速生成阴影
  • Sketch快速生成参考线插件Sketch Guides
    Sketch快速生成参考线
  • Photoshop设计稿一键智能生成代码大厨imgcook
    Photoshop设计稿生成代码
  • Sketch设计稿一键智能生成代码大厨imgcook
    Sketch设计稿生成代码
  • 图翼网微信公众号:tuyiyicom
    图翼网在线客服QQ:1003030973
    图翼网站导航
    图翼网QQ群联盟