《可视化H5页面设计与制作:Mugeda标准教程》案例素材,课件

  • 更新时间:
  • 9655人关注
  • 点击下载

给大家带来的是《可视化H5页面设计与制作:Mugeda标准教程》案例素材,课件,介绍了关于H5页面设计、H5页面制作、Mugeda教程、H5页面设计方面的内容,本书是由人民邮电出版社出版,已被772人关注,由热心网友龙德元 提供,目前本书在H5页面设计类综合评分为:9.4分

资源详情相关推荐
《《可视化H5页面设计与制作:Mugeda标准教程》案例素材,课件》封面
  • 出版社:人民邮电出版社
  • 作者:彭澎,彭嘉埼
  • 大小:1.1 GB
  • 类别:H5页面设计
  • 热度:653
  • H5+移动营销设计宝典
  • Tableau数据可视化:从入门到精通
  • R数据可视化手册
  • 鲜活的数据:数据可视化指南
  • 编辑推荐

    《可视化H5页面设计与制作 Mugeda标准教程》基于可视化的H5制作平台“木疙瘩(Mugeda)”系统讲解了H5广告的制作方法和技巧; n
    《可视化H5页面设计与制作 Mugeda标准教程》使读者可实现无代码制作专业级交互H5动画作品; n
    《可视化H5页面设计与制作 Mugeda标准教程》精心设计了针对性强、简单易上手的案例和练习。

    内容简介

    本书以Mugeda为平台,系统地介绍了可视化H5交互动画页面的设计思路、设计方法与技术实现。 n
    本书共8章,主要内容包括移动通信和信息传播的基础知识及其与H5的关系,Mugeda的操作界面及基本操作,属性设置与基本的H5页面设计与制作,行为、触发事件与交互的设置和制作,帧动画和特型动画的设计与应用,虚拟现实、微信、图表、表单、预置考题、陀螺仪等实用工具的应用,以及交互逻辑案例解析。 n
    本书为Mugeda官方标准教程,内容全面、案例丰富,具有很强的可读性和实用性,可作为高校相关专业和各类H5培训班的教材,也可作为新媒体从业人员自学H5页面设计与制作的参考书。

    目录

    • 第1章 移动通信、信息传播与H5 n
    • 1.1 移动通信技术概述 n
    • 1.1.1 通信与移动通信 n
    • 1.1.2 移动通信的发展阶段 n
    • 1.1.3 移动通信的优势及应解决的关键问题 n
    • 1.2 信息内容与信息传播 n
    • 1.2.1 信息内容及其表达形式 n
    • 1.2.2 信息传播 n
    • 1.3 移动用户终端与智能手机 n
    • 1.3.1 无处不在的移动用户终端 n
    • 1.3.2 智能手机 n
    • 1.4 H5简介 n
    • 1.4.1 H5的基本特征 n
    • 1.4.2 H5开发工具与H5营销 n
    • 1.4.3 H5案例体验 n
    • 第2章 可视化的H5页面制作平台Mugeda n
    • 2.1 初识Mugeda n
    • 2.2 Mugeda的基本功能与应用 n
    • 2.2.1 Mugeda的基本功能 n
    • 2.2.2 Mugeda的应用 n
    • 2.3 体验H5页面制作过程 n
    • 2.3.1 Mugeda基本操作流程与账号注册 n
    • 2.3.2 数字账号操作 n
    • 2.3.3 新建H5作品 n
    • 2.3.4 编辑、删除和发布作品 n
    • 2.3.5 课堂实训——制作“自我介绍”H5 n
    • 2.4 Mugeda的编辑界面及其操作 n
    • 2.4.1 菜单栏 n
    • 2.4.2 工具栏 n
    • 2.4.3 页面栏、页面编辑区和舞台 n
    • 2.4.4 工具箱 n
    • 2.4.5 属性面板 n
    • 2.4.6 课堂实训——图形变形练习 n
    • 第3章 属性与基本的H5创作 n
    • 3.1 工作台页面、作品管理页面的主要功能与操作 n
    • 3.1.1 工作台页面的基本结构及操作 n
    • 3.1.2 作品管理页面的主要功能及操作 n
    • 3.2 舞台的属性与操作 n
    • 3.2.1 操作任务——设置舞台的属性 n
    • 3.2.2 课堂实训——新建作品练习 n
    • 3.3 H5页面的基本设计与制作 n
    • 3.3.1 页面的属性与操作 n
    • 3.3.2 操作任务——“图文配对”游戏 n
    • 3.3.3 课堂实训——“填字”游戏 n
    • 3.4 预置动画 n
    • 3.4.1 操作任务——“护眼台灯”产品广告 n
    • 3.4.2 课堂实训——“公益宣传”广告 n
    • 3.5 元件 n
    • 3.5.1 操作任务——制作壁纸 n
    • 3.5.2 课堂实训 ——制作产品介绍H5作品 n
    • 3.6 组与长页面 n
    • 3.6.1 操作任务——制作轮播图片效果 n
    • 3.6.2 课堂实训——制作照片轮播效果 n
    • 3.7 模板的使用 n
    • 3.7.1 模板的类型与商业模板的购买 n
    • 3.7.2 操作任务——使用邀请函模板 n
    • 3.7.3 课堂实训——制作母亲节贺卡 n
    • 3.8 加载页的设置 n
    • 3.8.1 加载页的设置操作 n
    • 3.8.2 课堂实训——设计加载页 n
    • 第4章 行为、触发条件与交互 n
    • 4.1 行为与触发条件 n
    • 4.1.1 “醒一醒”动画制作与音乐控制分析 n
    • 4.1.2 行为与触发条件介绍 n
    • 4.2 时间线、图层和帧的概念与基本操作 n
    • 4.2.1 基本概念 n
    • 4.2.2 图层和帧的基本操作 n
    • 4.3 帧行为交互设计与制作 n
    • 4.3.1 操作任务——“看图猜成语”游戏 n
    • 4.3.2 操作任务——“定时看图抢答”游戏 n
    • 4.3.3 课堂实训——制作“四格漫画分页播放”效果 n
    • 4.4 页行为和多层帧交互设计与制作 n
    • 4.4.1 操作任务——文字按钮交互影集 n
    • 4.4.2 操作任务——图片按钮交互影集 n
    • 4.4.3 课堂实训——制作交互影集和交互游戏 n
    • 第5章 帧动画设计与应用 n
    • 5.1 帧动画制作基础 n
    • 5.1.1 制作帧动画的基本方法和过程 n
    • 5.1.2 操作任务——“放气球”帧动画 n
    • 5.2 动画帧的操作与动画中物体运动状态的变化 n
    • 5.2.1 插入帧——将动画运动速度调慢 n
    • 5.2.2 删除帧——将动画运动速度调快 n
    • 5.2.3 复制帧——将动画重复播放 n
    • 5.2.4 移动帧——调整动画中物体的运动时间 n
    • 5.2.5 复制图层与复制帧 n
    • 5.3 运动镜头帧动画制作 n
    • 5.3.1 “街景”移镜头帧动画 n
    • 5.3.2 “飞机飞行”跟镜头帧动画 n
    • 5.3.3 “通道”推镜头帧动画 n
    • 5.3.4 “共享单车”摇镜头帧动画 n
    • 5.3.5 课堂实训——运动镜头帧动画制作练习 n
    • 5.4 运动镜头帧动画设计制作案例 n
    • 5.4.1 操作任务——“倒霉的猫”帧动画 n
    • 5.4.2 课堂实训——运动镜头帧动画制作与应用 n
    • 第6章 特型动画 n
    • 6.1 进度动画 n
    • 6.1.1 操作任务——“绘制小房子”进度动画 n
    • 6.1.2 课堂实训——制作“保护动物”动画广告 n
    • 6.2 路径动画 n
    • 6.2.1 操作任务——“UFO来了”路径动画 n
    • 6.2.2 课堂实训——制作汽车动画广告 n
    • 6.3 变形动画 n
    • 6.3.1 操作任务——“五角星变小汽车”变形动画 n
    • 6.3.2 课堂实训——制作LED 灯的H5动画广告 n
    • 6.4 遮罩动画 n
    • 6.4.1 操作任务——“走光”动画效果 n
    • 6.4.2 课堂实训——制作“走光”动画效果 n
    • 6.5 元件动画 n
    • 6.5.1 操作任务——“飞机群飞”动画 n
    • 6.5.2 课堂实训——制作禁烟广告动画元件及作品 n
    • 6.6 动画控制 n
    • 6.6.1 操作任务——双按钮动画控制 n
    • 6.6.2 操作任务——单按钮动画控制 n
    • 第7章 实用工具及其应用 n
    • 7.1 虚拟现实工具 n
    • 7.1.1 制作虚拟场景 n
    • 7.1.2 添加热点和编辑热点参数 n
    • 7.1.3 播放控制设置 n
    • 7.1.4 添加更多场景 n
    • 7.1.5 课堂实训——制作室内虚拟现实场景 n
    • 7.2 微信定制工具 n
    • 7.2.1 微信头像 n
    • 7.2.2 微信昵称 n
    • 7.2.3 定制图片 n
    • 7.2.4 发布与使用 n
    • 7.2.5 课堂实训——制作个性化微信页面 n
    • 7.3 图表工具 n
    • 7.3.1 图表的制作方法 n
    • 7.3.2 课堂实训——制作学生成绩图表 n
    • 7.4 表单工具和数据统计 n
    • 7.4.1 操作任务——“城市人口爱好”调查表 n
    • 7.4.2 数据统计 n
    • 7.4.3 编辑表单 n
    • 7.4.4 课堂实训——制作“最受游客欢迎的景区”调查表 n
    • 7.5 预置考题工具 n
    • 7.5.1 操作任务——制作模拟练习题 n
    • 7.5.2 课堂实训——制作练习题 n
    • 7.6 陀螺仪工具 n
    • 7.6.1 陀螺仪工具的使用方法 n
    • 7.6.2 课堂实训——制作“放孔明灯”交互页面 n
    • 7.7 其他实用工具 n
    • 7.7.1 幻灯片工具 n
    • 7.7.2 擦玻璃工具 n
    • 7.7.3 点赞工具 n
    • 7.7.4 绘画板工具 n
    • 7.7.5 随机数工具 n
    • 第8章 交互逻辑案例解析 n
    • 8.1 “猜谜”游戏 n
    • 8.2 “拼图”游戏 n
    • 8.3 “射击”游戏
    展开阅读
    精选笔记1:小程序登录/注册页面设计的实现代码

    24小时18分钟前回答

    界面设计

    页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局

    github地址:https://github.com/youzan/zanui-weapp

    小程序登录/注册页面设计的实现代码

    实现的功能

    1.对用户输入的手机号码进行验证,利用正则表达式:

    var reg = /^1[3|4|5|7|8][0-9]{9}$/

    验证函数:

    用户输入错误的手机号码时将会调用toast组件提示用户

    小程序登录/注册页面设计的实现代码

    getVerificationCode: function(e){
      var reg = /^1[3|4|5|7|8][0-9]{9}$/
      var phone = this.data.userPhone
      var flag = reg.test(phone)
      if(flag){
       var that = this
       var code
       this.setData({
        isValated: true
       })
      }
      else{
        Toast({
         message: '请输入正确的手机号',
         selector: '#zan-toast-test'
        });
       
      }
     },

    2.验证图片验证码(暂时为静态数据嘻嘻)

    用户输入正确的手机号码后,会显示要求用户输入图片验证码进行验证,验证成功后将会下发短信验证码给用户的手机

    小程序登录/注册页面设计的实现代码

    小程序登录/注册页面设计的实现代码

    // 图片验证码验证
     ValatedCode: function(){
      var code = this.data.valatedCode.toLowerCase()
      if (code == '3n3d') {
       this.setData({
        isValated: false
       })
       Toast({
        message: '验证码已发送',
        selector: '#zan-toast-test'
       });
       this.getCode()
       this.setData({
        disabled: true
       })
      }
      else {
       this.setData({
        isValated: false
       })
       Toast({
        message: '图片验证码输入错误',
        selector: '#zan-toast-test'
       });
      }
     },

    3. 实现发送验证码60s倒计时

    小程序登录/注册页面设计的实现代码

    var interval = null //倒计时函数
     
    data: {
      fun_id:2,
      time: '获取验证码', //倒计时 
      currentTime:61,
      userPhone: '',
      isValated: false,
      valatedCode: ''
     }, 
     getCode: function (options){
      var that = this;
      var currentTime = that.data.currentTime
      interval = setInterval(function () {
       currentTime--;
       that.setData({
        time: '已发送('+currentTime+'s)'
       })
       if (currentTime <= 0) {
        clearInterval(interval)
        that.setData({
         time: '重新发送',
         currentTime:61,
         disabled: false  
        })
       }
      }, 1000) 
     },

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

    展开阅读

    H5页面设计相关资源

    学习笔记

    17小时54分钟前回答

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一、问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架。 二、load方法详解 1.定义 $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL。 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。 可选的 c……

    11小时27分钟前回答

    JS设计模式之观察者模式实现实时改变页面中金额数的方法

    本文实例讲述了JS设计模式之观察者模式实现实时改变页面中金额数的方法。分享给大家供大家参考,具体如下: 观察者设计模式概念: 有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者(每个处的主账号金额函数)对象同时监听某一个主题对象(修改子账号金额后调用的deliver的对象Publisher)。这个主题对象在状态(调用deliver方法)发生变化时,会通知所有观察者对象,使它们能够自动更新自己。 在一个会员管理系统中,主账号给子账号充值金额的功能。 场景: 主账号有10000元,如果给子账号充值增加1000元,那么主账号的金额应该相对应报减少1000元显示9000元; 页面……