H5运营类页面设计浅谈

作者:major,微信高级设计师

2014至2015年,H5发展得如火如荼,各类手机端小游戏、运营、广告,纷纷采用H5的形式来进行产品和品牌传播。在这里聊一下对H5运营类页面设计的观察和思考,抛砖引玉。

一. 简介

H5运营类页面设计,是指用来承载运营活动、品牌活动或信息传递的移动端页面设计;具有展示空间小、时间碎且短、操作可互动的特点;直接目的是引起用户病毒式分享,从而提升活跃度和品牌形象。常见类型如下:

展示型:多用于图文展示,通常采用上下滑动或者左右滑动来进行多页切换,每页集中一个内容点,搭配动效出现;

游戏型:以简单操作的小游戏为主,交互性和趣味性更强,经常伴有挑战记录或者测试结果,让用户乐于分享;

产品型:通常会有2级页面存在,提供内容让用户对运营活动有更进一步的了解,同时,常会有表单出现,与用户进行互动;

进行H5设计的时候,需根据主题和内容,选择适合自己产品的H5类型,来最大化地促进传播和分享。

二. 用户为何分享

为了最大化传播效果,需要了解一下用户分享的动机有哪些?一般有以下4类:

三. 更好地吸引用户

除了依靠分享动机来让用户进行传播,在设计层面,可以通过场景趣味化、动效、参与感、讲故事的方式,来更好地吸引用户读下去,进一步产生分享的冲动。

1. 趣味化:在素材有限或场景不好直接构建的情况下,通过画面的卡通、夸张,让用户耳目一新,产生有趣的感受,更愿意进行分享;

体验地址

2. 动起来:通过动效来让用户每一次操作都充满未知、惊喜,从而吸引用户阅读到最后,大大提高常规性运营内容的阅读乐趣。

(1)万能某宝:通过信息可视化和动效,让原本复杂枯燥的内容一下产生了魔力,让你有一直滚下去的冲动;

体验地址

3. 参与进来:让用户参与进来,让用户的互动成为页面最终结果的一部分,从而产生荣耀感、专属感,用户也更愿意去分享自己的成绩单。

(1)大众点评9块9看大片:画面很黄很暴力,最重要的是让用户参与进来,最终也让用户看到自己的选择,然后顺便卖个小广告。如此黄暴的画面,怎能不分享呢?

体验地址

(2)京东母亲节:无论你选择哪个,你都是逃脱不了被打的画面,前面玩的时候有一种被戳破的感觉,最后一页的转折,让人有点小感动。你可以说他讲了故事,让你玩了游戏,无论哪种,都比单纯说教来的自然、感人。

体验地址

4. 讲故事:故事永远是最吸引人类的艺术形式之一,通过沉浸式的体验,勾起用户的回忆,引起共鸣,从而促使用户分享。

QQ浏览器的《感谢你,与我共渡的那些年》,画面很漂亮,加上意想不到的动效细节,让你把它拿在手中的时候,迅速进入到故事中去,勾起那些年自己也干过的事情......主题在最末道出,或许,你也肯定想把这种感觉,分享给自己的好友吧!

体验地址

四. 实用Tips

1. 字体

默认中文字体 Heiti SC ,中文名称叫黑体-简,一般用华文黑体来代替,两者差异微小;

默认英文字体 Helvetica Neue LT ;

字号选择不要小于18号,其他字号双数,同种类别下用同一样字号。

2. 动效类型

3. 图片和音效大小

PNG图片压缩请使用tinypng.com;音效大小一般控制在100k以内

4. 适配

一般情况下用640X1136进行设计;其他安卓机器前端切图时可以适当拉伸,变化不会太大就不用每个进行适配。

参考材料:

1. 《如此风骚!2014年刷爆朋友圈的十大 HTML5 技术案例》

http://www.uisdc.com/2014-friend-circle-html5-cases

2. 《5媚娘传奇!H5移动端页面设计心得分享》

http://www.uisdc.com/html5-case-experience-summary

3. Html5页面赏析 from Reeoo Topic

http://topic.reeoo.com/?utm_source=reeoo&utm_medium=link&utm_campaign=menu

原文发布于微信公众号 - 腾讯大讲堂(TX_DJT)

原文发表时间:2015-09-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

一篇文章读懂微信小程序:开发、生态、服务所有流程

小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或者搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太多...

464100
来自专栏程序员的知识天地

程序员抄袭代码现象普遍, 却能拿到年薪30万, 你怎么看?

你们知道程序员最熟悉,最熟练,最常用的两个快捷键是哪两个吗?没错,估计你现在心中所想的就是:和,俗名为:复制和粘贴。

8010
来自专栏猿天地

招聘季来临 如何写好一份让你薪资翻倍的技术简历

金九银十,对应届毕业生来说又到了一年一度的校园招聘黄金季了。估计很多人都开始准备自己的面试简历了。今天就简单聊聊如何打造一份好的面试简历吧。

15610
来自专栏姬小光

技术学习的二八法则

二八法则,帕列托法则(定律)也叫巴莱特定律、最省力的法则、不平衡原则等。被广泛应用在社会学,企业管理学等。

12130
来自专栏互联网杂技

强化用户体验!3个方法有效提升用户的控制感

用户体验的概念一路成长壮大,系统性概述的书籍和理念层出不穷,可执行落地的方法技巧随着技术的进步在不断变换。然而无论概念、环境如何变换,都是让产品通过媒介与人建立...

35540
来自专栏java一日一条

优秀的前端开发工程师简历是怎么样的?

在阿里常年招聘,筛过各式各样的简历,每到招聘季,筛简历、面试过程非常耗精力,当然,原因之一是我想招非常优秀的人,宁可多花些时间,另一方面,除了那些不合格的简历之...

8710
来自专栏進无尽的文章

动效实战!跟着TUBIK STUDIO学习UI动效的常见用法

对于动效的看法,我个人也觉得微动画,微交互是最好的。不过有动画总比没有的好,也要看实际用途

21410
来自专栏即时通讯技术

微信团队分享:微信每日亿次实时音视频聊天背后的技术解密

2012 年 7 月,微信 4.2 版本首次加入了实时音视频聊天功能,如今已发展了 5 年,在面对亿级微信用户复杂多变的网络和设备环境,微信多媒体团队在每个技术...

97620
来自专栏程序员的知识天地

三年前端程序员应对阿里电话面试,过程心惊胆战!

看到这条消息,说真的,心里真的很高兴,老鸡冻的,但潜意识告诉我,我现在能力肯定过不了,于是自己就怂了,回了我不行之类的话,然而,HR叫我试试,于是我想到心理上一...

18410
来自专栏CSDN技术头条

专访李哲,和一个“不安分”的程序员谈Ruby和开源

之所以采访李哲,可能很大的原因是因为他是一个“不安分”的开发者吧。从一家知名的国企离开,在当时看来是需要不少勇气的。第一次接触到他,是看到他在RubyChina...

33760

扫码关注云+社区

领取腾讯云代金券