D2-天猫超市Mobile Web的极致体验优化 - 学习笔记

[huruji]

天猫web目前的不足

Web 和 Native 最大的差距不是调用底层接口的能力甚至不是性能，而在于各种细节，保证从设计到实现做到精细化。

如何保证设计稿的高度还原

• 流程规范：设计稿标准 + 视觉走查流程

• 基础方案：沉淀设计还原的基础方案

• 工具辅助：视觉还原对比工具

设计稿的静态还原

字体

• 字体设置一定需要关注行高

• 字重设置加粗只是用bold或者700，不使用lighter

• 中文字体垂直居中问题，由于 Android fonts.xml没有中文字体匹配，居中是个问题，对于 miui8 以上，可以在font-family中添加字体 miui 。

设计稿的动态还原

对于动画我们应该参考 iOS 和 Android 的原生动画，参考其动画方式和缓动模式。

用户操作体验

主要反映在以下几点：

• 极速响应：在100ms内响应用户的操作

• 实时反馈：实时响应手势过程

• 操作流畅：动画、手势响应、滚动

极速响应

并行加载资源和数据

足够快时不需要Loading

组合Promise

另外可以前端采集响应时间大于100ms的异常进行上报。

操作流畅

可靠性

跨端加载机制，保证页面可加载（基于 Service Worker 的跨端预加载方案，保证页面一定能打开，并且秒开）

统一的异常提示和重试机制

避免误操作-点击区域（尽可能将点击区域做大，防止用户点击无响应）

回顾

Refs

D2前端技术论坛官网