导航:首页 > 编程系统 > iphone6plus切图

iphone6plus切图

发布时间:2025-01-11 01:47:04

① APP安卓原生 设计该怎么切图给开发

1.png的方案

3x规格png实施起来会简单很多,设计师可以以iPhone6s plus为设计稿,导出稿中相同大小的图片,以6s为设计稿的话输出图片时宽高均乘以1.5。开发拿到切图后,iOS对应放入3x,Andrpid对应放入xxhdpi,搞定。目前使用率来说3x(即3倍)就足够了,其他倍数会从3x自动缩小获得。
2.矢量图方案
这个方案会复杂些。iOS矢量图为pdf格式,大小以1x输出就可以,这样做可以方便开发人员导入和布局。Android可以用VectorDrawable或者svg转png插件,需要的是svg格式矢量图。用VectorDrawable的话,设计师最好用最简单的方式制作svg,最好只用绘线和填色,蒙版、挖空、区域透明等等就不要用了。用svg转png插件的话,对制作svg就没有太多要求,但是这类插件会有一些坑,开发人员要去填坑,比如转换后清晰度不够的问题。
我给公司的方案就是设计师输出一套1x规格pdf矢量图,iOS可以直接套用,Android采用svg转png插件,自己写脚本将pdf批量转换成svg,再由插件生成3x规格png,是的,Android最终还是用png。因为公司iOS项目先启动,图片都做好了,不可能再让设计师为VectorDrawable一个图片一个图片的调整。
3. 分辨率和倍数
市面上各个规格的分辨率都有,Android的太多先不讨论,iPhone 6s+是1080x1920,6s是750x1334,se是640x1136。差异这么大难不成要一一适配?显然不可能,幸好除了分辨率外还有倍数的概念,比如2x(2倍)就是指设备的一个点等于2px,一般来说不同设备的一个点物理距离是接近的。我们来看看分辨率除以倍数后的“点”分辨率,那么6s+是414x736,6s是375x667,se是320x480,从这个角度上看,其实几个机型的“点”宽度变化不大,只是高度有所不同,只要布局得当完全可以做到一套设计稿通用大部分机型。
Android的情况也是类似,只是倍数更多,它用另一个名称表示:mdpi(1倍)hdpi(1.5倍)xhdpi(2倍)xxhdpi(3倍)。
补充,6s和se是2x,6s+的倍数情况比较复杂,详细请看:
iPhone 6 Plus的逻辑分辨率为什么是414x736? - IOS app开发 android app开发 为什么 iPhone 6 Plus 要将 3x 渲染的 2208x1242 分辨率缩小到 1080p 屏幕上? - iOS 开发
4. 良好的布局
一般来说,选用一款常用机型的分辨率作为设计稿,剩下的便是布局的工作。
布局就像排版一样,每一块区域每一个控件的摆放规则:往一边靠还是居中,拉伸铺满,保持一定比例,还是固定大小。要把设计稿想像得能够随时变宽变窄变高变矮,当大小发生变化时,按照预定的布局规则设计稿会变得怎么样。布局没有捷径,就是多思考多练习。
给个例子,公司的设计稿是以5s为基准,分辨率640x1136,倍数2x。
知道以哪个倍数为基准对适配很重要。比如说,有一次设计师不清楚怎么描述一个九宫格页面时,我让他针对6s+、6s、4s再做一次调整,基准倍数是2x,6s+基准到2x的尺寸便是828x1472,方便同一个设计稿复制到不同分辨率上,通过不同分辨率的调整便能做出满意的页面布局。(在这里你需要一套高效的标注工具
* 当倍数不为1x,所有px表示的数值都应该能被倍数整除。以2x为例,输出图标大小就不能为45px x 45px,因为当输出到1x和3x时就会出现小数,小数会被舍弃。正确做法是调整到44px或者46px。
5、为什么不采用等比例缩放适配
为什么不采用等比例缩放适配?说到底,更大的屏幕尺寸提供了更多内容展示的空间,等比例缩放没能把发挥出大屏的优势,同时也很难保证系统UI的一致性体验。

② 解读iPhone 6Plus的设计尺寸为什么是1242*2208px

iPhone6+除外,其他所有iPhone的DPI是一致的,都是326,用@2x的素材。但是6+的实际DPI是401,理论上苹果应该用401/326*@[email protected]的素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上,实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。这样算下来,物理分辨率和虚拟分比率的比例是87%,也就是1920/0.87=2208,1080/0.87=1242.好处就是开发者更方便,比如准备素材时,字号可以直接调成3x的。

③ 设计手机app界面时,常用的分辨率是多少


就目前市场状况而言,各种手机的分辨率可以这样判断:
1、iPhone
iPhone的屏幕尺寸各不相同,说的是逻辑像素尺寸,这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone,就要选择逻辑像素折中的机型。
从市场占有率数据来看,目前最多的是iPhone5、5s的屏幕。倍率为2,逻辑像素320乘以568。上升势头最猛,未来有望登上第一的是iPhone6的屏幕。倍率为2,逻辑像素375乘以667。
按照这两种尺寸来设计,都是比较主流的做法。可以兼顾短一些的iPhone4s,大一点的6plus也不会过于空旷。
不过在切图的时候要注意,由于iPhone6plus的3倍图是由2倍图放大而来,所以位图要注意保证清晰。
2、Android
都说Android碎片化严重,但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了:360乘以640,就看你设成几倍了。想以xhdpi为准,就把DPI设成72乘以2等于144。想以xxhdpi为准,就把DPI设成72乘以3等于216。
对于那些比较老的低端机,宽度是480px的那批,画面确实会小一些,显示内容会更少。稍微留意一下,重要内容尽量保持在界面中上部分。
当然,这些机型不出一年就会被边缘化,基本淘汰。现在能运转的也是当作功能机在用,软件多了必卡无疑,用户体验无从谈起。不作考虑也是OK的。
3、Web
手机端网页就没有统一标准了,比较流行的做法是按照iPhone5的尺寸来设计。倍率2,逻辑像素320乘以568。
这样的做法比较实在,倍率2的屏幕无论在iOS还是Android方面都是主流,而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平,页面加载速度快。当然,缺点就是在倍率3的设备上看,图片不是特别清晰。
如果追求图片质量,愿意牺牲加载速度,那么可以按照最大的屏幕来设计。也就是iPhone6plus的尺寸,倍率3,逻辑像素414乘以736。
总结一下:移动端的尺寸比PC端复杂,关键就在倍率。但也正因为倍率的存在,把大大小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。站在这条水平线的角度看,会发现它很好理解。

阅读全文

与iphone6plus切图相关的资料

热点内容
win10系统打开java 浏览:479
全日制编程什么意思 浏览:447
笔记本创建局域网怎么传文件 浏览:871
怎样查看id密码 浏览:647
赣州极客晨星少儿编程怎么样 浏览:690
觉醒年代哪个app可以免费观看 浏览:830
如何关闭win10触摸屏幕 浏览:761
苹果142不能传文件 浏览:128
如何看历史底部数据 浏览:230
怎么在电脑上下软件或安装app 浏览:798
qq头像电影截图情侣 浏览:87
安卓的网络位置设置在哪 浏览:973
编程侠官网如何登录 浏览:484
借贷王app怎么样 浏览:552
qq黑钻手机怎么开通 浏览:465
dnf85版本爆ss视频 浏览:514
gitlog前一个版本 浏览:718
苹果6手机屏幕周边多出一圈黑色 浏览:131
phpword插件 浏览:264
win10重置并清理驱动器 浏览:893

友情链接