原标题：H5页面常用的三种交互类型
随着H5技术的发展，H5的类型和形式也越来越多，带给人的新奇感也越来越多。H5页面从一开始只有展示型，发展到现在多样的交互类型，下面就来给大家分享H5页面常用的三种交互类型。
1、展示型
虽然现在交互类型多种多样，但是展示型的主导地位还是不容动摇的。H5页面展示型属于图文型，常见的是翻页，多用于一些产品、功能、活动介绍、总结报告中。除了翻页以外，还有点击，输入文字，擦除屏幕，滑动屏幕等，玩法非常丰富。
2、游戏型
游戏型也是近非常火热的一种类型，自“围住神经猫”之后，H5页面游戏型越来越成为企业选择的营销方式。H5游戏以其可爱的画风、简单的操作、诱人的奖励虏获了许多用户的点击，通过游戏，企业不仅达到了营销推广的目的，还能够提高企业在用户心目中的形象。
3、产品型
产品型和上面两种类型有所不同，一般来说，H5页面都是一次性的，这个营销活动过去了，那么这个页面也很少会被点击。但是产品型是是作为一个长期运营的产品存在的，用户的访问可能会更固定，比如微信里的购物页面等。
H5页面的交互类型远不止以上三种，企业在决定使用哪种类型之前，一定要做好全面策划，考虑到哪种类型更适合该营销活动，从而选择正确的类型。当然，也可以考虑采用模板来设计一个H5页面，微乐拥有海量H5页面模板，操作简单，是企业H5营销之选。
微乐网络
为企业提供时代最前沿的微信互动应用
以及最实用的移动营销策略和执行解决方案 返回搜狐，查看更多
责任编辑：

交互框架
         人机交互设计都曾从Donald Norman（1988）提出的动作周期（Action Cycle）框架中受益。Norman定义了存在与想要达到某个目标的用户和为达成这个目标所必须改变的“世界”之间的两个“海湾”。
          

连续式交互
       
           自从Sutherland（1963）的开创性研究SKETCHPAD奠定了交互式图形的基础后，连续式交互的研究成果不断涌现。
          连续性交互，就是要确保用户保持对交互每个过程的理解，保证交互的顺利进行，也就是说要求系统或软件对交互方法进行引导，显示交互的变化。
        

随着H5技术的发展，H5的玩法也在增加，其中用户参与性最高的是交互型H5了，宣传效果也比较好。而且交互型H5游戏有多种交互形式。商家可以根据自己的品牌属性选择。带大家了解一下交互H5都有哪些玩法：

1、点击屏幕交互

点击是最常用的手势，经常用于页面切换。点击引导可以作为注释，用户可以理解H5内容，使用户能够按照H5的节奏操作。例如，在《带上希望的种子去北京》中，用户可以点击手势“检查”行李箱，详细查看H5设计的内容。

2、连续点击交互

连击交互在游戏类中的应用比较多。在游戏类H5中，通常由连续点击生成的数值关联积分排名，具有竞技性质的H5可以进一步吸引用户参与。例如，《漫威电影十周年》的“揍”灭霸小游戏，用户继续点击屏幕，10秒内的点击次数就会计算出整个网络排名。

3、长按交互

长按是用户根据H5引导长时间触摸页面。长按交互用户需要保持手指静止状态，并在设计时提示H5播放进度参考，以避免乏味。例如，从腾讯公益的《敦煌未来博物馆》设计的风化过程来看，用户点击手机即可看到壁画随着年份推移逐渐风化的场景，还可以唤醒用户心中的文化保护意识。

4、滑动交互

拖拽交互必须在长按交互的基础上滑动，从一个点拖动到另一个点可以让用户自行控制速度。适合图片展示类的H5。例如，在《睡姿大比拼》中，用户可以拖动角色肢体来创建各种有趣的睡眠姿势。

5、重力交互

重力交互是一个非常直观的表达形式，用户可以轻松get到H5获得乐趣，这意味着手机硬件能升级给H5设计带来了更多的可能性。利用重力感应、陀螺仪、速度加速器等硬件，对H5的玩法进行创新，提高用户的代入感。例如，安装在《一“陆”狂飙，极速挑战》上的赛车游戏是通过手机重力传感来调整小车的方向。

6、全景交互

全景交互在屏幕中以360度展现所有场景，用户可以通过滑动移动场景。这种H5格式(如VR)需要关注整个场景的设计，边界连接要足够顺畅，全景加载内容较大，一定要注意用户等待和屏幕卡顿的问题。例如，华为出品的《我的荣耀5G世界》中全景互动展示了未来丰富多彩的5G世界。

以上几种就是现目前比较常见的H5交互形式了，企业商家可以根据自己的需求来选择。

前言

前一次使用的MVC框架是简单版通知类型实现，这次使用较复杂一点的方式来实现

前一次MVC框架链接：https://blog.csdn.net/liaoshengg/article/details/82150287

但与第一种也有区别：

把发布信息与Controller类分离出NotifiCenter，使得Model层 和 View层之间进行交互而不通过Controller控制层，

也就是抽象出一个中介者NotifiCenter （通知发布中心）来代替控制类。

Model



public class MyModel : MonoBehaviour {

    private MyData mydata = new MyData ();

    //View中发送通知，进行出来
    public void UpdateScore(int s){
        mydata.Score += s;
        NotifiCenter.instance.Send ("UpdateUI", this.mydata);
    }

    public void UpdateLevel(int l){
        mydata.Level += l;
        NotifiCenter.instance.Send ("UpdateUI", this.mydata);
    }

}

public class MyData{
    public int Score = 0;
    public int Level = 0;
}


View



public class MyView : MonoBehaviour {

    private Text scoreText;
    private Text levelText;
    private Button upScoreBtn;
    private Button upLevelBtn;

    void Awake(){
        scoreText = transform.Find ("ScoreText").GetComponent<Text> ();
        levelText = transform.Find ("LevelText").GetComponent<Text> ();
        upScoreBtn = transform.Find ("ScoreButton").GetComponent<Button> ();
        upLevelBtn = transform.Find ("LevelButton").GetComponent<Button> ();

        upScoreBtn.onClick.AddListener (scoreBtnOnClick);
        upLevelBtn.onClick.AddListener (levelBtnOnClick);

    }

    private void scoreBtnOnClick(){
        NotifiCenter.instance.Send ("UpdateScore", 2);
    }
    private void levelBtnOnClick(){
        NotifiCenter.instance.Send ("UpdateLevel", 3);
    }

    public void UpdateUI(MyData data){
        scoreText.text = data.Score.ToString ();
        levelText.text = data.Level.ToString ();
    }

}

Controller



public class MyController : MonoBehaviour {

    private MyModel model;
    private MyView view;

    void Awake(){
        model = GetComponent<MyModel> ();
        view = GameObject.Find ("Canvas").GetComponent<MyView> ();

        NotifiCenter.instance.Add ("UpdateScore", model.UpdateScore);
        NotifiCenter.instance.Add ("UpdateLevel", model.UpdateLevel);
        NotifiCenter.instance.Add ("UpdateUI", view.UpdateUI);

    }
}



NotifiCenter

public class NotifiCenter : MonoBehaviour {


    public static NotifiCenter instance;
    public Dictionary<string,Action<MyData>> dicMV;
    public Dictionary <string,Action<int>> dicVM;

    void Awake(){
        instance = this;
        dicMV = new Dictionary<string, Action<MyData>> ();
        dicVM = new Dictionary<string, Action<int>> ();
    }

    //重载
    public void Add(string key,Action<MyData> value){

        if (dicMV.ContainsKey (key)) {
            dicMV [key] += value;
        } else {
            dicMV.Add (key, value);
        }

    }

    public void Add(string key,Action<int> value ){
        if (dicVM.ContainsKey (key)) {
            dicVM [key] += value;
        } else {
            dicVM.Add (key, value);
        }
    }

    public void Send(string key,MyData para){
        if (dicMV.ContainsKey (key)) {
            dicMV [key] (para);
        }
    }

    public void Send(string key,int para){
        if (dicVM.ContainsKey (key)) {
            dicVM [key] (para);
        }
    }
}


实现流程



开始初始化： 

开始的时候首先控制类先对NotifiCenter进行注册事件方法

        NotifiCenter.instance.Add ("UpdateScore", model.UpdateScore);
        NotifiCenter.instance.Add ("UpdateLevel", model.UpdateLevel);
        NotifiCenter.instance.Add ("UpdateUI", view.UpdateUI);

不过这里因为是使用字典，要记得先初始化字典空间,再给字典添加成员

dicMV = new Dictionary<string, Action<MyData>> ();
dicVM = new Dictionary<string, Action<int>> ();

然后： 

开始玩家和UI的交互（点击按钮） 

点击按钮的时候，向通知中心发布（Send）一个消息，这个消息让数据层进行数据更新； 

接着，数据更新完毕后也会向通知中心发布一个消息（Send）一个消息，这个消息让UI显示（Text）进行数据显示更新。