请问做H5页面需要学什么？
程序员文章站
2022-03-01 13:46:08
...
不是用MAKA、初页那些模板直接替换，而是能用一些类似于互动大师的工具，做出动画效果比较独特的H5页面。我本身不是这个专业的，但是由于在工作中经常跟做H5的人撕。。有的效果明明我在其他H5里面见到过，他们还是说做不了，忽悠我，说我不是专业的不懂，最后给我一个像屎一样的H5，我还得捏着鼻子给他们钱，所以我决定去学，然后糊他们一脸。
每次看到H5，其实我都不知道问主所说的H5是指什么？因为在大天朝的眼里，把这些情况都会称为H5:
那么回来说H5吧。个人觉得H5应该是指Web页面，它采用到的技术是HTML5(或者说HTML)、CSS（说得高大尚一些CSS3）和JavaScript之类。不管你页面效果有多炫，对于一个Web页面而言基本上都离不开这几种技术。
对于Native/APP/Hybrid中的页面实现技术手段都各不一样，此时你说要将一个Web页面实现一个原生的Native页面效果，有时候还真不是说能实现的。反过来，有时候你的Native页面要实现一个Web页面也并非易事。
最后表达下下，你所看到的，未必就是真正的。另外还是说一下，得搞清楚自己所说的H5是指啥。
以上仅是个人拙见，有错欢迎指正 David Wang在胡扯些什么？许多年前那个设计和html一个人做的时代眼看着就要过完了，前端技术已然跟设计分割得相当明显，你叫学H5的学什么设计？UI需要多年的视觉修养交互需要工设理念用研需要心理学基础和统计学方法，你以为是花个十天半月就能作为h5的学前班课程结业的？
你告诉我，学h5不去学js学前端框架学一堆设计干什么？不学会UI交互UE就学不会h5么？h5是设计的实现技术，不是视觉产出，也不是交互表达，更八杆子扯不到用户体验
这年头会扯几句用户体验的人就能有赞，在那些评价各个APP的问题里面吹牛逼就算了，在求知类的问题里就别拿出来胡扯误导苍生能不能？ 钱给到位,找到的是到位的团队,时间给充足,需求提明确,最终才会得到好的效果.
钱给的少,团队不会用心做.
钱给的少,技术好的团队不会接,接的是初学者.
时间给的少,仓促赶工出不了多精细的活.
需求经常变,是人都发脾气了,更没心思做了.
别人说你不是专业的,那可能确实不是专业的,就别踏入这行了,最终你会发现做的可能还不如他们的成果.
有些看起来简单的效果,做起来并不是你想象中的那么简单的,零点几秒的效果执行差别,可能给人就有很大的区别,一些优秀的作品,都是经过精心打造和充足的经验下产生的.
另外,用跟人撕的态度合作,很难得到好的工作成果吧. 从个人最近的研究观察和私人接单的情况看来，H5页面设计已经不仅限于微信广告，其实H5现在替代的是整个移动端用户前端交互的“界面”和载体，除了广告，可能还有各种minisite，活动落地页，内容轻博客，游戏等等，某种程度上替代了原生App的部分功能和应用，所以我一直当H5是一个产品来做
进入重点，做H5需要学什么？
1、交互设计 用户体验
跟交互设计，用户体验有关的概念非常多，比如UID、UED、UCD、HCI、GUI等等，这里主要介绍三个主流的概念UID、UED、IxD。
UED（User Experience Design），即用户体验设计，侧重用户在每个环节中对产品的体验。用户与产品的每一次交互，在产品上停留的每一秒中，都是用户“体验“，你需要深入产品和用户的场景中，设计每一个体验节点。因此用户体验设计师其实有点产品经理，通常需要参与到产品的前期规划、设计、开发、测试和迭代的过程中，能力构成上主要掌握各种用户研究方法和设计思维，通常不需要很高超的图形设计技能，但要有较强的审美和设计分辨能力。
UID（User Interface Design），即用户界面设计，侧重具体场景下用户的感官感受，包括触觉、听觉、视觉等，一般以视觉为主。理想状况下，UI设计师要同时也要懂一些UE的知识，不过在业内普遍的定位，UI设计师更注重与图形界面设计，他的工作是将具体的”需求“转化为图形界面，关注的是界面每一个像素的感官体验。
IxD（Interaction Design），即交互设计，关注用户与产品的互动本身以及整个用户体验的路径。交互设计师通过视觉、听觉、触觉的动态设计来提升用户体验，同时，需要考虑用户的使用场景和判断用户路径，以此设计和引导用户和产品/界面的互动过程。
看起来很专业是吧？其实并没有，说白了就是感觉感觉感觉+逻辑逻辑逻辑，很多人学了十几年都不能成为大师，就是因为两者其一都修炼不到极致，或者两者都平平庸庸。当然如果两者都平庸，但理论水平高，跟人专业BB还是很OK的，而且做出来的东西也还过得去，客观来说，我觉得楼主可以先朝这个方向努力，万一要不小心发现自己很有天赋，可以再多加努力
怎么达到专业BB的水平。 千万不要去什么培训公司，没有卵用。
基本你要训练三种能力：
审美。不懂设计不要紧，但你要知道什么是好的设计。最好的办法就是找一个设计很牛的朋友，跟他看一样的书、逛一样的网站、关注一样的公众号，坚持一个月保证有效果。具体到H5的话可以重点关注UI、UE相关的设计类内容。主要是在脑子里积累一个关于什么是美的数据库。
同理心。产品经理最重要的就是同理心，H5其实也是一个小产品，要考虑用户场景，路径，转化等等。当然很多人都有同理心，但表达出来是否专业就决定了你是否有专业BB的水平，最常用的伎俩就是推己及彼，把自己的感受当成用户的感受，无耻一点可以找几个朋友导向性验证一下，嗯嗯，更有说服力。但切记，要用专业的语言表达出来。核心的思想是你要时刻站在“他”用户的角度看待你眼前一切称之为产品的事物。
理论表达。以下推荐一些书，有两个重点：一、模仿作者BB的方式；二、还是要实践一下，包括：平时聊天下意识表达，多下载一些App，按书籍的理论分析它的功能设计、用户路径、交互体验等等，有可能的话用一些工具实现一些想法，比如你提到的互动大师这种工具。
书籍清单，排名分先后：
入门级书籍
写给大家看的设计书(第3版)
设计心理学
破茧成蝶：用户体验设计师的成长之路
设计之下
一目了然
情感化设计
交互设计之路
瞬间之美：web界面设计如何让用户心动
中阶书籍
用户体验的要素
超越平凡的平面设计
认知与设计
细节决定交互设计的成败
简单法则
网站交互设计模式
UCD火花集
赢在用户
移动设备交互设计
锦绣蓝图：怎样规划令人流连忘返的网站
自然用户界面设计
设计人机界面
web表单设计：点石成金的艺术
Tapworthy: Designing Great iPhone App
移动应用的设计与开发
Mobile Design For iPhone And iPad
Mobile Design and Development
Designing Interactions
用户体验草图设计
简约至上
触动人心
文案训练手册
设计师要懂心理学
微交互
Responsive Web Design
至关重要的设计
Killer UX Design
The UX Book
Design is A Job
移动互联：用户体验设计指南
贴心设计：打造高可用性的移动产品
高阶书籍
HTML与CSS入门经典(第9版)
About Face 交互设计精髓
交互设计—-超越人机交互
软件观念革命
A Practical Guide to Information Architecture
Designing for Emotion
项目百态★
当用户体验设计遇上敏捷
Web导航设计
Web信息架构—-设计大型网站）
Web界面设计★
精通Web Analytics2.0★
交互设计沉思录
用户故事与敏捷方法
用户体验度量
社会心理学
Storytelling for User Experience
The Elements of Content Strategy
Lean UX★
Handbook of Usability Testing
Quantifying the User Experience
Designing the Conversation
Lean Analytics
Search Analytics for Your Site
Understanding Your Users★
Sketching Drawing Techniques for Product Designers
Card Sorting Designing Usable Categories
Service Design★
官方设计指南
Google TV Design Patterns
Google Glass Guidelines
Android Wear Guidelines
Safari Web Content Guide
Android User Interface Guidelines★
Touch Gesture Reference Guide
Apple Human Interface Guidelines
Windows 用户体验交互设计规范
看完这些。。。基本不可能，你可以只看每一类的前三本，吃透了基本也有一定水平，专业BB应该问题不大。
具体到做出来H5，那就是工具学习：目前个人的标配是 PS/Ai+AE+iH5
PS/Ai 做平面，用哪个随便
AE做Gif
iH5做H5的实现
iH5网站有课程，自学就行。Ps、AE看兴趣和天赋，半路出家且没有天赋的设计，怎么做怎么low，没有自信就还是找找平面设计帮你作图，你搞实现和交互逻辑设计就行。
说了这么多，我发现还有营销、文案、策划没讲，好累。。。这些你自己网上找吧，其实这些跟产品中的同理心是一个道理，简单来说就是 给他们愿意二次传播的 内容 先说说看你给了多少钱？需求是怎样的？再给大家看看你拿到的东西。
没图说捷豹。 目前用Hype3。
正在研究Adobe的软件，不知道是不是更好用。
小白推荐->易企秀 想要交互好专心专研CSS3+Jquery 2.0以上的版本，不要对那些什么交互快捷工具产生很强的依赖，因为说白了。很多东西源码写出来的更符合自己的想法。另外抛弃IE8以下所有版本（因为这货压根就不支持HTML5+CSS3）~ 额！前面的大神说的很好，但是有点让像我们这样的外行人晕，我也觉得不然就出够钱，不然就用免费的模板，像很多这类H5的制作网站都可以免费制作，也经常看到别人有做的很不错的，像易企秀，易速推，兔展一些的都有很多很好的模板，后期自己认真改改，推广的效果也很不错的。 看你是想做什么类型的，如果是前端页面开发的话，是需要学习一下HTML5开发语言。如果是想要做一个类似PPT 有音乐和动画的那种H5微场景展示，现在有很多免费制作平台的。操作也很简单，可以换图，换音乐，换文字的等，小白都能用。我用过一些，觉得 咫尺微页电脑端制作不错，初页的手机端制作可以。希望能帮到你。 最基本需要学html5+css3+js，然后根据你的业务去选具体的技术框架
比如：css3有很多种，dark，bootstrap 等等
特效尽可能用css3或者js提供的功能去实现，比如经常看到的小图标，以前都是切图，用图片，现在用字体库，阿里团队做了很多这种常用的小图标，再比如，一些圆角按钮用css3就搞定，以前用图片拼接，
效果没必要过于花哨，做h5时需要考虑工期，团队技术实力，性能等因素，过犹不及。
回复内容：
首先谢邀。每次看到H5，其实我都不知道问主所说的H5是指什么？因为在大天朝的眼里，把这些情况都会称为H5:
- 页面效果特别炫酷的
- Native页面
- APP页面也
- Hybrid页面
那么回来说H5吧。个人觉得H5应该是指Web页面，它采用到的技术是HTML5(或者说HTML)、CSS（说得高大尚一些CSS3）和JavaScript之类。不管你页面效果有多炫，对于一个Web页面而言基本上都离不开这几种技术。
- HTML5(HTML)是你这个页面的骨架，简单点说就是结构层，当然现在的HTML5比以前的版本先进多了，他提供了各种的 API,而这些API还是JavaScript API。只不过这些原生的API被浏览器支持
- CSS(CSS3)是用来美化你的Web页面。在CSS3中可以使用一些新的特性，帮助你实现当初依赖于设计软件或JavaScript实现的效果，比如说Web Animation效果。
- JavaScript更不用说了，他能帮你做很多事情，在所谓的 H5中，搞不好你看到的效果就是一个JavaScript的Canvas效果。那么还有其他一些特性
对于Native/APP/Hybrid中的页面实现技术手段都各不一样，此时你说要将一个Web页面实现一个原生的Native页面效果，有时候还真不是说能实现的。反过来，有时候你的Native页面要实现一个Web页面也并非易事。
最后表达下下，你所看到的，未必就是真正的。另外还是说一下，得搞清楚自己所说的H5是指啥。
以上仅是个人拙见，有错欢迎指正 David Wang在胡扯些什么？许多年前那个设计和html一个人做的时代眼看着就要过完了，前端技术已然跟设计分割得相当明显，你叫学H5的学什么设计？UI需要多年的视觉修养交互需要工设理念用研需要心理学基础和统计学方法，你以为是花个十天半月就能作为h5的学前班课程结业的？
你告诉我，学h5不去学js学前端框架学一堆设计干什么？不学会UI交互UE就学不会h5么？h5是设计的实现技术，不是视觉产出，也不是交互表达，更八杆子扯不到用户体验
这年头会扯几句用户体验的人就能有赞，在那些评价各个APP的问题里面吹牛逼就算了，在求知类的问题里就别拿出来胡扯误导苍生能不能？ 钱给到位,找到的是到位的团队,时间给充足,需求提明确,最终才会得到好的效果.
钱给的少,团队不会用心做.
钱给的少,技术好的团队不会接,接的是初学者.
时间给的少,仓促赶工出不了多精细的活.
需求经常变,是人都发脾气了,更没心思做了.
别人说你不是专业的,那可能确实不是专业的,就别踏入这行了,最终你会发现做的可能还不如他们的成果.
有些看起来简单的效果,做起来并不是你想象中的那么简单的,零点几秒的效果执行差别,可能给人就有很大的区别,一些优秀的作品,都是经过精心打造和充足的经验下产生的.
另外,用跟人撕的态度合作,很难得到好的工作成果吧. 从个人最近的研究观察和私人接单的情况看来，H5页面设计已经不仅限于微信广告，其实H5现在替代的是整个移动端用户前端交互的“界面”和载体，除了广告，可能还有各种minisite，活动落地页，内容轻博客，游戏等等，某种程度上替代了原生App的部分功能和应用，所以我一直当H5是一个产品来做
进入重点，做H5需要学什么？
1、交互设计 用户体验
跟交互设计，用户体验有关的概念非常多，比如UID、UED、UCD、HCI、GUI等等，这里主要介绍三个主流的概念UID、UED、IxD。
UED（User Experience Design），即用户体验设计，侧重用户在每个环节中对产品的体验。用户与产品的每一次交互，在产品上停留的每一秒中，都是用户“体验“，你需要深入产品和用户的场景中，设计每一个体验节点。因此用户体验设计师其实有点产品经理，通常需要参与到产品的前期规划、设计、开发、测试和迭代的过程中，能力构成上主要掌握各种用户研究方法和设计思维，通常不需要很高超的图形设计技能，但要有较强的审美和设计分辨能力。
UID（User Interface Design），即用户界面设计，侧重具体场景下用户的感官感受，包括触觉、听觉、视觉等，一般以视觉为主。理想状况下，UI设计师要同时也要懂一些UE的知识，不过在业内普遍的定位，UI设计师更注重与图形界面设计，他的工作是将具体的”需求“转化为图形界面，关注的是界面每一个像素的感官体验。
IxD（Interaction Design），即交互设计，关注用户与产品的互动本身以及整个用户体验的路径。交互设计师通过视觉、听觉、触觉的动态设计来提升用户体验，同时，需要考虑用户的使用场景和判断用户路径，以此设计和引导用户和产品/界面的互动过程。
看起来很专业是吧？其实并没有，说白了就是感觉感觉感觉+逻辑逻辑逻辑，很多人学了十几年都不能成为大师，就是因为两者其一都修炼不到极致，或者两者都平平庸庸。当然如果两者都平庸，但理论水平高，跟人专业BB还是很OK的，而且做出来的东西也还过得去，客观来说，我觉得楼主可以先朝这个方向努力，万一要不小心发现自己很有天赋，可以再多加努力
怎么达到专业BB的水平。 千万不要去什么培训公司，没有卵用。
基本你要训练三种能力：
审美。不懂设计不要紧，但你要知道什么是好的设计。最好的办法就是找一个设计很牛的朋友，跟他看一样的书、逛一样的网站、关注一样的公众号，坚持一个月保证有效果。具体到H5的话可以重点关注UI、UE相关的设计类内容。主要是在脑子里积累一个关于什么是美的数据库。
同理心。产品经理最重要的就是同理心，H5其实也是一个小产品，要考虑用户场景，路径，转化等等。当然很多人都有同理心，但表达出来是否专业就决定了你是否有专业BB的水平，最常用的伎俩就是推己及彼，把自己的感受当成用户的感受，无耻一点可以找几个朋友导向性验证一下，嗯嗯，更有说服力。但切记，要用专业的语言表达出来。核心的思想是你要时刻站在“他”用户的角度看待你眼前一切称之为产品的事物。
理论表达。以下推荐一些书，有两个重点：一、模仿作者BB的方式；二、还是要实践一下，包括：平时聊天下意识表达，多下载一些App，按书籍的理论分析它的功能设计、用户路径、交互体验等等，有可能的话用一些工具实现一些想法，比如你提到的互动大师这种工具。
书籍清单，排名分先后：
入门级书籍
写给大家看的设计书(第3版)
设计心理学
破茧成蝶：用户体验设计师的成长之路
设计之下
一目了然
情感化设计
交互设计之路
瞬间之美：web界面设计如何让用户心动
中阶书籍
用户体验的要素
超越平凡的平面设计
认知与设计
细节决定交互设计的成败
简单法则
网站交互设计模式
UCD火花集
赢在用户
移动设备交互设计
锦绣蓝图：怎样规划令人流连忘返的网站
自然用户界面设计
设计人机界面
web表单设计：点石成金的艺术
Tapworthy: Designing Great iPhone App
移动应用的设计与开发
Mobile Design For iPhone And iPad
Mobile Design and Development
Designing Interactions
用户体验草图设计
简约至上
触动人心
文案训练手册
设计师要懂心理学
微交互
Responsive Web Design
至关重要的设计
Killer UX Design
The UX Book
Design is A Job
移动互联：用户体验设计指南
贴心设计：打造高可用性的移动产品
高阶书籍
HTML与CSS入门经典(第9版)
About Face 交互设计精髓
交互设计—-超越人机交互
软件观念革命
A Practical Guide to Information Architecture
Designing for Emotion
项目百态★
当用户体验设计遇上敏捷
Web导航设计
Web信息架构—-设计大型网站）
Web界面设计★
精通Web Analytics2.0★
交互设计沉思录
用户故事与敏捷方法
用户体验度量
社会心理学
Storytelling for User Experience
The Elements of Content Strategy
Lean UX★
Handbook of Usability Testing
Quantifying the User Experience
Designing the Conversation
Lean Analytics
Search Analytics for Your Site
Understanding Your Users★
Sketching Drawing Techniques for Product Designers
Card Sorting Designing Usable Categories
Service Design★
官方设计指南
Google TV Design Patterns
Google Glass Guidelines
Android Wear Guidelines
Safari Web Content Guide
Android User Interface Guidelines★
Touch Gesture Reference Guide
Apple Human Interface Guidelines
Windows 用户体验交互设计规范
看完这些。。。基本不可能，你可以只看每一类的前三本，吃透了基本也有一定水平，专业BB应该问题不大。
具体到做出来H5，那就是工具学习：目前个人的标配是 PS/Ai+AE+iH5
PS/Ai 做平面，用哪个随便
AE做Gif
iH5做H5的实现
iH5网站有课程，自学就行。Ps、AE看兴趣和天赋，半路出家且没有天赋的设计，怎么做怎么low，没有自信就还是找找平面设计帮你作图，你搞实现和交互逻辑设计就行。
说了这么多，我发现还有营销、文案、策划没讲，好累。。。这些你自己网上找吧，其实这些跟产品中的同理心是一个道理，简单来说就是 给他们愿意二次传播的 内容 先说说看你给了多少钱？需求是怎样的？再给大家看看你拿到的东西。
没图说捷豹。 目前用Hype3。
正在研究Adobe的软件，不知道是不是更好用。
小白推荐->易企秀 想要交互好专心专研CSS3+Jquery 2.0以上的版本，不要对那些什么交互快捷工具产生很强的依赖，因为说白了。很多东西源码写出来的更符合自己的想法。另外抛弃IE8以下所有版本（因为这货压根就不支持HTML5+CSS3）~ 额！前面的大神说的很好，但是有点让像我们这样的外行人晕，我也觉得不然就出够钱，不然就用免费的模板，像很多这类H5的制作网站都可以免费制作，也经常看到别人有做的很不错的，像易企秀，易速推，兔展一些的都有很多很好的模板，后期自己认真改改，推广的效果也很不错的。 看你是想做什么类型的，如果是前端页面开发的话，是需要学习一下HTML5开发语言。如果是想要做一个类似PPT 有音乐和动画的那种H5微场景展示，现在有很多免费制作平台的。操作也很简单，可以换图，换音乐，换文字的等，小白都能用。我用过一些，觉得 咫尺微页电脑端制作不错，初页的手机端制作可以。希望能帮到你。 最基本需要学html5+css3+js，然后根据你的业务去选具体的技术框架
比如：css3有很多种，dark，bootstrap 等等
特效尽可能用css3或者js提供的功能去实现，比如经常看到的小图标，以前都是切图，用图片，现在用字体库，阿里团队做了很多这种常用的小图标，再比如，一些圆角按钮用css3就搞定，以前用图片拼接，
效果没必要过于花哨，做h5时需要考虑工期，团队技术实力，性能等因素，过犹不及。