浅谈IOS和Android界面设计尺寸规范 - 设计前沿
浅谈IOS和Android界面设计尺寸规范
文章出处：UI 作者：佚名　发布时间：
刚开始接触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自己比对调节字体大小，切记，一定是高清截图
??????????????iOS和Android 界面设计尺寸规范-阿里云资讯网
iOS和Android 界面设计尺寸规范
发布时间：
更新时间：
来源：网络
作者：hnjgnk
刚开始接触UI的时候，碰到的最多的就是尺寸问题，什么画布要建多大，文字该用多大才，我要做几套界面才可以？什么七七八八的也着实让人有些头疼。
&/zixun/aggregation/37954.html&&
废话不多说，希望大家耐心看完后，不要再纠结于尺寸相关的东西了！
&一、尺寸及分辨率
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我的、淘歌、发现——30pxMuxx——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规范的源文件。网盘地址：/s/1gdqoSJh
本站所有文章全部来源于互联网，版权归属于原作者。本站所有转载文章言论不代表本站观点，如是侵犯了原作者的权利请发邮件联系站长（yanjing@），我们收到后立即删除。
摘要： 一切从整理开始 前阵子读了佐藤可士和的《超级整理术》和《创意思考术》两本书，有了点启示，想和大家分享下。记载的方式有点类似思维跳跃的随笔，希望大家在耐心阅读之后会有 & 一切从“整理”开始 前阵子读了佐藤可士和的《超级整理术》和《创意思考术》两本书，有了点启示，想和大家分享下。记载的方式有点类似思维跳跃的随笔，希望大家在耐心阅读之后会有所启示… 整理一词对大家并不陌生，佐藤...
摘要： 这篇文章将展示很多很酷的范例，甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话，你打算怎么做?给点提示，色彩是扁平化趋势中最重要的一部分。 扁 这篇文章将展示很多很酷的范例，甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话，你打算怎么做?给点提示，色彩是扁平化趋势中最重要的一部分。 扁平化设计进修 & & & ...
摘要： 每逢节日到来，当你打开QQ浏览器，发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀，呈现在你眼前的是朴实而又温情的画面节日闪屏。她是浏览器和用户情感交流的窗口，也 & 每逢节日到来，当你打开QQ浏览器，发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀，呈现在你眼前的是朴实而又温情的画面——节日闪屏。她是浏览器和用户情感交流的窗口，也是传递节日祝福的桥梁。在不同的...
摘要： 文是非常详细的一份移动建站方面的资料，上一次谷歌发布了移动网站建站的十大原则，这次百度也发布了移动建站指南，图文并茂的描述了如何提高移动站在百度质量度的等级，在百 文是非常详细的一份移动建站方面的资料，上一次谷歌发布了移动网站建站的十大原则，这次百度也发布了移动建站指南，图文并茂的描述了如何提高移动站在百度质量度的等级，在百度推广后台已经有“移动站点质量度”的星级评价体系了，页面大小...
站内SEO优化
& & 对于大多数网站而言，并没有刻意注重图片优化，在图片优化上并没有下过多的工夫，然而以图片为主题展现信息的网站却是成千上万，不在少数。并且能够通过图片信息获取大量流量，这使我们不得不引起关注以及重视。对于图片优化过程中需要注意哪些细节呢?优化图片有哪些技巧呢?这让我们进入了深入思考中。闲暇之余，对于图片优化技巧也进行了深入分析以及总结。 & & &...
& & 技术的革新带动了设计行业的的迅猛发展，这使得设计师和开发者有了更广阔的的探索天地。 & & & & 1.响应式网页设计(Responsive Web Design) & & & 现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，甚至是未来很...Powered by
& 2013 &&&本文并非关于引导画面该采用何种形式、该如何定义信息、有什么注意事项方面的介绍。
本文描述的是，引导画面该如何才能较好的适配各种分辨率，了解此处有助于更好的定义引导画面，以及保持同设计师、工程师的良好沟通。
作为产品人员，需要向不同方向延伸了解一些知识，这些知识能让沟通更顺畅。
这些所了解的知识，可能会有一些错误，当发现问题时，随时更新自己的知识体系。
一、本文提到的引导画面的形式
类似下图，一个引导画面是一屏，左右拖动来切换
图1： 有道云笔记Android 1.2.0引导画面
图2：有道云笔记Android 2.0.0引导画面
二、实现方式之一：底色配合图片缩放
需要知道的是，同一DPI的设备也有不同的分辨率，比如Hdpi最常见的就有480×800和480×854的分辨率，还有其他的，比如480×640、600×1024….
因此，想对不同dpi做一种分辨率的方法，会存在问题。
我尝试用图来说明一下一张图片，如果不做处理在不同机器和不同分辨率上的显示样式：
以Galaxy Nexus为例，屏幕分辨率为720×1280，状态栏为50px，下方虚拟键盘栏为96px，所以实际中间图片大小为720×1134
2.1 在不同分辨率下的显示样式
让我们模拟下此720×1134的引导图在720×1280分辨率的设备上的显示样式如下图：
图A：720×1134的引导图在720×1280设备的显示样式
当我们在一台480×800分辨率的设备上显示时，图片会缩小为480px的宽度显示，此时高度对应会等比缩小为756px显示，假设此时状态栏标准高度为38px，则会空余16px的空间。如果我们设置背景颜色为红色，则此时显示状态如下图：
图B：720×1134的引导图在480×800设备的显示样式
同理，当我们在一台320×480分辨率的设备上显示时，假设此时状态栏标准高度为25px，等比缩放后，图片会缩小为455px(480-25)的高度显示，此时宽度对应会等比缩小为289px显示，则会空余31px的空间。如果我们设置背景颜色为红色，则此时显示状态如下图：
图C：720×1134的引导图在320×480设备的显示样式
不再继续多举例了。
2.2 适配方案
从上述的例子来看，大图自动缩放后，最大的问题是上下、或左右会留出一些无法填充的位置。
所以，在边缘为纯色的情况下，我们只需要将背景填充为和边缘颜色一样的色值即可。
而且，我们只需要准备较大分辨率的一套，这样可以更好的保证在不同解析度设备上的效果。
下图是在240×320的ldpi设备上的显示效果，如果仔细看，可以看到左右两侧竖向的颜色和中间部分的颜色有一些不一致。
原因还不确定，暂时未有明确结论，猜测可能和android的图像缩小显示机制有关系。
有道云笔记Android 2.0.0的引导画面切图
Android 2.0.0中的适配
图片的周边保证是纯色的，这样才能有效的进行不同分辨率的适配。
指定了720×1280的机器为标准参照设备，切出去除了虚拟键盘和状态栏的部分
设定引导界面的背景色为和边缘色一致的颜色
三、实现方式之二：9-Patch
3.1 适配方案
为了保证四边的缩放效果，边缘需要设定为纯色。
为保证缩放效果，采用xhdpi的图片素材来做9-Patch的原始图片
在draw 9-patch中，设定图片顶部的左侧和右侧一个像素为拉伸区域，设定图片右侧的顶部和底部一个像素为拉伸区域。
类似实现方式一的图像示例，只是适配中出现的红色部分，会因为设定了拉伸区域而自动用设定的拉伸区域去填充，从而达到适配效果
目前发现当图片较大时，9-Patch的图片缩放会出现问题，未能按照预期缩放。
有道云笔记Android 1.2.0的引导画面采用9-Patch的方式实现，见图1
四、实现方式之三：透明引导图
4.1 适配方案
提供背景透明的引导图
提供背景的色值
填充背景色，并放置背景透明的引导图
png的图会比jpg的图大一些
方式三是目前倾向采用的方式，本文如有进一步的实践信息，再予以补充。
上述描述和理解中，可能存在错误和问题，如有不当，敬请指出。
相关文章：
虽然目前Apple Watch的销量趋于平稳，但是从大趋势上来看，它依然是年度最热的产品之一。随着9...
在很多人的观念里面，设计就像一个虚拟的产物，不需要付出任何的劳动成果，想想就有的东西，所以在很多人际...
当你的设计被人否定的时，相信大多数人都会感觉很憋屈。什么鬼？辛苦完成的工作，又要重新改过。这感觉就像...
一、交互设计中的语言 交互建立在有效交流的基础之上，而交流在很大程度上依赖于语言。文案看上去可能并非...
莫贝网（）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：关于Android引导画面的多分辨率适配
关于Android引导画面的多分辨率适配
20:40:54 |
摘要：本文并非关于引导画面该采用何种形式、该如何定义信息、有什么注意事项方面的介绍。
本文描述的是，引导画面该如何才能较好的适配各种分辨率，了解此处有助于更好的定义引导画面，以及保持同设计师、工程师的良好沟通。
作为产品人员，需要向不同方向延伸了解一些知识，这些知识能让沟通更顺畅。
这些所了解的知识，可能会有一些错误，当发现问题时，随时更新自己的知识体系。
一、本 ...
本文并非关于引导画面该采用何种形式、该如何定义信息、有什么注意事项方面的介绍。
本文描述的是，引导画面该如何才能较好的适配各种分辨率，了解此处有助于更好的定义引导画面，以及保持同设计师、工程师的良好沟通。
作为产品人员，需要向不同方向延伸了解一些知识，这些知识能让沟通更顺畅。
这些所了解的知识，可能会有一些错误，当发现问题时，随时更新自己的知识体系。
一、本文提到的引导画面的形式
类似下图，一个引导画面是一屏，左右拖动来切换
图1： 有道云笔记Android 1.2.0引导画面
图2：有道云笔记Android 2.0.0引导画面
二、实现方式之一：底色配合图片缩放
需要知道的是，同一DPI的设备也有不同的分辨率，比如Hdpi最常见的就有480×800和480×854的分辨率，还有其他的，比如480×640、600×1024….
因此，想对不同dpi做一种分辨率的方法，会存在问题。
我尝试用图来说明一下一张图片，如果不做处理在不同机器和不同分辨率上的显示样式：
以Galaxy Nexus为例，屏幕分辨率为720×1280，状态栏为50px，下方虚拟键盘栏为96px，所以实际中间图片大小为720×1134
2.1 在不同分辨率下的显示样式
让我们模拟下此720×1134的引导图在720×1280分辨率的设备上的显示样式如下图：
图A：720×1134的引导图在720×1280设备的显示样式
当我们在一台480×800分辨率的设备上显示时，图片会缩小为480px的宽度显示，此时高度对应会等比缩小为756px显示，假设此时状态栏标准高度为38px，则会空余16px的空间。如果我们设置背景颜色为红色，则此时显示状态如下图：
图B：720×1134的引导图在480×800设备的显示样式
同理，当我们在一台320×480分辨率的设备上显示时，假设此时状态栏标准高度为25px，等比缩放后，图片会缩小为455px(480-25)的高度显示，此时宽度对应会等比缩小为289px显示，则会空余31px的空间。如果我们设置背景颜色为红色，则此时显示状态如下图：
图C：720×1134的引导图在320×480设备的显示样式
不再继续多举例了。
2.2 适配方案
从上述的例子来看，大图自动缩放后，最大的问题是上下、或左右会留出一些无法填充的位置。
所以，在边缘为纯色的情况下，我们只需要将背景填充为和边缘颜色一样的色值即可。
而且，我们只需要准备较大分辨率的一套，这样可以更好的保证在不同解析度设备上的效果。
下图是在240×320的ldpi设备上的显示效果，如果仔细看，可以看到左右两侧竖向的颜色和中间部分的颜色有一些不一致。
原因还不确定，暂时未有明确结论，猜测可能和android的图像缩小显示机制有关系。
有道云笔记Android 2.0.0的引导画面切图
Android 2.0.0中的适配
图片的周边保证是纯色的，这样才能有效的进行不同分辨率的适配。
指定了720×1280的机器为标准参照设备，切出去除了虚拟键盘和状态栏的部分
设定引导界面的背景色为和边缘色一致的颜色
三、实现方式之二：9-Patch
3.1 适配方案
为了保证四边的缩放效果，边缘需要设定为纯色。
为保证缩放效果，采用xhdpi的图片素材来做9-Patch的原始图片
在draw 9-patch中，设定图片顶部的左侧和右侧一个像素为拉伸区域，设定图片右侧的顶部和底部一个像素为拉伸区域。
类似实现方式一的图像示例，只是适配中出现的红色部分，会因为设定了拉伸区域而自动用设定的拉伸区域去填充，从而达到适配效果
目前发现当图片较大时，9-Patch的图片缩放会出现问题，未能按照预期缩放。
有道云笔记Android 1.2.0的引导画面采用9-Patch的方式实现，见图1
四、实现方式之三：透明引导图
4.1 适配方案
提供背景透明的引导图
提供背景的色值
填充背景色，并放置背景透明的引导图
png的图会比jpg的图大一些
方式三是目前倾向采用的方式，本文如有进一步的实践信息，再予以补充。
上述描述和理解中，可能存在错误和问题，如有不当，敬请指出。
版权所有:非特殊声明均为本站原创文章，转载请注明出处：
订阅更新:您可以通过
您可能感兴趣的文章}