iPhone X移动端UI设计指南(1)

来源:网络   作者:热心网友   发布时间:2017-11-24    浏览次数:210

前言:苹果在9月13日发布了三款新的机型iPhone 8 ,iPhone8 Plus,iPhone X,其中8,8P和7,7P分辨率是一样的,新增分辨率1125px *2436px 。这个机型对UI设计师适配会有什么样的变化?是不是要多切一个尺寸的图?是不是原来的设计尺寸不够了?iPhone X屏幕的特殊形状对设计有什么影响?


安心,其实影响不大,但是确实多了一些要注意的点。


一.切图尺寸

IOS在屏幕上的坐标系以点(pt)为单位,然后映射到显示屏中的像素。不同的屏幕像素密度不同。普通的屏幕1pt对应1px,高分辨率的屏幕,1pt则对应更高的像素。这次发布会发布的新增的3款机型,屏幕的像素密度没有发生变化,设计师们依然出到3倍图即可。具体可以看下图:





二.设计稿尺寸


大海的团队,目前设计工具是Sketch,设计尺寸是iPhone7 的分辨率750px*1334px 。对我们团队来讲,设计稿尺寸也不需要做出调整。


iPhone X 分辨率1125px*2436px,和之前的屏幕相比,屏幕比例发生了变化。我们转换成pt为单位,来看下屏幕发生了什么变化。


下图中左侧是iPhone7 转化成 pt 的示意图 375pt*667pt,右图是iPhone X 转化成 pt 的示意图375pt*812pt可以发现屏幕高出了145pt。



为了方便理解,大家可以把这个尺寸理解成当年640px*1136px 和640px*960px 这两个屏幕之间的关系,用同样的注意点去处理设计时会遇到的问题。


1234共4页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6872.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通