案例：围住神经猫

• “显摆一下”或“通知好友”和“分享”的区别

  • 一个是站在用户的角度

  • 一个是站在开发者的角度（分享，希望推广这款游戏）

    
    image.png

image.png

H5是什么？

• HTML5（在UI设计中的不同于写代码）
• 相应式网页
• WebAPP
• H5动画取代Flash动画

• 移动端专题页

  
  image.png
  

  用H5的形式做专题，以微信为代表的，实现营销目的

四大优势：

1. 兼容性好

   1. Android
   2. iOS
   3. Windows

2. 互动性强

3. 成本低

   1. 耗时短
   2. 团队人数少

4. 易推广

   1. 可以发朋友圈等等

H5能做什么？

1. 活动推广

   1. 天猫双十一“你行你上啊”

2. 品牌宣传

• 首草先生的情书

  
  image.png

• 交通银行

3. 产品\服务\个人介绍

   1. 鸿星尔克 人类究竟为什么奔跑

      
      image.png

4. 上海大众汽车

5. 总结报告

   1. 对内，比如对员工，对上司
   2. 对外，对用户，展示一下今年的业绩，是可以公开的。传统的报告都是文字的形式，H5可以打破传统，可以在朋友圈等转发。

   3. 比如：支付宝十年账单（像看小故事一样，非常轻松）

      
      image.png
      image.png

   4. WWF：养活70亿个你，需要几个地球（测试题型）

      
      image.png
      image.png

H5专题页能做什么？

1. 微信互动营销：摇一摇，大转盘，刮刮卡，优惠卷，调查问卷，小游戏···
2. 商业展示：企业宣传，产品展示，品牌宣传，优惠促销，企业招聘，数据年报···
3. 会议活动：会议，展览会，发布会，活动···
4. 数字出版与教育：电子杂志，多媒体课件，培训课程···
5. 电子贺卡：商业贺卡，节日贺卡，生日贺卡，祝福卡···
6. 个人应用：个人秀，婚礼邀请，聚会party，求职简历···

设计要求：

1. 脚本要顺畅，故事要讲好
2. 引发情感共鸣
3. 文案是灵魂（标题党、借势营销、流行语···）
4. 引导要做好
5. 融入互动，比如问答\评分\测试
6. 图文要简单

7. 合理运用技术，打造流畅的互动体验

   
   image.png
   

   萌店：汪涵call你来当CEO

   
   image.png
   image.png

image.png

H5的设计要求-常用交互方式

• 点击
• 滑动
• 绘图
• 擦除
• 摇一摇
• 重力感应
• 3D视图
• 语音互动

设计流程

image.png

注意：形式有很多种，灵活应用，比如有问答的形式，讲故事的形式，视频的形式等等并不一定非得是那种枯燥的叙述

image.png

注意：易企秀普通用户就适合用，ih5比较专业，官方也有教程，如果以后工作当中需要的话，可以好好看看，根据自己的就业需要。

规范与视觉

页面规范

• 背景图片尺寸：

  • 分屏：640*1008px（易企秀）

  • 6401136 7501334 7201280 10801920

  • 长页面：750*n

  • 图片格式：

    • PNG（透明）

      • 如果是一些简单的图片，24和8是没有什么区别的，但是24比8的大小会打出一倍，所以用8的。如果用24的，图片太大的话会有打不开的情况，那么用户这个时候可能就关掉不看了，会增加跳出率。所以一般首先用的是PNG-8的。
      • 如果用PNG8的时候，很多效果，比如平滑的效果之类的出不来，品质很糙，这个时候可以用png24的。

    • JPG（背景）

    • GIF（动画）

  • 页面数：无限制

    • 为了更好的用户体验，建议在6-12页左右

风格

1. 手绘
2. 矢量图形
3. 背景图

文字与排版

image.png image.png image.png image.png

H5设计研究院，脚本案例-大纲

1. 痛点：
2. 提问：
3. 方案第1步：
4. 方案第2步：
5. 方案第3步：
6. 展望未来：（最终您会有巨大的收益！销售额增长，市场占有率，用户满意度）
7. 关单：（想让您的产品实现飞跃吗？把你的需求高速我们，让我们优秀的团队为您服务）

如果采用我们的方案，会带来什么样的利益

1 痛点：
你的产品是否碰到过这些问题？
市场占有率迅速发展，设计却很LOW？
因为糟糕的设计，被用户唾弃？
高价做的软件，却不如免费软件用的爽？

2 提问：
你真正研究过用户，还是强暴了用户的诉求？
研究过 / 强暴过

3 方案第1步：
产品设计的诸多事儿-我们都擅长搞定！
不好用 / 不美观 / 没有转化率

4 方案第2步：
不要着急，我们帮您逐步提升设计的有效率
易用的操作 / 美观的产品外观 / 超高的转化率

5 方案第3步：
您一定需要这样深厚的经验
300个500强企业实战案例 / 50名优秀的设计 /
8年企业培训经验 / 长达3年的售后服务

6 展望未来：
最终，您会有巨大的收益！
销售额增长 / 市场占有率增加 / 用户满意度增加 / 品牌忠诚度增加

7 关单：
想让您的产品实现飞跃吗？
把您的需求告诉我们，让我们优秀的团队为您服务
你的姓名 / 你的公司 / 你的电话
400-000-6063 二维码扫码