旧瓶新酒–谈谈京东机票的新生

时光荏苒岁月如梭,青春一点点地从指缝中流走,蓦然回首,才惊觉进入机票(jipiao.jd.com)这个大家庭已经有一年了。从最初的战战兢兢,怀疑自己是否有能力接下这重任,到如今能坦然面对各种需求。诚然,进步是显而易见的(让我嘚瑟一会儿…)。 列表页查询速度优化 接手机票的第一个需求就是列表页查询速度优化,当时是中间临时接手的,所以并没有参与优化方案的制定,只是做了实施这一步,当然,很佩服方案制定人员,因为这不仅为机票速度的提升提供了很好的解决方案,也给我带来了不小的挑战。 下面来说说这厉害的方案。 方案的确定 先说说机票的背景,京东机票的数据是由很多个商家提供,但是商家之间返回数据的速度参差不齐,快的2s,慢的十多秒也是有的。因此,开发同事需要等所有商家的数据返回以后再进行比价等逻辑,筛选出前台展示的数据,再进行渲染。相信大家明白了,这会导致响应时间会非常慢,用户会长时间地处于等待中,结果就是,耗尽了耐心,拂袖而去。 (大家可以通过下图感受一下,不要怀疑自己的眼睛,请耐心等待。。。)   当下的第一要务就是要提高响应速度,让等待属于过去式。经过后端开发的评估,响应时间无法真的缩短,因为商家的返回速度是不可控的,因此,这个重担落到了前端,既然不能真的缩短时间,那我们就假装缩短了吧。是的,假装。 用户对于响应时间的评判无非是什么时候能看到页面上有内容展示,那么我们就尽快地展示出内容就行啦! 方案的实现 方案就是这样的:前端分多次请求后端数据,后端在得到第一次请求以后就去获取商家数据,然后尽快地返回已获得的数据给前端,前端将拿到的数据立即展示出来。这样迭代多次,在无碍于用户操作的同时,逐步地完成了全部数据的展示。 下面是这个过程的流程图: 主干形成,我们又描绘了一些枝叶,为此增加了可爱的loading动画,小飞机飞过,在各种操作的时候都加上了缓动效果等等,让用户操作起来自然流畅一气呵成。 在此过程中,作为首次接手交互场景较复杂,涉及众多业务逻辑的单页面应用,其中付出了不少汗水和努力,收获颇丰。 迭代 接下来的一年里,又进行了多次需求迭代,体验也越来越好,不过在迭代过程中也遇到了一些问题: 首先,在新增需求的时候会涉及到前后端双方上线,但是这两方上线之间肯定有时间差,因此需要做好兼容处理,既要保证先上线的一方不影响线上环境,还要做到另一方上线后新的功能得以实现。相信作为前端开发,这个问题大家都会遇到。 其次,机票作为一个大型的项目,虽然单从列表页来看只有一个页面,但是后台会划分为很多个项目需求对其进行开发。这会造成一个问题:多个需求同时并行,在前端这边修改的是同一个文件,那么这对做好各需求之间的隔离和兼容就有很高的要求,我也总结了以下几个方法: 新增的模块,CSS中使用新的命名来区分,JS中对其操作要首先判断此模块是否存在 修改现有模块,如果对一个模块的细节做了很多调整,那么在这个模块的最外层加上区分的选择器,样式和JS都写在这个作为区分的选择器上 如果有些改动无法用上面两种方法解决,那么就需要上线一版新的文件,由开发修改引用路径,这种方式是简单的,但是不到万不得已还是不要用,因为这会引起其他问题(同时进行的几个项目,有些需要修改路径,有些不需要,在后端开发合并代码的时候也会有迷惑) 还有一点就是要注意,一些特殊的逻辑可能会引起后续修改时不断地改动或新增,因此一定要注意这些细节不能错过 首页性能优化 首页的优化始于团队内部对于首屏时间的优化安排。 由于历史原因,机票业务并未采用前后端分离方式开发,因此页面的交互JS都是由后台开发编写,相比于前端,后端更注重的是功能的实现,因此,会对性能有些影响。 来看看优化前的一些数据: 全部资源有81个请求,共2446.52kb,本地测速是1.82秒。 因为未做任何懒加载,所以首屏时间和全部资源加载时间基本一致,1.82秒作为公司的网络测速,普通用户体验到的可能远远不及这个。 资源占比图 由上面的图可以看出,图片和JS占比将近99%,因此优化主要从这两部分入手: 优化方式: JS部分 将旧版的组件全部替换 重构JS代码,去除冗余部分 延迟加载搜索框逻辑(将搜索框逻辑抽出为单独的文件,在用户鼠标滑过搜索框区域的时候再加载并初始化) CSS部分 去除旧版文件及冗余代码 优化合并压缩CSS文件,搜索组件CSS用户触发后加载 图片部分 合并零散的icon为一张图标 协助运营优化广告图片大小 优化后的结果: 全部资源有53个请求,共1731.98kb (总加载时间取决于用户的操作,在此没有参考意义)。 首屏数据: 通过优化后的首屏时间可以看出,效果还是比较显著的。 重构(首页及填单页) 由于首页并未做彻底的改版,因此优化JS主要是对已有代码进行了重构和整理。填单页对优惠券部分的JS进行了重构优化,因此也总结了一些重构的步骤: 作为用户熟悉页面各个地方的功能和效果 通过阅读现有代码来了解整体的业务逻辑和设计,尤其注意在页面上直观看不到的一些功能 梳理功能与逻辑,确保自己理解透彻,必要时可以画出UML示意图 分解并重组代码,在这过程中要注意每做一步改动,在页面上进行一次测试,保证每次改动不会影响原有逻辑 重构是一门很深的学问,能用到很多方法追求极致,我这里做的比较浅,只是初步的尝试了一下重构的方法。但对后续填单页的部分重构也起到了基础作用。 版本升级 […]

类目场馆建设设计方法-交互研究思路总结

Part 1:全流程交互设计–馆区建设 在馆区建设与版本迭代中,交互在其中扮演着重要的角色;一个全流程的馆区交互设计应该综合考虑:运营策略分析、竞品分析、数据分析、目标用户分析、平台特性分析等,下面将针对这五大模块做具体介绍 1.1 运营策略分析 需求方提出品类馆区新建或改版时,会输出他们未来对馆区的运营规划策略,作为类目运营侧的他们,是比我们对产品及目标用户更加熟悉的,而对运营策略的分析,能够让我们快速了解到产品及目标用户的特性,以及需求方对新建或改版馆区的需求,交互设计不仅仅要考虑用户及产品需求,更要考虑商业需求,只有在符合商业需求的前提下才能创造价值 分析方向:   案例讲解:   1.2 竞品分析 俗话说:知己知彼百战不殆,了解与分析竞争对手的产品,模拟用户流程,列出竞品或者自己产品的优势与不足,分析与挖掘用户的潜在与深度需求,对于自身馆区的建设有着重要作用 分析方向:(一般选择分析2~4个竞品) 案例讲解: 1.3 数据分析 对于数据的收集和研究,我们可以从中提取有用信息和形成结论,在馆区的建设或改版中帮助我们做出判断,以便采取适当的交互规划 分析方向:   案例讲解: 从上述数据中可以看出,品类宫格区(首屏展示)的UV占7成,说明手Q美妆目标用户大多数是目的性购买用户,新馆的设计应该重点考虑这部分用户群体 GMV有近9成来自于品类宫格和品牌区,虽然品牌的UV占比不高,但成交转化最好,侧面说明目标用户有较高的品牌偏好性,馆区中可重点展现和运营 单品的UV与GMV占比虽然不高,但UV价值较高,在馆区建设中可考虑根据美妆的特性,多纬度的展示单品 1.4 目标用户分析 在之前的设计环节,我们对需求方、竞争对手、数据表现做了充分分析,但在设计中还有个更重要的角色需要我们着重考虑,就是‘目标用户’;对目标用户的分析能够让我们认识和了解用户,帮助我们在产品的设计环节中做出综合的判断。(当没有相关的用研报告时,选择身边的同事或朋友做简单的访谈来了解目标用户的心理特征与购物偏好不失为一个好办法) 分析方向: 案例讲解: 网购美妆用户群体以女性(80%)用户为主,年龄主要分布在20-39岁的用户群,馆区运营上应更多的迎合这部分用户的偏好 护肤品与化妆品的购买模式都是以‘搜索+挑选’的模式为主,目的性购买较强     从图表中可以看出:用户最关注的痛点是‘品牌’,其次是安全、年龄等;可以看出,用户一旦找到适合自己的品牌后,很难会更换品牌,补充性的购物中,多数是根据品牌来选择购物,在美妆护肤的购物中,品牌偏好占据很大的比重 从调研分析可知:目标用户购买目的性强,多为缺少型购物;‘典型场景(补充、换季)、促销优惠、他人推荐’为有效的购买驱动力 因此,馆区的动线设计上应导购性强,满足目的性用户快速挑选;同时也要包含以季节、主题包装、推荐等纬度来激发用户浏览购买 1.5 平台与平台用户特性分析 每个平台都有其独特的平台特性与目标群体,这就像房子的地基一样,即使之前的分析调研做的再详实完善,如果没有地基的支持,房子终究会坍塌。因此我们要充分考虑平台特性与平台群体特征,在馆区搭建中综合运用,才能使得馆区更好的服务用户创造价值 分析方向: 涉及内部数据,此处将不再上案例。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 小结: 到这里,一个全流程新建类目馆区的前期交互分析已经相当完善,或许有遗漏或偏差,但意在和大家分享讨论学习 Part 2:快速搭建交互设计–馆区建设 在类目场馆的建设中,根据各馆区实际的数据表现与经验总结,从中总结出馆区建设的共性,而这些共性往往是馆区的重要组成部分;在缺少数据与用研支持、排期紧张的情况下,可以根据经验总结,结合运营规划与竞品分析快速搭建出馆区交互 馆区交互模版:   Part 3:馆区中的细节交互策略 交互中一些细节上的小小改动就有可能带来意想不到的效果,我们应该勇于尝试,在交互细节中处处体现小心机 案例展示: 总结 在近半年的类目场馆交互设计中,了解很多、学习很多、进步很多,总结出的一些方法和建议也许有些比较片面,但对于自己而言都是一种工作和学习的沉淀,后续将会更多的在版本迭代中进行交互策略的探索和学习,不足之处,欢迎多多吐槽~   […]

智能生活从京东开始 – 智能云项目小结

京东智能云是“京东+”智能硬件计划旗下的落地产品,主要是为在京东销售的智能硬件提供统一的一站式应用。主要连接业务包括“智能家居”“健康生活”“汽车服务”“云空间”四大部分。项目完成后,在京东销售的智能产品均可使用这一个“超级APP”来管理操作。在接手需求时,项目组已经有一个与开发同时进行的“自主版本”,JDC的版本会作为二期版本,所以无论从工期到功能构想都还是有很大的空间的。

© 2018 JDC. All Rights Reserved.