刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大、文字该用多大才合适、我要做几套界面才可以?什么七七八八的也着实让人有些头疼。

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

IOS篇

1、尺寸及分辨率

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

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

(以上单位都是像素哦,至于分辨率一般网页UI和移动UI基本上都只要 72 ppi)

当然,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用 640×960 或者 640×1136 的尺寸设计。

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

2、界面基本组成元素

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

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

状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px

导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px

主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px

内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px

(等等,为了说明我不是瞎掰的:960-40-88-98=734)

iPhone/iPod Touch 第一代、第二代、第三代

iPhone4/iPhone4s

iPhone5/iPhone5C/iPhone5s

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

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

3、字体大小

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

下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小,像素为单位,也就是大家在PS里的文字像素大小。

P.S. 多留心下一些大公司的数据研究,你会发现很多你根本没考虑到的问题哦~

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

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

Android篇

1、尺寸及分辨率

Android 界面尺寸:480×800、720×1280、1080×1920… (单位:像素)

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

2、界面基本组成元素

Android 的 APP 界面和 iPhone 的基本相同:状态栏,导航栏、导航栏、主菜单栏以及中间的内容区域。

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

状态栏高度为:50 px

导航栏高度为:96 px

主菜单栏高度为:96 px

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

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

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

Android 为了在界面上区别于 iOS ,Android 4.0 开始提出一套 HOLO 的 UI 风格,一些APP的最新版都采用了这一风格。

这一风格最明显的变化就是将下方的主菜单移动到了导航栏下面,这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。

3、字体大小

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

同样,百度用户体验的调查中,可以看出用户可接受的文字相应问题。

转载于:https://www.cnblogs.com/aimyfly/p/3964790.html

移动设备的界面设计尺寸相关推荐

  1. ps做手机计算机界面,手机设计!移动设备的界面设计尺寸

    刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大.文字该用多大才合适.我要做几套界面才可以?什么七七八八的也着实让人有些头疼. 废话不多说,希望大家耐心看完后,不用再纠结于尺寸相关的东 ...

  2. 【UI设计】移动设备的界面设计尺寸

    刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大.文字该用多大才合适.我要做几套界面才可以?什么七七八八的也着实让人有些头疼. 1.尺寸及分辨率 iPhone 界面尺寸:320x480 ...

  3. 手机端web/app界面设计尺寸规范

    手机端web/app界面设计尺寸规范 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

  4. 苹果iphone APP界面设计尺寸官方版

    iphone界面设计尺寸(640*960)px 该Iphone界面设计是从苹果官方网站帮助中心提取过来,这也是我第一次帮公司产品设计iphone版的UI使用的尺寸.由于之前接触的比较少,只知道苹果手机 ...

  5. ios底部栏设计规范_iPhone6界面设计尺寸规范大全【含原型设计规范】

    目前,很多APP设计师的APP Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸.这一节课也算是25学堂为大家精心整理的iPho ...

  6. ios底部栏设计规范_IOS界面设计尺寸标准规范

    很多IOS APP UI设计稿都是以iphone6为基准的,方便向上适配iphone7的尺寸,也方便向下适配iphone5的尺寸.所以小编给大家分享iPhone6的界面设计尺寸有哪些规范. IOS界面 ...

  7. iOS和Android 界面设计尺寸规范

    iOS和Android 界面设计尺寸规范 P迪 | 2014-07-25 9:57:27 | 产品设计 3,974 摘要:刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大,文字该用多大 ...

  8. 交互设计:界面设计尺寸详解与常用尺寸

    基本概念   屏幕尺寸 指实际的物理尺寸,为屏幕对角线的测量.单位in(英寸) 像素(PX) 代表屏幕上一个物理的像素点. 屏幕密度 density 为解决Android 设备碎片化,引入一个概念DP ...

  9. 平板app尺寸html5,app界面设计尺寸规范大全

    原型设计尺寸 1. iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为375x667px ☆ 状态栏(status bar):就是电量条,其高度为:20px: ☆ 导航栏(navigati ...

最新文章

  1. 利用NVIDIA NGC的TensorRT容器优化和加速人工智能推理
  2. U3D的Collider
  3. 基于纯Java代码的Spring容器和Web容器零配置的思考和实现(3) - 使用配置
  4. WINCE流驱动的自动加载
  5. nginx常用功能全揭秘(内附福利!!!)
  6. Things That Cannot Change
  7. python经典项目实战_2个Python入门级的实战项目
  8. 51单片机中使用ucos ii的优缺点(好文)
  9. 结对-人机对战象棋游戏-开发过程
  10. 【博士招生】卢森堡大学​SnT(CVI²)研究小组,DeepFake 检测领域
  11. 驱动备份工具哪个好_互联网推广工具哪个好
  12. 中年之后的人脉,靠的是两个字
  13. @j1 bootstrap
  14. Java垃圾回收机制分析
  15. 论文笔记_S2D.46_2013-3DV_基于点融合的动态场景实时三维重建
  16. php-5.6.2-Win32-VC11-x64.zip+ apache2.4.10 +php_xdebug-2.2.5-5.6-vc11-x86_64.dll+mysql5.6安装配置
  17. Linux C/C++编程之(十六)进程及进程控制
  18. 基于樽海鞘群算法的线性规划求解matlab程序
  19. TSMaster1.1版本更新补丁
  20. 深度学习训练之optimizer优化器(BGD、SGD、MBGD、SGDM、NAG、AdaGrad、AdaDelta、Adam)的最全系统详解

热门文章

  1. OData 1-2 windows 身份验证和OData
  2. 在css使用PHP/ASP代码
  3. Android多线程操作——线程池管理综述
  4. 基于Linux命令行终端的ftp客户端程序
  5. javascript设计模式-Constructor(构造器)模式
  6. 【Vue】一个案例带你搞懂methods、watch及computed的使用规则
  7. 算法分析与设计 —— 贪心算法「活动安排」「背包问题」「哈夫曼编码」
  8. 模式识别中的特征提取及其内在意义
  9. 数字滤波器(二)--最小相位延时系统和全通系统
  10. 用单张2D图像重构3D场景