作为iOS开发，我是这样审核UI稿

原型，UI稿，后端接口是我们开始iOS开发时的3大输入物料，它们缺一不可。当任务正式交到我们手里之前，必须要对输入的原料进行审核。这里要讲的就是对UI稿的审核。

设计师的输出分为：效果图、带标注的UI稿、以及切图。我们这里直接对京东首页的截图作为例子，进行分析。

分析页面特点和构成

非常明显的特点是一张列表；而每个单元里包含图片，商品标题，价格，自营标签（有的没有），秒杀标签（有的没有），“看相似”按钮。

核对接口返回的信息

核对接口要确认返回的数据信息是否完备了。
接口返回的一定是商品数据信息数组，而且包含当前页数，总共页数，每页数据条数的信息。
对于其中某一条商品的数据，必须包含有商品图片信息，商品名称，商品价格；还得考虑，什么时候在标题前显示“自营”，什么时候在价格后面显示“秒杀”，这样的信息一般都是通过读取信息结构体中的条件标示来决定。最后就是按下“看相似”按钮后调整到的页面时需要传入的信息，比方说如果是查询相关关键字的商品，那么按下按钮后，查询哪个或哪几个关键字的商品列表。不像商品名称和商品图片，数据信息中给出什么，就显示什么；”自营”，”秒杀”，”看相似”这个几个UI元素是要对相关信息进行解释后再显示到页面上，这里包含了一定业务逻辑。

UI元素的布局：

经常会出现UI效果图非常漂亮，最后客户端展示的效果却不怎么样。原因在于，1，效果图上设计师会用特别漂亮的图片作为商品图片，最后App里的图片却是用户自己随意上传的。而且图片与图片之间风格不搭调。2，设计师在布局师会有意将布局做的整齐划一，比方商品标题的长度都是一样。实际中，商品标题是长短不一，中英文混杂。这也是我们在审核UI搞时要注意的一点。也就是说有限的几张效果图是无法穷尽所有可能出现的情况。而且设计稿一般针对iphone6的宽度设计（为什么是iphone6，会在以后的文章中说明），所以在其他屏幕下的如何显示，也需要考虑。审稿时，要考虑每个UI元素的占位、以及UI元素间的相互影响关系、留意可能会出现的空间干涉问题（下面会提到）。
先查看商品图片的布局，考虑适配屏幕宽度和以及图片裁剪的问题（有点小复杂，会在以后文章里说明）。
接着就是看商品标题，这个标题可长可短，有可能一行或两行，但最多是2行，如果超过两行就会截断。商品标题是紧接着商品图片开始显示的。显示的宽度是，（屏幕的宽度- 单元格间空隙）/ 2。
然后就是价格的显示了，这里会有两个需要考虑的问题。占位问题：如果商品标题很短，只显示一行，那么价格是接在标题下显示？还是说它固定里底部一定距离显示，不受标题的影响？（提供2张图片说明）干涉问题：如果价格特别长，是不是会和“看相似”按钮重合了？占位的问题，通过和设计师交流，确定是方式2。干涉问题：如果在iphone5s上，可以确定如果在价格很长，在带有“秒杀”标签的情况下，这一行的UI元素们之间确实会出现干涉，这是要设计师重新考虑的地方。干涉问题本质，往往是因为横向上放了2个以上的UI元素，而且元素的占宽度不可确定；避免这种情况的最后方法就是设计师尽量使用流式布局。
“自营”标签可能出现也可能不出现。出现的情况下，商品标题会接着标签后开始显示。
“秒杀”标签会紧紧跟着价格出现，所以它在横向上的出现的位置是不定的，但是宽度是确定的。这行会出现的问题，及时干涉问题，见上。
“看相似”按钮，始终显示在单元格的右下角落，它要注意的是触控域的大小。

交互效果

交互效果指的是用户在屏幕上动作时，页面做出的反馈。这里包含了触控动作的类型，以及触控区域大小。
列表的交互：列表往上推时，标题栏颜色会从逐步从透明变为不透明。这个交互称作为动效，使得用户感知到页面上的变化。其他比方，松开列表，会有类似弹簧的弹性回复的效果，有种接近真实世界中物理效应的感觉。
按下”看相似”按钮，会打开另外一张商户列表。特别要注意小按钮的触控区域大小，苹果用户交互标准上给出的建议是，至少是44*44pt，这是UI设计师需要了解的常识。在开发中，如果按钮小于44*44pt，需要人为的扩大其触控区域。（会在另一篇文章中说明）
如何打开商品详情页面？按下图片区域，还是按下整个单元格区域？如果UI稿上没有说明，则要询问设计师。

写在最后

实际上京东的首页是非常复杂，列表由好几个版块组成，还有标题栏以及底部的tab切换页面。但再复杂的页面，也可以分成一小块一小块来分析。只要按照以上的4个步骤来分析，一可以尽早发现需求，UI稿或接口中的问题；二可以了解大致的工作内容；三可以对开发中的难点、盲点做到事先心中有数；开发的顺利进行也就是预料中的事了。

这里只分析了列表页面这个特殊的展示形式；此外还有注册页面（输入多，接口多），详情页面（特效多，信息组成复杂）… 多多总结开发中遇到的典型页面，并对此有深入了解，可以做到以后遇到任何页面都心中不慌。

当我们确认好UI稿后，就要做到尊重UI稿，一切已UI稿作为标准。最后开发出来的页面，会是对UI稿的像素级拷贝。（对于如何核对UI稿，会在之后文章中说明）

最后留个小问题：截图中，”自营”标签+商品标题的布局是如何实现的？

找一件长长久久的事，长长久久的做下去