移动应用界面的尺寸问题：iphone4、iphone5、5S、6、6plus、iPhone X

genre_wu

多谢！

尹广磊

设计原型时，使用低分辨率的就可以。
最终用户界面才使用高分辨率的，以适应苹果Retina屏的显示。

iPhone4做原型时，可以用320*480,
iPhone5做原型时，可以用320*568,
iPhone6做原型时，可以用375*667,
iPhone6 Plus原型，可以用414x736,
iPhone X原型，可以用375*812,  最新官方设计指南

时间栏、导航栏、Tab栏的高度。




Android的界面尺寸比较流行的有：480*800、720*1280、1080*1920，
我们在做设计图的 时候建议是以 480*800的尺寸为标准；
更多安卓平台设计规范。安卓官方设计规范(英文)




参考链接：http://www.zhihu.com/question/25308946
解释链接：http://zhidao.baidu.com/link?url ... s7vQScljI4Rnw6Z5Y4q
图示链接：http://www.paintcodeapp.com/news/iphone-6-screens-demystified
图示链接2：http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions



真正技术实现时，才会再做高分辨率的图。
iPhone4的显示分辨率，640*960
iPhone5的显示分辨率，640*1136
iPhone6的显示分辨率，1334×750
iPhone6 Plus显示为，1920×1080




图片链接：http://www.guimobile.net/iphone-design-size.html


实际上我们的工作即不是开发，也不是前端，也不是视觉，
我们不用纠结最终用户界面的实际尺寸是多少。
在根本原则上，我们只需要依照屏幕的长宽比例，设定一个自己适合的大小即可。
比如iPad一代的分辨率是1024×768，它们的长宽比是4:3。
我现在要设置一个粗略的iPad版的应用原型，用于快速表达一些大致的信息框架。
我其实就可以不按着1024×768的尺寸来设计，而是按着4:3的比例，
可以选择按着600×450来设计，像下图这样，在粗略原型的表达上完全没有问题，
并且可以保证内容在电脑上演示时，在电脑浏览器的一屏下都可以显示全，
还不用上下总要滚动鼠标，更加方便了快速浏览。




另外设计原型时，只画屏幕部分即可，
不需要外面非要套个手机壳子在外面。
http://www.hiaxure.com/thread-5352-1-1.html



其它参考链接：
1. http://www.guimobile.net/chichun/

2. http://blog.sunnyxx.com/2014/09/10/iphone6-resolution/

3. http://www.zhihu.com/question/25 ... &utm_content=answer

genre_wu

多谢啊！其实我个人觉得既然做还是按实际分辨率做比较好。

汤菜菜

非常感谢

EDC003

2# 尹广磊

尹兄的意思是，实际设计界面尺寸是按照，实物原本尺寸折半设计。
但是，下图给出的参考样例：

对于部分组件，是不是也是需要折半处理呢？比如导航栏、状态栏。

tsq456

这也是困扰很久的问题，一直无解

做原型不可能一个尺寸做一套，那么在一套要适配多个尺寸的情况下，如何把握控件的摆放，比如一行摆放几张图这样的问题~