自从iOS退出依赖,png就被用来制作图标。这已经是如此简单了,那为什么还会有人会要考虑其他的解决方案呢? 一般的制作图标的工作流程是这样的:“我想要新添加一个按钮,这个action需要一个图标,设计师把图标发email给我,我们就完工了.” 如此设计师把这项工作安排到了他的工作流之中,然后按部就班完成了这项工作,之后你就会受到一封Email,里面有2个png文件(retina 和 非 retina 屏幕) 等等... 这个图标需在改改颜色,以满足我们想要按钮呈现高亮状态的需求. 因此你重复了上述流程,并获得了另外2个png。实际上,我们还会继续需要让这个按钮在某些特定的情况下呈现禁用状态,因此我们又会需要禁用状态的图标. 好吧,iOS现在又支持@3x分辨率的了, 因此我会需要再输出这些图标及其各种状态的文件… 而设计师现在很忙,短时间内不能为我完成这项工作了?! 如今不能获得这些资源文件的我如何让我的应用适配新的屏幕尺寸呢? 任何曾今为那些以开发移动应用为目标的团队工作过的人,好像大都遇到过上述其中一个或者全部的状况. 它可能会是非常令人沮丧的,也会让你的团队白白浪费许多时间. 在Craftsy这里,我们向后退一步,看看我们尝试真正要去完成的是什么,还要看看我们是否错失了另外一种可能的更好的方法. 而当我说后退一步的时候,我的意思是做一次大的退步. 我们尝试要去完成的是什么?目标:在屏幕上绘制一个图标,使其像素完美的适配那个屏幕的分辨率. 在最基本的层面上,这个目标就是我们现在正在做的. 然后问题就会是,我们是否使用了最有效率和更加务实的方式完成了这个目标? 让我们来看看我们的选择。我们可以继续去构建并维护一个相当简单的图像库,并让从开发和设计两头都承担保持图像库更新的工作量. 或者我们还可以采用一种动态的方式,只去踏踏实实的处理绝对必要的变化和工作,并将时间专注的花在其它问题的解决上. 进入PaintCode, 它是一个 OSX 应用程序,其名字正如你所预想的其功能. 它能解析从PhotoShop创建或导入的矢量图片资源,然后将其”绘制“成一个编码库. 我不会花太多时间向你推销 PaintCode, 我会建议你上网试试他们的在线解决方案. 不过未来在完成移除我们对于图像的依赖这项任务方面,会证明使用它是必要的。看待PaintCode及其价格的一个好的方式就是,就好像它是为你的团队雇佣的一个开发者. 你要问你自己的是 “你会需要雇佣一个开发者,它可以编写完美的可控代码,却只需要开发应用成本负担一次性的花费?” 好了,那就是我所想的. PaintCode, 正在改变开着人员同设计师协同工作的方式.设计师们其实拥有的大量的诱人数据,这些数据都隐藏域他们的photoshop文件之中。这些数据被称作矢量图形. 为什么矢量图形很重要呢 ? 简单来讲, iOS的世界里现在正面临的,与分辨率和不同状态效果有关问题,在设计界早就都解决了. 当设计团队创建一个图标的时候,他们很可能会采用一种基于矢量图形的,使用了线条和贝赛尔曲线的方法. 这就能很好的解决创建“分辨率独立 ”的问题. 那样如果我们需要适配屏幕尺寸为1000dpi的图标,或者只是20dpi的缩略图,它都可输出来,而且看上去都是像素完美的! 那么我们就要问了,如果开发者可以简单的胜任这种现有的技术,会怎么样呢? 那就会使得我们不用再去过多考虑像素问题了. 虽然这常常成为一种可行的方式, 但和只是持续的绘制和输出图形比起来,使用编程的方式用代码绘制矢量图形需要花费更多的时间,直到 PaintCode 出现才让收益大过支出. 并且,大多数的程序员们都没有进行细节设计的好眼力,所以最终的成果大有可能不会符合预期. 因此,设计团队的存在其实可以促进 PaintCode Objective-C 文件的输出. 而通过管理起开发者和设计师间的所有这些代码,PaintCode一举消除了所有这些问题 ! 设计师只要将他的矢量图形从Photoshop导入PaintCode中,做一些小维护以方便同开发者的对接, 瞧, 开发人员现在可以绘制符合任何分辨率需求的图形资源了. 这一功能开始改变了设计师和开发者之间的沟通方式. 标准一旦建立起来,交谈的内容立刻从 “你能把资源发Email给我吗 ?” 变成了 “让我知道你什么时候把那个图标迁入了git ”. 有时候甚至都不要交流;设计师调整完图标之后,应用程序就会帮他把新的版本绘制出来. 那么是不是我只要买了PaintCode,一切就都会变得更简单了呢? 可叹的是,并不是这样的. 事情并没有那样简单,PaintCode仅仅只是一个工具,而你如何去利用好这个工具将最终决定你是否能成功. 而长远看来,将PaintCode和Xcode恰当的组合在一起使用,我们就能够省下大量和时间和美金. 下面我将会描述一下我们如何使用PaintCode实现对图标资源和图标不同状态的管理. 第一步 - 指定一个设计师能配合的方案开发人员必须是第一个参与进去的,并为团队设定好PaintCode如何为他们工作. PaintCode 可以加入变量,开发人员可以在最后把这些变量加进去. 我们首先要处理的就是图标的尺寸. 如果你使用的是正方形,而正方不需要两个维度数值(两个维度的值相等),因此图标很容易扩展 - 它们只需要一个维度. 因此我们想PaintCode新增了一个公共的(可以用编码复制) 数值,它被叫做 “size”. 从设计的角度讲,我们不能直接使用这个数值, 因此我们想PaintCode添加了一个表达式,来基于那个尺寸(size)计算出要绘制的区域: PaintCode: 我们只需要传入一个尺寸就行了,因为帧的原点总是会在 0,0. 现在,我们遵守的标准如下:
设计将需要符合帧的标准,而现在让我们假定所有的东西都是基于那个根帧被绘制出来的, 因此是可以无限扩展的. 现在,我们需要通过编写代码来改变图标的颜色。不幸的是,PaintCode当前还不支持直接传入颜色。不过,就像我之前说的,PaintCode是一个工具,一切取决于你怎么使用。要处理颜色,我们创建红,绿,蓝和Alpha4个值。在PaintCode中,我们就可以使用如下的表达式: makeColor(red, green, blue, alpha) 这样就可以在PaintCode中使用传入的颜色了。同时,我们的协议改成: 绘制的图标必须和代码库生成的颜色变量绑定。 好了,我们已经可以通过代码获取图标的尺寸和颜色。这种方法对于应用中一般的图标绘制很有用,不过对于按钮来说又该如何处理呢? 在iOS中,我们所熟知的按钮有4种状态,分别是Normal(常规状态),Highligted(高亮状态),Selected(被选择状态)和Disable(禁用状态)。从PaintCode的角度看,我们希望在设计和用户体验上能够展现出这些不同的状态。为了解决这个问题,我们添加了一个新的public参数,叫做drawType。有了这个参数,图标在绘制的时候就有了多种类型的选择。我们可以创建4个表达式来决定绘制哪一种状态: Normal |