首页  /  文章  /  设计教程  /  正文

设计教程

最新超详细的iPhone X 设计规范

时间:2017-09-13  来源:互联网转载

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

尺寸

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

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

所以,iPhone X将延用@3x ,不会采用@4!

布局

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

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

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

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

如果提供全屏体验时,确保背景延伸到显示器的边缘,并且垂直可滚动的布局!

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

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

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

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

配色

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

设计的适配

过去我们设计页面,采用的方法是基于iPhone7的2X倍率进行设计,以2X的基准做设计稿,也就是750×1334。然后切图输出2X、3X的图片资源给开发。

从页面的宽高比例来说,

新的iPhoneX宽度1125/3=375,而iPhone7的宽度750/2=375,两个的宽度一致,

新的iPhoneX高度2436/3=812,而iPhone7的高度1334/2=667,新的iPhoneX是比iPhone7要长一截。

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

原有的页面相当于现在的页面设计,信息密度可能降低了。因为内容显示区域变少了点。

设计的测试

虽然界面设计的流程依然没有变化。但是因为有了小刘海的出现,设计师需要付出更多的时间来测试页面,看看在横竖屏切换的时候,有没有元素遮蔽的现象。

相关推荐:

最新版IOS 11的设计规范官方设计sketch xd源文件和视频下载
iPhone X 适配规则简版

特别说明:本站所收集的素材版权归原作者所有,在此仅供学习参考,请勿用于任何商业用途!

扫一扫加公众号(uibaba)