iOS和Android 界面设计尺寸规范

iOS和Android 界面设计尺寸规范

摘要:刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大,文字该用多大才合适,我要做几套界面才可以?什么七七八八的也着实让人有些头疼。   废话不多说,希望大家耐心看完后,不要再纠结于尺寸相关的东西了!     一、尺寸及分辨率 iPhone界面尺寸:320*480、640*960、640*1136...

废话不多说,希望大家耐心看完后,不要再纠结于尺寸相关的东西了!

 

20140724180556_21011

 

一、尺寸及分辨率

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

iPad界面尺寸:1024*768、2048*1536

单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。

Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素

iPhone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏内容区域

这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。

  • 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px
  • 导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px
  • 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px
  • 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px
[下图为了说明我不是瞎掰的:960-40-88-98=734]

20140724144725_82353

至于我们经常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。

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

20140724144851_18802

三、字体大小

Phone上的字体英文为:HelveticaNeue 。至于中文Mac下用的是黑体,Win下则为华文黑体

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

20140724123322_58986

 

其实还有个更简单的方法就是找你觉得好的app应用,手机截图后放进PS自己比对调节字体大小咯。

20140724123336_39053

我的音乐——34px
我的、淘歌、发现——30px
Muxx——34px
本地音乐——30px
泡沫、邓紫棋——24px

 

总之,方法是自己找到的,想办法解决问题,自己实践,比别人告诉你印象更深刻不是么?

 

20140724180614_96402

一、尺寸及分辨率

Android界面尺寸:480*800、720*1280、1080*1920。[单位:像素]

 

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

 

二、界面基本组成元素

Android的app界面和iPhone的基本相同:状态栏、导航栏、主菜单内容区域。

Android中我们取用的720*1280的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。

20140724123720_72499

状态栏高度为:50px

导航栏高度为:96px

主菜单栏高度为:96px

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

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

 

Ps:写之前我翻了好多关于Android的界面尺寸教程,都没找到像iOS一样具体的规范,或许因为在安卓中这些控件的高度都能用程序自定义,都没有提到具体的尺寸数值,所以就自己找了Android的设计规范,尺寸都是自己在PS中量的。

 

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

20140724145817_26952

三、字体大小

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

具体大小,还是那句话,找自己喜欢的app界面,手机截图后放进PS自己比对调节字体大小[切记,一定是高清截图哦]

附件 :包含一些尺寸方面的干货,以及一些UI规范的源文件。

网盘地址:http://pan.baidu.com/s/1gdqoSJh

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/2829/

(0)
iouedioued
上一篇 2015-01-12
下一篇 2015-01-13

相关推荐

  • 有哪些非常有设计感的APP?—国内篇

    小编前语:继上次整理的富有设计感的应用之国外篇后,很多童鞋想了解目前国内比较有设计感的APP有哪些,总有些喜爱玩APP的达人给我们推荐一些应用,小编在这汇总下,供大家欣赏~~ 1.小记 日记软件有很多,这一款很…

    2015-05-22
  • Sketch从入门到精通-Sketch3 颜色填充

    颜色在做设计中是重要又必不缺少的组成部分,颜色有很多变化,丰富的颜色变化会给你的设计加分,Sketch里边,就对颜色有各种填充的效果,下面具体介绍一下,Sketch里边一共有六种填充效果,虽然你平常只用一两种,…

    2015-07-29
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • 知乎今日最热:如何评价 Instagram 新的品牌形象和界面设计?

    原文链接:如何评价 Instagram 新的品牌形象和界面设计? 补充一个信息: 《 INSTAGRAM BRAND GUIDELINES V1.1》http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram%20G…

    2016-05-12
  • 昨晚,微软发布了一款设计师神器!业界一片哭声!

    #交互学堂#昨晚,微软又硬了。 发布了一部怪兽,把毒少毒死了。。。 这就是我要的桌面电脑啊!!! 一体机—— surface studio (这是配置:Core i7处理器,GeForce 980M显卡,32GB内存+2TB混合硬盘,3:2 TrueColor…

    2016-10-27
  • 2015 年移动设备界面设计语言及风格总结

    引文:2014年,Google推出影响全球设计趋势的materialDesign,接着苹果推出ios8和两台影响ios屏幕适配的大屏手机 1.大屏手机的普及化 首先让我们看一眼友盟的数据 Android ios 友盟每天推送的邮件 3.5英寸~4英寸——…

    2015-12-14
  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

    今天更新了一下sketch measure的插件,下面说一下都更新了哪些地方 1.新的UI界面 友好的ui界面使你标记起来更加便捷,新界面是不是看起来更加专业了许多,视觉上更加直观 2.输出出口 自动生成HTML的样式,而不仅仅…

    Sketch 2016-07-25
  • [sketch组件库] iOS 10 GUI for sketch

    今天给大家推荐的是 iOS 10 GUI 交互规范组件 for sketch ,大小有93M,需要下载 Sketch 源文件。

    2016-09-13
  • 在Sketch里怎么切图?

    有了Sketch之后,切图变得越来越简单,之前在Sketch教程里有写过切图方面的教程,但还是有很多人想知道到底怎么用Sketch切图,这篇教程就作为一个Sketch的切图大综合,详细的讲一讲怎样在Sketch里面切图,以及切图…

    2015-11-30