跳出思维圈,“类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

相关推荐

  • UX的设计灵感从哪里来?——看看Megan Wilson的采访

    Megan Wilson是一位资深的用户体验师和UX Motel的专业编辑。同时她是ux.walkme.com网站UX专栏作家,在Facebook、领英有大量粉丝。和一般介绍性的文章不同,她喜欢用访谈的方式来发表UX方面的文章,这样的文章,有很…

    2023-03-03
  • 用什么工具?做什么原型?给谁看?

    我们在日常的软件设计中经常会涉及到原型的设计。设计一个原型,无非就是三个目的:第一个目的是给自己看的,为了方便之后的下一步设计;第二个目的是给开发看,说服开发,完善软件;第三个目的是给客户看,让客户…

    2023-03-03
  • Justinmind权威指南:​基础-Justinmind基本元件的使用-2

    ​上一节说了文本、多行文本、图片、线段元件的使用方式,这一节会讲解最常用的矩形、椭圆、三角形、标注 矩形 这个是最常用的没有之一,原因是因为我们设计产品的基本架构都是方形的,这个大概与硬件的制约有关系,…

    2015-08-31
  • 产品经理技能之MRD

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

    2015-11-09
  • 《增长黑客》读书总结

    第一章 增长黑客的崛起 关于增长黑客——用数据说话,为初创公司解决用户增长问题 • 增长黑客起源:增长黑客源于硅谷,最早于2010年由Qualaroo的创始人Sean Ellis提出,在2012年Andrew Chen在博客上首次定义增长黑客…

    2015-09-24
  • Chinco(摩客串串)——App原型交互演示利器

    Chinco是继国产原型设计软件Mockplus之后,由摩客团队独立设计开发,秉持了摩客团队“关注设计,而非工具”的一贯理念和产品风格。 Chinco是一款用于App原型交互演示的工具,为UX/UI设计师、交互设计师、视觉设计师的…

    2015-11-18
  • 腾讯高级产品经理干货分享:运营就像追妹子,你不仅要活好,还要走心,有耐心

    陈婷婷:互联网运营8年,腾讯高级产品经理,现任QQ空间功能、创新项目运营负责人。 戳下方视频,学习怎样像追妹子一样做好运营? (视频时长共07:48) 千百年来,有一件事男生女生——当然更多的是男生——都会做,那就…

    2016-04-08
  • 看了这三个问题,你就知道UX设计师如何起步

    如何成为一个合格的UX设计师,怎样才能从菜鸟转变为设计高手,每天都有无数的设计师思考着同样的问题。凡事要做好,必须得回答这三个问题:做什么?怎么做?用什么做?看了这三个方面的问题,你就应该能够明白如何…

    2023-03-03
  • 如何从3个方面判断是否做交互动画

    IOS 7出来后,交互动画立刻成为设计师的抢手货,有关动效设计的教程都趁势火了一把,但是很少有人讨论到底该不该做交互动画,如果做,为什么?今天终于有同学分享了他的观点,一旦符合文中提到的3个方面,那死心塌…

    2014-09-28
  • 025. axure网格设置

    Axure默认的界面是没有把网格显示出来,没有网格在制作原型的时候,对齐方面不是很好,个人习惯还是把网格显示出来,便于组件对齐和布局。 其实本来这篇文章应该叫做网格与参考线,只是本人对参考线的应用还很局限…

    2014-09-11