newheader
手机登录
账密登录
验证码图片
登录
还没有账号? 马上注册
手机登录
账密登录
验证码图片
忘记密码?
登录
还没有账号? 马上注册
欢迎注册陪学网账号
已经有账号? 马上登录
关于移动端原型尺寸与设备适配
陪学
2017-12-12 14:26:18
943
0
那么多手机型号,移动端的原型尺寸应该怎么设定?移动端的原型,是有规范尺寸的,根据屏幕的对角线尺寸和分辨率可以计算出规范尺寸。在制作原型时,高密度一般就制作为实际分辨率一半的尺寸,而超高密度一般就制作实际分辨率的三分之一的尺寸。

       移动端的原型尺寸应该怎么设定?那么多手机型号,尺寸都不一样,那应该怎么设定好呢?有些人会说:按比例做就可以。但是要告诉大家的是,这是个错误的回答!!!
       移动端的原型,是有规范尺寸的,这个尺寸与屏幕的参数有关,主要就是对角线尺寸和分辨率:
通过这些参数可以知道手机屏幕上每英寸的像素密度。
根据密度和手机的硬件设定可以得出对应的图片尺寸。
       在一款APP的文件夹中经常会看到这样的文件夹:


       这些文件夹里存放的是不同规格的图片有@1X、@2X或@3X,就是为了适应不同尺寸的设备。拿设备适配3X图片来说,图片的尺寸乘以3就是在屏幕中所占据的像素点;比如:图片44*44大小,在屏幕中显示时就是占据132*132的像素点;图片360*640大小在屏幕中显示时就是占据1080*1920的像素点。举例来说:小米手机5英寸屏幕,分辨率1080*1920;原型尺寸为360*640,就是一个3X的关系。
       所以,大家在制作原型时,高密度一般就制作为实际分辨率一半的尺寸(以Iphone4为代表),而超高密度一般就制作实际分辨率的三分之一的尺寸(以Iphone6为代表)。当然也有奇葩的2.5X,比如魅族MX3,还有更奇葩的2.75X,华为的某一款。

       但是,只把原型尺寸改了,还没有用,你会发现在手机端浏览原型时,并没有适配,原型会缩在屏幕的左上角。

       想正常显示,只需一个设置。在F8(生成)的界面中,点击【移动设备】选项,在右侧的界面中勾选【包含视口标签】。


这样就在浏览时候能够填满整个屏幕了。
       最后补充一下,如果想不同尺寸设备的适配(比如IPhone和魅族都要设配),则需要进行自适应视图的原型制作,不能偷懒!

       PS:这是以前看到的一篇文章,分享给大家。如果有知道出处的,希望告知!

长按二维码或加微信pexuepexue
进陪学产品交流群回复:资料分享
免费获取资料:每日更新 免费课程、学习资料、报告、招聘面试
标签:
登录 后参与讨论
发表
全部评论
没有更多评论了
newfooter
陪学网专注于产品管理类课程的开发与制作,
志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。
陪学网:陪伴学习、陪伴成长
粤ICP备18075915号