阅读 5499

小姐姐连载 6/10:前端小姐姐的快乐工作攻略

前端早早聊大会,前端成长的新起点,与掘金联合举办。 加微信 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 进大会专属内推群,及讲师团队钉钉群


别忘了下一期的构建专场哦,点我上车 (报名地址):