河北工业城市学院1h.pptxVIP

网络营销讲师郭聪慧

社交用户体验设计-H5

CONTENTS

01

02

03

04

目录

什么是H5页面？

手机H5页面的常见类型

如何制作手机H5页面？

手机H5页面专题设计

什么是H5页面

原因

2

3

1

微信用户增多

微信内容数量增多

微信内容样式增多

常见的炫酷的微信内容页面，就是手机H5页面，别称微场景、微海报等

案例鉴赏-雍正去哪了

亮点：

策划上，横版RPG小游戏，以主人公“太监小盛子”寻找偷溜出宫的“雍正皇帝”为游戏线索，插入一些对民间文化艺术知识的普及，最后引出对“中国守艺人”的活动宣传。

设计上，古风手绘漫画的背景和人物，背景音乐是梦幻西游的建邺城场景音乐，与画面风格很搭配。

交互上，点击左右按钮可以控制角色走动，点击相关人物弹出对话，可以接受或提交任务。

体验上，因为不是视频，所以画面很清晰，操作也很流畅。但是整体时间稍微有点点长，反复走动提交任务可能会增加流失率。

案例鉴赏-安全带了没

亮点：

创意上，以“安全带了么”为主题，一语双关，用7组数据和安全带动画，展现系安全带的重要性，全程有品牌露出，最后，还有送礼活动。

设计上，采用黑白风格，用“安全带”动画显示数字，清爽干净，让人在赏心悦目中触目惊心；主题用黑底红字着重展现，更加醒目突出；

交互上，每一组数据，都需要用户去点击“安全带”扣，触发数字和动画，虽然交互次数多，但小五的目光一直被牵引到最后；

体验上，流畅、清爽、干净，让人在清新、轻松交互中感受到了“滴滴出行”的用心，了解了安全带的重要性。

案例鉴赏-不可思议的改造

亮点：

策划上，以“不可思议的改造”为主题，将锤子手机重新改造智能手机体验的理念传递出去，本案例通过模拟锤子M1手机界面，用户每点击“格子”中的icon后，出现一个超赞的动画效果+一个弹屏介绍，从而展现锤子M1产品的功能、性能和体验，最底部的按钮还提供了购买、产品介绍视频，可谓一支内容丰富的H5作品。

设计上，模仿锤子M1产品界面，运用视频+动画+弹层文案介绍的方式，全方位让用户感受锤子手机的“不可思议”。

体验上，内容虽多，但感受很好，会激发大家一直看完的欲望！每点一个icon，虽然不都是惊喜，但你满心期盼下一个更炫。

案例鉴赏-90后生活方式报告

亮点：

创意上，天猫女装调取了六大城市niceAPP用户中的年轻人意见领袖，来分析作为全民“爱豆”，到底该如何引领一方流行风暴。通过数据调查来进行品牌推荐，很有说服力。

策划上，图文结合类，使用nice用户晒的照片做背景图片介绍调查信息：年轻人最喜欢的潮流品牌、年轻人最喜欢的快时尚品牌、最受年轻人欢迎的旅行地、年轻人最喜欢的韩风品牌、数码产品等等。介绍了每个品类下排在前几名的品牌。

设计上，卡通动漫风格，个性化字体，体现出时髦和潮流。选用nice品牌的代表色“黄色”作为主色调，黑色为辅色。

H5页面的常见类型

A

需要更强的互动、更高质量、更具话题性的设计来促成用户分享传播

活动运营型

C

聚焦于产品功能介绍，展示产品特性，吸引用户买买买

产品介绍型

B

倾向于品牌形象塑造，向用户传达品牌的精神态度

品牌宣传型

D

优秀的互动体验令原本乏味的总结报告有趣生动了起来

形式报告型

常见表达形式

A

简单

图文

B

礼物

C

问答评分测试

D

游戏

简单图文

礼物

问答/评分/测试

游戏

如何制作H5页面

秀米XIUMI

H5页面制作注意事项

标题

音乐

图片

特效

动画

如何写好一个标题