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

相关推荐

  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11
  • 【Mockplus教程】页面属性

    每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠标右击, 弹出菜单中选择“页面属性”一项,如下图:…

    Mockplus 2015-08-31
  • Justinmind权威指南:基础-Justinmind需求面板的使用

    Justinmind权威指南 之 基础-Justinmind需求面板的使用 ​根据Justinmind 中国官方合作机构hansky的介绍:Justinmind是“需求可视化工具”,能够为使用者提供全面的原型建模解决方案,通过该方案,用户可以在正式进行…

    2015-08-10
  • 手机无线设计8个交互设计原则

    产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则: 原则1:用户界面应该是基于用户的心里模型,而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常…

    2015-04-08
  • 个性化数据交互,高阶的交互设计师必须掌握

    文 | Indulgence 个性化推荐的原理应该是在特定的,去构造一些合理的算法或规则将正确的数据推荐给正确的用户,这句话放在现在很多产品都是一样的,但可能在不同的产品上也有一点区别,比如说在百度视频里面所指的…

    2016-12-13
  • 产品经理做好跨部门合作的一个中心和三个原则

    跨部门合作是产品经理工作中最重要的一部分。除了用户调研、需求分析、原型设计等本职工作之外,跨部门沟通和合作可能就是产品经理最核心的工作了。而且,这种跨部门合作的难度和复杂性会随着公司的壮大而更难和更…

    产品经理 2015-11-19
  • 电子书阅读APP原型设计解析

    我是比较喜欢纸质书的,一本好书,我总愿意买本纸质书,放在家里可以随意翻看,或一遍,或多遍,偶尔也会当花瓶放着。 阅读纸质书是视觉,听觉,触觉,嗅觉的享受,甚至连带着回忆都是美好的。 柔和不刺眼的纸张带…

    2015-06-11
  • 视频网站APP设计原型图

    最近据GEO媒体报道,关于中国国内网络视频APP洞察分析的分析报告表。 该报告调查了华东和华北地区的约1亿用户,分析了各家视频App 3月的使用情况。数据显示,用户使用视频App高峰是在午休时间和睡觉前,即每天的13…

    2015-12-21
  • 旅美PM思考Square、Instagram、Lyft爆红的原因

    百度地图前产品经理在美国游学,并亲自体验了Square、Instagram、Lyft三家企业的服务,终于明白他们爆红的原因。 这篇文章出自前百度地图PM之手,和我们大多数人的感受一样,对于文中提到的三家初创企业——Square,In…

    2016-01-22