玩转HTML5移动APP页面(优化篇)

标签: HTML & CSS 前端开发 HTML5 | 发表时间:2015-04-28 04:10 | 作者:设计 达人
分享到:
出处:http://www.shejidaren.com

承接上文《 玩转HTML5移动APP页面(动效篇)》,上次说的是让页面动起来的一些小技巧。
而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。

cover-01

====前方高能====

(1) 动画雪碧图

涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!
网上的工具有一些可以帮助你生成雪碧图的工具,例如 CssGagaGoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。
特别地,如果单张雪碧图面积实在太大,可以拆分雪碧图,例如拆分成2-4张,因为现代浏览器都支持4-6个同源请求下载,若资源实在太多,也可以考虑把静态资源放在不同源域名下去请求,这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好,当然,这需要具体情况去衡量。

顺便提一下,我写动画的一个小技巧是把每一页的动画分在一个import.css里面,然后最后在主样式中import进去,这样方便调试动画,也容易维护,例如:

//style.css
@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");

当然,import不是原生支持的,这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。

(2)图片压缩

图片压缩是老生常谈,但是仍然有不少人忘记压缩,那可是活生生的带宽和流量的浪费啊…

压缩图片需要有好工具,有 智图TinyPNGJPEGmini等等。

依靠工具外,还有以下方式可以优化图片:

1.尽量避免用PNG24。如果图片色彩要求不高,请使用PNG8;
2.使用新格式,WEBP和BPG等新格式的到来,在不用考虑兼容的情况下请大胆尝试;
3.用SVG和ICONFONT代替简单的图标;
4.用FUFU的 字蛛来代替艺术字体切图。

(3)多终端兼容

多终端兼容是一切的根基,要知道有人拿着肾6+,有人拿着肾4,大则414×736,小则320×416(IPHONE4在SAFARI保留上下端导航),因此多终端兼容是十分必要的。
曾经有一种派系为320派系,就是大部分页面都是320宽度,因此干脆直接用320的容器来包一切页面,那样也简单,然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。

那么到底要如何兼容呢?
这里我分了三个时期来说说:
A.设计初期。先审视设计稿,因为320派系的原因,大部分设计稿只考虑到IPHONE5来设计,因此很多背景元素是只有320px宽度(页面实际渲染宽度),例如下图。

玩转HTML5移动页面(优化篇)

那么,这时候就需要设计提供一个较长的延伸背景了,最好是可以重复的,用background-repeat可以减少图片大小。

B.设计中期。也就是具体的兼容方法,可以使用CSS3 Media Query和类覆盖。

1.CSS3 Media Query,按范围兼容机型。

/*iphone6*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.page6 .ele-building{top: 69px;}
.page6 .ele-runner{top: 100px;}
.page6 .ele-pophome{top: 16px;}
}

2.类覆盖,这种方式适合直接为小屏或大屏做整体兼容。
首先,为小屏(大屏)加一个识别类,这里小于420表示为小屏幕(IPHONE4有上下导航栏):

var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh<420){
$('body').addClass('low-screen');
}

然后,对应识别类加上要变动的元素覆盖,例如:

.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}

C.设计后期。这是最后一步,整体检查和体验,这里面会暴露一些问题,例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了,可以来最后大招解决:

1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素,实测失真根本看不出来,设计师也满意(毕竟不用多做一张图!);
2.小屏适当去掉一些元素,例如一些翻页提示,一些多余图标,可以让优雅降级,把它们 display:none掉。

有以上几步,基本就能兼容大部分机器了。兼容一直是个苦活,但是这是前端必修课,多练就会发觉其实也没有那么难嘛。

(4)交互提示

前面说了,加了音效就要加上音乐切换开关的按钮,不然会被用户骂死。还有其他,例如如果你的页面不能兼容横屏,请监听横屏状态,然后加上适当的横屏提示。

例如:

// 横屏监听
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验,请将手机/平板竖过来!');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;

提示越多,界面越友好,有时候设计师会漏掉一些可能出现的页面情况。
作为有态度的前端,请好好把关,让用户有好的体验。

(5)分享接口

H5做好了,要传播分享才能展示你的牛逼轰轰。
然而分享其实是个坑,分享到微信、手Q等都有各种问题。

A.微信

旧微信会使用WeixinJSBridge来声明分享的缩略图、标题、正文等,比较方便。例如:
玩转HTML5移动页面(优化篇)
而最新的微信提供了新的微信SDK,需要在公众账号绑定所属域名之后调用SDK作分享,可以说分享功能会更加强大,坑也会更加少。

B.手Q

手Q支持声明meta标签的的分享方式,例如:
玩转HTML5移动页面(优化篇)
而若在qq.com域名下也支持api的定义方式。

C.一般化分享

在默认兼容旧版微信、手Q或者各种浏览器,平台,可以用这样的方法:
写h1做标题,p做内容,img做缩略图,只需要把h1隐藏掉就好,这里的缩略图最好要大于200x200px。

例如:
玩转HTML5移动页面(优化篇)
当然,这样也有利于搜索引擎拉取信息。

分享的坑还有更多,例如不同浏览器例如QQ浏览器、Chrome也会有自己的默认拉取方式(部分截图作缩略图),需要多加测试优化。

(5)SEO搜索引擎优化

SEO(搜索引擎优化)的基本做法是把页面结构写好,这包括:

1.定义精确的网页标题。你的标题应该有概括性,能明确告知搜索引擎和用户你的网站大概内容和目的,可以是当前页面标题-所属类型-产品名,例如“全民来猜歌-年费黄钻-QQ空间”。

2.针对页面内容补充description和keywords的meta标签。你需要简短总结页面的主要目标,然后补充description,以及根据关键词补充keywords。

3.优化你的超链接和图片。包括优化超链接显示的文本,要具有语义性也要跟超链接的网页具有相关性,例如“空间主页”就不要链接到“www.qq.com”。同时,要补充”title”和”alt”属性,例如“<img src=’images/apple.jpg’ title=’苹果示例图’ alt=’苹果示例图’ />”。

4.建立良好的网站导航和sitemap。网站需要有一个良好的导航,控制根目录和各子目录的关键,通过sitemap可以帮助网站主了解网站结构,也方便搜索引擎收录整个站点。

5.优化目录结构和URL。你的URL应该有语义性,简短易懂,例如http://www.apple.com/macbook-air/,而且每一层级都要有它对应的页面展示以及语义。

6.善用h1-h6的标题结构树。合理的标题可以强调文字,也能让搜索引擎更加了解到各标题的重要性,因此建立良好的标题树十分有意义。

7.不断致力于提供优质的内容。社交化分享是网站曝光最快的因素,因此不断提供了优质原创内容才能真正提高你的网站曝光权重。

(6)无障碍

无障碍的普及是一件好事,这让互联网真正地为所有人可用。因此我们也应该为之而努力,无障碍的根基是你页面强壮的语义性和结构性,具体可以参考《 腾讯网无障碍说明》了解无障碍的优化手段。

最后,罗嗦了这么多,只是我自己的一些小经验,请轻拍砖,多交流。

腾讯ISUX ( http://isux.tencent.com/play-with-html5-optimize.html)


Copyright ©2010-2014 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
交流:UI设计交流群:59300679,与500名设计师交流设计,分享素材。

相关 [html5 移动 app] 推荐:

玩转HTML5移动APP页面(优化篇)

- - 设计达人
承接上文《 玩转HTML5移动APP页面(动效篇)》,上次说的是让页面动起来的一些小技巧. 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏. 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite).

移动App别慌!

- - 《商业价值》杂志
工信部要传达的信息应该是对国内第三方应用商店进行备案,对个人应用开发者实行实名认证,并非被误读的针对每一款App进行备案. 2012年底,移动互联网领域有两件事情值得大家关注,一个是引发轩然大波的App备案. 另一个是近期逐渐显现的移动App同质化问题. 这两个问题都与我们所倡导的营造移动App绿色生态链相关.

HTML5 vs Mobile App 谁将是主流

- 小趴 八足趴 八足 ramener - 互联网的那点事...
HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场. 有了HTML5以后怎么装APP. 更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

如何用HTML5制作iPhone App

- - HTML5研究小组
所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历. 你曾经想找一两篇iPhone开发的初级教程,但是它的C语言太难学了. 我不想说一些让你放弃的消极的话:你可以放弃它,这意味着这些时间你可以做些别的. 你可以作一个nativeapp 和别的app 一样,并且,很大程度上,它看起来就是一个完美的仿冒的应用程序.

基于HTML5 的网页APP时代即将到来?

- Feng - Tech2IPO
去年的这个时候我发博文表示我很看好 HTML5 移动网页APP的前景. 网页上的APP时代超过了我之前的预想. Kindle 已经可以再浏览器中使用了,下面是在safari 上我的图书馆:. 和Kindle  APP一样,我也可以在线下载后阅读. 我的朋友Etsy也在 Android推出了她的 HTML5 主题页面,这是在我手机上的页面效果:.

网易摄影推出html5开发的iPad APP

- - HTML5研究小组
网易摄影精选是网易摄影(http://pp.163.com/)出品的第一款基于html5开发的ipad应用,聚焦于用户浏览美图时的体验,崇尚极简主义的设计,一切皆为用户看到自己喜欢的高清美图而服务. 没有复杂的功能,用户不需要注册、填写任何信息就能使用. 网易摄影精选采用目前比较流行的混搭模式(native+web)开发,native层选用phonegap开源框架用来提供web层对设备功能的支持,web层基于网易自主研发的前端开发框架用来实现页面布局及业务逻辑,应用对部分HTML5/CSS3技术做了实践,整个应用大小只有500K左右.

HTML5将成“香饽饽” APP要何去何从

- - HTML5研究小组
“App刷票”,近来移动互联网领域一个炙手可热的新名词. 意指由专门的团队在苹果AppStore这类软件商店中,通过使用大量账户下载和评论某款应用,使其排名迅速攀升. “App刷票”背后则是移动互联网市场竞争渐趋白热化. 据统计,目前国内iOS和Android平台上的开发者达20万,但整个市场收入才15亿元人民币左右,即平均年收入7500元.

【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发

- - HTML5研究小组
早在2011年10月9日Sam Gentile就在在开发Hybrid App,彼时他就写过这方面的一篇题目是《视口元标签和使用HTML5/CSS3/jQuery来构建移动界面》的博文,可以说Sam Gentile最早研究Hybrid App的开发者. 【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》.

HTML5定稿了,为什么原生App世界将被颠覆

- - 人人都是产品经理
导语:HTML5将颠覆原生App世界,这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.