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界面设计之尺寸规范的更多相关文章

  1. IOS APP的所有图标尺寸规范

    转自: http://blog.csdn.net/chonbj/article/details/25133247 像我一样记不住iOS应用图标像素尺寸的开发者不在少数,我经常需要查询不同设备上的应用尺 ...

  2. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  3. app界面设计字体规范

    通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...

  4. 26款能够吸引用户的 iPhone App 界面设计

    在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...

  5. 最实用的APP界面设计知识,有温度的APP设计(转)

    在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...

  6. APP界面设计 大概总结

    APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...

  7. iOS 8 界面设计 PSD 模板(iPhone 6),免费下载

    在 iOS 8 发布不久,Teehan & Lax 就发布了 iOS 8(iPhone6)用户界面的 PSD 模板.该网站分享众多 PSD 模板素材,这些精美的 PSD 界面模板在制作界面原型 ...

  8. [UI] APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.

  9. Sprint 2 : ios图形界面设计与代码整合

    这周我们主要focus在personal photo experience 项目的ios图形界面设计与代码整合工作上. 工作进度: 1. 图形界面设计方面:兆阳和敏龙基本已经将ios手机客户端的雏形界 ...

随机推荐

  1. Spring Boot & Redis 用起来真简单!

    作者:java_老男孩  https://blog.51cto.com/14230003/2368721 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更丰 ...

  2. runtime之归档和解档

    IOS开发之NSCoding协议(使用runtime)近期学习IOS的runtime库,然后看到之前写的NSCoding协议有点复杂,如果属性少还好,如果100多个属性,则会显得麻烦.下面使用常规方式 ...

  3. Java 编程技巧之数据结构

    前言: 介绍几种常见的java数据结构及应用. 使用HashSet判断主键是否存在 HashSet 实现 Set 接口,由哈希表(实际上是 HashMap )实现,但不保证 set  的迭代顺序,并允 ...

  4. shell整数测试

  5. 转载:java面试题(一)

    1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: - 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注 ...

  6. XML 和 HTML 之间的差异

    XML 和 HTML 为不同的目的而设计: XML 被设计用来传输和存储数据,其焦点是数据的内容. HTML 被设计用来显示数据,其焦点是数据的外观. HTML 旨在显示信息,而 XML 旨在存储和传 ...

  7. tp框架基础控制器调用方法

    public function indd(){ //调用该控制器下的某个方法 $this ->index(); //跨控制器调用 $k = A("index");// 创建控 ...

  8. nginx防止SQL注入规则

    $request_uriThis variable is equal to the *original* request URI as received from the client includi ...

  9. [CSP-S模拟测试]:斯诺(snow)(数学+前缀和+树状数组)

    题目传送门(内部题37) 输入格式 第一行一个整数$n$,表示区间的长度. 第二行一个长度为$n$的只包含$0,1,2$的字符串,表示给出的序列. 输出格式 一行一个整数,表示革命的区间的数量. 样例 ...

  10. [六省联考2017]分手是祝愿 题解(期望dp)

    题目描述 B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态,下标为从 1 到 n 的正整数. 每个灯有两个状态亮和灭,我们用 1 来表示这个灯是亮的,用 0 表示 ...