Android/IOS APP界面设计之尺寸规范
1.尺寸以及分辨率
iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只要宽度不变都好说。至于像素问题,网页和移动的UI用72px就可以了,不必纠结。
2.界面基本组成元素
iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的,所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧:
状态栏:显示运营商、信号和电量的区域,高度 40px
导航栏:显示当前页面名称,包含页面“返回”等功能按钮,高度 88px
主菜单栏:显示在页面下方的区域,一般作为分类内容的快递导航,高度 98px
3.字体大小
iPhone上的英文字体为:HelveticaNeue,至于中文,一般是冬青黑体或是黑体-简。有关文字的大小根据不同类型的APP都有不同的定义,但是百度用户体验部提供了这样一份统计资料:阅读最舒适的长文本大小在32~34px之间,短文本为32px,注释等提示文本为28px。不管是否同意,至少人家有数据说话,你也可以把觉得好的应用截图放进PS里对比看,从而调试自己设计的文字大小。
总之,方法很多,个人的审美也不一样,有人故意把字做大以突出个性,自己实践,把数据作为参考,多做几款应用心中也就有数了,比看再说教程或者说明有用!
Android篇
1.尺寸以及分辨率
提到Android的尺寸,让多少设计和开发抓耳挠腮,数不清的机型和尺寸,重复的适配。这里我们就说些主流的设计尺寸吧,比如480*800、720*128。很长一段时间内,我们都在用480*800,但是安卓手机分辨率的发展众所周知的越来越大,所以我建议使用720*1280这个尺寸来设计,切图上可以点9切图做到所有手机的适配。
2.界面基本组成元素
与ios的一样,还是有状态栏、导航栏和主菜单栏,以720*1280的尺寸来设计,那么状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px。因为是开源的系统,很多厂家都把安卓系统“玩坏”了,这里的数值也只能作为参考,比如魅族flyme状态栏是正常的两倍高,还有很多厂商也在界面上相近办法。
Android为了区别于IOS,从4.0开始提出了一套HOLO的UI风格设计风格,鼓励将底部的主菜单栏放到导航栏下面,从而避免点击下方材料误 点虚拟按键,很多APP的新版中也采用了这一风格,比如微信。就前不久的I/O大会上,最新的Android L正式揭开面纱,宣布了安卓全面进入扁平化时代。
3.文字大小
Android的字体为:Droid sans fallback,这是谷歌自己的字体,与微软雅黑很像。同样百度也提供了一份统计数据,但是个人觉得已过期,现在没有太大意义,因为他们是以480*800的分辨率作为测试,测试结果是阅读最舒适的长文本为27px,短文本也是27px,注释备注文本21px。具体还是要大家将做好的界面放到同分辨率的手机上看为准!
Android/IOS APP界面设计之尺寸规范的更多相关文章
- IOS APP的所有图标尺寸规范
转自: http://blog.csdn.net/chonbj/article/details/25133247 像我一样记不住iOS应用图标像素尺寸的开发者不在少数,我经常需要查询不同设备上的应用尺 ...
- APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)
正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...
- app界面设计字体规范
通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...
- 26款能够吸引用户的 iPhone App 界面设计
在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...
- 最实用的APP界面设计知识,有温度的APP设计(转)
在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...
- APP界面设计 大概总结
APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...
- iOS 8 界面设计 PSD 模板(iPhone 6),免费下载
在 iOS 8 发布不久,Teehan & Lax 就发布了 iOS 8(iPhone6)用户界面的 PSD 模板.该网站分享众多 PSD 模板素材,这些精美的 PSD 界面模板在制作界面原型 ...
- [UI] APP界面设计流程
此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.
- Sprint 2 : ios图形界面设计与代码整合
这周我们主要focus在personal photo experience 项目的ios图形界面设计与代码整合工作上. 工作进度: 1. 图形界面设计方面:兆阳和敏龙基本已经将ios手机客户端的雏形界 ...
随机推荐
- eclipse搭建jmeter编译环境(Jmeter二次开发)
jmeter是开源项目,方便大家对代码进行改动. 写了一个简单教程,帮助入门者进行搭建jmeter编译环境! 下载地址 文件格式为zip,解压后为docx微软office2007文档. 或者直接访问我 ...
- Cocos2d-x之物理引擎
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 在很多的游戏设计中一般都会涉及和模拟到真实的物理世界.然而游戏中模拟真实世界的物理会很复杂.使用已经写好的物理引擎会用很大的帮助和便利. ...
- Git SSH连接方式配置
如果使用ssh的方式管理,需要配置ssh key. 1.打开git bash命令窗口 2.生成ssh key ssh-keygen -t rsa -b 4096 -C "your_email ...
- java虚拟机规范(se8)——java虚拟机的编译(三)
3.6 接受参数 如果n个参数传给一个实例的方法,按照约定,它们被接受并放在这个新方法创建的栈帧中的局部变量表里,在局部变量表中的序号从1到n.这些参数按照它们传递过来的顺序存放.例如: int ad ...
- 【学习总结】Python-3-身份运算符 is 与 == 区别
参考:菜鸟教程-Python3运算符 身份运算符 is 和 is not:用于比较两个对象的存储单元 判断两个标识符是不是引用自相同或不同对象,返回一个布尔值 对于"同一个对象"中 ...
- MySQL 基础 20191025
1.MySQL(绿色软件)的安装后: (老师课件中的) 要设置字符集不然会报 1344 错误码,有两种: 为上面的还有一种为: set names 'utf8'; 2.MySQL管理 创建数据库 CR ...
- css颜色单位
/* 用颜色的单词表示不同的颜色:red, green, blue等等 */ p { background-color: red; } /* 用rgb三元色表示,rgb => red, gree ...
- sqlalchemy防sql注入
银行对安全性要求高,其中包括基本的mysql防注入,因此,记录下相关使用方法: 注意:sqlalchemy自带sql防注入,但是在 execute执行 手写sql时 需要考虑此安全问题 对于 wher ...
- Bootstrap 网页实例
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...
- 【leetcode】1006. Clumsy Factorial
题目如下: Normally, the factorial of a positive integer n is the product of all positive integers less t ...