iOS和Android 界面设计尺寸规范
iOS和Android 界面设计尺寸规范
摘要：刚开始接触UI的时候，碰到的最多的就是尺寸问题，什么画布要建多大，文字该用多大才合适，我要做几套界面才可以？什么七七八八的也着实让人有些头疼。
废话不多说，希望大家耐心看完后，不要再纠结于尺寸相关的东西了！
一、尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136
iPad界面尺寸： ...
刚开始接触UI的时候，碰到的最多的就是尺寸问题，什么画布要建多大，文字该用多大才合适，我要做几套界面才可以？什么七七八八的也着实让人有些头疼。
废话不多说，希望大家耐心看完后，不要再纠结于尺寸相关的东西了！
一、尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136
iPad界面尺寸：48*1536
单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。
Ps：作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或者尺寸变更。
二、界面基本组成元素
iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。
这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px
导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px
主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px
内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px
[下图为了说明我不是瞎掰的：960-40-88-98=734]
至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。
PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~
三、字体大小
Phone上的字体英文为：HelveticaNeue 。至于中文Mac下用的是黑体，Win下则为华文黑体。
下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。
其实还有个更简单的方法就是找你觉得好的app应用，手机截图后放进PS自己比对调节字体大小咯。
我的音乐——34px
我的、淘歌、发现——30px
Muxx——34px
本地音乐——30px
泡沫、邓紫棋——24px
总之，方法是自己找到的，想办法解决问题，自己实践，比别人告诉你印象更深刻不是么？
一、尺寸及分辨率
Android界面尺寸：480*800、720**1920。[单位：像素]
Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。
二、界面基本组成元素
Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。
Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。
状态栏高度为：50px
导航栏高度为：96px
主菜单栏高度为：96px
内容区域高度为：1038px（-96=1038）
Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px
Ps：写之前我翻了好多关于Android的界面尺寸教程，都没找到像iOS一样具体的规范，或许因为在安卓中这些控件的高度都能用程序自定义，都没有提到具体的尺寸数值，所以就自己找了Android的设计规范，尺寸都是自己在PS中量的。
Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。
三、字体大小
Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。
同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。
具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己比对调节字体大小[切记，一定是高清截图哦]
附件 ：包含一些尺寸方面的干货，以及一些UI规范的源文件。
网盘地址：
版权所有:非特殊声明均为本站原创文章，转载请注明出处：
订阅更新:您可以通过
您可能感兴趣的文章谁有 iPhone IOS7 的系统字体？可以安装在Photoshop《ps》里面的！谢谢了！_百度知道
谁有 iPhone IOS7 的系统字体？可以安装在Photoshop《ps》里面的！谢谢了！
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：10574
获赞数：17311
请下载附件解压，安装字体即可。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。ps上大小为28点的字体对应ios的fontSize是多少？是14_百度知道
ps上大小为28点的字体对应ios的fontSize是多少？是14
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自知道合伙人认证行家
采纳数：33397
获赞数：21729
从事多年系统运维，喜欢编写各种小程序和脚本。
经过验证，这个windows和mac上的字号是统一的。呵呵。英文字体的1磅，相当于1/72 英寸，约等于1/2.8mm。12PT的字打印出来约为4.2mm。网页中12px的字才相当于12像素。虽然 四号=(14/72)*96=18.6px 更接近 19px，但是因为 18px 是点阵，所以系统还是优先显示点阵字号的。换句话说：四号=18px中文字号VS英文字号(磅)VS像素值的对应关系：八号＝5磅(5pt) ==(5/72)*96=6.67 =6px七号＝5.5磅 ==(5.5/72)*96=7.3 =7px小六＝6.5磅 ==(6.5/72)*96=8.67 =8px六号＝7.5磅 ==(7.5/72)*96=10px小五＝9磅 ==(9/72)*96=12px五号＝10.5磅 ==(10.5/72)*96=14px小四＝12磅 ==(12/72)*96=16px四号＝14磅 ==(14/72)*96=18.67 =18px小三＝15磅 ==(15/72)*96=20px三号＝16磅 ==(16/72)*96=21.3 =21px小二＝18磅 ==(18/72)*96=24px二号＝22磅 ==(22/72)*96=29.3 =29px小一＝24磅 ==(24/72)*96=32px一号＝26磅 ==(26/72)*96=34.67 =34px小初＝36磅 ==(36/72)*96=48px初号＝42磅 ==(42/72)*96=56px
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。用photoshop批量产生多尺寸ios图标脚本怎么写_百度知道
用photoshop批量产生多尺寸ios图标脚本怎么写
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
主要经营计算机网络服务，设计、制作、代理、发布国内各类广告，健康信息咨询。
打开photoshop，按alt+F9，打开“动作”面板。
现在可以看到里边已经有一个动作了，但是我们不需要，而且也不是什么好效果，所以我们直接点，删掉。
现在里边干净了，嘿嘿。我们开始新建一个动作，就用更改图片的尺寸为例吧。
先按那个文件夹（图中1，“创建新设置”），变态一点，命名为“偶自己滴”，然后按那个页子的按钮的（图中2，“创建新动作”），起名字为“更改图片大小”，序列选择刚才我们创建的那个“偶自己滴”，功能键选一个自己习惯的位置，我选择了F12+shift，然后点“记录”。
从下图中可以看到，现在是动作的记录状态：
提示：到现在为止就不要乱点了哈，要是点错东西了显示器可是会爆炸的……
开始记录我们的动作。
首先按ctrl+o打开一副图片，然后按alt+i，再按I，修改图片的大小（其实就是图像--图像大小），然后按ctrl+alt+shift+s存储这样图片，存的地方随意，格式也可以随意（不过如果颜色杂的话最好是jpg，这个不用俺多说）。最后，关闭这个图片。
如果步骤没有错误的话，此时的动作面板是这样的：
表犹豫了，赶紧点停止吧，然后这个动作就完成了。
接下来神奇的地方开始了，嘿嘿。
点击“文件--自动--批处理”，打开批处理面板，组合选择“偶自己滴”，动作选择“更改图片大小”，然后关键的地方：“源”选择“文件夹”，然后在下边选取你的图片所在的文件夹；勾选“覆盖动作打开命令”；在“目的”选择&文件夹&，然后在下边选取刚才存储的位置，OK了，点“好”。
是不是可以了？不可以吗？不可以的话那你就多试试吧，反正我是可以，嘿嘿。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。iOS字体（UIFont）与px设计字体换算 - 简书
iOS字体（UIFont）与px设计字体换算
ps和pt转换
px:相对长度单位。像素（Pixel）。（PS字体）
pt:绝对长度单位。点（Point）。（iOS字体）
UI标记图上给我们字体的大小一般都是像素点，如图
12.43.43 PM.png
但是实际开发中就算将字体标注值除以2（设备点），显示出来的效果依然不能达到UI的设计师的要求，于是一般默认我的默认做法是标注是除以2在加上2，例如：像素值34
UILabel*label = [[UILabel alloc] init];
// label.font = [UIFont systemFontOfSize:17 + 2];
label.font = [UIFont systemFontOfSize:19];
但是他们之间存在对应的转换关系
pt=(px/96)*72。
一开始想的做法是给UIFont加一个分类或者搞一类继承，但是这样都不好（主要是不够装逼），之前学的Runtime都没用项目中，于是在这里试用一下
用法给UIFont加一个分类
例如runtime交换方法
项目中还是调用
// 传像素值
[UIFont systemFontOfSize:34.0];
#import "UIFont+Font.h"
#import &objc/message.h&
@implementation UIFont (Font)
+ (void)load {
Method systimeFont = class_getClassMethod(self, @selector(systemFontOfSize:));
Method qsh_systimeFont = class_getClassMethod(self, @selector(qsh_systemFontOfSize:));
// 交换方法
method_exchangeImplementations(qsh_systimeFont, systimeFont);
+ (UIFont *)qsh_systemFontOfSize:(CGFloat)pxSize{
CGFloat pt = (pxSize/96)*72;
NSLog(@"pt--%f",pt);
UIFont *font = [UIFont qsh_systemFontOfSize:pt];
达则兼济天下，贫着独善其身
原文链接:http://my.oschina.net/qianglong/blog/358233 使用UITextView显示一段电影的简介，由于字数比较多，所以字体设置的很小，行间距和段间距也很小，一大段文字挤在一起看起来很别扭，想要把行间距调大，结果在XCode中查遍其...
一、CAShapelayer
我们知道可以不使用图片情况下利用CGpath去构建任意形状的阴影。其实我们也可以用同样的方式创建图层的。
CAShapelayer是一个通过矢量图形而不是bitmap来绘制的图层子类。我们可以定义颜色和线宽等属性，用CGPath来定...
1.pt，px，ppi pt:使用pt（point）作为view的单位，即常说的坐标xy的值，1pt =1/72英寸（iOS） px:像素点，（PS） 密度单位： ppi:每英寸像素 dpi:每英寸多少点 1.iPhone5分辨率320pt*568pt，像素640*px11...
&复杂的组织都是专门化的 &Catharine R. Stimpson 到目前为止，我们已经探讨过`CALayer`类了，同时我们也了解到了一些非常有用的绘图和动画功能。但是Core Animation图层不仅仅能作用于图片和颜色而已。本章就会学习其他的一些图层类，进一步扩...
iOS中，[UIFont systemFontOfSize:18]，这里的18，单位是pt。日常工作中，美工给我们的UI图中表面的字号大小，例如36，单位是px。也即像素大小。下面就来讲一下px和pt的转换。 首先讲两个基本概念：物理像素：屏幕的实际分辨率，例如4s的640...
文/兮枝 “明天就要见到我了，你开心吗？” “我很开心，都快睡不着了。” 兔子小姐带着笑意翻看蘑菇先生发给她的信息，辗转难眠的人，还有她。 兔子小姐的称号是蘑菇先生给的。小学时的兔子小姐特别爱哭，一点点小事就会红了眼眶。和蘑菇先生下象棋下输了以后会哭，考试考得比蘑菇先生差也...
创意和灵性的主题应该会持续到年底，对天马行空的想法无法免疫......十月，读书成了最放松的一件事，书画欣赏、宗教、旅行很多真正感兴趣的主题都有涉及。 电影的分享单独做成了订阅号，仅仅作为一种记录。很多书和电影其实看过也会遗忘，但我知道那段时光是真是存在的，感受也会成为一种...
跟女儿来北京之前我就再次给她进行安全教育，主要从三方面，分三天进行。包括遇到小偷怎么办？遇到性骚扰怎么办？跟妈妈走散怎么办？
通过几天的行程我发现:前两种情况的几率不太大，而第三种倒是时有发生，甚至往往发生于成人之间。成人会很淡定的掏出手机联系解决，可是女儿偏偏忘带...
时间飞逝。 这周，你有什么成长行动？又收获了什么？ 本来想写刷屏的【10年前没有iphone，你用的什么手机】一想，就是【苹果发布会+晒+回忆以前】，这几个点。 如果要写的有思想一点，着实需要点时间。故，不如以自身行动所获，分享所得。 最近，都没抬更新运营内容，偶发性心情沮...}