ios设计规范-基础篇

前沿：

       作为 一名刚刚踏入设计行业的小白来讲，希望用我的一点知识和浅显愚见可以帮助到一些设计同好们，也希望借此能够更好的总结经验提升自己。

        我们作为一名UI设计师，为什么要去注重规范？那么在讲规范的时候，我觉得生活中秩序也是非常重要的，以下图为例，良好的秩序能够给我们这个房间带来一些更加美好的感觉，如果杂乱无章排列的话，你看在视觉上是不是非常之杂乱。

       作为一名UI设计师我们一起来观察一下以下两个界面，如果我们单纯地观看它的秩序和规范的话，左右哪两个界面，对我们来说，在观看体验上会更加不错呢？答案非常明显，很明显是右侧，无论是在文字排版，还是在留白上，还是在一些模块之间的规范上都呈现出一种秩序感。

      所以，站在我们ui设计师的角度而言，设计规范对于我们做设计来说有什么作用呢？

《规范的重要性》

       1、避免我们犯一些常规的基础性的错误。

       举个例子，ui界面设计中的正文文字字号大小通常是多少呢？通常控制为：26px、28px、30px，有了这个规范我们就不要去尝试18px行不行，20px行不行，所以说一个稳定的规范，可以避免我们很多错误也可以节省更多时间。其他诸如安全页间距、搜索框大小等我们都有一些经验性数值，可以直接使用。

       2、提升工作效率

通常我们在设计一款产品时是一个团队进行协作。一套稳定可靠的设计规范就像一份说明书一样，大家按照说明书去制作就会节省很多沟通时间。

       好了，我们在ios设计中需要遵循哪些设计规范呢？看下图：

       1、尺寸       常见尺寸有：有iphone5为代表的640*1136px，以iphone6s为代表的750*1334px,以iphone7为代表的1242*2208px，以及以iphonex为代表的1125*2436px。当然，除了这些页面尺寸，我们还应该牢记页面三要素的尺寸，既状态栏、导航栏、标签（tab)栏。

       在这些页面中，iphone5/5c/5s、iphone6/6s又被称为2倍图，其三要素尺寸分别为：状态栏高(即含有电量、时间的那一栏）：40px,导航栏高(中间通常放标题文字，两侧放操作说明）：88px,底部标签栏高：98px。既然iphone5和iphone6同为2倍图，所以其页面三要素也是一样的。

     （ps:以下介绍中，iphone5缩写为i5，ipone7缩写为i7，其他iphone机型也是如此）

       同理：i6plus\6splus\7plus\7splus为三倍图，i7状态栏高：60px，导航栏高：132px，标签栏高：146px，同时我们也可以发现，同为页面三要素，i5与i7的倍数关系为1.5倍，如：状态栏，i5为40px，i7为40*1.5=60px。

需要注意的是，ix的三要素尺寸与i7相比，导航栏与标签栏尺寸是一样的，分别为：132px，146px,状态栏为88px，除此之外，还多了一个home indicator栏：68px，以及上下两侧还多出了一部分空间，因为需要留给屏幕传感器。

       2、字体

       ios设计中的标准字体为PingFang。

       合理使用一些特殊字体。

       在上面这幅图中，可以很明显的区分出使用了DIN数字字体的页面对用户来说更突出一些，在字体层级的使用中，更多常见于banner的绘制。

       注意：字体使用的前提一定是没有侵权的字体，这个很重要！！

       3、图标

       上图我们可以看到，同样为图标，为什么图标栏的图标尺寸会比导航栏的图标尺寸小呢？这和图标的定位功能不一样，相比底部标签栏的图标，在手势帮助下导航栏的图标点击频率要小、图标数量也少，因此同为图标，标签栏的图标尺寸要小于导航栏尺寸，同时，若图标尺寸小，我们在输出时可以增加可点击区域，这样也能使用户点击更为顺畅。

       4、按钮

       按钮设计一定要考虑按钮的多态设计，即按钮的多种状态:默认状态、点击状态、禁用状态、忙碌状态

       那么如何设置呢？通常情况下，默认状态为主题色、行为色或者情绪色、行业属性色，点击状态可以用默认状态+30%~40%的黑色（目得为让其暗下去），禁用状态为灰度背景，忙碌状态为默认状态+loading图标。

       5、命名

       因为UI设计行业不同于其他实体行业，当你把这个界面做完的时候，其实并不仅仅是结束，可能是开始，因为做完之后我们还要导出切图标注，包括这个稿件在上传上去之后，要跟踪一些线上的数据反馈来验证这个设计思路是不是正确的，拿电商来说，把这个店装修完，你要验证一下这个店面能不能进行下去，这个店每天的日流量怎么样，页面转化率是多少，做ui界面也是类似这个道理，界面设计完成之后，我们需要完成一份命名，有些公司并不会注重命名规范，而且每一家公司的命名规范也可能是不相同的，以具体所在公司为准。

       下面说的这个命名规范是一个默认的通用规范，如下图

       通用规范组成为：页面_组件_描述_状态@倍数，哪些iphone机型是属于两倍图？比如说i5、i6，哪些iphone机型属于三倍图呢？比如plus版。通常在切图输出是一般标注为英文稿，但具体是采用英文稿还是中文稿，具体还是要看公司规范。

       为什么会采用些英文命名规范的，因为我们稿件上线的时候都是通过一些英文代码软件来完成客户端的代码撰写，在这些代码撰写过程中，我们需要用到一些英文标注的切图命名。页面英文是page，但命名时怎么会写成common？怎么理解呢，可以看到她是底部标签栏，但是他也会出现在多个模块中，比如分类、服务、购物车等，所以这个页面我们也叫他是通用组件，即common,这是哪个组件呢？是tab栏，描述我们则可以理解为首页的英文翻译或者其英文名字，即homepag，那么这个图标是什么状态呢？被选中状态selected，输出几倍呢？2倍，即@2x，如果是3倍的话就是@3x，中间则通过“-”连接。

        以上只是个人的一点愚见，哪里写的不对还望大佬多多指教。