iosapp设计规范（图标规范标准（IOS/Android））

本文目录

• 图标规范标准（IOS/Android）
• iOS有哪些设计原则
• IOS界面设计尺寸标准规范
• 浅谈iOS与Android设计规范：6类交互设计规范对比
• axureapp原型图教程-如何使用axurerp制作iosapp原型
• 能同时用于Android和iOS的APPUI设计怎么做
• 浅谈iOS APP设计规范-按照iphone6尺寸

图标规范标准（IOS/Android）

IOS篇

本小节中ios图标标准均以iPhone6为例

1.APP图标  

         APP图标指应用图标，图标尺寸为120x120，如果是游戏类应用，这个图标也会被用在Game Center中。由于IOS应用图标是由于系统统一切圆角，所以设计的时候直接出方形图标即可。设计时可根据需要作出圆角供展示使用。

尺寸规格：

图标尺寸：57x57，圆角10；图标尺寸：114x114， 圆角20；图标尺寸：120x120，圆角22；图标尺寸：114x114，圆角20；图标尺寸：180180，圆角尺寸34；图标尺寸：512x512，圆角尺寸90；图标尺寸：1024x1024,圆角180.

2.APP Store图标

APP Store图标指上传至应用商店的应用图标，尺寸为1024x1024.为了吸引用户可增加更多的设计细节。不过基于效率考虑，一般与APP图标的设计保持一致。此时的图标需要设计圆角，圆角像素为160。

3.标签栏导航图标

标签栏导航图标指底部标签栏上的图标，图标设计尺寸为50x50。

4.导航栏图标

导航栏图标指分布导航栏上的功能图标，图标设计尺寸为44x44

5.工具栏图标

工具栏图标指底部工具栏上的功能图标，图标设计尺寸为44x44

6.设置图标

设置图标指在列表式的表格视图中左侧功能图标，图标设计尺寸为58x58

7.Web Clip图标

Web Clip图标指如果你有Web小程序或者网站，可以制定一个小图标。用户可以把它直接放在桌子上，用户可单击图标直接访问网页内容。图标设计尺寸为120x120。

Android篇

为了简化设计并且兼容更多的手机屏幕，安卓系统平台对屏幕进行了区分。按屏幕像素密度划分为低密度屏幕（LHDPI）、中低密度屏幕（MHDPI）、高低密度屏幕（XHDPI）、和超超高低密度屏幕（XXHDPI）。

密度之间的关系为3:4:6:8:12.使用这些比例，通过简单的计算，我们就可以适配出不同版本的位图，以供开发使用。

安卓尺寸标准：

75x75对应LDPI显示屏；100x100对应MDPI显示屏；150x150对应HDPI显示屏；200x200对应XHDPI显示屏；300x300对应XXHDPI显示屏。

特别提示：这些尺寸要熟练的运用到工作当中，希望大家多积累。

文章更新的速度确实有些慢了，我会加以改正。还望大家多多关注。

’

iOS有哪些设计原则

1、审美完整性：审美完整性代表了一个应用程序的外观和行为与功能的整合程度。
　　2、一致性：一个一致的应用程序通过使用系统提供的界面元素、众所周知的图标、标准的文本样式和统一的术语来实现熟悉的标准和范例。
　　3、可直接操作：当用户旋转设备或使用手势影响屏幕内容时，直接操作，这样可以吸引人们并促进理解。
　　4、反馈：内置的iOS应用程序为用户的每一个动作提供了可感知的反馈。交互元素在被选中时被简单地高亮显示，进度指示器传达长时间运行的操作的状态，动画和声音帮助阐明动作的结果。

IOS界面设计尺寸标准规范

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

IOS界面设计尺寸规范（以iPhone6为例）

一、界面尺寸规范

1、界面尺寸大小是：750x1334px。

2、状态栏(status bar)：就是电量条，其高度为：40px;

3、导航栏(navigation)：就是顶部条，其高度为：88px;

4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px;

5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

二、图标尺寸规范

1、导航栏和工具栏尺寸大小44x44px；

2、标签栏尺寸大小75x75px

3、导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是：20px 24px，26px，28px，30px，32px，34px。

三、设置界面的图标高度和开关滑动按钮的高度：58px

四、可点击高度规范

在iPhone6的原型图上，统一成88px。在iPhone6设计稿中，88px是一个常用的设计尺寸。

五、搜索栏高度规范

搜索栏的高度，在iPhone6的原型图上，统一成58px。

六、界面元素之间的距离规范

在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30p x。

A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

七、原型设计中，需要考虑不同屏幕尺寸的苹果手机，在@1x的情况下的适配情况。

1、iPhone5在@2x屏幕尺寸是，640x1136px;对应的@1x，屏幕尺寸就是320x568px;

2、iPhone6在@2x屏幕尺寸是：750x1334px;对应的@1x，屏幕尺寸就是375x667px;

3、iPhone6Plus在@3x屏幕尺寸是：750x1334px;对应的@1x，屏幕尺寸就414x736px;

八、iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介绍

1、iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸，也是安卓机目前最流行的大屏设计稿尺寸。

2、iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x889px-@1x。

3、iPhone5是4英寸屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x757px-@1x。

总结：iPhone6的原型规范如下：

1、界面尺寸布局：满屏尺寸750x1334px；

2、高度电量条高度40px，导航栏高度88px，标签栏高度98px；

3、各区域图标大小导航栏图标44px，标签栏图标50px；

4、各区域文字大小电量条文字22px，导航栏-文字32px，标签栏字20px；

5、常用的文字大小：32px，30px，28px，26px，24px，22px，20px；

6、常用的颜色：背景浅灰色#f2f2f2,文字深黑色#323232，边框色深灰#CCCCCC；

7、常用可点击区域的高度：88px；

8、单行文字的背景框的高度：88px，双行则为：176px，三行则为：264px；

9、常用间距：亲密距离：20px;疏远距离：30px，其它距离：10px，44px等；

10、按钮和文本框，原型图做成直角的，圆角半径是多少，由Ui来设计；

11、这种情况，需要修改原型。单个页面的逻辑流程图或用户学习使用时间，超过其它页面平均数的3倍以上

浅谈iOS与Android设计规范：6类交互设计规范对比

iOS和Android两个不同的平台，肯定是有很多区别的，下面就从交互的角度，谈谈区别。

以前就读过IOS和Android的规范，但是觉得没啥大用处，因为现在APP为了保持一致性，通常在IOS和Android上的设计是一样的，而且一些小公司只设计IOS的交互原型，因为只要IOS上能用，安卓上肯定没问题，前段时间，和一个人聊，问我它俩的区别，当时一脸懵逼，不知从何说起。毕竟是两个不同的平台，肯定是有很多区别的，下面就从交互的角度，谈谈区别。
一、全局导航
IOS：通常放在底部，方便用户点击
Android：通常放在上面，下面有物理按键，防止误操作。

解析：因为Android比IOS多了物理按键，为了防止误操作，所以只能将全局导航放在上面，但是随着屏幕越来越大，上面是手指无法触及的区域，所以切换起来相对成本较高。
二、二级导航
IOS：通常放返回、上一级标题、标题（居中），操作通常只有一个
Android：通常返回控件、logo、下拉菜单、重要操作、更多操作

解析：IOS显示了上一级的名称，让用户点击返回后，心里有预期，Android放了APP的logo，增加了品牌性，但是就使用来讲，用户不知道点击会回到哪，下拉菜单和更多操作都需要点击才能显示，增加了操作步骤。
三、工具栏
IOS：通常放在最下面，方便操作
Android：放在导航栏里，将重要操作放在外面，其他放在更多里。

解析：IOS将操作都放在底部，区域更大，操作更方便。Android将操作放在了顶部，显得很拥挤，并且还收起了一部分，需要用户查找，但是却节省了空间，让内容显示区更大。
四、提示框
IOS：出现在屏幕中间，可以带图标，可以不带，可以是静态的，也可以是动态的。
Android：不可以带图标，不能是动态的，最多只可以带一个操作按钮，最多只能出现一个提示，不能和低端的悬浮按钮重合。

解析：IOS的设计理念是尽量不打扰用户，只要用户能看见变化，轻易不会出现提示，只有一些用户无法感知时，才会出现提示框，所以可以是动态的，像调节音量。Android的提示要比IOS重一些，因为它可以带一个按钮。
五、警示框
IOS：标题和按钮是必须的，可以有内容和输入

Android：主要有四种：用途、内容、事件、表现。
1、用途包含了标题，内容和事件。

六、手势定义
IOS的手势规定有8种，如下：

解析：IOS只有8种手势，Android有14种，但是很多都不常用，个人感觉IOS的8种已经完全够用了，定义那么多种，用户的学习成本就会提高，而且Android的有些手势并没有定义可以做什么，所以给出这么多手势也没有用。
结语
本文对IOS和Android的规范进行了对比，Android的规范那是相当详细，但是IOS的只给出了设计原则，所以，一些是我自己总结的，可能对比的还不够全面，欢迎大家一起讨论。

axureapp原型图教程-如何使用axurerp制作iosapp原型

原型图axure教程

首先,我们要将文件从Axure中导出。

Step1:在Axure内点击(发布)生成原型文件。Step2:创建一个空白文件夹作为导出位置,点击“发布到本地”,将生成的整个文件进行压缩,选择压缩文件格式为ZIP,注意这里不能加密。接下来,我们将导出来的Axure文件导入到Pixso中:方法一:直接拖拽至Pixso工作台,一键导入Axure文件。方法二:一键导入Axure文件,流畅的云端加载,省时省力,高效迁移。打开工作台,点击首页的(导入文件)按钮,选择Axure文件并导入。或使用菜单栏的文件导入功能,导入Axure文件到Pixso打开。

原型工具选对,原型设计也可以很简单!聪明的选择是用最小的代价解决最主要的需求,Pixso免费+学习成本低+功能强大且完备,相信聪明的你可以用它制作出满意的原型交互设计!

苹果版本的axure界面与windows版本的差别不是很大,界面更简单一些,熟悉了以后感觉比win系统的更好。创建属于自己的元件库

原型制作工具的核心功能无非就是通过元件的堆砌组合,来展示产品的目标形态和效果。axure自带的只是一些最基本的元件,而网上的元件库庞杂混

乱,很难找到满足需求并且称心的元件,并且大部分都是位图格式,根本无法修改颜色宽度等数值,制作出来的交互又怎么能达到精美的水准要求呢?

还好axure提供了「创建部件库」的功能,能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件,制作完成后,每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值,从而才能实现交互稿统一完美的风格。

比如,app中经常会用到一些主页、分享、搜索、消息....各种图标,或者我们每次遇到喜欢的图标,都可以用axure画出来,以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。

一、创建元件库“绿色文件”

打开axure,在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能,点击会弹出一个另存为对话框,这里需要选择元件库文件的存储位置,并需要输入元件库的名称。

此时,我们可以看到,文件的后缀名为.rplib,这个就是元件库的格式,而不同于创作交互原型时正常axure文件的.rp格式。

输入文件名称和存储位置之后,点击保存,axure将重新打开一个新页面进行元件的。并且我们可以看到,新页面跟我们平时创造.rp正常文件的

页面一模一样,但不要混淆,此时页面的是我们在正常.rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到,元件库.rplib文件图

标为”绿色“,不同于.rp文件的蓝色。

创建好元件库得”绿色文件“后,基本准备工作已经做完,下边就进入到制作过程。

二、元件库分组

通过观察axure默认的元件库,我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了:common、forms、flow等等,这样能更方便我们找到目标元件的位置。

同样,我们在制作元件库的时候,也可以进行分组,规则为:在页面导航面板上,所有的文件夹都是一个分组,所有没有在文件夹下的页面包括其所有子页面,都隶属与以元件库为名的分组下。

分组的规则弄明白之后,我们可以先按照自己对元件库的规划进行一个合理的分组,比如要做app的元件库,那么我们可以分成:图标、控件、框架3个常用分组,接下来就进入到具体元件的制作过程。

三、并制作元件

我们以制作一个”我的“头像图标为例,首先在图标分组下,添加一个页面并命名为”我的“,双击进入到元件页面,操作就跟我们平时制作正常

的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式,然后用axure默认的基本形状元件,比如矩形、横线、圆形等,组合拼

凑成最终比较理想的样子。

首先我们要明确,axure中没有类似ps中的布尔运算(能够自由的对多个形状进行,比如合并、相交、减去顶层等),所以会给我们制作元件,尤

其是图标带来一定局限性,但好在交互原型并不要求苛刻的细节实现,只要我们能够很清楚的表示出产品形态,有比较整体的风格就可以了。并且我们用axure

基本形状自己勾画出来的图标,能很方便的调整颜色大小等,可以适用不同的交互文件,这就是从网上找现成的位图图标很难达到的便利性。

回到“我的”图标制作,如图所示,我一共用到了三个基本形状来进行拼凑,最终组合成了我们经常能看到的一个图标样式,并且一眼就能明白它的含义。虽然没有更多的细节实现,但对于交互原型稿来说已经完全够用,关键是颜色大小等可以很灵活的进行修改。

按照这个思路,我们可以制作更多的图标出来,当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图,是我在画「读读日报」原型图时制作的一个元件库:

元件库制作完成之后,然后就进入到最后一个步骤。

四、载入自制元件库并使用

元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件,同样是在元件库面板「三条横线」按钮下拉选项中找到「载入部件库」功能,然后找到制作完成的元件库文件“绿色图标”载入。

载入之后,我们就可以在「选择元件库」下拉选项中,找到刚刚载入的元件库并选中,然后我们就可以像使用软件自带的元件一样使用我们自制的元件库了。

怎么样,看到这里你应该学会了如何自制一个元件库了吧,希望你会花时间动手做一个。当然除了创建部件库,axure有很多技巧都需要掌握,比如母版的功能。

学会善用母版

在产品的设计过程中,主导航往往出现在多个页面,比如app的底部tab栏。当然不仅仅是导航,当我们频繁使用任何一组控件的时候,希望你不是一直都在复制和粘贴,永远记住,创建一个母版可能是更好的选择。

使用母版的便利性不单单体现在能够快速的使用一组控件,尤其是在设计后期,当我们需要修改某些基本控件的时候,母版带来的修改效率一定会让你深深的爱上这个功能,欲罢不能。

除了学会使用母版,更要学会善用母版。同样有一点希望能记住,不要把太大的组合对象变成母版。因为越是大的组合对象,越是有可能需要在母版的很多地

方做出修改。此时把一些母版和另外一个母版合并起来一般会是更好的办法,这样对母版的修改会更加的灵活,比如下图,将产品基本信息和可能购买状态分开成两

个母版,组合在一起成为产品的完整页面

制定一套自己的交互风格

学会了创建自己的元件库,也懂得了善用母版,当然还有其他很多axure软件的使用技巧。应该就可以很快速的完成一份交互原型稿了吧,可是又该如何保证交付稿有统一的风格,达到较高的目标水准呢?

首先,我们要熟悉app的设计规范,符合android或者ios的设计理念,对于一些常规的控件设计规则有一定的了解。这样设计出来的产品才能符

合这个平台的特性,并且基于大家对相关平台的一些固有认知,很容易能够达成共识。这也是交互原型作为一个沟通交付物应该达成的目标。

基于对app设计规范的熟悉,同时在制作过程中,要根据使用场景以及自己的习惯来制定一套自己的交互风格。比如可以定义好app原型中,正文字体采

用微软雅黑颜色#33333313字号、提示文字为微软雅黑颜色#999999

10字号、固定的appbar行高为40px,内容据左侧屏幕边缘10px距离......

当然某些规范,比如字体也可以当成一个字体元件,放到我们自制的元件库中,总之要根据自己的情况灵活的运用。有了一套风格之后,加上创建的元件库随意修改颜色大小等,我相信制作出来的交互原型肯定是协调统一的整体。

读读日报原型制作

理论方法掌握了,需要实践的锻炼才能更好的吸收领悟。我参照「读读日报」ios版,对主要的一些页面画了一些交互原型。基本过程和思路就是按照本文所提到的这些内容。

为了更有形象感,从网上找来一个iphone手机的边框,并且创建自己的部件库,绘制了一些常用的图标和控件。然后设定了整体的风格,制作过程中也用到了几个母版提高效率,同时可以使用辅助线帮助自己保证部件的对齐、平均分布等,进而提高布局的美感。

末尾再次抛出我开篇提到的,如何用axure快速制作app交互原型的方法论:制作属于自己的元件库并要学会善用母版,熟悉app设计规范并要有自己一套交互风格样式。

打开Axure8(axure7也一样),默认是新创建的项目,找到“动态面板”元件,如下图:

拖动元件到工作区,按照图指示的任意一个地方给动态面板命名:测试面板

双击动态面板元件,出现状态state1,双击进入到state1的:

拖放一个图像元件到state1内,双击并找到准备的图片(红旗),这样第一个状态就好了。

下面第二个状态,注意看图,在右下方的“概要”栏目内找到state1右键“复制状态”,这样里面的元件大小、位置不会发生改变。复制成功后为便于下面的交互用例,将状态分别命名为:红旗、蓝旗。

然后点击蓝旗状态,将图片替换。

以上步骤完成后,开始交互用例。双击红旗图片,出现如下图所示的交互用例,找到:鼠标单击时,并双击出现用例面板。

选择元件--》设置面板状态,然后按照图示选中“测试面板”,并为其设置选择状态为:蓝旗。同时设定动画效果。

红旗状态完成后,点击确定,按照下图所示在case1下邮件复制用例,并粘贴到蓝旗状态下。然后按上一步的操作,将蓝旗点击是的选择状态设置为:红旗。

最后F5预览,并点击图像测试效果

能同时用于Android和iOS的APPUI设计怎么做

遵循这些步骤，你的 App 就能同时在 iOS 和 Android 保持完美!

1. 总体的样式

从 iOS7 以后，Apple 就一直在采用扁平化的设计模式，去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。Google 的新 MD 设计规范有了一些更加细节的规定，通过一种叫“纸片”的方法来创造更多的层级关系。

2. 实体按钮

Android 有一个返回按钮，点击它可以返回上一个屏幕。

iPhone 上则没有这样一个按钮，所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。

3. 通用元素

两种平台之间的确存在着一些通用的元素，比如说状态栏和标题栏，它们会出现在每一屏的顶部。你不应当改变导航栏的高度，如果你想让 App 看起来更加原生的话。所以，我推荐你在设计的第一页就定义好标题栏的样式，然后在其他的屏幕上使用一个占位的方框来替代，这样能省下不少时间，但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。

不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的，然而 iOS 上是居中对齐的。在 iOS 上，很多企业都用它们的 logo 来替换首页标题栏中的文字，但是在 Android 设备上这不是一个好的主意。状态栏(显示你的网络、电量和时间信息)是系统组件，你不需要考虑设计它，只要确保它们不会对他人造成误解就好了。

4. 导航

或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单，Android 用户们通常在这个菜单内进行跳转。而且在整个 App 中，这种体验是一贯的。Apple 的导航样式更倾向于 tab bar，它位于屏幕的底部，并且以一种很简单的方式实现上部内容的切换。当你设计 App 的结构的时候，你可以为不同的平台设计不同的导航样式。

5. 要不要用卡片式

在 UI 设计中，卡片正逐渐成为一种主要的 UI 设计样式，它们可以应付多种情况，而且给用户提供了一种能够呈现有效内容的便捷方式。视觉上，卡片非常适应于 Android 的 Material Design(它事实上源自于纸张的灵感)。使用阴影和卡片之间的合理间距能够创建一种自然的外观。

在 iOS 上，使用卡片设计需要更加的小心谨慎，尽管一些大型的 App，诸如 Facebook 和 pinterest 的确使用了一种略微偏离 iOS 视觉规范的设计风格。Instagram 使用了一种完全扁平化的设计风格，尽管从结构的观点上看，用户的每一条推送都能被视为是一张卡片，instagram 的设计很值得你去花时间揣摩，它是如何遵循 iOS 视觉规范的。如果你要在 iOS 平台上应用阴影，你最好小心谨慎，尽量使得这些阴影不是那么的明显。

6. 排版

iOS 系统上的默认字体是 Helvetica Neue，在 Android 上则是 Roboto。尽管这两种字体在外观上有显著的差异，但是这两个字体的尺寸却是近乎相同的。如果你想要在设计的时候节省时间，那么用一款字体就可以，但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时，我建议你还是同时用这两种字体测试效果。

如果你想要精益求精，那么你就要对不同平台上的设计规范更加注意。比如如下几条：

Android 的 MD 设计需要用到更多的空格来进行布局

在 MD 中字体大小的变化会更加多样

在 iOS 上，字体没那么多大小差异，但是在字体重量上(Font weight)有更多的变化，同样允许你创建主次结构

两个平台都使用比较细的字体来现实正文内容，然而，在下面的例子中，Android 使用了轻(Lighr)和常规(Regular)字体，而 iOS 使用了粗体(Bold)和常规字体

这是一个非常简单的例子，向你展示了排版方面的一些细微的不同可以导致印象上的巨大差异——你能很快分辨你是在用 Android 手机还是在用 iPhone!

7. 网格和触摸元件

iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。

在最近的项目上，我发现遵守 Android 的这些设计规范会更加安全，因为大一些的 48px 的按钮在两个平台上都表现良好，而且 MD 的规范更加全面，还经常更新。不管怎么说，你都应该在设计中使用网格，但是我们发现定义更加明确的 Android 网格会更好用一些。

浅谈iOS APP设计规范-按照iphone6尺寸

现在iOS app 的尺寸也变多了，要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配，以前一般用的是iphone5的尺寸，iPhone6 plus出现后，iPhone6尺寸成了大多数设计师的选择。

一、iPhone6的界面布局是：
屏幕是4.7英寸的，设计稿的大小750x1334px

☆ 状态栏(status bar)：就是电量条，其高度为：40px；
☆ 导航栏(navigation)：就是顶部条，其高度为：88px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；
☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

二、关于iPhone6的图标的尺寸是：

☆导航栏的图标高度为44px（绝大部分功能按钮）左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。
☆关闭按钮34px*34px，返回按钮26px，简单笔画图标40px。

三、常用的可点击高度-登陆框、密码框、功能列表等，统一设成88px。

四、搜索栏、输入框、评论框、地址框的高度，在iPhone6的原型图上，统一设成58px或60px。

五、在iPhone6设计稿中，界面元素之间的常用距离。

常用间距-亲密距离：20px（与边缘距离）；疏远距离：30px；
其它距离-10px，44px等；
区块间隔：30-40px。
A、疏远距离：比如，改图标距离手机屏幕最左边的距离；
B、亲密距离：比如，左边图标与右边文字之间的距离。

六、黑白灰颜色常用的数值是：

① 文字黑色#333
② 文字深灰色#666
③ 文字浅灰色#999
④ 边框浅灰色#e5e5e5
⑤ 背景淡灰色#f2f2f2
⑥ 按钮背景纯白色#ffffff

一、注意事项

1、在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。
2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。
3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配

二、界面中文字选用的规则

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式，网页中会有常用的几个字体。
以下是在72像素/英寸下的规范

移动端常规字体
IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好， 方正兰亭黑和方正黑体简 、方正中等线也运用的比较多。

三、字体的大小

1、导航栏的文字大小是36-38px；
2、标题字号：32px ，34px；
3、内容区域的正文文字大小是：28px，30px；
4、辅助性文字：20px ， 24px，26px；
5、标签栏（或主菜单栏）的图标下方的文字大小为20px；
6、终极原则：不大于所在要件高度的一半;
7、行间距：字号的1.2-1.5倍。
下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小：