个人工作一年对iOS设计规范的理解

1.关于屏幕尺寸

上图所显示的就是目前为止各机型的屏幕宽高尺寸（5S同5，6S同6 ，6S Plus 同6 Plus）

这里需要解释的是这个屏幕模式 

之所以会有屏幕模式的概念，是因为苹果从iPhone4开始，提供了所谓的Retina屏幕，这种显示技术的优势就将更多的像素放在在同一个物理像素点上显示。

举个例子，iPhone 3GS 和 iPhone 4，两者虽然屏幕物理分辨率都是320x480，但是由于采用了Retina屏幕，iPhone 4的分辨率达到了3GS的两倍，但是却不会像传统windos本那样，分辨率越高，图标窗口什么的就会越小导致看不清。

因此，屏幕分辨率 = 屏幕尺寸 X 屏幕模式

也因为这个原因，在iOS开发中，才有了所谓的二倍图，三倍图的概念

例外：iPhone6 Plus 和 iPhone 6s Plus 的分辨率其实是  1980 x 1080  也就是说它的屏幕模式是 2.60896倍，但是如果你去切一个 2.60869倍的图，可能会被打死。因此，苹果为了保证各位设计师的生命安全，就稍微做了一下调整，你只需要给出一个三倍的图。苹果会自动帮你调整为2.6089倍。

2.图片尺寸

刚才说完了屏幕的尺寸，我们来看一看图片的尺寸。首先来看这么一张图

从iPhone 5开始，虽然屏幕尺寸有所不同，但是宽高比例并没有发生变化。

因此我们其实可以用一张图来满足iPhone 5以上的所有机型。

而一般情况下，这张图的二倍图我们取iPhone 6 的尺寸为模板制作（750 x 1134）

但是这个时候 6 Plus依然会有特殊情况，那就是三倍图应该按照哪个屏幕的三倍来

答案是：都可以，建议使用 2208 x  1242，尤其是在切启动图和引导页图片的时候。当然，你切成  2001 x 1125也可以，反正比例一样，实际使用上并没有什么差别。 

那iPhone 4怎么办？ 

坦白地讲，在iPhone 5 都已经停产两年的情况下，iPhone 4其实完全可以不考虑。而且，就算要考虑，也是程序员该头疼的事情，跟UI关系不大。

3.图片命名

首先是我们的一个重要知识点：

iOS的图片使用策略是向下查找。

也就是说一个 iPhone 6 Plus在使用图片时会优先寻找三倍图，如果该图片没有提供三倍图，那么它会退而求其次寻找二倍图，如果连二倍图都没有，那么他会寻找单倍图。如果连单倍图都没有，那他当然什么都不会显示。

因此，由于iPhone 4开始都支持Retina屏幕，因此我们无需提供单倍图，又由于这种向下兼容机制，在某些特殊情况下，我们也可以只提供二倍图，不提供三倍图

那么这种“找图”怎么实现的呢？

答案就是图片的名字。因此，规范的图片命名格式尤其重要。

当程序员在写代码的时候，他们是如何管理图片的呢？

看到那个1x 2x 3x了吗？它们分别代表一倍二倍三倍图

在切图时后缀的 @1x @2x @3x就是这么来的      当然，有时它也会被写成 @default @667 @736

不过无所谓，总之你要在图片名字的后缀标出这张图属于几倍图。

然后是前缀，一般情况下，为了让程序员在茫茫多的图片中找到他们需要用的图片，图片前缀通常采用三级命名，使用_链接。

综上，一个标准的图片命名为 social_detail_refresh@2x.png   它表示社交模块详情页面刷新按钮的图片。

另外需要注意的四点：

1.不要有空格！ 不要有空格！不要有空格！ 重要的事说三遍，不然被程序员打死不要来找我

2.命名尽量全用小写，为了大家用起来都方便。

3.命名的时候问下你们的产品经理或者程序员，他们给页面和控件起的名字用的是哪个单词，统一起来后大家都方便

4.同一张图片请尽量保证只有后缀不同。

4.图片格式

iOS默认支持jpg和png格式。切图建议全切png。

1.png画质更好，且有透明通道，有更丰富的展现效果，很多时候程序员写一对代码才能做出的效果一张图片就可以很简单的代替。

2.苹果专门针对png图片的显示压缩做了处理，不会导致安装包过于臃肿，在显示速度上也比jpg略胜一筹。

3.更重要的是，iOS程序员在使用png图片时不需要加后缀名就可以直接使用。jpg则不然。

5.常见控件的注意事项

下面的截图是我们常见App的结构。

其中，红色框起来的叫做状态栏，也叫 StatusBar   高度为20

蓝色框起来的叫做导航栏，也叫NavigationBar，高度为44

绿色框起来的叫做标签栏，也叫TabbarBar，默认高度49

在实际应使用中，我们经常会给导航栏或标签栏设置背景图。这时有两件事需要注意

1.在给导航栏设置背景图片时，图片高度必须是（注意，是必须）44或64的倍数，即二倍图就是88或128，三倍图就是132或192。宽度无所谓。 但高度为44倍数时，背景图片只对导航栏生效，当背景图片高度为64倍数时，会同时对导航栏和状态栏生效。

2.在给标签栏设置背景图时，高度必须是49的倍数，二倍图就是98，三倍图就是147。宽度不限 

在给标签栏设置标签图片的时候的注意事项：

1.如果你的图标是上图中比较传统的图标，且高亮状态下只有有线条的地方亮起，那么在切图时每个图标只需给一份二倍图和三倍图，无需区分选中和未选中状态。程序员可以很方便的处理。

2.如果你的图标在高亮状态下希望没有线条的地方也亮起，那就分别提供选中和未选中状态下的图片。

6.字体大小

老规矩，先上图

上图是iOS和PS字体的对照表。

如果使用sketch（个人是sketch的忠实粉丝没有用的小伙伴的话可以尝试的呦）的话，其给出的字体和iOS是一致的。

但是不管用PS还是Sketch，都需要注意的一点是。iOS程序员在开发时，通常用Label来显示文字，一行字体大小为20的文字一般需要高度为22的Label去展示，如果多行的话，每行所需的高度有大概是在25左右。因此，在设计时，文本框要留出足够的宽高去展示问题，否则iOS端在处理时会非常麻烦，基本都会造成和设计稿有几个像素的偏差。（最好在输出标注的时候表明文字的显示范围）

那具体要留出多少宽高呢？我没有查到这方面的文档，不过按照我的个人经验最好是每行文字上下各留1.5。这样基本不会出问题。

7.提供的信息越详细越好

由于设计师更多的是“画”出每个模块，但是程序员要用系统提供或自定义的控件去实现这种效果，所以设计稿中怎么去分块也是个问题。这里举个例子。

在上图所示的标注图中 

设计师忘了标注模块1中 pageContol（也就是那个展示页数的小白点）的位置和大小

也忘了标注模块三里中间那个半透明标题层的位置以及标题的字体大小

还忘了告诉程序员这个图片的圆角应该设置为多少

个人认为这是认知差异，但是其实程序员在做这些界面的时候也是一层一层叠加起来的。所以，尽可能详细的分块并提供足够的信息能让实现省下很大力气。

如果要求更详细的话，上图那个 换一换 按钮，左侧的刷新标志，如果希望点击时候有旋转效果，那就和按钮分开设置，如果不需要什么效果，那就放到同一块。总之，尽可能的在设计稿中提供更多信息给程序员。否则问来问去大家都很烦。

以上内容均为个人经验如有错误欢迎大家提出改进  谢谢

最后感谢我们的程序员强哥帮助和整理的数据