学好H5设计，你必须知道这些工具！
好久没有给大家出内容更新了，做了那么久的H5内容分享，还没有系统的和大家归纳过，在设计H5需要的各种工具。今天，小呆和大家聊聊，在设计H5时，究竟需要用到哪些设计工具～
H5是目前涵盖领域最广的传播媒介，几乎达到了无所不用的境界，即使是使用专业H5生成平台，也很难做出理想效果，目前H5设计领域还没有统一的标准工具，需要利用多种软件来搭配制作。
H5设计师使用工具
最全能设计工具: photoshop
在adobe产品线，photoshop是个极强大的综合软件，尤其在H5领域 。 如果你在百度搜，用ps编辑声音或者视频，会看到很多大神告诫你那是不可能的。 实际上，photoshop升级到cc之后，它不但可完成矢量绘制，还能够对视频和声音进行编辑，可编辑动效和添加简单特效，功能与专业软件有差距，但基本可满足设计H5 的常规需求。
用photoshop设计画面、动效、剪辑视频、修改音乐都已经能够一气合成。所以，H5设计，有必要深入研究photoshop。
辅助设计工具: Illustrator、sketch
Illustrator(AI)和sketch做为矢量绘制软件，便于线框图绘制和快速表现画面，对于转型平面设计来说，AI的使用能让你在字体设计上更显优势， 矢量工具的选择要看个人习惯和专业背景。
特效工具: After Effects、CINEMA 4D
由于H5的媒介特性，使得它具有跨界表现力，我们可以利用这些特效软件制作出炫酷的画面，随后利用序列帧\视频导出画面并植入H5，目前多数炫酷的H5，都是利用这类软件来辅助设计的。 当然，像是 3dmax、 maya，多类设计软件都可辅助设计3D动画。 这类工具属于特殊H5所需使用的，建议设计师根据情况，选择学习。
声画编辑辅助工具: final cut、Garage Band 等
大多数H5对于声音、视频要求没那么高，苹果用户推荐使用 final cut，学习成本低， pc用户推荐使用Premiere等软件工具，上手快、功能相对全面。
而garageband是mac音乐制作软件，不仅能剪辑音频，还能进行深入编辑， 有兴趣的设计师可自行研究。 如遇到需要声画方面的修改和编辑，这些软件非常实用，并且容易掌握。
H5动效展示工具
这部分设计工具主要为定制型H5准备，当你利用第三方工具设计 H5 时，通常不需要做演示和技术人员沟通。 为更好表意，我们需要制作出相应的演示动画，当内容复杂时，甚至还需要画出详细的原型图。 而一提到动效，好多人第一反应就是头疼! 在这里给你推荐几个H5设计的演示神器!
keynote、PPT
keynote是幻灯片软件，因操作简单，功能繁多，我们可以在开发前看到演示效果，缺点是只有MAC系统可以使用，如果你是MAC系统，电脑自带的就有keynote软件， PC用户也可以用PPT来做辅助效果演示，只是操作会比较繁琐。
HYPE、 photoshop、 After Effects
如果keynote无法满足，那么hype这款移动端软件你可以试试看! 它不仅包揽keynote的动效功能，还加入了动力学模块和时间轴这样的高级命令，结合了 AE、keynote、flash 这些前辈的多种优势。 并且拥有自主响应式设计功能和将H5页面直接自动生成代码的能力。我们圈内都非常看好这款工具，只可惜因为国内环境问题，该软件目前依然还在小众软件领域。
利用PS也可做动画演示， 效果介于keynote 与hype之间。 单从效果来说，AE具备更出彩的演示能力， 不过学习成本高，演示的工具种类特别多，在这里我把最常用的列举给大家。
H5设计生成工具
(一)定制化H5生产工具
定制化的 H5 都是通过前端工程师来实现的，大体上程序员会用到 HTML5、CSS、JS 等代码语言，设计师不需学会，但需了解。这里推荐给大家一些专业门户网站， 看完这些，你基本会清楚 HTML5 包括这些标记语言的作用，从而更有利于你的发挥和创作。
(二)网站类 H5 生成工具
这类生成工具主要以网站和 APP 形式存在，需要在线编辑，不用通过前端工程师，设计师可自行完成操作。但可实现功能有限，后台数据也难以获得，一些功能需要付费解锁， 我们曾经习惯的打补丁破解的套路，在如今的H5工具，这个领域算是被终结了。 这类工具主要分为两大类:
模板类
例如:易企秀、兔展、MAKA、初页等 ... 这类工具上手很快，学习简单，但功能有限，可以快速高效的设计出一支 H5。
功能类
例如: 互动大师(iH5)、意派 360、木疙瘩...功能相对全面，能够做出近似定制的效果，未来发展潜力很大。但目前这类生成平台学习成本较高。
H5常用设计辅助工具
下图就是，此次推荐的H5相关工具了，内容真的已经非常多了，但这也仅仅是常用的一部分工具。
如果你还知道那些非常常用的H5工具，也欢迎你在本帖留言，让更多的朋友看到，了解到！了解了工具并不代表你就会设计了，很多设计师都熟练掌握了工具，但依然做不出好的H5。工具要了解，但设计方法的运用才是最重要的。下一期教程专栏，小呆将会从设计方法给大家讲解H5设计的诸多细节，尽情期待吧！
如果您想单纯了解H5工具的大全，还可以点击这篇文章，我们都为你归纳好了！：2017 | 国内最全H5工具大集合！（最全、最实用！）
本篇内容选自图书：《H5+移动营销设计宝典》
进入资讯站社群，看H5分享
- 加微信：zixunzhanxiaomi -
微博: @H5资讯站 QQ群: 465521360 微信: zixunzhanxiaomi
点击原文链接，了解H 5设计教程！