新版首页开发技术总结

2019生活服务类APP首页改版技术项改进

Posted by Tristan on July 10, 2019

背景

首页是一个APP的门面,或者说是一个互联网公司的门面。大型生活综合服务类APP和电商多品类APP一样,首页陈列着很多很杂的类目,所以随着公司业务的不断变化,首页的设计和改进也从未停止下来。拥抱变化,才有更多的成长和进步,同时这也体现了一个公司的活力。

今年的首页改版变化,给我最深的印象是:设计简化和性能提升。

设计简化

1. 动效减少

  1. 头部动效简化;之前包括城市、天气、搜索栏、扫码和签到的头部吸顶过渡动效全部去掉了,仅保留了整个头部吸顶的动效,吸顶效果更简单,技术上更易实现
  2. 头图去掉视差;上个版本随着下拉刷新的变化,头图和首页主体会产生一个视差效果,这个视差效果直接带来的影响是头图严格的尺寸设计和动效参数不能有丝毫误差和错误,否则页面上会出现各种奇形异状的效果,本期的话,没有了视差,为适配下拉刷新只是对头图做了200dp的向上偏移,其他完全随首页一起在滚动。
  3. feed流tab滑动指示器的动效也弱化了,之前在滑动中会有大小和颜色维度的变化效果,这期都没有了。

2. 主题色减少

  1. 主题颜色变化;上个版本有四个主题色,分别是橙红绿蓝,也是公司的logo组成色,本期颜色只保留了一个色——红色。

3. feed流模板标准化

2018年的首页设计扩展了feed流,加了tab从而支持feed流横向滑动加载更多的类目。但是,设计赶不上需求的变化,首页上线后,很多业务线的业务为了寻求流量和曝光,都蜂拥而至的接入到了feed流。由于需求的堆积,这块功能代码出现冗余且难快速的支撑业务变更,最明显的一个问题是之前其他tab下的模板无法直接复用。虽然可以横向滑动切换tab改变类目,但是各类目之间的帖子模板不能穿插混排,影响到了一些业务的曝光。

为了解决这一痛点,UI层面重新设计了feed流的各类目下的模板,保持统一的首页风格;技术上,也实现了基于模板的数据解析和管理,支持模板横向贯通和复用,所有模板都有统一的标准,其中包括解析和容错等。

技术改进

性能是通过一点一滴的技术项改进得到提升的。本期的首页改版,针对一下技术项做了质量保证和性能提升:

下拉刷新

1. 头图标准
2. 吸顶
3. 负二楼

MVP组件化

1. 生命周期 分离
2. 模块组件化 ViewPager有缓存策略如何解决耦合?
3. 组件管理
4. UI卡片化与技术组件化设计冲突

数据层抽象

1. 接口
2. 缓存,二级缓存
3. 内置
4. 容错 异常,白名单

加载更多

1. 组件化靠拢

复用

1. feed流模板

兼容

1. 4.x版本

启动时间

| LaunchActivity | HomeActivity | Total | | — | — | — | | 2s, 696ms | 1s, 431ms | 7s, 890ms | | 2s, 718ms | 1s, 410ms | 7s, 832ms | | 2s, 711ms | 1s, 398ms | 7s, 820ms |

总结

  1. xxx
  2. xxx

文献

xxx