如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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（用戶增長）模型進行闡述，其中我認為該模型的使用必須是在產品搭建的場景下才能運作的。而其中涉及每一步的良好體驗剛好又反哺場景的完善。

從獲取-激活-留存-轉化-傳播每一個步驟中都存在內部因素和外部因素。本文只講內部因素，產品從最開始的外部獲客，轉向產品內部的使用體驗，再轉向外部傳播的這么一個過程。

文章不是教案，更不是真理。希望大家帶著批判的眼光去看待每一篇文章。畢竟思辨精神才是形成獨立思維的法寶。由于文章較長，我會分成上下兩部分發布，進入正文：

獲?。ˋCQUISITION）分為三個部分：

一：自然流量的獲取

自然流量的獲取，我們能干涉其中的體驗非常少，只能打磨產品本身。但是自然流入的用戶一定是基于以下幾個點中的其中一個或多個。我們或許可以干涉體驗前~

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 里面推掉水晶的時候，游戲畫面會停止幾秒，然后再出現水晶慢慢破滅，加上大大的「勝利」二字，有的時候回到大廳還需要等幾秒的時間。

王者榮耀，吃雞這類在游戲結束的時候也會給用戶很多激勵，明明可以在結束后直接回到大廳，但它們會延長這些勝利或者失敗的體驗，如果勝利，當然是爽，還想再擁有這樣的體驗，繼續打；如果是失敗，那再接再厲，想擁有贏的體驗，繼續打……

總之就是會讓用戶上癮。它們會把這些用戶體驗做到，在游戲結束的時候這些的體驗就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗步驟

「峰終定律」改善用戶體驗的步驟：

• 進行可用性測試；
• 繪制用戶旅程圖；
• 找到「峰」，「終」時刻；
• 通過用戶研究的方法找到用戶心中的關鍵時刻；
• 將「峰」、「終」，「用戶心中關鍵時刻」的體驗優化至。