10

【CDC TALK】第五期:第一现场

 3 years ago
source link: https://cdc.tencent.com/2020/04/08/first-scene/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

CDC是腾讯的公司级设计团队,一直致力于用户研究在互联网方面的探索和发展,如设计、体验、产品、运营、市场品牌、投资战略、互联网生态行业、社会产业和研究工具平台等方向。

CDC TALK的举办已持续了三年的时间,每年都会邀请来自CDC设计、用研、品牌、开发等岗位的6位达人,带来CDC在互联网跨界实践中的第一手专业分享,为同行提供满满的学习干货。

本期先带大家走入第五篇:

第一现场
郑焕义|腾讯CDC设计研发中心高级工程师

cdctalk-scaled.jpeg

下面内容是我在 2019 CDC Talk 上的讲稿,主要分享在前端开发这个岗位上,我感受到愉悦的几个时刻,希望给有志加入这个职业或者正在这个岗位上工作的人,带来一点前进的动力。

想了解全部内容可查看的我的 Keynote 和 现场回放

一/成就感

        十年前,大三的暑假,因一个偶然的机会,我拿到了阿里的的实习 offer,一个人来到杭州实习,那里是国内第一批前端开发工程师诞生的地方,但是和大多数新人一样,除了切页面,做动效,调数据,其实我并不清楚前端开发具体的角色。

        我带着疑问,虚心地请教了我的导师,我希望他从整个公司的运作,从研发流程,从行业的现状和发展,里里外外跟我解释一遍前端的角色,没想到的是,他只是抛下一句,前端开发就是第一现场,就打发我走。

cdc_talk_intern1.png

前端萌新请教导师

        2009年,我实习的第一个任务是做淘宝社交社区(当时叫淘江湖)的一个运营活动,活动本身并不复杂,需要我做一个拼图游戏,用户邀请好友加入社区,获得拼图的碎片,挤满碎片拼出公仔的图案后,就能获得公仔。

cdc_talk_taojianghu.png
好友总动员

        当年淘宝做社交社区的竞争对手是QQ空间,运营的 KPI 压力非常大,当我还在潜心研究如何实现业务逻辑时,活动的方案因为各种原因,已经改了不下数十遍,直到上线前一晚,才最终敲定,这时的我,虽然还不知天高地厚,但也能明显感觉到身上的压力,产品口头一说,设计师 Photoshop 一画,后台配置一改,万事俱备,只缺前端。

        除了上线的压力,更大的压力还来自于空气中凝漫着的,对一个实习生不信任的气息,对于一个没有经验的实习生来说,除了埋下头,重新切图,专注码码,看着接口套模板外,好像没别的事情能做了,凌晨5点,当我第一次调通流程时,我差点喊了出来,但我还是故作镇定的说了一句,”可以了”。

cdc_talk_release.png
第一次经历发布

        项目组所有人马上围了过来,我现在还能感觉到他们当时从焦虑,不安变成异常的期待和兴奋。

        这是我第一次感受到的第一现场,是产品诞生第一刻的现场。前端开发,把需求,逻辑,设计,数据变成用户真正看得见摸得着的产品,在产品诞生的一刻,收获他人的认同,收获从虚无缥缈到实际落地的快感。

        活动按时在早上9点上线,最终带来了 1.45 亿用户,我还记得那天杭州在下雪,对于一个广东人来说,第一次产品发布和第一次看雪一样难忘。

二/责任感

        毕业后我到了腾讯,我不断在工作中学习知识和积累经验,在业务上,我总是想扩展前端开发的边际,2010年,智能手机刚兴起,HTML 5 还在草案,移动端浏览器已经能比较好地支持了 Geolocation API,我为 QQ 电影票做了第一个移动端的 demo,当 Hybrid 混合应用开始出现时,我和客户端开发的同学一起封装了基于 Webkit 内核的腾讯视频 Mac 客户端

cdc_talk_demo.png
这是一系列没上线的DEMO

        很快,我的虚荣心和成就感已经得不到满足,前端的角色只是在实现产品吗,前端能否做得更多?

cdc_talk_more.png

前端开发能否做更多?

        我辗转从出去创业到创业失败回流腾讯,我需要负责的业务也从 C 端产品转到了内部系统,2014年,公司内部的项目管理系统进行改版,改版的目标是实现一套更现代的 UI,同时对积累已久的体验问题进行一次优化,我有意识的观察了身边同事使用的习惯,我想当然的做出了一个当页面滚动时,把一级和二级导航融合在一起置顶的体验,没想到的是,上线后就收到一大堆吐槽,原来导航合并置顶后,用户找不到自己工作台的入口了,也没法回到首页,产品经理非常强烈地要求我改回去。

cdc_talk_responsibility.png

前端开发背锅现场

        这是我第二次感受到的第一现场,产品体验问题暴露后第一时间背锅的现场。除了背锅,我感受更多的是前端的责任,作为与用户最贴近的角色,不管是交互操作的问题,还是视觉风格的问题,还是产品性能,系统稳定,数据准确等等的问题,用户所有的体验问题都与前端开发有关,所谓背锅的现场其实是第一责任现场。

cdc_talk_2st.png

产品问题暴露后第一时间需要负责

三/幸福感

        我开始系统性的学习交互,学习信息架构,看各类用户研究的分析,虽然都只是些皮毛,但是我能真切地感觉到自己回到了原点,重新探索前端开发的边际,也是从那时起,我开始承担团队负责人的角色。

cdc_talk_study.png
系统化学习

        我和交互设计师一起重新梳理了系统的信息架构,设计上左内容的结构,和用研同学一起走访内部同事,按类别逐一分析问题。

        新版本灰度发布,我们同时给用户提供了切换回旧版的功能,我小心机地在按钮上做了埋点,每当有用户切回旧版,我就会亲切的到 RTX 上问候他是什么原因。

        虽然最终花了很长时间,我们才完成整个新版的上线,新版的数据也平平无奇,但每当我发现用户说出跟我理解的不一样的问题时,我心中总是有点小确幸,因为我知道我离用户又更进了一步,此时我第三次感受到的第一现场,是实实在在和用户在一起的现场

cdc_talk_3st.png

和用户在一起的现场

四/自豪感

        2016年,我们开发公司的投资并购系统,因为是内部系统,我们用户只有50多个投资经理和他们的老板,我们信心十足,因为与面向海量用户的产品相比,我们只需要服务好这50多个人就够了。

        由于每个投资项目的数据量非常巨大,为了提升用户打开项目列表和进入详情的速度,我们利用资源离线包和客户端缓存数据的技术,让用户打开的速度提升了80%,因为投资并购都是机密的信息,为了方便追查数据泄露的源头,一般产品都会在界面上用显性水印遮挡内容,我们为了不影响用户正常的浏览体验,发明了隐性水印的专利,把用户的身份信息隐藏在界面内。

        项目的另外一个挑战是,出于对数据安全的考虑,我们开发人员无法像一般产品一样体验到用户的正式环境,我们想尽办法希望能尽量贴近用户的真实场景,只是总有一些让我们想不到的情况发生,我们开始思考除了模拟用户的真实场景外,有没有办法把用户的操作和所有的行为都记录下来,还有更重要的,有没有办法更直观的把用户的行为还原出来,我们想到了在用户端录屏的方式,但显然这样做对用户端的的性能影响太大了。

        不断地尝试和摸索,我们想出了解决方案,我们把用户行为相关的信息分为五类,操作事件、界面变化、内容数据、路径、时间轴,每类信息有相应的数据流格式,用户在使用我们系统时,我们把收集的数据储放在用户的客户端,在空闲时我们再异步将数据同步到后端,数据在后台再组合到时间轴上,最后用逐帧播放的方式把用户的行为还原成直观的视频。现在我们有能力真正站在用户的视角观察和发现问题。

cdc_talk_user.png
记录用户行为和还原

        当没有用户现场时,我们自己创造了用户现场,现在我们有能力真正站在用户的视角观察和发现问题,甚至是用户自己都没发现的问题,我没有参与这个项目的开发,我为我的小伙伴们感到骄傲,这是我第四次感受的第一现场,是开发者自己创造的第一人称现场

cdc_talk_4st.png

开发者自己创造的第一人称现场

        我为我的小伙伴们感到自豪,自豪的是我们始终坚持用户为中心,不断突破技术的瓶颈,开发者就是创造者。

cdc_talk_happiness.png

        10年很快,一句不经意话,如何解读已经不再重要。我的故事没有惊涛骇浪的情节,没有意想不到的结局,只有对专业执念的探索,前端开发带给我快乐,给我带来成就感,责任感,幸福感和自豪感,也正是这些小小的快乐,不断推动我向前探索前端开发的无限可能。

        如果现在有人问我前端开发到底是什么角色,我会说:

  1. 前端开发是对产品的无限责任,时刻为出现的任何体验问题负责;

  2. 前端开发是对技术的极致追求,为用户的每一处方便耗尽的心血。

cdc_talk_fe.png

前端开发就是用户体验的第一现场。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK