技能之H5

自在园O设计Mix科技实验室,正在

搭建Mix技能树,前几期更新的技能有:

技能之AR技术入门

5个用法,关于Gif技能

技能之用iMovie制作预告片

今天更新设计师进军科技领域的又一技能H5


作为新时期的设计师,不会制作H5 ,恐怕很难跟上时代的步伐了。

H5原本指的是html5的标准,后来逐渐特指用于营销、广告用途的页面形式。

关于H5,你需要掌握html标签、js语法、css样式。建议自学,网站http://www.w3school.com.cn/上有大量实例教程,我的经验是大概1个月可以入门。

H5的形式

H5目前有各种各样的形式,视频、图文、动画展示的、测试答题类的、故事场景类的、通关小游戏、重力感应全景类等。

设计风格

漫画风格、中国风、手绘板报风、考卷风格、报纸风格,也是各种各样的。

技术实现

大致有3种方式:

1、用软件,如adobe的Edge Animate。

制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro

2、用web应用,如易企秀、初页等,工具还蛮多的,可以在这里查

http://www.chinaz.com/design/2015/0526/409474.shtml

3、编程的方式,主要运用javascript、jQuery、CreateJS(动画类)、zepto、CSS3、canvas技术、白鹭引擎、swiperJS、html5fullscreen等。

3种方式各有利弊

1、用软件比较便捷,源文件受到保护,但有一个学习过程,并且需要自己部署到服务器上,效果只能在软件提供的功能上组合;

2、用web应用,有丰富的模版,操作简单,云端直接生成,自动部署,缺点就是源文件在第三方平台,并且需要付费才可去掉第三方标识;

3、编程,优点是效果完全定制,想做成什么样都行,源文件也受到保护,缺点就是编程代码量会比较大,花的时间会比较多,难度会比较高。

我觉得比较简单的编程方式推荐:

  • 白鹭引擎是专门制作h5游戏的游戏引擎,也配套有图形化的软件lakeshore可以制作h5。
  • swiperJS,提供了一些成熟的模版,可以直接套用。
  • 用zepto、html5fullscreen,可以在Github上搜索得到。

围绕创意来选择搭配,能达到目的,也不一定要编程。

一般H5制作涉及到的7个主要内容

预加载

如果有大量图片,视频等,为了体验流畅度,要借助JS实现资源预加载。

Loading页的设计

一个富有创意的loading页起到眼前一亮的作用。

web优化

网速很重要,所以图片要压缩,js、css文件加载顺序要注意

真机调试技巧

最后是需要面临各种用户机型的,多终端屏幕适配,横屏竖屏状态检测等。我一般是用Browsersync中的RemoteDebug--CSS Outlining调试的。

Gif制作

一些动态效果可以用gif,而不用采用css或js,可以省很多事。关于Gif的技能我在前面已经介绍过啦,有需求可以查看:《5个用法,关于Gif

背景音乐

我习惯使用<audio autoplay="" loop=""><source src="http://xxxxSong.mp3"></audio>这种方式。

但要注意audio标签跟video标签会互相影响,比如audio作为背景音乐,在播放中,碰到video标签时,video不能自动播放。

视频

可以使用webkit-playsinline 使iOS设备不会自动全屏视频。

如:

<video poster="img/H502video.png" preload controls webkit-playsinline> <source src="480.mp4" type="video/mp4"> </video>

有一个经典单视频页面案例:

有兴趣对各种类型更深入的了解,可以参看h5-share这个公众号,收集了H5蛮全的案例。

以上为学习制作H5过程的一些经验心得,与大家分享。


设计+科技=自在园O设计Mix科技实验室。

本文分享自微信公众号 - 科技Mix设计Lab(Design-AI-Lab),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-09-03

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 不同阶段产品经理的能力要求

    Brent Tworetzky,目前为InVision产品SVP。毕业于哈佛大学,带领过50人的产品团队。在Udacity也担任过1年多的产品VP,产品履历相当...

    mixlab
  • App之可点击元素的设计

    hi,这是系列文章:App之xxx的第3篇,前2篇我总结了 App之“文字”的设计技巧 App之底部导航栏的设计 直接点击可以查阅以上2篇文章。 我为什么写这个...

    mixlab
  • 为人父母,我们可以给宝宝准备的编程游戏

    前几天微信通知可以更改公众号名称啦~我趁机更新了下 自在园O设计Mix科技实验室 慢慢的,伴随着我的研究(AR、VR、Arduino、html5、独立游戏、网页...

    mixlab
  • Django 系列博客(十二)

    本篇博客继续介绍 Django 中的查询,分别为聚合查询和分组查询,以及 F 和 Q 查询。

    py3study
  • 滴滴工程师图文并茂带你深入理解 TCP 握手分手全过程

    记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就...

    老钱
  • 为什么IBM的开放策略,没能取得最终的胜利?

    image.png 这句话应该结合着下一句话来说:为什么连当时的赢家微软最后也陷入了困境? IBM PC从苹果开创的市场中,硬生生抢走半壁江山。但是,在24年...

    BestSDK
  • 图片后门制作

    图片绑定后门,由于过程稍复杂,大家如果有不懂的地方请在下面留言,看到了会回复大家的。

    周俊辉
  • ABAP REDUCE关键字的一些实际用途

    Jerry Wang
  • 聊聊flink的Sliding Window

    flink-streaming-java_2.11-1.7.0-sources.jar!/org/apache/flink/streaming/api/wind...

    codecraft
  • 聊聊flink的Sliding Window

    flink-streaming-java_2.11-1.7.0-sources.jar!/org/apache/flink/streaming/api/wind...

    codecraft

扫码关注云+社区

领取腾讯云代金券