壹

大家好，我是切图仔小姚，负责本次项目的前端开发。

目前我们的项目还停留在需求分析与设计阶段。软件开发中绝大部分环节是可以并行的，例如前后端代码编写、软件开发与测试等等。但是需求分析与原型设计是个例外，没有产品经理的文档与原型，目前这个项目只能先停一停。

大家心中都有数了，这口大锅，产品经理背定了。

贰

但是，考虑到逼急了的产品经理报复性增加奇怪需求的可能性，这件事我们忍一忍也就算了。

今天就由切图仔小姚来与大家唠一唠。

我想和大家分享一下我最近学到的一个东西（值得你们划重点）：项目成本的计算方式。

以我们这个团队为例，现在产品经理因为人事变动暂时被租借到保安部门去干活一周。作为管理者，必须跟保安部门结算一下项目经理的租借费用，大家在心里合计合计。

..........

10秒钟思考时间到。

大部分同学心里应该有了答案，我们用产品经理的日薪（40块）乘以7（一周）得到280块，算上利润20块总计300。

你们也是这个答案吗？

几天前我应该也是这么算的，但是现在我变强了！

回到这个例子中来，作为工作链第一环的产品经理缺席，这带来的成本损失真的就这三百块吗？上文我们提到的前端开发与后端开发它是可以并行的，并且处于较靠后的环节，现在开发缺席了，影响最深的是测试的同学。在没有其他项目的情况下，美工与产品经理仍可以正常运转，测试的同学写完测试用例是不是可以偷偷的打开和平精英了？

在计算成本的时候应将这些也因素包含在内。

当然了，排期和控制成本是项目经理的活，专业的事情就交给专业的人来做！

叁

前端开发，又称切图仔，是产品呈现的缔造者与守门员。

无论是产品经理的高保真原型还是美工的设计稿，在很大程度上它都是一个过于理想化的艺术品。

美工同学设计的专业性是我们我们远远比不上的，在惊叹设计作品惊艳的同时我们要尽全力去将它完美的呈现出来。

完美有些夸张。至少得看着舒服，用着流畅（最低标准）。

说的有些空洞，举一个栗子：

这是从实际项目中截取的一张效果图。

大家好好对比一下左右两边。

非常明显的右边相较于左边多了一个标签并且背景颜色不一样，抛开文字真的就两点不同吗？

往深处走一走，分析：

1、有工作经验的同学可能考虑到，不同的卡片标题长度不一致。出现一个标题过短一个标题过长的情况是肯定有的，将卡片高度写死或者随文字的长度自适应，布局可能会变得很诡异，达不到最好的呈现效果。（解决方案：限制文字的显示行数，超出用“*”替代）

2、卡片中的最下面"江苏新闻  04/26"，按照设计稿设置左边文字与右边文字的margin-right值，那么出现文字过短或者过长也会达不到效果。（解决方案：使用flex布局，避免设置margin值）

3、卡片的最下方图标，官方的一个Logo在我们的印象中似乎所有的Logo都是正圆，但是我们无法排除Logo是一个长方形的情况·，针对不同的形状如何让图片完美的呈现这些也是我们需要注意的地方。

再往下，还有好多好多值得我们考虑的问题。

作为前端，我们要把可能出现的问题都尽可能地考虑周全然后完美的展现给用户。

当项目上线，前端修改页面也可能会因为浏览器缓存的原因而无法达到预期的效果。

并且总是用让用户清理浏览器缓存的借口真的是太Low了。（用户没有清理浏览器的义务，但是任何一个开发者都有预防问题出现的义务，这是我们的工作）

清理浏览器缓存不是我们推脱的借口。

肆

工欲善其事，必先利其器。

刚出道那会儿，我们都在用一款叫作蓝湖的网站（目前已经收费），本次项目的所有设计稿后续也会同步到蓝湖供大家学习使用。

在这里讲并不是呼吁大家去使用蓝湖（虽然它蛮好用的），前端开发我们可以使用工具但不能依赖工具。

一切必须以设计稿为准！！！

血的教训告诉我，目前蓝湖还无法替代Ps在前端开发中的作用。某些情况是存在偏差（亲测），追求0像素偏差还原的我无法接受。

它更多的时候可以用于效果展示，前端开发还是推荐使用Ps。

同学们不要害怕，熟悉PS其实也没多复杂，掌握切图测量即可。

后面我会单独用一篇文章将这次开发所需要的软件安装包与教程一起分享给大家。

伍

如果说Ps是从菜鸟必过的门槛，那么学会压缩就是你真正走向成熟的标志。

其实我是想讲一讲这个浏览器在打开一个URl之后发生了什么的，篇幅原因，下次吧！

反正记住一点，项目中使用的图片（字体等各种媒体文件）如果体积过大，加载的时候会比较慢影响用户体验。

作为一个前端，应该始终把“0像素偏差还原”与“极致的用户体验”放在心里（我放在嘴上就ok了）。

学会压缩文件是每个前端的必经之路。

这里我推荐几款软件与网站：

1、熊猫压缩（https://tinypng.com/）

只需将文件拖入图片中的框内，由于网站限制一次性不可以压缩超过20张图片或者超过5M的图片。压缩的图片不会失真并且压缩效果比较好。

压缩完下载即可。（缺点就是需要下载）

2、PP鸭

美工同学推荐的一款软件，我将压缩包放在网盘的链接里面（抱歉放不了，原因你们懂的），压缩图片不需要下载会直接覆盖原先的图片压缩效果也比较好。缺点就是不是正式版，每次只能压缩10张图片。

3、Fontmin

为了追求美感与艺术性，美工同学可能会使用一些特殊的字体。如果一次项目只有几个字使用了特殊字体，那么导入整个字体包是非常难受的（比较大）。这款软件就是为了解决这样一个问题，我们将项目中需要的字体包拖到左下角，然后在的输入框内输入项目中需要使用特殊字体的文字。

就会生成符合我们需要的字体包（实现要求体积小），

注意不要使用中文命名哦！

陆

高中，我用三年知道天赋决定上限。有时候不得不承认天赋型选手确实横。

大学，四年的时间让我明白人努力可以决定自己的下限。

工作后，大佬教会的我第一句话就是：以绝大多数人的努力程度之低，根本达不到拼天赋的地步。

我始终坚信这一点。

前端学习，你真的努力，每天都会超级难，但是一年一年会变得越来越轻松舒服；不努力，每天都很轻松舒服，但是一年一年会变得越来越难。努力和遗憾，遗憾会更让你操蛋揪心。

希望写的东西没有浪费各位这几分钟宝贵的时间。

再次感谢各位的支持。

最后了，湖人总冠军！

我是姚大炮，90后程序员，希望能够永远年轻永远热泪盈眶。晓看天色暮看云，行也思汝，坐亦思汝。关注小姚，和你一起看云海翻涌江潮澎湃。