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

相关推荐

  • Axure元素库 - icons_64x64 for Axure.rplib and PSD

      Hi,下载地址在这里!记得关注哦

    2015-07-21
  • 使用Axure制作App原型怎样设置尺寸?

    最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?
    若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。
    这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。

    2014-12-31
  • 低保真原型初级指南

    发布者: mobileui 前言: 设计师Paul Rand曾说:“理解人最本质的需求,并且认识到必须寻找一个合适的场景以满足这些需求,是设计师教育的基础。”使用设计原型为我们揭示并探索这些需求,为我们提供有意义的交互及友…

    原型设计教程 2014-12-22
  • 【Mockplus教程】如何添加手势?

    手势的支持正在开发中,敬请期待……

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

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

    2015-05-11
  • 【Mockplus教程】界面闪烁花屏怎么办?

    在个别笔记本电脑上,运行Mockplus桌面版出现软件界面闪动或者界面出现黑色块。 在这种情况下,请更新您的显卡驱动程序,问题一般可解决。 或者,如果你有多个显卡,尝试切换到集成显卡。 如何切换显卡:http://ask…

    Mockplus 2015-08-12
  • 赤兔VS脉脉,产品分析、设计是否能驱动产品?

    一、行业综述 随着互联网浪潮的袭来,职场人士已经越来越不满足于传统低效率的设计方式,他们想要快速交友,快速达到自己的潜在目的(找工作、挖人、营造个人品牌等),这部分人群一直都是一个巨大的市场。 领英在2…

    2016-03-09
  • AxureRP7.0扩展元件库

    1、本元件库仅适用于Axure rp7.0以上版本; 2、本元件库已集成Axure rp7.0自带元件,避免使用中元件库的切换; 3、本元件库中所有元件均可设置,设置选项一般与元件使用说明在同一位置,使用说明一般在某个动态面板…

    2014-09-28
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • 【Mockplus教程】如何批量修改组件属性

    选择多个组件,在属性面板上面会显示这些组件的共同属性,而属性值为其中一个组件的属性值, 改变属性面板上面的属性后将应用到所有组件上。 以改变文字大小和颜色为例演示如下:

    2015-10-17