如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1：安装

 npm install vuex --save
    


        

            1
        

    

import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' //引用store.js Vue.config.productionTip = false //阻止在启动时生成生产提示 //vue实例 new Vue({
 el: '#app',
 router,
 store, //把store挂在到vue的实例下面 template: '<App/>',
 components: { App }
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

    

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //注册Vuex // 定义常量  如果访问他的话，就叫访问状态对象 const state = {
  count: 1 } // mutations用来改变store状态, 如果访问他的话，就叫访问触发状态 const mutations = { //这里面的方法是用 this.$store.commit('jia') 来触发 jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} //暴露到外面，让其他地方的引用 export default new Vuex.Store({
  state,
  mutations
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

    

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{$store.state.count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 --> <style scoped> h5{ font-size: 20px; color: red; } </style>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

    

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <script> import {mapState} from 'vuex' export default{
  name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用 // 方法一 // computed: { //  count(){ //   return this.$store.state.count + 6 //  } // } // 方法二 需要引入外部 mapState computed:mapState({
   count:state => state.count + 10 }) // ECMA5用法 // computed:mapState({ //  count:function(state){ //   return state.count //  } // }) //方法三 // computed: mapState([ //  'count' // ]) } </script>

传统方法的缺点:

      传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax？

       ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象

       XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

       1.创建XMLHTTPRequest对象
       2.使用open方法设置和服务器的交互信息
       3.设置发送的数据，开始和服务器端交互
       4.注册事件
       5.更新界面

下面给大家列出get请求和post请求的例子 ：

get请求:      

       //步骤一:创建异步对象
       var ajax = new XMLHttpRequest();
       //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
       ajax.open('get','getStar.php?starName='+name);
       //步骤三:发送请求
        ajax.send();
       //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
       if (ajax.readyState==4 &&ajax.status==200) {
       //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
       console.log(xml.responseText);//输入相应的内容
  　　     }
        } 

post请求:

       //创建异步对象  
       var xhr = new XMLHttpRequest();
       //设置请求的类型及url
       //post请求一定要添加请求头才行不然会报错
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhr.open('post', '02.post.php' );
       //发送请求
       xhr.send('name=fox&age=18');
       xhr.onreadystatechange = function () {
       // 这步为判断服务器是否正确响应
       if (xhr.readyState == 4 && xhr.status == 200) {
              console.log(xhr.responseText);
             }
        };    

为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了。

       function ajax_method(url,data,method,success) {
       // 异步对象
       var ajax = new XMLHttpRequest();

      // get 跟post  需要分别写不同的代码
      if (method=='get') {
          // get请求
          if (data) {
              // 如果有值
              url+='?';
              url+=data;
          }else{

         }      

       // 设置 方法 以及 url
            ajax.open(method,url);

           // send即可
           ajax.send();
        }else{
             // post请求
             // post请求 url 是不需要改变
             ajax.open(method,url);

            // 需要设置请求报文
           ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

           // 判断data send发送数据
          if (data) {
            // 如果有值 从send发送
                ajax.send(data);
          }else{
               // 木有值 直接发送即可
              ajax.send();
            }
         }     

       // 注册事件
       ajax.onreadystatechange = function () {
       // 在事件中 获取数据 并修改界面显示
            if (ajax.readyState==4&&ajax.status==200) {
                // console.log(ajax.responseText);

                // 将 数据 让 外面可以使用
               // return ajax.responseText;

               // 当 onreadystatechange 调用时 说明 数据回来了
              // ajax.responseText;

              // 如果说 外面可以传入一个 function 作为参数 success
              success(ajax.responseText);
             }
         }
      }

总结：

大家在日常使用APP过程中也可以带有目的性，发现一些好看的UI或是好的交互点可以截图保存和思考：为什么这么设计？目的是什么？分析其优势之处，还可以和竞品的相似交互进行对比，始终相信“不积跬步 无以至千里”，通过在点滴中慢慢积累，今后当你遇到类似的问题时就可以快速回忆起这些知识点，自然就可以运用自如，thanks~

在这里先给大家分享一组近期APP使用过程中发现的UI&交互知识点，大家可以一起学习交流，对于个人观点不认同的可以在下面留言探讨，thanks~

产品即场景，体验又贯穿整个产品~孰重孰轻早已分不清

产品即场景，而场景化核心要素之一的“体验”，是其中最重要的一项。

本文从体验出发，结合AARRR（用户增长）模型进行阐述，其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。

从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素，产品从最开始的外部获客，转向产品内部的使用体验，再转向外部传播的这么一个过程。

文章不是教案，更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长，我会分成上下两部分发布，进入正文：

获取（ACQUISITION）分为三个部分：

一：自然流量的获取

自然流量的获取，我们能干涉其中的体验非常少，只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~

1.某个社会现象、热点所引发的相关功能性需求（例如前不久滴滴司机杀害空姐事件，引发多少芳龄少女的恐慌。提高了强烈的安全意识，这时候你会发现App Store里面一款app杀了出来“怕怕”（有兴趣的朋友自行下载体验），正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品）

2.某个痛点确确实实需要解决（当某类用户存在某个痛点时，会自己通过搜索或者同类产品对比选择一款产品进行使用，如果你的产品刚好能帮助使用者解决痛点，那么你成功吸引了用户。）

3.纯粹进行产品的体验（产品发烧友、同类竞品的体验人员、无意中下载的等）。我们称为无效流量，因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。

二：运营推广的获取

运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。

1.线上推广

其中线上推广包含线上营销活动（营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动（包括邀请好友得好礼、会员优惠、某个节日优惠等）。线上推广无非就是通过网络搭建虚拟场景，通过场景边界的不断延伸，覆盖吸引更多的用户参与进来。

2.线下推广

线下推广包含地推（地推不可避免的会带来2部分的人群：被地推活动中的奖品吸引的人；确实被产品的介绍所吸引的人）、海报&代言（同样会有2部分人群：被明星效应所吸引的人；被产品介绍所吸引的人）、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说，这又是必不可少的。

三：社群自传播

通过单点击破，这就需要运营团队有很好的洞察能力，找到符合产品调性的社群，通过事件引爆该社群或者社区，让社群成为你产品的拥护者和传播者。

1.通过老带新的模式进行获取用户

当产品与老用户之间建立很好的纽带关系后，老用户自然会以个人为中心，向外帮你宣传产品。

2.引爆社群

通过各类社区，找到符合你产品的目标人群。通过对该社群的研究，运用社群内部语言或者表达，调动整个社群帮你发力。有点及面的扩散，称之为“气球理论（很细的一根针就能戳爆气球）”这同样是能引爆传播性特别重要的一点。

3.参与感（社会关系绑定）

当你周围的人都在转发或者都在使用的时候，如果你不了解或不使用的话，会引起个体的孤独感。也就是说“他们都在玩，我不玩就落伍了”，但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候，才会出现刷爆朋友圈！

激活（ACTIVATION）分为二个部分：

当用户从外部导流进产品后，这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对，通过引导或者吸引使用者进行下一步操作。（打个比方，你去一家陌生的餐厅，进去后没任何人招呼你，没人告诉你要去选位置或者点菜，是不是有不知所措的感觉，我想你很快就会另寻他家吧）

一：进入产品后的操作引导

1.视觉引导（包括页面元素优先级、页面元素突出强弱进行视觉上的引导，很常见的就是：在你第一次使用某个产品时，会引导使用者进行第一步第二步的操作，降低用户对产品的陌生感）

2.动效引导（通过页面浮层的形式教育用户如何进行操作，这也是在产品设计中，对新用户的一种引导方式）说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。

二：产品本身是否能激起用户的探索欲

当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲，也跟你产品本身没有关系。如何激起用户的探索欲？

1.产品整体视觉表现、使用流程的体验是不是够吸引人，是不是有属于产品本身吸引人的点。（当年的path效果，直接将它送上全民热潮之巅）

2.产品是否对使用者产生持续的吸引能力，产品前期只有不断的通过各种方式刺激用户。（产品体验优化、活动力度、宣传方式、让惠让利等）但需要注意的是：过度营销不等于有效刺激。

3.产品的任务流程设置是否合理，正常情况都是由简单到复杂的程度设置任务，由于用户的沉默成本，当完成一定任务后，就会沉淀下来慢慢成为产品的忠实用户。（摩拜产品是先让用户填写个人信息，最后才提示充值押金，站在使用者的角度来看，已经把个人信息都出卖给平台了，还在乎那200多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。

上半部分先到这里，下半部分会从“留存”“转化”“传播”角度进行展开~

多数人能够成为很厉害的设计师，很厉害的产品经理。凡事都会有所谓的套路，当你熟知了解某个行业，或者多个行业的套路时。你会站在更高的视角看待问题，同样你会走的比人家更远更快。所谓的套路，是基于个人而言，可能你有个很好的导师能够告诉你以往的经验。但是我更认为，套路是通过一步步看似笨拙的努力不断总结不断归纳

众所周知，相较于平淡无奇，毫无重点的网页UI设计，具有良好视觉层次结构的网页UI设计更受用户青睐。为什么呢？答案其实很简单。极赋视觉层次感的页面设计不仅极具设计美感，取悦用户身心。而且还建立了清晰直观的视觉层级， 方便用户简单快速的识别和读取需要的页面内容，从而提升用户体验，降低跳出率。

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 DanielKahneman 提出的，百度百科上它是属于心理学上的定义。

我把它结合了自己的理解应用在设计学上可以解释为：

用户在使用某个硬件产品，软件产品或者服务系统来完成自己目标的过程中，用户情感地图曲线的波峰（体验最好）、波谷（体验最差）、结束点的体验，决定用户对整个过程的体验评价。

而在过程中体验好与不好体验的比重，好与不好体验的时间长短，对记忆几乎没有影响。

这一定律主要是阐述人对过去体验的记忆由两个因素决定，一个是「高峰」，一个是「结束」。

把用户情感地图曲线和峰终定律结合起来，简单画一张图：

既然用户整体体验与整个过程中好坏综合无关，只跟几个关键点有关，那么可以得到一个公式：

用户整体体验评价（E）=（y1-y2）+y3

y1，y2，y3 可以称为关键时刻 MOT（Moment Of Truth）

二、日常生活中的峰终定律

这两天和包子聊到宜家的峰终定律，突然明白了为什么我们有些课程调研，大家都喜欢去宜家调研了。

虽然它的店员很少，找货物也要自己找椅子搬下来，就算只买一件家具也需要逛完整个商场，但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀，这就是它的「终」。

而在逛的过程中，就像包子讲的，它的体验模式很棒，把产品作为空间的一部分。曾经有一位宜家的老顾客也说，宜家商品物有所值，展区实用，产品随意试用，大概这就是它的「峰」吧。

扔一个我的学习小伙伴包大佬的分析：

三、互联网产品中的峰终定律

如果说峰终定律怎么影响互联网产品的用户体验的话，可以先举几个体验差的例子。

很多时候，用户在某个平台完成某个任务后，会出现很多引诱用户点击的赞助商的内容。比如问卷星，每次填完，任务结束的时候，它还会打着抽奖的名义接广告……

再举个例子，你有没有过在某些 app 注册账号，登录 or 注册很多次却失败的情况，或者花了很久时间才注册 or 登录成功？原因可能是账号密码错误，可能是注册流程过多跳出率过高，可能是填写信息冗杂……

如果这款产品不是用户刚需的话，最终会导致很多用户卸载它，就算你之后流程的体验再好，用户根本无法体验到最后。

四、利用峰终定律打造「爽点」

一款好的产品不仅能够解决用户的「痛点」，也能刺激用户的「痒点」，更能打造用户的「爽点」。

有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」，提升用户体验。

如果用外卖这个来举例子的话，应该算是一个大的服务系统，它会涉及到很多方，比如消费者，商家，骑手等，而这一整个服务系统的设计，只针对消费者而言，流程也会十分复杂，其中利用峰终定律考虑的就更多了。

那就其中用户（消费者）与饿了么 app 的交互流程来举例的话，用户点外卖这个任务：

从打开 app——选择店——选择美食——付款，用户的任务已经结束了，但是饿了么会在结束的时候，给用户一个分享领取红包的福利，用户会觉得自己获得了很大的优惠，体验会十分好，这也就是利用了峰终定律的「终」。

我发现游戏里面对峰终定律是用得最多的，曾经玩过 lol，王者荣耀，吃鸡手游……

如果问曾经玩 lol 或者王者最爽的时候是什么时候，那大概是：比赛过程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等这些配音和画面的视觉刺激吧。

按照常规的模式是，杀人后系统直接提示「您已经杀灭了一名敌人」，但是它会去强化这种杀人的体验，将杀人的场景分为多种类型，通过视觉上的弹框击杀提示与配音上的激励叠加，把杀人的体验不断深化，做到，另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢？我觉得这里就利用了峰终定律的「峰」。

我记得在游戏结束的时候，比如 lol 里面推掉水晶的时候，游戏画面会停止几秒，然后再出现水晶慢慢破灭，加上大大的「胜利」二字，有的时候回到大厅还需要等几秒的时间。

王者荣耀，吃鸡这类在游戏结束的时候也会给用户很多激励，明明可以在结束后直接回到大厅，但它们会延长这些胜利或者失败的体验，如果胜利，当然是爽，还想再拥有这样的体验，继续打；如果是失败，那再接再厉，想拥有赢的体验，继续打……

总之就是会让用户上瘾。它们会把这些用户体验做到，在游戏结束的时候这些的体验就利用到了峰终定律的「终」。

五、利用峰终定律改善体验步骤

「峰终定律」改善用户体验的步骤：

• 进行可用性测试；
• 绘制用户旅程图；
• 找到「峰」，「终」时刻；
• 通过用户研究的方法找到用户心中的关键时刻；
• 将「峰」、「终」，「用户心中关键时刻」的体验优化至。