跳出思维圈,“类H5”助你市场推广一臂之力

HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来越来越受到人们的喜爱。

但是,使用H5做开发,并不是人人都能做的,需要大量的编程语言和开发的基础,而一些所谓的简单设计H5的工具功能又不完善。如果我不会js,不会HTML5语言,怎么能做出一个“类H5”的简单App呢?

作为产品小白的熊先生最近正在闷头做原型,在制作的过程中忽然发现,自己的设计其实完全可以应用到H5网页这样的推广当中。最近正在做一个旅游相关的app,那么我就帮忙帮到底,做一个旅游活动推广的“类H5”推广原型吧。

开始之前,我们需要确定一个原型设计工具,就用Mockplus好了,最近一直在用,拿来也比较顺手。

然后,列好大钢,编辑项目树。良好的规划是优秀的设计中必不可少的一部分。

接下来,我们开始页面的设计。

第一步:载入动画。

载入动画是H5页面标志性的效果之一,“类H5”当然也不能忘记这一点。

方法:导入需要的图片,根据页面的内容,设置某些组件为不可见;拖拽它们各自的链接点设置“载入时”显示自己的交互效果。并且给部分组件设置上移动的动画效果,使得整个页面更加生动。

H5en1

 

第二步:设置交互效果。

使用原型设计工具来设置“类H5”网页最大的优势就在于:原型设计工具有更多的交互效果,你想要的总有办法可以实现。这里我们先简单的设置一些弹窗的效果。比如,关于旅行社的介绍、导游的相关资质、旅游线路的介绍等等。

方法:拖拽出相应的弹窗组件,双击打开设计。然后拖拽页面中组件的链接点到弹窗上,最后设置弹出的效果。

H5en2

第三步:页面跳转。

在用户比较感兴趣的内容区域设置页面的跳转,重点内容用新的页面来讲解,减少其他内容的干扰,不仅保证了吸引用户的眼球,更加保障页面运行的流畅程度。

方法:设置页面的跳转效果对原型设计工具来说完全是小菜一碟,Mockplus只需要一个简单的拖拽动作就可以搞定了。

H5en3

第四部:在线发布。

设计做的再好,没人欣赏怎么行?可是,要怎么才能把这样一个“类H5”的原型项目发出去呢?

方法:发布。有了这个功能,你就可以把做好的作品上传到Mockplus的服务器,然后拿着这个链接分享给你的客户们了。而且,Mockplus可以很简单的就做到全屏演示的效果。怎么样,是不是很神奇?

H5en4

设计的内容比较简单,主要是希望大家能够明白这个意思。

熊先生觉得:市场也好,设计也好,我们更注重的是得到的结果,而不是手中的工具。虽然使用原型设计工具来实现H5网页似乎有些风马牛不相及,但是只要能够解决实际的问题,何必要墨守在固定的模式里呢?

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/18734/

(0)
yanz kontolyanz kontol
上一篇 2023-03-03
下一篇 2023-03-03

相关推荐

  • 使用Mockplus的九大理由

    作为交互师什么工具最得心应手尼?我用过了很多原型设计工具。最后发现单单一个工具不能满足所有需求,所以我根据项目来选择不同工具。比如客户要求高保真,要真机演示,我会考率Justinmind和 Mockplus,前者是国外…

    Mockplus 2015-03-17
  • 产品经理技能之MRD

    一、MRD与BRD的不同之处 BRD:这么做有什么好处,并说明好处在哪里? MRD的定义:通过BRD明确这件事值得做之后,描述应该怎么做,并说明这么做的原因。如果说BRD是抛出了论题,那么MRD就是要我们用论点来支撑BRD,…

    2015-11-09
  • 交互设计的背景

    交互设计的概念上一章节已经讲过了,我们还是需要进一步了解什么交互设计的发展背景,为什么会出现这个行业? 说起来还很有意思的,我们的互联网时代发展有这么几个阶段: 1.网页设计-美工时代 注重模板设计,信息…

    2014-09-23
  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18
  • Justinmind 2015年更新回顾

      2015年是激动人心的一年!今年,我们已经推出了许多新的功能,为您带来一个更美好的原型开发工具。下面,我们回顾下2015年justinmind的改进。                 &nb…

    2016-01-06
  • [自译]我们如何使用原型,原型又如何让我们更加高效

    原型是至关重要的,它能够帮助你的团队创造出最好的产品。它是一个机会来试验你的想法,并转化为有形的状态,你可以继续测试或者展开。当你的原型失败之后,你也会很软着陆-这里还有很多机会去迭代和改进。

    2016-09-08
  • 如何用AxureRP做产品的需求管理

    面对众多的产品设计需求,产品设计人员要想一一理清楚就已经是一件不容易的事,更何况要将这些需求清单全部都变成可演示的产品原型。

    2015-01-01
  • 006. 站点地图区域

    站点地图呈树状的,以主页为根节点,可以方便我们对网站整体模块和不同栏目、功能划分有一个很清晰的了解,同时也方便我们对网站整体页面进行管理(添加、删除、重命名、调整层级、调整顺序)   :选择一个节…

    2014-09-12
  • AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key!

    #交互学堂##Axure#RP8.0.0.3318更改授权验证机制,旧的授权名以及密码将会失效。 划重点:个人用户除了购买正版软件,也可以暂时维持当前版本不做升级,当然这也是以失去软件的稳定性为代价。这也就意味着一段时间…

    2016-10-31
  • 如何向外行解释产品经理频繁更改需求为什么会令程序员烦恼?

    [alert_success] 转载自猫爱吃鱼不吃耗子的知乎回答 知乎用户、随风、田文泽 等 6207 人赞同[/alert_success] 先看个图片 案例分析: 你去饭店,坐下来。 “服务员,给我来份宫保鸡丁!” “好嘞!” ——————这叫原始需求…

    2016-02-26