专栏首页忽如寄的前端周刊D2-天猫超市Mobile Web的极致体验优化 - 学习笔记

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

天猫web目前的不足

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

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

  • 流程规范:设计稿标准 + 视觉走查流程
  • 基础方案:沉淀设计还原的基础方案
  • 工具辅助:视觉还原对比工具

设计稿的静态还原

字体

  • 字体设置一定需要关注行高
  • 字重设置加粗只是用bold或者700,不使用lighter
  • 中文字体垂直居中问题,由于 Android fonts.xml没有中文字体匹配,居中是个问题,对于 miui8 以上,可以在font-family中添加字体 miui 。

设计稿的动态还原

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

用户操作体验

主要反映在以下几点:

  • 极速响应:在100ms内响应用户的操作
  • 实时反馈:实时响应手势过程
  • 操作流畅:动画、手势响应、滚动

极速响应

并行加载资源和数据

足够快时不需要Loading

组合Promise

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

操作流畅

可靠性

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

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

避免误操作-点击区域(尽可能将点击区域做大,防止用户点击无响应)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • for循环异步操作问题小结

    在实际开发中,异步总是不可逃避的一个问题,尤其是Node.js端对于数据库的操作涉及大量的异步,同时循环又是不可避免的,想象一下一次一个数据组的存储数据库就是一...

    用户1515472
  • 从ECMAscript标准文档看懂valueOf

    P.S.最近在看dayjs的源码,源码上用到了 valueOf 方法,虽然知道这个方法,但是很少接触,就试着找来了ECMAscript标准文档来看看标准的定义。

    用户1515472
  • webpack 的 chunk

    chunk 可以简单理解为 code spliting 出来的包,如果代码没有 code spliting 那么基本上可以认为对应于所输出的 bundle,we...

    用户1515472
  • 运用跨界思想体悟软件设计

    设计或者是一种解谜,世界就在眼前,然而它却是未知的,神秘的,我们试图通过分析建立一个普适的模型,去解构这个已经存在的世界。这个谜题如此引人入胜,它没有标准答案,...

    张逸
  • 3D探索 | 卡噗内容趋势设定

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 导语 卡噗对于我们来说,是首个3D社交类项目。随着卡噗内容设计和质量日趋成熟...

    腾讯ISUX
  • 不能错过:机械工程师的多年经验总结

    ? 拜模仿为师,从模仿中学习,不断提高 通常的设计,80-90%都是对已有的技术进行模仿、综合后搞出来的。充分利用他人的经验和过去的经验,使之为自己服务,不...

    机器人网
  • 跨界设计师修炼指南

    这是一篇从业10年的心得,及对未来的展望。在写本文之前,总结了下我的文章清单,包括5个方面的内容,有兴趣可以点击查阅。 1、设计思考: 设计师该成为乙方,还是甲...

    mixlab
  • 如何高速转储、索引和第7层网络流量过滤?

    n2disk是ntop社区中很多人用来转储高达100 Gbit流量的应用程序。很少有人知道,n2disk不仅可以使用数据报头信息(即IP,端口,VLAN,MAC...

    虹科网络可视化与安全
  • 浅谈设计的“基础”是什么?(二) 是市场决定设计?还是设计改变市场?

    有人提到了“是市场决定设计还是设计改变市场”这个问题,是个很现实的问题,从业几年来,我曾频繁换过很多不同种类的设计公司,快速积累经验的同时,也对这个问题感触颇多...

    宇相
  • 2018年3大UI设计趋势,你知道吗?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

    奔跑的小鹿

扫码关注云+社区

领取腾讯云代金券