IOS图标 HTML规范,IOS用户界面（UI）设计规范图表——APP设计师必看！

遇到APP设计问题

相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大 尺寸来设计？分辨率是多少？该怎么切图给开发……

下面的就分享一点点技巧，但也要给合团队在开发时的习惯。

苹果手机设备界面尺寸

设计图单位：像素

设计图分辨率：72像素/英寸

在设计的时候并不是每个尺寸都要做一套，一般用640*1136的尺寸来设计，现在 iPhone 6和Plus出来后有很多人会使用6屏幕尺寸来设计。我习惯使用640*1136，对Plus做单独的修改适配。

Ps：作图的时候尽可能确保各部分元素都是适量图(PS中的“快捷键U”绘制，或者 AI绘制)，这样更方便后期的切图或者尺寸变更。

苹果手机APP图标尺寸

苹果APP上的字体大小

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。

以下是在72像素/英寸下的规范

IOS：中文字体华文黑体或者冬青黑体，英文字体HelveticaNeue。

大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候， 字号大小换算是要除以二的。

下图是百度移动用户体验部(MUX)做过的一个小调查，可以看出用户在IOS App中可接受的文字大小。

我在设计中常用的字号

导航主标题字号：38-40px

在内文展示中字号：大的正文字号32px、副文是28px、小字20px

字号的大小需要根据不同类型的App进行设定，如果你有不确定的，就去截取你认为非常的好APP然后去看他的字号(针对你的项目)，也可以将你的设计在你的手机里 面进行查看，观察你的字号的大小(自己作为用户，体验自己的设计)，注意你的设计尺寸要是你的手机的标准尺寸。

这里推荐2款Photoshop设计效果实时在手机端预览的APP 首推是PS CC2015内置的一款APP——名为Preview。

上边这货就是Adober CC2015最新更新功能不过只能IOS设备上安装，要有苹果手机或者IPAD 具体怎么安装大家去找万能的百度哈 没有苹果咋办一接下来给你介绍一款安卓可用的APP。

第二款是腾讯开发的一款名为Ps Play的APP。

上边这货就是腾讯开发的PS设计效果实时在手机端预览的软件，可以在IOS上使用(非常成熟了)。也可以自爱安卓手机上使用(虽然只有一个测试版)具体怎么安装和使用方法大家去找万能的百度哈！

关键的切图

切图是APP设计中的一个重要过程，关系到APP的界面实现，及各种适配性还有各种性能。苹果在没6 Plus前，我们只需要提供两种图，普通图及视网膜屏幕图。

以640*1136(640*960是一样的)做的设计图的话就会好办一点。直接出设计图 上的原大小图标，比如我们命名一个图片叫img-line.png,我们绐开发的图就要改变这个名字叫img-line@2x.png就是在后缀名前加上@2x表示视网膜屏的图，iPhone4的还需要把这个图尺寸按比例缩小50%,得到正真的img-line.png。然后把这两个图移交给开发，iPhone6的图在规范里是与5s使用的是一样的，也是@2x图。有些UI则需要做适当的适配，比如拉长，拉高，这个开发会去做。

对于iPhone 6 plus的话范里绐出的是@3x相信大家也知道是怎么回事，但如果要使用PS放大的话，大家做图的时候就需要使用形状工具来做，放大后还需要仔细微调，这 里就不多做讲解

PS：在出可按的图片切图时需要注意图片的可按区域大小，有时图标很小，实际切出 来的放在上面，用手指是按不到的，我们就需要对图片单独处理，拓宽图片的有效区 域，这里是拓宽非放大，就是改变画布大小使图片尺寸面积扩大，使图片四周拓宽多余 的透明区域，从而改变可按大小。

例子：

颜色值问题

IOS颜色值取RGB各颜色的值比如某个色值，绐予IOS开发的色值为R:12  G:34  B:56绐出的值就是12，34，56(有时也要根据开发的习惯，有时也用十六进制)。

内部设计

1、 所有能点击的图片不得小于44px (Retina需要88px)。

2、 单独存在的部件必须是双数尺寸。

3、 两倍图以@2x作为命名后缀。

4、 充分考虑每个控制按钮在4中状态下的样式，如图：