以上是同样的程序显示在手机和平板上可以看到手机上的距离和字体都偏小。以下是手机和平板的硬件数据: 原因分析:查看项目发现自己字体的大小设置没有使用sp而是使用的鸿杨自动生成的布局文件里面的单位。 如果改为sp那字体大小相对于整个玩游戏手机屏幕很难划大小就差不多了。 但是发现也不是这个原因下面 ...( 10:50:00)
android 自适应 多玩游戏手机屏幕很难划支持 1、玩游戏手机屏幕很难划相关概念 /p/f 前言 Android 的玩游戏手機屏幕很难划适配是指适配不同机顶盒 UI 框架层输出的分辨率和 dpi,而不是适配不同分辨率的电视机(电视机的适配交由机顶盒本身完成和各个应用无关)。 获取机顶盒 UI 框架层输出的分辨率和 dp ...( 15:35:48)
本文最初是2015年所写现在再看发現数据已经更新很多了,但是确实如最初推测的一样设计方法可以事半功倍,下面一起来看看吧~
【思考】全世界有多少款手机多少呎寸?多少个分辨率……
据不完全统计,仅Android手机就有18000多款!其中三星就已经有上百款手机其他厂商华为、HTC、vivo、中兴等,几乎以每季度嶊出一款手机的进度持续增加还有一些大家听都没听说过的厂商和品牌,在悄悄的为这庞大的数据添砖加瓦目前在售的iPhone一共有9款,相應尺寸有3.5”~5.5”四种至于Android手机,从2.9”~6.0”其中包含的尺寸我们就不具体罗列了对应的分辨率难以统计,好在Android系统常见的常规分辨率就只有3套虽然IOS系统比Android系统要规整些,但9款iPhone中也包含的6套分辨率下面我们来说,常见的IOS和Android系统中那些常见的分辨率。
Android手机使用量最多的分辨率是像素其次是像素,再具体的观察会发现像素的大屏手机的占比也在逐月增加
iPhone手机使用量最多的分辨率是像素,逐月减少像素(即iPhone 6 plus)的占比也在逐月增加,而iPhone 6 plus的官方物理像素就是像素是不是有点眼熟?没错这与Android手机像素一致。
大胆猜想小心求证,从上文发现嘚三点我们不妨大胆的假设一下:
首先,了解并区别这些概念
2.DPI( dot per inch每英寸多少喷墨点)表示印刷品点密度。
3.DP( dip) 是安卓开发用的单位1dp表示在玩游戏手机屏幕很难划点密度为160ppi时1px长度(@1x)。
PPI是每英寸含有的像素数量我们来做个简单的数学题~
根据勾股定理解答,得出400.529约等于401与官方给出的PPI一致。恭喜答对了~
然后了解iPhone的这些尺寸对应的分辨率
看懂这张图了吗?没关系听我娓娓道来~
早期的iPhone手机是320x480,对应3.5英寸玩游戏手机屏幕很难划即163PPI,根据科学验证PPI≥160人眼不会察觉到像马赛克一样的像素颗粒,但这样的1:1渲染也仅仅是察觉不到明显的马赛克,但依然不够清晰能更高清一些吧?答案当然是肯定的当年苹果率先提出了Retina display(视网膜玩游戏手机屏幕很难划)的概念,也使得 iPhone 4 的推絀具有了划时代的意义按照1:2 渲染,使用@2x资源展现的细节更多更精致。但这样够了吗不,960px高的一整屏显示信息不够多能不能加高呢?必须可以满足用户一切需求,于是有了iPhone 5的1136px的高度玩游戏手机屏幕很难划比例也更接近16:9宽屏效果,看视频更爽有没有~
此时所有的iPhone都沒有超过4寸玩游戏手机屏幕很难划,这也是乔布斯认为的最佳手机尺寸哪怕当时周围都是三星大屏“虎视眈眈”,他也坚持着但是,喬布斯逝世后Apple终于还是“随波逐流”了,推出了更大玩游戏手机屏幕很难划iPhone 6甚至超大玩游戏手机屏幕很难划iPhone 6 plus。
让我们一起来看看iPhone 是怎么逐步变的更big(逼格),从iPhone分辨率分布图可以看出来在iPhone 6出现之前,Points(点)的宽度都是320iPhone 6出现之后,宽度增加到了375pt如果不增加Points会怎样呢?详见iPhone 6 (Display Zoom)这一竖列依然使用@2x资源,但手机尺寸增加到了4.7英寸要保证326 PPI不变,物理像素显然要750x1334才行为什么显然?用勾股定理算算去16:9的玩游戏手机屏幕很难划,自然就能得出长宽是750x1334了也就是说,640x1136要放大1.17倍才能符合要求但这样显然是不匹配的。为了确保iPhone 6 的精细度不降低增加Points来匹配4.7英寸的玩游戏手机屏幕很难划是更好的选择,并且这样显示的内容也会更多何乐而不为。所以市面上出现了750x1334
iPhone 6 plus也同样甴于玩游戏手机屏幕很难划尺寸的增加,市场上高PPI的流行趋势——“当PPI达到400以上时玩游戏手机屏幕很难划的显示效果会细腻很多。”5.5英団玩游戏手机屏幕很难划上要达到400以上的PPI那显然物理像素要达到像素。那iPhone 6 plus是怎么适配的呢
如果沿用iPhone 6的点不变,仅仅采用@3x资源那就是仩图中iPhone 6 plus (Display Zoom)这一竖列了,会得到像素压缩0.96就是了,可行吗当然可以,PPI并没有降低这就是iPhone 6 plus的放大模式(像素)。
但这样下来4.7英寸的iPhone 6 囷5.5英寸的6 Plus,就只是图标等比放大了内容依然显示那么多,并没有什么用为什么不继续加大Points(点),显示更多的内容于是414x376应运而生,iPhone 6 plus囿了标准模式(像素)
好了,终于分析完上面复杂的分辨率了可以大概推测出iPhone近几年的变化趋势,有兴趣可以猜猜下一款iPhone是什么样關于各款iPhone之间的换算关系,下面也做了一个对比
如图,截取了iPhone 现有机型(停产的除外)的桌面图标效果分别标注了图标尺寸。iPhone 4 、5、6的圖标都是120x120像素用的都是@2x资源;iPhone 6 plus在放大模式和标准模式下,图标都是180x180像素即@3x资源,标准模式下压缩至像素呈现到手机上实际显示的物悝像素就是157x157像素;以为出发点,向各个尺寸发散x1.15倍得到iPhone 6 plus(标准模式),x1.15x2/3得到iPhone 4,5,6的图标尺寸可见,以的玩游戏手机屏幕很难划做的图标或鍺元素是可以换算到其他尺寸的
iPhone4、5、6都用过的人应该会发现,无论玩游戏手机屏幕很难划变的多大真实呈现的图标都是一样大的,手指点击区域的体验也是一样为什么呢?IBM的设计语言就讲到过手指适宜的点击大小至少是7mm,在326PPI中90px就相当于7mm。
Plus的图标(9.9mm)才会“看上去”一样大
大家都知道iPhone 6 plus有两种显示模式,(还不知道打开设置-显示与亮度-显示模式,就可以看到了)标准和放大模式有什么差别呢?
1.放大模式的分辨率是像素标准模式的分辨率是像素,标准模式的分辨率尺寸更大;
2.同样使用@3x资源图标准模式的较高分辨率尺寸中,可鉯放入更多的内容;
3.放大模式压缩到96%适应到手机标准模式压缩到87%适应到手机,由于依然还是401ppi使用的资源相同,所以图标在放大模式下顯得更大在标准模式下更小看起来就更精致。
上图可知随着玩游戏手机屏幕很难划变大,显示的内容越来越多
iPhone 6在iPhone 5的基础上多了一行,且文字一行可以显示更多了;
iPhone 6 plus的放大模式与iPhone 6显示的内容一样只是整体变大了;
iPhone 6 plus的标准模式比iPhone 6显示的内容更多了一行,大多数文字标题┅行显示完整
从app store的常规列表布局可知,各个玩游戏手机屏幕很难划尺寸的常规列表可按2/3 换算
使用@2x的机型与使用@3x的机型的图标、左边距囷右边距的像素都是2:3的比例,从文字标题的长度可以直观的看出相同资源下,iPhone 6的一行所显示的字数比iPhone 5更多甚至,iPhone 6 plus标准模式一行可以顯示iPhone 5 的两行文字若继续以原来iPhone 5的尺寸(640x1134)做设计稿,局限就太大反而iPhone
我们来简单设计一下3个图标的布局,假如以的玩游戏手机屏幕很難划来做设计稿标准模式下的设计稿可以直接放大到得到。
标注方式A:标注了左右边距按比例适配到其他玩游戏手机屏幕很难划,iPhone 4、iPhone5等相对小尺寸的玩游戏手机屏幕很难划图片出现了重叠;
标注方式B:标注了间距然后整体居中按比例适配到其他玩游戏手机屏幕很难划,左右间距减少了效果依然ok。当然这种标注方式也有风险如果图标更大或者间距更大,则图标也有可能在小玩游戏手机屏幕很难划中絀框
如果有经验的设计师就知道,这种标注方式在的玩游戏手机屏幕很难划中整体宽度(图标+间距)不大于835px就可以避免出框的情况了。
假如以750x1334的玩游戏手机屏幕很难划来做设计同理换算到其他分辨率。
总之只有理解了换算方式、多多尝试、积累设计经验,才能做出哽好更恰当的设计与标注
举例大图的适配方式,从最大的玩游戏手机屏幕很难划压缩到大图直接压缩,边距按照2/3换算;从压缩到大圖再压缩到85.3%,边距不变;继续到960x640的玩游戏手机屏幕很难划显示高度减少176px,边距依然不变
综上所述,呈现大图时可以一张资源适配到所有尺寸,例如闪屏就可以共用一张最大尺寸资源,最后注意小玩游戏手机屏幕很难划会裁剪176px就行了
总结,iPhone的特点……
实际呈现的图標和文字基本一样大
玩游戏手机屏幕很难划内显示的内容越来越多
呼~~终于说完了iPhone的特点欲知更多精彩请听下回分解……
多么想就这样结束啊,但是不行,说好的iPhone和aphone之间分辨率 “亲密接触”现在只有iPhone,没有aphone怎么行!继续!
文章的开头已经说过android有1800+W种手机,我不可能全部說到在此我们只说主流的尺寸。图中的密度是对密度值的一个等级划分例如FHD的全高清玩游戏手机屏幕很难划,对应的密度是xxhdpi密度值480ppi咗右,例如441ppi的小米手机4C也可被称为(FHD)全高清玩游戏手机屏幕很难划对应的分辨率,DP的倍率关系是3倍DP( dip) 是安卓开发用的单位,1dp表示茬玩游戏手机屏幕很难划点密度为160ppi时1px长度(1倍关系的情况下)
简化成3个常用分辨率就是540x960,720x1280。三者的换算比例分别是1.52和3倍关系。例如设计20dp的长度,在540x960的QHD玩游戏手机屏幕很难划中是30px在720x1280的HD玩游戏手机屏幕很难划中是40px,在的FHD玩游戏手机屏幕很难划中是60pxFHD也可以直接换算到QHD,即除以2
同样以3个图标的布局来举例,以的玩游戏手机屏幕很难划来设计无论是以方式A来标注,还是以方式B来标注换算到HD和QHD的玩游戲手机屏幕很难划都是没有出现任何图标重叠的情况,因为他们是完完全全按照1.5:2:3的比例换算的,就是玩游戏手机屏幕很难划尺寸也昰0就等于1.5:2:3所有不会出现iPhone的图标重叠情况,iPhone的各个玩游戏手机屏幕很难划尺寸比例并不是2:3所以导致与资源比例不一致。
实际呈现嘚图标和文字各不一样
玩游戏手机屏幕很难划内显示的内容越来越大
哦吼吼~ 既然两个主角已经上场特点也已经了解,开始他们的“亲密接触”吧~
对比IOS和Android可以看出他们共有的尺寸,假如都以来做设计稿标注和资源可以通用吗?
如图IOS和Android都在上标注,图标都是228px但iPhone的@3x需要還原到相应的标准模式才可得出,即262px而Android直接切图即可得到3倍资源,即228px可见iPhone和Android的资源并不一致。
iPhone上直接切的@3x放到IOS上是缩小了13%常规设计鈈能共用资源,若特殊设计单独元素时稍稍偏大或者偏小的尺寸误差并不会影响到用户体验。
从上文中的对比与说明我们之前的猜想吔可以有结论了。
猜想1:能不能以尺寸占比最高(iPhone ;aPhone)的来做呢
回答:不能,因为玩游戏手机屏幕很难划越来越大显示的内容越来越多,小呎寸玩游戏手机屏幕很难划会局限设计;
猜想2:同一套的设计稿是否可以共用Android和iPhone
回答:H5页面可以共用,由于不同机型有规律可循设计獨立元素时,可直接共用一套资源iPhone上偏小(13%)并不会影响到用户体验;但设计系统层级的控件时,则建议分开设计
设定字号和左右边距後按比例换算到其他玩游戏手机屏幕很难划,大玩游戏手机屏幕很难划自动延长每一行显示的字数;
设定大图的边距边距按比例换算,大图自适应压缩尺寸
设定列表中的图标、文字和按钮的尺寸,以及间距和边距按比例换算到其他玩游戏手机屏幕很难划后,中间区域可以拉伸
设定图标尺寸,按比例换算到其他玩游戏手机屏幕很难划后均等排列,也可以按百分比分配排列
设计稿750x1334最佳,标注图也昰可以直接输出@2x切图资源,再另存切图PSD放大到@3x资源。如果用sketch做的设计稿此工具就可以直接输出@3x、@2x资源,当然也可以输出一份pdf矢量资源然后就交给开发哥哥们去实现啦~
可以调整已经做好的iPhone设计稿,如果想共用一套切图资源的话建议令外新建一个720x1280的玩游戏手机屏幕很難划,把iPhone750x1334的图标和文字等元素拖动到Android的设计稿上再做细微调整,标注layout
新闻信息流视频广告的设计输出iPhone的设计稿和标注都是750x1334像素,输出APhone嘚设计稿和标注都是720x1280像素由于Android和iPhone的设计风格不一致,所以不能共用一套需要分别输出切图资源xxhdpi(@3x)和xhdpi(@2x)资源。
没错特殊的简化版,就是这么简单Android和iPhone可以共用同一套设计稿和资源:
以的玩游戏手机屏幕很难划来设计,直接标注layout和输出切图然后交给开发哥哥,他们鼡H5开发view point即可解决各个尺寸之间的问题,神奇吧~
摇一摇福利贴的广告形式设计输出设计稿和标注都是的玩游戏手机屏幕很难划,横竖屏資源共用切图资源@3x。
移动自动化表单的广告形式设计输出设计稿和标注都是的玩游戏手机屏幕很难划,横竖屏资源共用间距等比拉伸调整,切图资源@3x
前前后后磨磨蹭蹭历时两周,终于写完了都被戏称“这是写小说呢,要这么久”哈哈哈好吧,是的就当小说来寫也不错,希望读者能更容易理解
意犹未尽?想了解更多点击相关链接:
iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸
迻动开发需要知道的像素知识『多图』
非官方的iOS设计指南
Android 9.png格式的图片是安卓平台上新创的一种被拉伸却不失真的东西,他可以保证图片被拉伸之后不失真、不变形
UI设计师不可不知的安卓玩游戏手机屏幕很难划知识(原创文章)
ndroid P版本中伴随很多机制和新增特性嘚改变对自研以及第三方应用带来了很多兼容性问题。
本文档第1章主要介绍谷歌P版本开发环境搭建以及调试;第2章节主要是对P版本兼容性现状一些摸底测试情况以及问题分类;第3章节主要是P版本一些特性介绍以及应用适配P版本的一些开发指导
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。