小小千想和您聊一聊

当前位置: 首页> 技术分享> iphone X 的UI界面设计尺寸及适配

iphone X 的UI界面设计尺寸及适配

iPhone 8屏幕与以往的iPhone66S7系列相同。iPhone X的分辨率发生了变化,但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面,iPhone X与过去我们熟知的iPhone 4.7''iPhone 5.5'' 放大模式宽度相同。通俗的说,iPhone X可看做是iPhone 4.7'' 的加长版。然而,对UI设计师而言,事情并不是设计图加长这么简单。




过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域,而由于iPhone X屏幕上的刘海以及屏幕四周采用圆角的设计,需要设计师对绘图区域做出调整。苹果给出的安全区域如下:


页面内容不能超出安全区域

 

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

 

页面顶部和底部变化如下:




值得注意的是,iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外,Safari底部操作栏也有放大

 

讲完竖屏,在说横屏。

和竖屏一样,横屏的内容也要放置在安全区中:


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

最后说下最核心的问题,安全区范围有多大?

 

通过对比官网上所有与iPhone X相关的界面,可以确定,安全区如下:

 




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



所以iPhoneX的设计其实除了安全区的变化之外,设计规范上的变化并不是很大


上一篇:JavaScript中常见的错误

下一篇:教你用PS制作3D环绕字体效果图

QQ技术交流群

千锋UI设计锋迷群
1092150817

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码