手机UI设计基础-尺寸&单位
初入移动端开发和UI设计的童鞋可能对UI尺寸和单位特头痛,孟春觉得分享一下手机APP/Web UI尺寸和单位的经验是有价值的。
一、iPhone机型
1、分辨率
手机屏幕的分辨率各种尺寸五花八门,特别是安卓手机厂商众多,引起更众多的分辨率,480×800, 480×854, 540×960, 720×1280, 1080×1920,2k屏。iPhone的分辨率也不落伍,640×960, 640×1136, 750×1334, 1242×2208,一看确实比较晕菜。
千万不要被这么多的分辨率吓晕了,其实手机APP和移动端web UI尺寸是有兼容的方案的。
2、屏幕尺寸
屏幕大小的物理尺寸,屏幕对角线长度衡量。
单位:英寸,1英寸 = 2.54厘米
3、像素密度(PPI)
像素密度(Pixels Per Inch),所表示的是每英寸所拥有的像素数量。因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。
4、逻辑分辨率与物理分辨率
物理像素(px)是硬件所支持的最高像素,逻辑像素(pt)是软件所达到的像素。
iPhone各种机型物理分辨率(px)与逻辑分辨率(pt)转换规律:
iPhone 1代/3Gs 1pt = 1px
iPhone 4s 1pt = 2px
iPhone 5s 1pt = 2px
iPhone 6s 1pt = 2px
iPhone 6 plus 1pt = 3px
如何适配不同iPhone机型?
1、采用哪种分辨率设计?
2、需要多少套标注?
3、需要提供多少套切图?
加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?
一个基本思路是:
1、选择一种尺寸作为设计和开发基准;
2、定义一套适配规则,自动适配剩下两种尺寸;
3、特殊适配效果给出设计效果。
第一步,视觉设计阶段,设计师按宽度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)的界面效果。由此完成大中小三屏适配。
更详细见 https://www.zhihu.com/question/25308946/answer/32240185
二、安装APP UI 尺寸
dp:Android开发中用于描述模块间布局大小的单位
sp:和dp一样,只是用于描述字体大小的单位
dpi:测量空间点密度的单位,单位英寸上点的个数,同iPhone的PPI
Android的xxhdpi机型是安卓机中市场占有率最高的机型,因此设计的时候,我们可以用1080px宽作为通用尺寸,在app中按比例缩放显示,比较特殊的地方在另外设计适配相应机型的图片。
三、移动端Web UI 尺寸
1、Android、iPhone尺寸的统一。
在head中加入viewport代码
1 2 3 | <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
viewport参数说明:
width=device-width 页面宽度=设备宽度;
initial-scale=1.0 初始化比例1:1,即1dp=1pt=1px,px单位的尺寸使用逻辑分辨率的尺寸,入iphone4s逻辑分辨率宽度是320pt,iphone 4s web页面宽为320px,屏幕分辨率为1920×1080的安卓手机,屏幕宽为360dp,web页面宽为360px;
即借助H5的viewport参数,我们可以使px单位尺寸等价于dp、pt来使用。为兼容各种类型的手机屏幕,我们可以设置页面最大宽度为640px,设计效果图的时候可以按640px宽设计来统一页面效果,图标使用矢量图或字体图标的方式,在不同屏幕分辨率下都可以显示得清晰,部分图片需要适配不同尺寸的屏幕,可另外设计。
建议继续学习:
- CSS圆角制作 (阅读:3034)
- jQuery边框圆角插件:DivCorners (阅读:2573)
- 记录用户体验细节 (阅读:2286)
- CSS3圆角详解 (阅读:2149)
- 圆角头像的重构优化 (阅读:2082)
- 自适应圆角 (阅读:2068)
- 小心别让圆角成了你列表的帧数杀手 (阅读:1677)
- iOS可视化编程 Tips 之“无需代码设置圆角” (阅读:1804)
- 为UIView任意角设置圆角 (阅读:1436)
- -webkit-border-radius圆角属性 (阅读:956)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:cmpan 来源: 流水孟春
- 标签: UIView 圆角
- 发布时间:2016-03-01 14:17:44
- [66] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [52] 视觉调整-设计师 vs. 逻辑
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成