iphone6、6p设计适配

news/2024/9/23 9:23:29/

从知乎转来的,应该是淘宝iOS App适配方案,非常具有参考价值。

 

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。

 

 

加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?一个基本思路是:

1、选择一种尺寸作为设计和开发基准;

2、定义一套适配规则,自动适配剩下两种尺寸;

3、特殊适配效果给出设计效果。

 

手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式,再慢慢说明原委。

 

 

第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

 

第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

 

第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。

 

第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。

 

为什么选择iPhone 6作为基准尺寸?

当面对大中小三种屏幕需要适配的时候,很容易想到先做好一种屏幕,再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6(750px/375pt)作为基准,基于几个原因:

 

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计,到320pt可能元素之间比例就不是那么回事了,比如图片和文字之间视觉比例可能失调。

 

2、iPhone 6 plus有两种显示模式,标准模式分辨率为1242x2208,放大模式分辨率为1125x2001(即iPhone 6的1.5倍)。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

 

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率,不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率,但是大屏时代依然以小尺寸为设计基准显然不合时宜,设计师会停留在小屏的视角做设计。

 

所以,iPhone6的750x1334是最适合基准尺寸。

 

只交付一套设计稿,默认用什么规则来适配?

前文提到适配策略是先选择iPhone 6作为基准设计尺寸,然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式,控件弹性,图片等比缩放。

 

 

控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势。

 

 

 

按照上述默认适配规则,大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容,需要设计出特殊适配效果。比如App store首页焦点图,从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个,真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。

 

 

转载于:https://www.cnblogs.com/c-y-q/p/4726678.html


http://www.ppmy.cn/news/711660.html

相关文章

iphone屏幕尺寸总结

http://blog.csdn.net/phunxm/article/details/42174937#t24 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 1x …

C学习笔记5

1、8\main.c|6|warning: variable C set but not used [-Wunused-but-set-variable]| 这个错误提示的是变量定义和赋值后并没有进行输出操作 2、main()函数可以出现在任意位置,但是必须有且只能有1个 3、其值不能改变的量称为常量 4、常量有整形常量&#xff0c…

iphone 6plus 输出的屏幕尺寸 375 ,667的原因 - 简书

转自:http://blog.csdn.net/freshlover/article/details/44454991 看到这个题目你可能不信,引出这个问题的缘由是几次项目中Chrome模拟器和iPhone6真机预览效果不一致。 为什么在Chrome Emulation模拟手机页面和真机预览效果不一致? 以前觉得不外乎两个原…

iPhone6的界面尺寸及原型规范

iPhone6的原型规范如下: 1、界面尺寸布局:满屏尺寸750x1334px 2、高度电量条高度40px,导航栏高度88px,标签栏高度98px; 3、各区域图标大小导航栏图标44px,标签栏图标50px; 4、各区域文字大小电量…

iphone计算机适配,iPhone UI界面尺寸如何一稿适配

为什么出现适配?主要是更新换代的硬件屏幕分辨率不断提升,因此设计界面向上适配、向下兼容。 在开始适配话题前,先铺垫几个单位和换算:分辨率(图像分辨率ppi、设备分辨率)、像素px、磅pt、倍率。 一、单位 1.分辨率 可以从图像分辨…

iphone6 6p纯代码适配

新QQ交流群:418536818,之前的群已满 首先说下让自己的程序支持iPhone6和6,第一种使用官方提供的launch screen.xib,这个直接看官方文档即可,这里不再多述;第二种方法是和之前iPhone5的类似&#xff0…

iPhone 部分机型尺寸

部分手机型号尺寸。 手机设备型号屏幕尺寸分辨率点数 (pt)屏幕显示模式分辨率像素(px)屏幕比例iPhone SE4.0吋320x5682x640x113616:9iPhone 6/6s/7/8/SE 24.7吋375x6672x750x133416:9iPhone 6p/7p/8p5.5吋414x7363x1242x220816:9iPhone XR/116.1吋414x8962x828x179219.5:9iPho…

如何基于ELK构建实时告警系统,保障你的系统稳定性

在现代的分布式系统中,日志数据是非常重要的。为了监控和分析日志数据,Elasticsearch 已经成为了一个非常流行的选择。Elasticsearch 不仅可以存储大量的日志数据,还可以实时地搜索和分析数据。但是,当您的系统发生异常情况时&…