案例：围住神经猫
-
“显摆一下”或“通知好友”和“分享”的区别
- 一个是站在用户的角度
-
一个是站在开发者的角度（分享，希望推广这款游戏）
image.png
H5是什么？
- HTML5（在UI设计中的不同于写代码）
- 相应式网页
- WebAPP
- H5动画取代Flash动画
-
移动端专题页
image.png
用H5的形式做专题，以微信为代表的，实现营销目的
四大优势：
-
兼容性好
- Android
- iOS
- Windows
互动性强
-
成本低
- 耗时短
- 团队人数少
-
易推广
- 可以发朋友圈等等
H5能做什么？
-
活动推广
- 天猫双十一“你行你上啊”
品牌宣传
-
首草先生的情书
image.png 交通银行
-
产品\服务\个人介绍
-
鸿星尔克 人类究竟为什么奔跑
image.png
-
上海大众汽车
-
总结报告
- 对内，比如对员工，对上司
- 对外，对用户，展示一下今年的业绩，是可以公开的。传统的报告都是文字的形式，H5可以打破传统，可以在朋友圈等转发。
-
比如：支付宝十年账单（像看小故事一样，非常轻松）
image.png
image.png -
WWF：养活70亿个你，需要几个地球（测试题型）
image.png
image.png
H5专题页能做什么？
- 微信互动营销：摇一摇，大转盘，刮刮卡，优惠卷，调查问卷，小游戏···
- 商业展示：企业宣传，产品展示，品牌宣传，优惠促销，企业招聘，数据年报···
- 会议活动：会议，展览会，发布会，活动···
- 数字出版与教育：电子杂志，多媒体课件，培训课程···
- 电子贺卡：商业贺卡，节日贺卡，生日贺卡，祝福卡···
- 个人应用：个人秀，婚礼邀请，聚会party，求职简历···
设计要求：
- 脚本要顺畅，故事要讲好
- 引发情感共鸣
- 文案是灵魂（标题党、借势营销、流行语···）
- 引导要做好
- 融入互动，比如问答\评分\测试
- 图文要简单
-
合理运用技术，打造流畅的互动体验
image.png
萌店：汪涵call你来当CEO
image.png
image.png
H5的设计要求-常用交互方式
- 点击
- 滑动
- 绘图
- 擦除
- 摇一摇
- 重力感应
- 3D视图
- 语音互动
设计流程
注意：形式有很多种，灵活应用，比如有问答的形式，讲故事的形式，视频的形式等等并不一定非得是那种枯燥的叙述
注意：易企秀普通用户就适合用，ih5比较专业，官方也有教程，如果以后工作当中需要的话，可以好好看看，根据自己的就业需要。
规范与视觉
页面规范
-
背景图片尺寸：
分屏：640*1008px（易企秀）
6401136 7501334 7201280 10801920
长页面：750*n
-
图片格式：
-
PNG（透明）
- 如果是一些简单的图片，24和8是没有什么区别的，但是24比8的大小会打出一倍，所以用8的。如果用24的，图片太大的话会有打不开的情况，那么用户这个时候可能就关掉不看了，会增加跳出率。所以一般首先用的是PNG-8的。
- 如果用PNG8的时候，很多效果，比如平滑的效果之类的出不来，品质很糙，这个时候可以用png24的。
JPG（背景）
GIF（动画）
-
-
页面数：无限制
- 为了更好的用户体验，建议在6-12页左右
风格
- 手绘
- 矢量图形
- 背景图
文字与排版
H5设计研究院，脚本案例-大纲
- 痛点：
- 提问：
- 方案第1步：
- 方案第2步：
- 方案第3步：
- 展望未来：（最终您会有巨大的收益！销售额增长，市场占有率，用户满意度）
- 关单：（想让您的产品实现飞跃吗？把你的需求高速我们，让我们优秀的团队为您服务）
如果采用我们的方案，会带来什么样的利益
1 痛点：
你的产品是否碰到过这些问题？
市场占有率迅速发展，设计却很LOW？
因为糟糕的设计，被用户唾弃？
高价做的软件，却不如免费软件用的爽？
2 提问：
你真正研究过用户，还是强暴了用户的诉求？
研究过 / 强暴过
3 方案第1步：
产品设计的诸多事儿-我们都擅长搞定！
不好用 / 不美观 / 没有转化率
4 方案第2步：
不要着急，我们帮您逐步提升设计的有效率
易用的操作 / 美观的产品外观 / 超高的转化率
5 方案第3步：
您一定需要这样深厚的经验
300个500强企业实战案例 / 50名优秀的设计 /
8年企业培训经验 / 长达3年的售后服务
6 展望未来：
最终，您会有巨大的收益！
销售额增长 / 市场占有率增加 / 用户满意度增加 / 品牌忠诚度增加
7 关单：
想让您的产品实现飞跃吗？
把您的需求告诉我们，让我们优秀的团队为您服务
你的姓名 / 你的公司 / 你的电话
400-000-6063 二维码扫码
