前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属内推群，赢在新的起跑线。
第十四届|前端成长晋升专场，8-29 即将直播，9 位讲师(蚂蚁金服/税友等)，点我上车👉 (报名地址)：
正文如下
本文是第十一届 - 前端早早聊女生前端职业发展专场，也是早早聊第 74 场，来自淘宝的前端技术专家 — 夜翎 的分享（完整版含演示请看录播视频和 PPT）：
自我介绍
大家好，很高兴来到前端早早聊与大家分享我的职业经历。
先做个自我介绍，我的花名叫夜翎，大家都叫我小麻雀。我有一个博客（makaiqian.com），建于 2013 年，见证了我近 7 年的成长历程。从一位校园的女生，成长为一名前端技术专家。
我从 2015 年毕业，我就一直在淘宝做“互动”。
虽然一直围绕着“互动”一词，但我负责的业务和面临的挑战也在不断变化。**在业务上，从一开始的营销互动，到大促互动，再到游戏互动。**现在，我主要在做游戏互动这块。我做的项目可能大家平时无意间都见过，比如手淘的开屏动效，双 11 的揭幕，淘宝搜索出来的惊喜彩蛋，在朋友圈刷屏的双 11 互动游戏，以及让大家每天都去收菜的金币庄园，装扮我在淘宝的虚拟形象——淘宝人生。
同时，我担任着互动业务 PM 的角色，开始慢慢有越来越多的代表作。通过互动业务的实战，我也逐渐抽象出适合互动动效和互动游戏的解决方案。
分享大纲
我今天要分享内容主要分为两部分：
- 我的成长历程
- 五条有效方法
我的成长历程
先说第一部分，我的成长历程中，我会重点讲我成长经历的**三大里程碑。**从探索方向，到领域深度，再到突破自我：
- 探索方向：在探索方向上，如何和兴趣相结合，发挥自己最大能力。
- 领域深度：如何突破领域深度，成为子领域代表。
- 突破自我：如何突破自我，完成跨领域协作。
下面，我将一个个详细介绍：
第一个里程碑：探索方向
我的职业方向的形成，是通过业务实践过程中，结合个人特质和个人兴趣逐渐发现的。
- **业务特质：**对于我的业务，互动，他的特点就像他的名字一样，交互、动效。
- **个人特质：**对于我个人，在我身上比较明显的特质就是，比较爱折腾，日常生活码农气质还挺浓厚的，平时自己会做一个晒自家猫咪的小程序（魁拔喵喵喵），给自己建 3D 模型，同时对设计软件有所了解。
- **个人兴趣：**在兴趣上，我的喜好也比较偏艺术，平时在学习油画和花艺。
结合三者，在第一个历程碑阶段，我把自己定义成是一名动画工程师，也算是一个兴趣和职业结合成功案例。
我对动画工程师的定义，是设计师和工程师沟通的桥梁。对于互动业务，趣味性又是必不可少的。很多时候，设计师很想大秀一波创意，但是工程师告诉他这一期做不到；反之，设计师实现得传统了，业务的表现力就可能达不到预期。
**面对这个的困境，我对这个问题进行了多方面的思考：**设计师和工程师在本质上的思考是有所差异的，这主要是在设计和还原之间的一些差异。
- **标准上的差异：**比如不同设计软件、开发引擎使用的坐标系系统不一样，导致需要做大量的计算。
- **理解上的差异：**比如对路径的理解，是点线式还是曲线式，虽然都是曲线动画，但给用户带来的体验是有差异的。对行为的理解，衡量一个人跑步速度，设计师是感官上的，通过感性的理解去表达。开发考虑得更多的是怎么用公式或曲线的方式表达。这样，就带来了效果上的误差。
这时候，动画工程师的这个角色就很重要，需要即懂设计又懂研发，能够提高设计师和工程师两个角色之间的沟通效率，实现即富有表现力又能流畅展现的效果。同时，动画工程师，也能够较快熟悉创意诉求的发展趋势，提前储备对应的技术能力。
**并且，通过自己的能力改变了当下的业务。**作为动画工程师，我和不同的设计师一起完成了几个大大小小的项目。
- 儿童版淘宝，是我作为动画工程师的第一个项目，全动效和语音的方式引导儿童加购商品的项目，大部分商品是玩具、书籍、文具。在创意初期，我向设计师推荐了陀螺仪玩法，设计师本身不是做动画出身，在我会的基础上，推荐他学习龙骨动画，最终设计师也做的效果很好。
- 到了双 11 战场，我做了几个的引流动画，在不动手机淘宝首页结构的情况下，通过创意提高关键入口的曝光，给主会场导流，给核心玩法导流。
- 传统的通过选择猜结果这样的玩法，变成以故事的形态展示。
- 并且，在造物节把创新技术，用在业务上，这是 2016 年第一届造物节的 AR 导航，通过淘公仔的形式把用户导航到我们的线下会场。
慢慢的，我也从一个研发的角色，被邀请参与关键项目的脑暴环节，大家平时看到的富有创意的效果、玩得很疯狂的游戏，可能是一群人聚在一起想了好几天，反复挖掘创意的烧脑过程。
**通过业务，我又进一步地发现了问题。**随着我们的业务飞速增长，创意诉求剧增，越来越多的互动页面需要用到动效，动效的复杂度也逐渐提升，我们的研发效能逐渐遇到瓶颈。特别体现在开发动画环节效率低，占用很大一部分开发时间，而且也不是一项创作性的工作，属于还原设计师的创意，比较机械。另外一个痛点是，工程师还原效果差，设计师对实际动画效果不满意，导致付出更多的开发时间去重新还原动画。
如果能通过设计软件直接导出动画和资源数据，自动生成动画，就能提升很大一部分研发效能。我称这套方案为“数据驱动式动画”。
**核心方案是这样的：**根据实际的应用诉求，选择合适的动画编辑器，导出描述动画的数据和资源，交付给动画播放器，动画播放器调用对应的引擎。无论是哪一类动画，龙骨动画、AE 动画、粒子动画、CSS 动画、SVG 动画，都可以这么做。最终结果分析，协作的流程得到简化：通过数据驱动式动画的方案，动画还原、视觉走查环节基本不消耗时长，也不存在还原度低、不通过的问题。
第二个里程碑：领域深度的发展
我的第二个里程碑，是我在领域深度的发展。
对于互动来说，又迎来了新的挑战，有了更多游戏化的玩法。我思考新的业务对我们带来的难题。
- 第一个难题：研发门槛高，需要游戏领域相关的专业知识和开发经验。不仅仅是几个纯动画，还带着大量的交互，展现的形式也更加多样。
- 第二个难题：需要投入大量的成本，游戏区域多变的场景、养成对象的多阶段、场景和原型的换肤、动效的表达和引导，都会增加开发工作量。
那么，游戏型互动的解法是什么呢？从用户根本诉求上看，可操作性和表现力，翻译成对应开发术语，就是二次开发能力，且不限制动画类型。
于是，我对**以第一个里程碑探索的数据驱动式动画，做了架构上的优化。**从通过业务诉求，到设计师用设计编辑器实现，到通过不同引擎展示。优化成，从业务层输入，到设计师通过编辑器创作，创作的内容收敛到统一的素材市场，在素材市场里做对应的优化和预处理，然后给统一的渲染引擎渲染。
在引擎层的方案，架构抽象为 ECS 的架构，分为三个概念，实体、系统、组件。
- 实体：是游戏场景中的一个独特物体，是一系列组件的集合。
- 组件：是一堆数据的集合，用来存储状态。
- 系统：用来负责逻辑的部分，比如物理系统。
在素材市场的方案，分为三大部分，素材服务、素材标准、素材处理。
- 素材服务层，提供基础素材存储和管理的 API，基于 SaaS 的标准来封装的，提供给公司上下游平台接入使用。
- 素材标准层，定义了不同类型素材的标准格式。在动画/游戏项目中，素材的选型或素材的格式是非常关键的。承载着设计师通过动画设计软件的创作数据，也是设计软件进行数据互通的基础。在素材处理层，提供了素材常见的管理工具。通过素材处理工具，来进行素材优化。
- 素材处理层，跟素材类型有关。不同的类型，有不同数据格式，也对应不同的处理方案。
在深度发展的这个里程碑，是一个结合业务，需要不断思考和深挖自己技能的过程。
第三个里程碑：突破自我
我的第三个里程碑，是突破自我。在这几年，我也在突破自己，去尝试不一样的领域，去创造不一样的成果。
首先，我突破了我的技术壁垒，突破自己的技术栈，我不仅仅在互动动画上有所研究，同时在前端基础、Node.js、图形图像基础、算法基础也有一定的积累：
- 入职以来，前前后后面试了 150 个人左右，面试的准备和沟通过程中，我也在不断成长。
- 服务端上的技能，会不同的语言，通过 Node.js 做内网平台，提供大文件处理能力，通过 Groovy + Java 写了千万量级的抽奖业务。
- 在图形图像上，学习 Shader 和渲染原理，能够从本质上看各项技术。
- 在算法基础上，加以练习，通过算法提供高效的核心服务工具。
通过我技术上的突破，再抽象出共性能力。
- 通过自己在动画领域上探索的方法，能够帮助我快速切换到其他领域，同样快速成长和沉淀。
- 在产出上，我也做过平台化、工具化、模块化、标准化相关的事，来为业务提供服务。先后创作了公司几个大大小小的平台，是平台的前端，也是平台的服务端，把平台的能力，抽象成独立的工具、模块，定义模块之间通信的标准和数据结构本身的标准。
这几块，都对我的专业性、思考和架构能力，有一定的要求。
同时，拿到对应的业务结果，挑战自己过去没有做过的事，作为 PM 在业务上带动上亿用户；维护的应用服务公司小二，每天都有人来答疑；联动多个 BU 的进行合作，并齐心努力把事情做成，得到较好的结果。同时，也逐渐开始把自己沉淀的方法，传承下来。
五条有效方法
第二部分，就是五条有效方法。我的第一部分，个人的成长历程，跟五条有效方法是息息相关的。方法加速了我的成长和自我突破，成长让我不断去思考和沉淀。
在每年的双 11 阶段，都是全民参与、百花齐放、不容出一丝差错的实战训练场。更是一年胜一年，我作为历年双 11 主互动的核心成员，在短周期内打造亿级 UV 项目的背景下，同时也要联动阿里经济体多方合作。在这一场重大的战役之中，免不了高强度的工作状态。
除此以外，对于我们这个职业工种来说，都是避免不了阶段性的高强度工作的。如果高强度状态是持续性的，找不到自救方案，就更容易一次次的恶性循环。
那么下面，分享在我的工作历程中，长期通过日常实践和积累的五条有效方法。
第一个方法：培养技能树
很多时候我们面对一个技术问题无法解决，大多数情况下，是由于知识缺失。如果是单点的问题，我们可以通过查询、询问解决，但很难判断是最优解。如果是综合性偏系统的解决方案，再强大的方法论，没有基础知识，解决问题就很难有切入点。
- 对于技能树，首先，通过主节点，也就是树干，能够帮助我们清楚知道前端的整体方向。
- 然后是，叶子节点，也就是树枝和树叶**，叶子节点的深入程度，能够判断我们是不是掌握了某一个子域的核心必备技能。**
- 技能树需要日常的培养和浇灌，不是一口气就能长成，也不是拷贝一份别人就是自己的。通过日常收集信息，可以是一个问题，也可以是一篇文章。通过我们的初步过滤，对信息进行处理和消化，最终抽象成我们技能树的一个叶子节点，或是一个全新领域的初探。
技能树越茂密，我们的实力基底就越雄厚。
第二个方法：明确目标
- **给自己每个阶段设立一个目标，让自己有一定的方向性。**每年，我过规划的时候，我基本就能判断这件事导向的结果的上限和下限了。如果结果达不到预期，我还会反复进行目标的调整。同时，除了工作，我在整体上每年都会给自己定义一个大目标，现在回看，都是我一个个记得回忆和感悟的足迹。
- **定义的目标，我给自己稍微有一些挑战，**帮助自己达到一个阶段性的突破，也能帮助做下一阶段的突破。
- **遇到有难度的事，要学会拆分。**在我刚工作不久，要负责一个技术产品，当时对于是定义成一个库，还是一个框架，还是一个开源产品很是困惑。用我现在的视角来看，其实这几件事并不冲突，可以是这样，半年内目标是一个库，一年后是一个框架，两年后进行开源。对于半年内做的事，如果还是伴有一定难度和风险，还是要继续拆分。拆分，也是改善一件突如其来不知如何解决的难题的好办法。找不到解法，就容易陷入焦虑。一旦事情的确定性变高，焦虑感就会降低。
- 有的阶段，可能会没有办法快速有一个清晰的具象目标，那以人为目标，学习身边的人优秀的地方也是一种成长。我的职业生涯，也有几位同学对我影响非常大，他们每个人都有自己的长项，分别在业务思考上和技术架构上的影响着我。
第三个方法：改变现状能力
这个方法离技术会远一点，但是也是我觉得对我职业生涯改变很大的。主要在三块：
- **针对让自己或者团队困扰的地方，要做有准备的沟通。**特别注意，一个有效的沟通不是吐槽。吐槽让我们得到一定程度的压力释放，但是真正解决问题还是要靠通过表达自己的观点和诉求来改善困境。沟通前充分的准备，有一定技巧，能够改善沟通结果的方向性。
- 第二块是向上管理能力，主管是职业生涯中很关键的一个角色。每个人做的事，都是团队的一个子域。制定目标和过程中的风险，要跟主管对焦，主管能从一个宏观的视角，帮助我们及时发现问题和找到改善方案。同时，主管也是一个通道，一些好的想法和方案，都可以是自下而上的，然后通过综合判断，变成一个自上而下的项目，上级能够让有更多相同想法的同学参与进来一起建设，比自己一个人建设更为可靠。另外，主管的时间也是有限的，需要我们先主动再高效地汇报。
- 第三块是帮助建立团队氛围和文化，制度能够规范一个员工的底线，但是能够突破员工热情的，除了给员工带来想要的工作内容，很大一部分就是文化。这一点我一直觉得我所在的团队一直做得很好的，除了我们经常去高端游，日常的会议也非常有意思，印象深刻的是一场规划会，一开始觉得很无聊，后来参与其中大家都很开心，并讨论出了结果。这次会议开始，让我觉得我是在和一群讲究方法和效率的人一起工作。另外，有时候一些很小的细节就会让人觉得很有温度。就拿最近来说，我有一阵子在项目室呆了很久，我的团队几个小伙伴就带着我爱喝的饮料来看望我。这些不是说有就有的，而是通过大家共同一点一滴建设的，互相感染。在这样的氛围中，我也会自发地去组织周会活动和团建。
第四个方法：判断和选择
- **在工作过程中，明确自己的优先级很重要。**从我们准备入职场，我们就需要有一个优先级，很多人都会问，是先考研还是公务员还是做程序员，我也面临过这样的选择。再到工作过程中，我们会遇到种种冲突，大部分是时间上的竞争。在项目排期中，我们需要优先级；在某次重要会议和家人陪伴之间，我们需要优先级；在线上BUG的修复列表中，我们需要优先级。我们的选择，决定了生活和工作中的种种变化。面对突如其来的选择，避免冲动的判断导致自己有所遗憾，我的建议是一些关键性的事情上，要预设优先级。
- **做的判断需要有理论依据。**我们要做一件事，满腔热血是一件好事，但是回归理性，更好的方式还是有足够的理论和数据依据去支持我们去做这件事，而不是今天想做，一个月后发现跟想象中的不一样。足够的理论基础和数据分析，能够帮助我们精准地判断一件事，避免在前期就绕弯路，并且通过足够的论据支撑我们走更远的路。
- 对自己选择的事和自己负责，无论我们是一个怎样的角色，无论事情对自己的影响占比或大或小，都要做得专业。如果不能很好的支撑，就找到更合适的人，不要草草做完，这是对自己和队友的不负责。如果工作量过大，就通过前面提到的向上管理的能力来解决，或者通过技术积累抽象出共性方案来提高效率。总之，就是尽可能避免让自己的职业历程布满不专业的脚印，专业让我们对自信，专业让我们得到队友和主管的信任和肯定。这也是我今年给自己定的目标，关键词是专业，希望自己做什么事情都做得专业。
第五个方法：分享和沉淀
这是一个漫长的过程，但是对于很多人来说，这可能是几年里最有价值的投资了。话我们花了大量的时间去做一些事，但是总是陷入反复的困境。当自己再次遇到，用自己喜欢的方式，记录下来。
- **分享是一个自我梳理的过程，**也是一个创作的过程，我们阅读的内容可能来不及消化就上了，记录需要我们的二次理解，进行逻辑梳理、排版，并且变成自己的方式表达出来。**同时，也需要交流和反馈。**通过交流，能够拓展自己的视野，有新鲜的输入；通过反馈，能够验证自己的分享是否能覆盖大部分场景，不断发展。
- 分享不是一次性的，会一次比一次丰富、有逻辑，每一版的更新，都见证着思考和实力上的成长。另外，也是表达能力提高的途径。我们的表达是有损失的，有一个公式，实际表达 = 理想表达 - 理解偏差。我们平时表达一件事情，我们以为全部表达了，可能事实上是冰山一角，造成了实际和理想的落差。通过表达能力的提升，对我们日常的沟通、结果的展示、协作的输出，都会向心中理想的表达程度接近。
- 在日常，也可以开始构建自己的文档树，通过收集和定期梳理，帮助自己快速沉淀和查阅，可以搭配前面提到的技能树。
快乐工作系统图
最后，总结下我心中帮助我快乐工作的系统图。
我的观点是：快乐工作不是源于不去经历难题，而是通过这些难题，促使我们通过不断思考、挑战、优化、收获，来得到快乐。
我把这个系统分为三大部分，自下到上分别是，专业技能、必备能力、发展方向。
- **专业技能：**作为一名前端工程师，培养技能树奠定了我的基础。
- **必备技能：**判断和选择决定了我们投入的成本，改变现状能力平衡我的工作状态，变成一件可持续的事，能够控制住一定的风险，分享与沉淀决定了我的产出影响范围。
- **发展方向：**明确的目标，决定了我的发展空间和方向。
同时，这几点也跟我之前的三大历程碑息息相关。发展方向这块，给我的“探索方向”这个里程碑带来了方向性的指导；必备技能给我的“自我突破”这个里程碑带来了很大帮助；专业领域这块技能，也不断影响着我的“领域深度”。
推荐的书
然后，我给大家推荐2本书，第一本是**《金字塔原理》**，这本书很多人推荐，这也是我在公司收到过推荐次数最多的书籍，特别是在晋升阶段，也收到过好几位老板的推荐和赠予。对我日常的表达、思考、演示、述职带来很大的帮助。一开始可能需要看几遍，后面提炼下里面的重点，会慢慢消化成自己平时思考和表达的逻辑方式。
另一本书是**《你的身体，是一切美好的开始》**，比较适合我们这次女生专场。作者是一位好莱坞女星，这本书让我感受到作者是一位活力四射又自信认真的人，就像一个好闺蜜一样，耐心地跟我们道来幸福生活的奥秘。同时，篇幅简单，对营养学、生理学都进行了较好的梳理。
团队风采
最后，介绍下我的团队，淘系互动团队，是一支具有创造力的技术团队。团队追求极致酷炫的动画和 3D 效果，通过优秀的工程体系让前端在互动界产生逆袭，同时在新零售的战场探索前端工程化、服务化，稳扎稳打。在工作之余，高端游小分队，斜杠乐队（/Band），一人 Carry 集体开黑是我们的生活小情调。欢迎加入我们~
加微信 codingdreamer 进大会专属内推群，及讲师团队钉钉群
别忘了下一期的构建专场哦，点我上车 (报名地址)：
