genre_wu 发表于 2014-9-23 12:18:59

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

多谢!

尹广磊 发表于 2014-9-23 17:21:12

设计原型时,使用低分辨率的就可以。
最终用户界面才使用高分辨率的,以适应苹果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 发表于 2014-9-24 15:47:30

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

汤菜菜 发表于 2014-10-7 13:41:57

非常感谢

EDC003 发表于 2015-2-6 07:43:42

2# 尹广磊

尹兄的意思是,实际设计界面尺寸是按照,实物原本尺寸折半设计。
但是,下图给出的参考样例:
http://www.hiaxure.com/attachments/month_1409/1409291449ac9bc700c767cf93.png
对于部分组件,是不是也是需要折半处理呢?比如导航栏、状态栏。

tsq456 发表于 2015-12-7 15:23:47

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

做原型不可能一个尺寸做一套,那么在一套要适配多个尺寸的情况下,如何把握控件的摆放,比如一行摆放几张图这样的问题~
页: [1]
查看完整版本: 移动应用界面的尺寸问题:iphone4、iphone5、5S、6、6plus、iPhone X