引言

首先,H5是一种较为新鲜的传播载体,他诞生(非指HTML5技术,仅指狭义概念上的H5)于2014年,发展于2015,并随着2016年一款神经病猫的小游戏而逐渐成为广告主喜爱的新锐传播方式。

其次,虽然他诞生较晚,但随着智能硬件性能、网速、屏幕显示精度土匪猛进的发展,H5作为一个跨平台,跨语言且易分享传播的内容载体,已经成为继PC端网页设计、APP(UI)设计之后最流行的设计内容之一。

很多设计小伙伴,如传统的平面设计、PC网页设计、APP设计在接触H5设计时,还是很多疑问,是不是跟设计APP界面一样呢? 还要注意哪些呢?是不是需要关心尺寸适配的问题。

我们将在本章节详细展开叙述APP设计与H5设计的区别,至于PC设计与平面设计由于差异较大,不在本次讨论范围内。

什么是H5页面

随着时代的发展,移动端用户的增加,扫码、登录、关注公众号、兑奖等行为越来越多,一个新的概念“移动适配站”即H5页面诞生。它是通过HTML/CSS/JS技术生成的网站,并且需要适配多种分辨率的屏幕。
常见的类型有:

  • H5网站
  • H5广告(宣传页)
  • H5应用(严格的说,小程序也属于此范畴)
  • H5游戏

H5和APP的区别

其实不同太多了,此处仅列出与设计有关的4大不同

1. 开发周期

首先要了解一下,开发一款程序需要哪些方面的人:

  • 前端:负责与用户交互的部分
  • 后端:负责控制软件逻辑功能的输出
    当然还有其他很多的岗位,如运维、测试等

其中,前端又可细分为前台、中台、后台:

  • 前台:直接与用户交互的界面
  • 中台:用于管理交互内容的界面
  • 后台:用于管理交互功能的界面

常见的H5逻辑功能较弱,故无需复杂后端,甚至无后端;同时,中后台的功能也主要为记录数据。
而APP通常上诉内容全有。
所以H5仅需开发前台前端页面及较为简单的后端功能,用时较少。

2. 更新迭代

H5的更新,只要研发更新玩别,所有用户均可理解看到变化;
APP的更新,则需要用户重新下载APP才可看到。
此处,还要了解一下缓存的概念:
缓存是我们在开发一款产品中,可能遇到的最麻烦的”BUG”。很多时候,我们让客户“清缓存”,但事实上,缓存是极难清除掉的。
首先,缓存是一个非常有用的技术,用户看到一款产品,可能是被很多级缓存之后的产物,据一份非官方的统计表明,互联网内容中97%都是由各级缓存(广义)承担的。

  • 缓解服务器压力(不用每次去请求资源)
  • 提升性能(打开本地资源速度当然比请求回来再打开要快得多)
  • 减少带宽消耗(我相信你可以理解)

其次,缓存有很多级,如:

  • 后端缓存(更新了功能,客户说没有看到)
  • 数据库缓存(更新了数据,有些人缺不一样)
  • 浏览器缓存(更新的页面,新手机和旧手机不一样)
  • 代理服务器缓存(更新了页面,上海的变了,北京的没变)
  • 网关缓存(更新了页面,4G变了,WIFI不变)

最后,缓存有很多阶段,这块非常复杂,看图吧:

此图,主要用于回答客户:什么时候能没有缓存?我的老板会不会有缓存?
好吧,其实看图没有明确的回答,其实我想说的是:
我也不知道啊,因为太复杂了

这一点,就要求,我们在设计H5时,最好可以有一个相对确定的版本,因为他不像APP,虽然更新方便,但是由更新导致的异常会非常多。

3. 传播性

H5的传播非常迅速
APP只能通过应用市场,且占用体积较大
(创意的内容,与本文关系不大)

4. 多平台

APP的多平台性主要体现在开发语言及运行系统的多平台性;
H5的多平台则体现在:

  1. 屏幕尺寸的多样性:安卓,ios,常规屏,全面屏,带虚拟键盘屏等
  2. 传播载体的多样性:微信、微博、其他APP(如企业微信)
    而这一点,就是我们后续章节要讨论的重点。

不同的H5应用都应注意些什么

H5网站

对于APP而言,一些交互按钮是软件自带的,如苹果无任何导航按钮,所有操作都应在APP内完成,而安卓则都有导航按钮,返回等操作可不在APP内完成。(举例,饿了么,后续截图)
而H5端,如微信内,只有返回按钮是浏览器自带的,且系统自带按钮在单页应用中体验并不良好。
(单页应用,可百度,此处不展开讲啦)
也就是说,我们在设计H5页面时,需要考虑一些交互按钮,如:

  1. 在深层页面,考虑增加返回按钮(组)
    (补图:No8)

  2. 在长页面,增加返回顶部按钮。
    比如本文,在手机端浏览时,设置了返回顶部的按钮。

  3. 在功能性页面,给出以下几种呈现方式:

    • 底部常驻(No8)
    • 伸缩式(No5)
    • 侧滑弹出
    • 隐藏式

H5广告(宣传用)

H5广告不同与H5网站,前者偏向宣传,后者偏向应用;更通俗的说,广告对于后端、后台的需求更小。
但我们也应注意到,后端及中台的重要性,如果一款应用需要长期使用,且主要逻辑不变,我们应从:“小前台,大中台”这个概念出发,协调设计、前端、后端的分工,用于减少重复劳作。
H5广告设计(Chanel通用H5也可归纳为此类),是通过一些新奇、幽默、搞笑、有些等手段来宣传、推广自身产品的设计。通过精美的图片、文案,趣味的动效、交互吸引用户的关注。

常见的动效有:

  • 位移
  • 旋转
  • 缩放
  • 翻转
  • 逐帧
  • 淡入淡出
  • 粒子效果等

常见的交互形式有:

  • 滑动切换
  • 摇一摇
  • 涂抹擦除
  • 重力感应
  • 增加音频
  • VR/AR
文档更新时间: 2019-01-07 11:10   作者:admin