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

相关推荐

  • Sketch汉化插件-SketchI18N最新版本

    安装使用 下载安装包,并解压,在安装包找到SketchI18N.sketchplugin 双击 SketchI18N.sketchplugin 完成安装 重启 Sketch 自动汉化后完成汉化 如果第三步没成功,试试 在 Sketch 中按快捷键 control command + x …

    2018-03-19
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • Sketch从入门到精通 第一章 初识Sketch 免费版

    第一章 初识Sketch 1. Sketch 是什么? Sketch 是一款非常适合UI界面设计师们使用的矢量绘图应用。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要…

    2015-07-03
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

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

    Sketch 2016-07-25
  • 有哪些非常有设计感的App?—国外篇

    对于一款应用的设计感,不同的人会有不同的观点,比如我们可以从以下几个维度进行比较: 界面:UI 设计精美,界面每一处细节都精雕细琢,展现了 App 的独一无二,有些即使是「无用之美」,下载了也会舍不得删掉。 …

    2015-05-18
  • 【UI技能】磨刀不误砍柴工!打开PS软件前应该执行的四个方面

    编者按:有经验的设计师在拿到需求后,往往不会急着开Photoshop,而会自问该做的事都做好了吗?要知道,如果能提前执行好这四个步骤,能大大减少改稿推翻重做以及和PM“吵架”的几率,没错,四个步骤说的就是今天这篇…

    2015-11-29
  • 淘宝2017设计升级

    这是手淘首次以设计为主导的版本升级,我们一步步地将公司的设计战略分解成产品体验方向,从设计概念落地到界面设计语言,在执行过程中又不断地平衡各种设计细节,才有最终的设计产出。所有的改变都是为了给用户营造更加良好体验的购物体验。

    UI设计 2017-03-14
  • 如何使用Sketch3创建APP原型

    自从Fireworks逐渐衰落之后, 我一直在找其他好用的app和网站设计工具。后来我发现,只需用Sketch再加上其他一些简单的工具,就能构成一条非常不错的设计生产线。 在这篇文章中,我将谈谈我是如何利用Sketch搭配Flin…

    2015-06-29