浅析iPhone X的适配

用户头像
广州/UI设计师/9年前/577浏览
浅析iPhone X的适配

浅析iPhone X的适配

首先我们习惯用iPhone7的375*667pt为设计稿向上适配iPhone7puls的屏幕。但是iPhone X的出现看似要打破这个局面,其实不然。

iPhone X的屏幕分辨率是1125*2436px换算成三倍图则为375*812pt(@3x)相比iPhone7的375*667pt只高了145pt。所以我们可以把iPhone X简单看成iPhone7的“加长版”。

iPhone X算是一个“奇葩”屏设计了,去掉了原有的home键又增加了“齐刘海”的状态栏设计。根据苹果官方给出的设计规范。Navigation bar和Bottom bar将做出较大的改变来适配这个“奇葩”屏幕的设计。

官方给出的设计规范就是Navigation bar增加到44pt即给“齐刘海”增加了26pt,而Bottom bar以下则增加了34pt。剩下的85pt则是多余出来的位置。

当然这块1125*2436的“异形屏”并不是全部区域都是可用的,实际上根据官方给出的规范说明,除去全屏显示体验的情况下,存在着设计的“安全区”。

这样是适配对iPhone X的影响并不会太大。可以正常的从375*667pt的@3x适配到iPhone X。但是部分全屏设计页面还是得做细节的调整。包括全面显示的页面、启动页和引导页等等

所以对于适配iPhone X,只需要正常用iPhone7适配7plus的方式做@3x图适配就可以了。


3
举报
|
7
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】礼物/活动icon
Security Camera UI kit
户外旅行飞机情侣假日出行
我的钱包-UI界面设计-app
手表表盘UI系列
【新年UI图标】钱包icon
UI通用设计素材1
新能源APP应用UIKit
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI界面 组件
【新年UI图标】汽车icon
【新年UI图标】秒杀icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】旅行icon
【新年UI图标】体育icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】30个图标
【新年UI图标】会员icon
盲盒APP UI设计
3D渐变流体抽象矢量UI背景图
UI 登录界面设计模板包
智能家居中心 简约 UI设计组件库
科技医疗透明柜UI界面设计
你可能喜欢
大家都在看
登录注册