关于移动端原型尺寸与设备适配

AxureRP8.0教程 小楼一夜听春语 18323℃ 0评论

问:移动端的原型尺寸应该怎么设定?那么多手机型号,尺寸都不一样啊!

答:按比例做就可以。

这是个错误的回答!!!

移动端的原型,是有规范尺寸的,这个尺寸与屏幕的参数有关,主要就是对角线尺寸和分辨率。

通过这些参数可以知道手机屏幕上每英寸的像素密度。

根据密度和手机的硬件设定可以得出对应的图片尺寸。

以下是我不专业的理解,如果有错误,欢迎大家指正。

在一款APP的文件夹中经常会看到这样的文件夹:

01

这些文件夹里存放的是不同规格的图片有@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(生成)的界面中,点击【移动设备】选项,在右侧的界面中勾选【包含视口标签】。

02

这样就在浏览时候能够填满整个屏幕了。那里满满的感觉是不是很棒?

最后补充一下,如果想不同尺寸设备的适配(比如IPhone和魅族都要设配),则需要进行自适应视图的原型制作,不能偷懒!


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 关于移动端原型尺寸与设备适配

喜欢 (26)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 自适应视图的原型制作怎么做呢?
    丽吖2016-02-25 14:26 回复
  2. nice
    langxiao_super2016-02-25 14:52 回复
  3. 那里满满的感觉和冬天的小鸡鸡是什么鬼,笑哭.jpg
    周大侠2016-02-26 17:32 回复
  4. 小楼老师你好!有个问题不知道能不能请教您!是这样的原型做好后,按F5预览页面可以交互,F8生成原型后,交互效果不见了,设置的变量值发生变动,页面不变化
    key_sky2016-03-03 17:26 回复
  5. 大神们,,我做的手机横版界面 ,怎么在手机上也是横屏的展示啊
    逍遥陶子2016-06-17 17:40 回复
  6. 老师好色情啊!!owo 教程都看得我很羞♂耻
    Howie2017-03-06 19:31 回复