腾讯移动Web整体解决方案 Spirit

MIT
未知
腾讯
2014-09-01
叶秀兰

Spirit 是移动 Web 开发规范,基于日常开发的沉淀,总结了字体、交互、性能等方面的最佳实践,是移动Web开发的指导标准。

移动开发规范概述

以下规范建议,均是Alloyteam在日常开发过程中总结提炼出的经验,规范具备较好的项目实践,强烈推荐使用

字体设置

使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。    需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US), 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁

Heiti SC Light 黑体-简 细体
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑
           

原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

基础交互

设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}html, body {
    -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
    user-select: none;}
           

           

移动性能

要考虑Android低端机与2G网络场景下性能 注意!

发布前必要检查项

  • 所有图片必须有进行过压缩

  • 考虑适度的有损压缩,如转化为80%质量的jpg图片

  • 考虑把大图切成多张小图,常见在banner图过大的场景

加载性能优化, 达到打开足够快

  • 数据离线化,考虑将数据缓存在 localStorage

  • 初始请求资源数 < 4 注意!

  • 图片使用CSS Sprites 或 DATAURI

  • 外链 CSS 中避免 @import 引入

  • 考虑内嵌小型的静态资源内容

  • 初始请求资源gzip后总体积 < 50kb

  • 静态资源(HTML/CSS/JS/IMAGE)是否优化压缩?

  • 避免打包大型类库

  • 确保接入层已开启Gzip压缩

  • 尽量使用CSS3代替图片

  • 初始首屏之外的图片资源需延迟加载 注意!

  • 单页面应用(SPA)考虑延迟加载非首屏业务模块

运行性能优化, 达到操作足够流畅

  • 避免 iOS 300+ms 点击延时问题 注意!

  • 缓存 DOM 选择与计算

  • 避免触发页面重绘的操作

  • Debounce连续触发的事件(scroll/resize),避免高频繁触发执行

  • 尽可能使用事件代理,避免批量绑定事件

  • 使用CSS3动画代替JS动画

  • 避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度

  • HTML结构层级保持足够简单,推荐不超过 5 个层级

  • 尽能少的使用CSS高级选择器与通配选择器

  • Keep it simple

在线性能检测评定工具使用指南

  • 访问 Google PageSpeed 在线评定网站

  • 在地址栏输入目标URL地址,点击分析按钮开始检测

  • 按 PageSpeed 分析出的建议进行优化,优先解决红色类别的问题

关于 Spirit:

Spirit(勇气号),美国航天局NASA派往Mars(火星)的第一艘探测器。

移动Web开发是一块新的领域,甚至有很多坑,这一点与人类从未踏上的Mars(火星)相似。为了避免开发者重复遇到相同的问题,我们创建了Mars项目(view on Github),收集与归纳移动Web开发中常见的问题。

Spirit正是为了Mars而生,Mars项目中归纳的问题,会放到Spirit中解决,并沉淀到开发工具(JM与JMUI)以及开发规范中,真正建立移动Web开发的集成解决方案。

加载中

评论(1)

sp42
sp42
Dead?

暂无资讯

暂无问答

多触式web前端开发之一:对于Touch的处理

水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户在iphone和ipad上运指如飞 的时候,那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感,因为正是...

2015/04/21 13:27
9
0
vue脚手架

快速搭建一个vue商城项目,并且上传到git

04/10 23:07
123
0
NuGet包搜集

MoreLINQ LINQ to Objects is missing a few desirable features. This project enhances LINQ to Objects with extra methods, in a manner which keeps to the spirit of LINQ. nuget包地址...

2016/05/13 15:37
10
2
Accurate Teligion Jeans United states

cheap true religion women You cannot do better than confer with him at once. It is but one step to the church of San Francisco. Let us go." What Don Rafael had said experienced ...

2013/04/02 20:54
8
0
GIS(三)——优化js版搜狗地图的brand标牌样式

从上一篇博文的效果图中,我们看到有几个相近的brand标牌给相互遮挡住了,不能完整的显示。怎么处理一下呢?今天我们就来研究一下这个解决方案。 其实要想不被遮挡,可以让这几个brand位置变...

2015/10/18 10:56
2
0
perfect practice makes perfect

I had a fencing coach who would always remind us that practice doesn’t make perfect: practice makes permanent. That is, if you do something over and over again, eventually it w...

2014/10/19 22:54
27
0
Reflections scans your classpath, indexes the m...

https://code.google.com/p/reflections/ Java runtime metadata analysis, in the spirit ofScannotations Reflections scans your classpath, indexes the metadata, allows you to query ...

2013/06/17 20:34
58
0
is boost::property_tree::ptree thread safe?

关于boost::property_tree::ptree 中 boost::property_tree::json_parser::read_json(xmlnIStream, pt)函数,线程安全问题...

2014/10/14 15:16
195
0
GIS(二)——在js版搜狗地图上添加brand标牌

在上一篇博文中,我在搜狗地图上添加了Marker标记,但是在用户体验度上还是不够的,如果想了解某些信息,你得把鼠标指向marker,才能看到title里的值。有没有一种可以直接显示在marker上的东...

2015/10/18 10:56
7
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部