摘要: 懂设计的程序员携干货满满的《程序员生存指南》系列重磅回归！设计师说完了前端交付标准，这次来听听前端开发怎么说！
大家好，是我没有错，
时间和开发虽然带走了我部分的头发，
但却不能带走我大脑里设计的知识。
今天，就让我，一位懂设计的程序员，为大家分析一下设计与开发的异同，为促进同事友好相处做贡献。
一、设计与开发的不同
设计与开发自然是大不相同的，否则我也不会弃设计从开发。
具体而言，又可以从两个角度进行分析。
首先，是产品与客户的角度。
设计的角色是清楚了解产品需求，就是需要知道设计什么、用来干嘛、有什么功能；因此需要频繁与客户沟通；主要任务就是满足已知的需求和客户期望，所以在设计阶段思考的内容主要是如何在遵循一定规范和美学的前提下将需求和期望转换为实际。
总结来说就是甲方爸爸！
而开发由于不与客户直接沟通，主要面对的是需求和设计稿，所以主要任务是实现设计稿的需求与客户对于设计稿的期望，思考的内容主要是如何开发实现功能，优化用户体验。
总结来说就是设计爸爸！
其次，是公司与内部的角度 。
对于内部角度来说。设计的主要任务是理解并说服客户，思考的内容主要是如何引导客户选择设计稿以及减少返稿。（坑甲方爸爸）
而开发的主要任务则是减少bug提升代码复用率，思考的内容主要是提升开发效率与实现更复杂的功能设计。
以上就是我理解的设计和开发的不同点。
二、设计与开发的联系
而说到设计与开发的联系，实际上作为项目组不可或缺的两个重要组成，设计与开发本身就是联系紧密的两个职业。
其次，与客户密切沟通的设计师，自然也对需求了如执掌，而开发几乎不与客户沟通，在这种情况下设计师和设计稿以及需求文档就成了开发了解需求的唯一途径。
再者，作为开发人员，很少有会使用PS等工具的，所以设计师也就成了开发的
切图来源。
同时由于【100%还原设计稿】的难度，开发完成后设计往往掌握着开发的生死大权。
三、举一个例子
1）关于切图
例如前文提到的[设计是开发的切图来源]，以下这张图片曾经困扰后端同事很久：
原因是设计稿与切出来的图片都是带有阴影的，而阴影的存在导致图片的实际内容与边框并不等宽，于是就像下图一样总是留有边距；
而在编写代码时为了确保图片不会拉伸变形，图片通常设置为根据实际手机尺寸等比缩放的，此时边距就成了一个无法测量的边距。
虽然图片直接带有阴影确实会省很多事情，但是图片实际边距无法测量反而导致更加无法调试。因此最后设计师把图切成了这样：
网页呈现上也就顺利实现了理想效果:
2）关于阴影
在设计稿制作中，我们有两种方式来制作阴影/投影；第一种就是利用图层样式来处理，直接用fx添加投影。
对于开发来说，ps可以直接根据调整的数值生成代码样式，直接复制就可使用，即使上传至蓝湖也可以直接生成投影的代码，拿来即用；
而第二种是在原图层下再复制一个图层的方式，给下层添加图层蒙版羽化生成投影。
这样的方式生成的投影在设计的角度来说会看起来更加自然，而且也易于调整修改。但是开发没办法复制样式代码，这类投影最简单的开发方式就是把下层阴影图层导出图片，然后再利用代码坐标定位至图层一的下面。或者使用方式一的投影代码，一点一点调到与方式二差不多。
以上就是本期头条的主要内容，作为两个职业要求大相径庭的职业，设计与开发自然存在许许多多的差别，但不可忽视的是，它们往往也存在许多相同点。（比如都会头秃）
求同存异，让工作更加顺利！
感谢您的浏览，下期再见！
閱讀更多 SIMPLEBY熙派 的文章
