最强产品iOS学习产品设计

APP界面主要设计规范

2015-04-28  本文已影响6442人  菇凉Upup

IOS:

一般用640*1136或者640*960,对plus做单独的修改适配

Phone界面尺寸:320*480、640*960、640*1136

iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)

二、界面基本组成元素

iPhone的app界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu),也叫标签栏、内容区域(content)。

PS:在最新的iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计iOS7风格的界面的时候多多注意下~


三、字体大小

iPhone上的字体英文为:HelveticaNeue 。至于中文Mac下用的是黑体,Win下则为华文黑体(最新字体称为黑体-简)。

下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小。


ANDROID篇

一、尺寸及分辨率

Android界面尺寸:480*800、720*1280、1080*1920

Android比iPhone的寸尺多了很多套,建议取用720*1280这个尺寸,这个尺寸720*1280中显示完美,在1080*1920中看起来比较清晰,切图后的图片文件大小也适中,应用的内存消耗也不会过高。

状态栏高度:50 px

导航栏高度:96 px

标签栏高度:96 px

Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和标签栏一样的:96 px

内容区域高度为:1038 px (1280-50-96-96=1038)

Android为了在界面上区别于iOS,Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格,这一风格最明显的变化就是将下方的主菜单移到了导航栏下面,这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。

三、字体大小


Android 上的字体为:Droid sans fallback,是谷歌自己的字体,与微软雅黑很像。


具体大小,可以找自己喜欢的app界面,手机截图后放进PS自己对比调节字体大小,切记,一定是高清截图

使用Axure制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。

若要解释清楚这个问题需要的篇幅比较长,请大家自行参考 Point/Pixel/PPI/DPI 的意思和它们之间的关系。这里不再赘述,直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置,生成HTML后再到相应的移动设备中浏览就正常了。

意思是:你要先确定制作的APP原型要放到什么设备里面进行演示,然后才打开Axure开始设计。 

如: 

iPhone4 320*480

iPhone5  320*568

iPhone6  375*667

iPhone 6 Plus 414*736

Samsung Galaxy S4 360*640

转载  http://www.xwbetter.com/

上一篇下一篇

猜你喜欢

热点阅读