一般情况下,拿到设计稿你有两种选择:
//条件表达式
产物=设计稿处理?静态输出:让页面动起来;
作为一个有志向的BETWAY登录,当然不会让页面生硬地静态展示啦(๑´ㅁ`)!可是需求时间又很短很短,怎么办呢?
所以下面的一些小技巧,至少能在你没有想法的时候让你的页面生动不少呢,同时也能确保你的页面不会出什么问题(后面有页面优化技巧)。
====前方高能====
TIPS1 CSS3时序错开渐显动画
这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后当页面呈现后每个元素错开时间出现。
例子(这里忽略兼容前缀和别的无关属性):
效果就是两个元素分别从上面掉下来,这里有个小细节(keyframes),为了让掉下来的动画生动点,应该是在90%的时候先掉下一点点,然后瞬间在100%时回跳5px。
注意这里还有个细节,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是渐变动画不能停止在最后一帧。有这样一个解决方案:
1.用去检测是否支持这个属性,加上识别类.no-animation-fill-mode;
2.根据识别类采取以下措施:
(1)用js模拟同样效果;
(2)用css屏蔽掉动画;
(3)或者直接全部都用transition来做(不要keyframes)。
TIPS2 CSS3细节强调动画
一些局部细节如果还是渐现显示,会枯燥没什么感觉,例如标题、按钮等,需要一种强调。
分两种情况:
1.如果时间允许的话,基本做法是先把一个元素切成不同的块状,例如小人的手脚都切成不同图片(好残忍(つд⊂)),然后让它们重新组合,再通过赋予不同的CSS动画来让它生动起来,这里有个引用桑尼真(sunnycchen)的例子:
2.如果时间紧凑,又不像桑尼一样擅长于动画细节,可以使用一些辅助工具:
,通过直接预览选择想要的动效,然后下载它的CSS把对应keyframe扒下来就好了(引用整个CSS是资源浪费)。
TIPS3 SVG动画
SVG技术现在越来越不陌生,使用门槛也渐渐降低,而且SVG动画还是可以使用CSS控制的!
先看个给朋友庆生做的页面,里面是SVG的蛋糕:
可见SVG是很强大的!弥补了CSS3的不足。
然而这种动画也是略耗时,但有一种比较常用的,就是线条的描绘动画,CSS3比较难实现,这里可以用SVG,看图:
先介绍我们组的一个PS插件(该工具还没主页,暂时放在云盘),这个工具可以直接根据PSD的路径图层生成SVG图形。
接下来就简单了,先用插件生成线条的SVG,例如是这样的:
再使用CSS3的animation控制stroke-dashoffset:
效果不难吧!SVG还有各种用途,例如制作ICONFONT等,可以深入挖掘。
TIPS4 重力陀螺仪
想让页面更有层次感,不妨让设计提供一些碎片元素,例如彩花,星星之类,然后把它们单独切出来放画面前景,使用陀螺仪伴随着手机运动碎片也跟着运动,多么好玩!
这里提供一个工具可以轻松实现陀螺仪重力效果的:
用法简单,定义一个parallax-obj的父类,把需要动的元素加上layer的类,然后设置动的范围data-depth:
最后只需要调用:$(‘.parallax-obj’).parallax();就一切OK了。
TIPS5 背景音乐&音效
H5页面要炫酷,画面生动还是不够的,一定要配合生动的音乐。因此可以主动跟设计或产品沟通,让他们可以提供音乐资源,分分钟导致UV猛涨有木有!
当然,有了音乐,BETWAY登录也不是直接引用的,还是有点要求:
1.音乐不宜过长,30s为佳,而且音乐要加上渐现渐隐效果,方便循环播放;
2.音乐体积要小,音质和流量,在手机上还是优先考虑流量吧。
一般背景音乐体积可以接受的范围是200K以下,若太大,可以使用格式工厂等软件,降低它的比特率和声道来改变体积。
接着,只需要简单引用:
这里有个问题,IOS是不能自动播放音乐的,一定要触发一个用户交互事件,例如点击,但是有一种自创的hack方法可以规避:
通过new一张图片,监听一张图片的onload事件,结束后回调执行音频播放audio.play()即可,原理估计是动了dom结构,相当于执行了一次交互。
最后,记得暴露一个音乐关闭/打开的按钮,不然肯定被用户骂死(°ロ°٥)。
TIPS6 有趣的loading
Loading页还是要有的,万一用户网速慢呢?
以上做了那么多事,如果没有资源加载都是玩不来的,因此还需要一个loading的支持。
然而loading还是可以做得很有趣的,一般的做法是:
1.引入品牌,例如APP宣传页;
2.引入有趣动画,放一个贱贱的人物跳舞给你看;
3.一切从简,用CSS3简单动画。
=======
休息区
说了那么多,来个例子吧(电脑上用Chrome模拟手机打开):
这是空间5.0预约页第二版,使用了以上的若干方法论,例如loading动画,CSS3动画,SVG星空连线,首屏星球重力感应,音乐(这里使用开启按钮后播放)等等。
(由于活动已结束,很多运营处都被删掉从简了,忽略那些细节)
在继续看下面的文字(页面优化技巧)之前,先问一个问题,如果还是感到页面很无趣怎么办?
这里提供一些工(gan)具(huo)吧:
1.,这是我们组做的一个动画效果平台,里面集合了所有的牛逼动画,可以让你灵感猛增!(目前已开放外网使用);
2.,这是个神奇的网站,里面的所有细节都是用一个div元素通过复杂的Css3实现的,有空可以去开开脑洞噢;
3.,动画速率太平怎么办?果断使用贝塞尔曲线来调节动画,这个网站可以帮你生成可视化的曲线。
还有各种神奇工具,还待你们自己发掘,我就不全部列出鸟。
当然,真正要做到高效制作动态H5页面,还是靠积累,因此平时做好的细节动画自己都积累起来,下次分分钟就能用得上。
//顺便卖个关子,最近正在做一个神奇的工具帮助减轻动画的制作负担,请期待哟(✪ω✪)。
=======
继续下文,是一些页面的优化细节技巧,这很关键噢!
TIPS1 动画雪碧图
涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!
网上的工具十分多,例如涛哥(ytzong)的CssGaga,AlloyTeam的GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。
这里要提一下的是如果页面图片实在太多,可以分雪碧图,例如分成1-3张,因为三张图片是可以同时加载的,这里牺牲多2个请求换来图片同时加载比一张图片慢慢加载要好。
顺便提一下,我写动画的方法是每一页的动画分在一个import.css里面,然后最后在主样式中import进去,这样方便调试动画,也容易区分雪碧图,例如:
TIPS2 图片压缩
图片压缩是老生常谈,但是仍然有不少人忘记压缩,那可是活生生的带宽和流量浪费啊…
压缩图片需要有好工具,这里推荐我们做的一个工具,相关介绍请看。
但是仍然有以下方式优化图片:
1.尽量避免用PNG24。如果图片色彩要求不高,请使用PNG8;
2.使用新格式,WEBP和BPG等新格式的到来,在不用考虑兼容的情况下请大胆尝试;
3.用SVG和ICONFONT代替简单的图标;
4.用糖饼和FUFU的来代替艺术字体切图。
TIPS3 多终端兼容
多终端兼容是一切的根基,要知道有人拿着肾6+,有人拿着肾4,大则414x736,小则320x416(IPHONE4在SAFARI保留上下端导航),因此多终端兼容是十分必要的。
曾经有一种派系为320派系,就是大部分页面都是320宽度,因此干脆直接用320的容器来包一切页面,那样也简单,然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。
那么到底要如何兼容呢?
这里我分了三个时期来说说:
(1)设计初期。先审视设计稿,因为320派系的原因,大部分设计稿只考虑到IPHONE5来设计,因此很多背景元素是只有320px宽度(页面实际渲染宽度),例如下图。
那么,这时候就需要设计提供一个较长的延伸背景了,最好是可以重复的,用background-repeat可以减少图片大小。
(2)设计中期。也就是具体的兼容方法,可以使用CSS3 Media Query和类覆盖。
1.CSS3 Media Query,按范围兼容机型。
2.类覆盖,这种方式适合直接为小屏或大屏做整体兼容。
首先,为小屏(大屏)加一个识别类,这里小于420表示为小屏幕(IPHONE4有上下导航栏):
然后,对应识别类加上要变动的元素,例如:
(3)设计后期。这是最后一步,整体检查和体验,这里面会暴露一些问题,例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了,可以来最后大招解决:
1.大屏适当用zoom:倍率或者transform:scale(倍率)来增大元素,实测失真根本看不出来,设计师也满意(毕竟不用多做一张图( • ̀ω•́ ));
2.小屏适当去掉一些元素,例如一些翻页提示,一些多余图标,可以让优雅降级,把它们 display:none掉。
有以上几步,基本就能兼容大部分机器了。兼容一直是个苦活,但是这是BETWAY登录必修课,多练就会发觉其实也没有那么难嘛。
TIPS4 交互提示
前面说了,加了音效就要加上音乐切换开关的按钮,不然用户会骂死。还有其他,例如如果你的页面不能兼容横屏,请监听横屏状态,然后加上适当的横屏提示。
例如:
提示越多,界面越友好,有时候设计师会漏掉一些可能出现的页面情况。作为有态度的BETWAY登录,请好好把关,让用户有好的体验。
TIPS5 分享接口
H5做好了,要传播分享才能展示你的牛逼轰轰呀。然而分享一切是个坑,分享到微信、手Q、空间、微博等都有各种问题,为此我还写过一篇文章《HTML5页面分享功能》,里面有各种方法。
然而最近微信开放了微信API,分享功能越来越牛逼了,相信日后分享的坑会越来越少。
TIPS6 SEO和无障碍
SEO(搜索引擎优化)是个长谈啊,但基本的做法是写好meta标签,写好页面结构(H1-H6的层级树),用好语义化标签等等。
至于无障碍,是我薄弱的环节,还请Google黄老师(stonehuang)的各种文章,也希望各位BETWAY登录能把这一块好好认识一下,并用于各产品。
其实分享接口,SEO,还有无障碍都基于良好的HTML结构,这是玩转页面的基础。
最后,罗嗦了这么多,只是我自己的一些小经验,请轻拍砖,多交流。
再次感谢你的阅读。
有什么好文,欢迎入群推荐投稿,学习BETWAY登录,重在分享!
转载请注明: 文章转载自:BETWAY官网网 https://www.nucmc.com/show-24-554-1.html