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

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

一、尺寸及分辨率

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]

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

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

三、字体大小

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

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

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

我的音乐——34px

我的、淘歌、发现——30px

Muxx——34px

本地音乐——30px

泡沫、邓紫棋——24px

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

一、尺寸及分辨率

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

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

二、界面基本组成元素

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

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

状态栏高度为:50px

导航栏高度为:96px

主菜单栏高度为:96px

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

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

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

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

三、字体大小

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

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

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

安卓和ios的ui设计区别_浅谈IOS和Android界面设计尺寸规范相关推荐

  1. 安卓和ios的ui设计区别_安卓界面设计与iPhone界面设计区别在哪里?

    据美国科技媒体最新报道,谷歌将推出一个新的设计语言,统一安卓应用的用户界面设计,届时将会出现新的按钮等界面要素.安卓生态的用户界面,将实现类似微软Metro和iOS的统一.这个消息一出,瞬间传遍移动互 ...

  2. 安卓和ios的ui设计区别_Android系统与ios系统界面设计区别有哪些

    界面设计是人与机器之间传递和交换信息的媒介,近年来,随着信息技术与计算机技术的迅速发展,网络技术的突飞猛进,人机界面设计和开发已成为国际计算机界和设计界为活跃的研究方向.UI即 User Interf ...

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

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

  4. 安卓和ios的ui设计区别_UI设计中IOS和安卓的设计差异

    设计师在做app的时候很少考虑两个平台的差异,在设计上用一套设计稿去做,其实有很多不一样的地方.今天我就针对UI设计中IOS和安卓的设计差异进行简单的说明. iOS与安卓设计上的差异主要从系统差异.成 ...

  5. python的re2和re区别_浅谈Python中re.match()和re.search()的使用及区别

    1.re.match()fvk免费资源网 re.match()的概念是从头匹配一个符合规则的字符串,从起始位置开始匹配,匹配成功返回一个对象,未匹配成功返回None.fvk免费资源网 包含的参数如下: ...

  6. mysql declare与set的区别_浅谈MySQL存储过程中declare和set定义变量的区别

    在存储过程中常看到declare定义的变量和@set定义的变量.简单的来说,declare定义的类似是局部变量,@set定义的类似全局变量. 1.declare定义的变量类似java类中的局部变量,仅 ...

  7. python中if和elif的区别_浅谈对python中if、elif、else的误解

    今天下午在练习python时用了"if...if...else..."的分支结构,结果运行出来吓我一跳.原来我想当然的认为"if...if...else..." ...

  8. python中分支语句elif与else的区别_浅谈对python中if、elif、else的误解

    今天下午在练习python时用了"if...if...else..."的分支结构,结果运行出来吓我一跳.原来我想当然的认为"if...if...else..." ...

  9. python新式类和旧式类的区别_浅谈python新式类和旧式类区别

    python的新式类是2.2版本引进来的,我们可以将之前的类叫做经典类或者旧式类. 为什么要在2.2中引进new style class呢?官方给的解释是: 为了统一类(class)和类型(type) ...

最新文章

  1. 4514: [Sdoi2016]数字配对
  2. 何洁音乐会今晚开唱 大手笔打造pure show
  3. 机器学习导论(张志华):核定义(2)
  4. python遍历二维数组需要注意的是_for循环获取二维数组的元素时的bug
  5. ffmpeg builds by zeranoe_FFmpeg
  6. 命令终端(CMD)自动补全功能 — Tab Complete 功能
  7. 解决Node.js 运行的时候出现中文乱码问题
  8. 【Node学习】—运行node服务demo
  9. 字符串hash(类似于进制的hash)
  10. 个人简历小程序(附源码)
  11. livereload
  12. matlab igbt开关损耗,IGBT模块开关损耗计算方法综述
  13. 全国省市区三级JSON 包括地区编码
  14. 创业指南:如何快速拿到天使投资?
  15. 2021年最佳Linux发行版推荐列表
  16. 形容人的内核是什么意思_气场: 一个人的精神内核
  17. 新建应用,应用创建失败
  18. 淘宝、京东、天猫商品名称数据集下载最新版本。包括中药、化学器材、摄影、动物、酒水、办公事务。
  19. 软件介绍: AFEPack 软件 (李若, 刘文斌)
  20. strong_alias、weak_alias

热门文章

  1. 基于用户推荐系统的音乐播放器开发文档
  2. 读后感--这个世界不欠你什么
  3. 今日端午,竟然这几家互联网大厂没有福利礼盒……
  4. 干货 | 实现一个属于你的“语言”-携程Kotlin DSL开发与实践
  5. 双11交易额1682亿,计算机预测打败了人类
  6. Elsevier的Knowledge-Based Systems期刊投latex原稿过程(投稿)
  7. 【Rust日报】 2019-05-07
  8. 轮廓系数确定kmeans的K值
  9. Aegisub 打K值视频教程+相关插件
  10. 【华为机试真题 Python实现】解密犯罪时间【2022 Q2 | 200】