汇众教育南京动漫游戏校区
当前位置:综合资讯 > 正文

三分钟了解iPhone X设计规范(详细)

汇众教育总部 2017-09-22 汇众教育总部

这是一份超详细的iPhone X设计规范,三分钟让你了解这款刷爆朋友圈的手机设计尺寸和适配。话不多说,言归正传,我们马上开始。


iPhone X是Apple今年秋季推出的最新手机之一!带来了全面屏新设计.jpg


尺 寸


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


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

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


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


布 局


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


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

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


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


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


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


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


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


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


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


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


如果您的APP目前隐藏状态栏的话,请重新考虑iPhone X布局。.png


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


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


图 标 设 计


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


图标设计.jpg


配 色


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


配色.png



----------------------------------------------------------------------------



最新UI(界面设计)相关课程

全科UI设计咨询报名.png


游戏UI设计咨询报名.png


0
  • 南京市鼓楼区建宁路65号金川科技园13号楼
  • http://nj.gamfe.com
全国服务咨询热线 025-85561929