Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 137352|回复: 5

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

[复制链接]

0

主题

7

帖子

15

积分

会员

Rank: 5Rank: 5

积分
15
发表于 2014-9-23 12:18:59 | 显示全部楼层 |阅读模式
征集案例作品
多谢!

363

主题

6527

帖子

6万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
63459

实名认证

QQ
发表于 2014-9-23 17:21:12 | 显示全部楼层
设计原型时,使用低分辨率的就可以。
最终用户界面才使用高分辨率的,以适应苹果Retina屏的显示。

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

时间栏、导航栏、Tab栏的高度。
2019-01-08_11-14-03.png

iPhone X.jpg

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


2015-08-21 a3e5418e0edf9c0900f585dde852f69d_r.jpg

参考链接: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

The Ultimate Guide To iPhone Resolutions.jpg

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


iph1030.png

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


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

ipad_app.jpg


另外设计原型时,只画屏幕部分即可,
不需要外面非要套个手机壳子在外面。
http://www.webppd.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

评分

2

查看全部评分

0

主题

7

帖子

15

积分

会员

Rank: 5Rank: 5

积分
15
 楼主| 发表于 2014-9-24 15:47:30 | 显示全部楼层
多谢啊!其实我个人觉得既然做还是按实际分辨率做比较好。

0

主题

29

帖子

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2014-10-7 13:41:57 | 显示全部楼层
非常感谢

0

主题

10

帖子

14

积分

会员

Rank: 5Rank: 5

积分
14
发表于 2015-2-6 07:43:42 | 显示全部楼层
2# 尹广磊

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

对于部分组件,是不是也是需要折半处理呢?比如导航栏状态栏

0

主题

5

帖子

-40

积分

乞丐

积分
-40
发表于 2015-12-7 15:23:47 | 显示全部楼层
这也是困扰很久的问题,一直无解

做原型不可能一个尺寸做一套,那么在一套要适配多个尺寸的情况下,如何把握控件的摆放,比如一行摆放几张图这样的问题~
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区

GMT+8, 2019-3-20 03:19

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表