如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

微信小程序動(dòng)畫之點(diǎn)擊效果

代碼：
js：

// pages/test/test.js
Page({
  containerTap: function (res) {
    var that = this
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      rippleStyle: ''
    });
    setTimeout(function () {
      that.setData({
        rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
      });
    }, 200)
  },
})


wxml：

<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>

wxss：

page{height:100%}
.container{
    width:100%;
    height:100%;
    overflow: hidden
}
.ripple {
    background-color:aquamarine;
    border-radius: 100%;
    height:10px;
    width:10px;
    margin-top: -90px;
    position: absolute;
    
    overflow: hidden
}
@-webkit-keyframes ripple {
    100% {
    webkit-transform: scale(12);
    transform: scale(12);
    background-color: transparent;
    }
}

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

2018年如自己所愿，終于有機(jī)會(huì)可以嘗試下數(shù)據(jù)大屏的可視化設(shè)計(jì)，但是想象總歸是美好的，新手上崗第一次總是那么不太如意，陌生而又熟悉著。在做過(guò)幾次嘗試后，自己又私下里翻閱了一些關(guān)于數(shù)據(jù)大屏方面的設(shè)計(jì)文章，好的設(shè)計(jì)圖片。有很多不足，也有很多剛開(kāi)始做的時(shí)候沒(méi)有注意到的點(diǎn)，這次整理作品，也順便把大概的設(shè)計(jì)流程整理了一下。給自己的一個(gè)復(fù)盤總結(jié)，也是一次設(shè)計(jì)分享。

文章來(lái)源：UI中國(guó)

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

這周萌芽決定好好學(xué)習(xí)一下ES6，感興趣的小伙伴們來(lái)一起學(xué)習(xí)吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移動(dòng)端、Node.js

編譯轉(zhuǎn)換

1.在線轉(zhuǎn)換（browser.js）
2.提前編譯

ES6新特性
1.變量
2.函數(shù)
3.數(shù)組
4.字符串
5.面向?qū)ο?br /> 6.promise（串行化異步交互）
7.generator（把同步拆分為異步）
8.模塊化（ES6自帶模塊化）

變量
var
1.可以重復(fù)聲明
2.無(wú)法限制修改
3.沒(méi)有塊級(jí)作用域（沒(méi)有語(yǔ)法塊?。?br />
let 不能重復(fù)聲明(變量，可以修改)
const 不能重復(fù)聲明(常量，不能修改)

塊級(jí)作用域，let在外部無(wú)法調(diào)用

函數(shù)
箭頭函數(shù) =>

function show(){
//這是我們平常的函數(shù)
}
let show=()=>{
//箭頭函數(shù)
}
//區(qū)別不大，把function省略掉換成箭頭，主要就是為了方便，可傳參

1.如果只有一個(gè)參數(shù)，（）可以省去。

 let show=a=>{
        return a*2
    }

2.如果只有一個(gè)return，{}可以省略

   let show=a=>a*2;
   let arr = [15,2,37,11,67,4,6]; //排序
  
   arr.sort((n1,n2)=>{
        return n1-n2;
    })
    
    arr.sort((n1,n2)=> n1-n2 );
    console.log(arr)


函數(shù)的參數(shù)
1.參數(shù)擴(kuò)展/展開(kāi)
2.默認(rèn)參數(shù)

參數(shù)的擴(kuò)展
1.收集參數(shù)

 function arrData(a,b,...args) {
        alert(a);
        alert(b);
        alert(args);
    }
    *注意：Rest Parameter必須是最后一個(gè)(除其他語(yǔ)言)
1

2.展開(kāi)數(shù)組

    arrData(...arr);       //等價(jià)于 arrData(1,2,3);
1
這仨點(diǎn)兒【…】代表把數(shù)組內(nèi)容掏出來(lái)放這。

默認(rèn)參數(shù)

//jQuery中的默認(rèn)參數(shù)
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);

//ES6默認(rèn)傳參
   function showOne(a,b=10,c=5) {
        console.log(a,b,c)
    }

解構(gòu)賦值
1.左右兩邊解構(gòu)必須一樣
2.右邊必須是個(gè)合法的東西
3.聲明和賦值不能分開(kāi)(必須在一句話里完成)

    let  [one,two,three] = [10,20,30];
    let  {one1,two2,three3} = {a:10,b:20,c:30};

數(shù)組
map 映射（一個(gè)對(duì)一個(gè)。傳幾個(gè)返回幾個(gè)）

let result = arr.map(function (item) {
    return item*2;
});//簡(jiǎn)寫一下
let result = arr.map(item=>item*2 );

//判斷考試成績(jī)
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');

reduce 匯總（算個(gè)總數(shù)，算個(gè)平均數(shù)）

//tmp：上次求和總和，為兩兩相加，如果之前沒(méi)有結(jié)果則為傳進(jìn)來(lái)的數(shù)組的第一個(gè)數(shù)。
//itme：當(dāng)前的數(shù)。
//index：執(zhí)行的次數(shù)。

   let result = arr.reduce(function (tmp, item, index) {
       return tmp + item;
    });
    //簡(jiǎn)寫
    arr.reduce((tmp, item, index)=>tmp + item);

filter 過(guò)濾器(篩選掉不需要的)

 let result = arr.filter(item=>{
        if (item%2 == 0){
            return true;
        } else {
            return false;
        }
    });
    
 //簡(jiǎn)寫
let result = arr.filter(item=>item%2 == 0);
       
//***萌芽在這里提一下！json和之前的item都不是固定的，可以隨便命名。意思都是當(dāng)前的值！

 let arrProce = [
        {title:'男士襯衫',price:75},
        {title:'女士包包',price:5000},
        {title:'男士包包',price:20},
        {title:'女士鞋',price:2500}
    ];
    let result = arrProce.filter(jsom=>json.price >= 2000);
    console.log(result);

forEach循環(huán)(迭代)

   arr.forEach((item,index)=>{
        alert(index+":"+item)
    })

字符串
1.多了倆新方法
startsWith()； //判斷開(kāi)頭，返回布爾類型
endWith()； //判斷結(jié)尾，返回布爾類型

let str='hello,world!'
str.startsWith('h')
str.endWith('!')      //返回true

2.字符串模板
字符串連接
2.1直接把東西塞進(jìn)字符串里面 ${東西}
2.2可以折行

<h1>${title}</h1>
<p>${content}</p>

ES6的面向?qū)ο?br /> 1.class關(guān)鍵字，構(gòu)造器和類分開(kāi)啦。
2.class里面直接加方法。

    class User{
        constructor(name,password){   //構(gòu)造器
            this.name = name;
            this.password = password;
        }

        showName(){
            alert(this.name);
        }
        showPass(){
           alert(this.password);
        }
    }

    var user = new User('萌芽子','123456');
    user.showName();
    user.showPass();

繼承

    class VipUser extends User{
        constructor(name,password,age){
        super(name,password);          //super 超類
        this.age = age;
        }
        showAge(){
            alert(this.age)
        }
    }
    var user = new VipUser('萌芽子','123456','18歲');
    user.showName();
    user.showPass();
    user.showAge();

不得不說(shuō)作為一只JAVA汪，這種寫法真得勁！

面向?qū)ο蟮膽?yīng)用
React
1.組件化（class）
2.JSX（JSXbabelbrowser.js）
JSX屬于JS的擴(kuò)展版

class Test extends React.Component{
 constructor(...args){
 super(...args);
 }
render(){
return <li>{this.props.str}</li>         //props:屬性
}
}

window.onload = function(){
let oDiv = document.getElementById('div1');

ReactDOM.render(
<ul>
<Item str="你好"></Item>
<Item str="世界！"></Item>
</ul>
oDiv
);
};


打卡，下次就學(xué)這個(gè)了！===============

json
1.JSON對(duì)象

JSON.stringify() json轉(zhuǎn)字符串

 let json = {a:10, b:20};//JSON.stringify   字符串化
    let str = 'http://www.baidu.com/path/user?data='+JSON.stringify(json);
    str = 'http://www.baidu.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
    alert(str)
1
2
3
4
JSON.parse() 字符串轉(zhuǎn)json

    let str = '{"a":12,"b":20,"c":"可樂(lè)"}';
    let json = JSON.parse(str);
    console.log(json);

2.簡(jiǎn)寫
在新版的ES6當(dāng)中名字一樣的鍵（key）和值（value）可以只寫一個(gè)。

    let a = 12;
    let b = 5;
    let json = {a,b,c:21};

簡(jiǎn)化了JSON中的方法。

 let json ={
        a:12,
        showJson(){
            alert(this.a);
        }
    };
    json.showJson();

json的標(biāo)準(zhǔn)寫法：
1.只能用雙引號(hào)
2.所有的名字都必須用引號(hào)包起來(lái)（所有的key都必須是雙引號(hào)）

{a:12,b:5}     × 錯(cuò)誤的寫法
{"a":"萌萌萌","b":"芽子"}     √ 正確的寫法
1
2
Promise(承諾)
異步：操作之間沒(méi)啥關(guān)系，同時(shí)進(jìn)行多個(gè)操作
同步：同時(shí)只能做一件事
優(yōu)缺點(diǎn)：
異步：代碼更復(fù)雜
同步：代碼簡(jiǎn)單
Promise——消除異步操作
*用同步一樣的方式來(lái)書寫異步代碼；

    let p = new Promise(function (resolve,reject) {
        //異步代碼
        //resolve——成功
        //reject——失敗
    })

-----------------------------------------訪問(wèn)我們的arr.txt文件，這里用到了jQuery的ajax就不詳細(xì)介紹了。
  let p = new Promise(function (resolve, reject) {
        //異步代碼
        //resolve——成功
        //reject——失敗
        $.ajax({
            url: 'arr.txt',
            dataType: 'json',
            success(arr) {
                resolve(arr);
            }, error(err) {
                reject(err);
            }
        })
    });
    //結(jié)果
    p.then(function (arr) {
        alert('成功啦' + arr)
    }, function (err) {
        alert('失敗了' + err)
        console.log(err)
    });
-----------------------------------------------多個(gè)請(qǐng)求地址
  Promise.all([p1,p2]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一個(gè)失敗了');
    });
    ----------------------------再簡(jiǎn)化
    function createPromise(url){
    return new Promise(function (resolve, reject) {
            $.ajax({
                url,
                dataType: 'json',
                success(arr) {
                    resolve(arr);
                }, error(err) {
                    reject(err);
                }
            })
        });
    }
  Promise.all([
        createPromise('arr.txt'),
        createPromise('json.txt')
    ]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一個(gè)失敗了');
    });
----------------------完美寫法
 Promise.all([
        $.ajax({url:'arr.txt',dataType:'json'}),
        $.ajax({url:'json.txt',dataType:'json'})
    ]).then(function (results) {
        let [arr,json] = results;
        alert("成功了");
        console.log(arr,json)
    },function () {
        alert("失敗了")
    })

我們有了promise之后的異步：

 Promise.all([ $.ajax(),$.ajax() ]).then( results=>{
   //對(duì)了
    },err=> {
   //錯(cuò)了
    })

Promise.all （必須全部成功）
Promise.race（同事讀多個(gè)數(shù)據(jù)，即使失敗也沒(méi)關(guān)系）

generator(生成器)
普通函數(shù) - 一路到底執(zhí)行不可中斷
generator函數(shù) - 可中斷

 function * show() {
        alert('a');
        yield;//暫時(shí)放棄執(zhí)行
        alert('b');
    }
    let genObj = show();
    genObj.next();
    genObj.next();

yield
yield傳參

  function * show(num1,num2) {
        alert(`${num1},${num2}`);//es6
        alert('a');
       let a = yield;//暫時(shí)放棄執(zhí)行
        console.log(a);
        alert('b');
    }
    let genObj = show(99,88);
    genObj.next(12);//第一個(gè)next無(wú)法給yield傳參的，廢的
    genObj.next(5);

yield返回

  function *show() {
        alert('a');
        yield 12;
        alert('b');
        return 55;
    }

    let gen = show();
    let res1 = gen.next();
    console.log(res1);      //{value: 12, done: false}
    let res2 = gen.next();
    console.log(res2);//{value: undefined, done: true}  加了return  {value: 55, done: true}



還沒(méi)做的菜叫函數(shù)參數(shù)，過(guò)程是yield之前函數(shù)里面的東西，干凈的菜，切好的菜是中間過(guò)程也就是yield，最終我們將它返回出去！不得不說(shuō)這圖很生動(dòng)。
異步操作
1.回調(diào)

$.ajax({
    url:'url',
    dataType:'json',
    success(data){
        $.ajax({
            url:'xxx',
            dataType: 'json',
            success(data) {
                //完事兒了
            },error(err) {
                alert('錯(cuò)了')
            }
        })
    },error(){
        alert('失敗')
    }
})

2.Promise

Promise.all([
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'})
    ]).then(results=>{
        //完事兒
    },err=>{
        //錯(cuò)誤的
    })

3.generator

runner（function  *（）{
let data1 = yield $.ajax({ulr:xxx,dataType:'json'});
let data2 = yield $.ajax({ulr:xxx,dataType:'json'});
let data3 = yield $.ajax({ulr:xxx,dataType:'json'});
}）
1
2
3
4
5
generator（不能用=>函數(shù)）
邏輯判斷下非常好用。
Promise：一次讀一堆。
generator：邏輯性。

runner（function *（）{
let userData = yield $.ajax({url:'getUserData',dataType:'json'});
if(userData.type == 'VIP'){
let items = yield $.ajax({url:'getVIPItems',dataTyoe:'jsom'});
}else{
let items = yield $.ajax({url:'getItems',dataTyoe:'jsom'});
      }
//生成...
}
}）

總結(jié)
1.變量：
var：能重復(fù)聲明、函數(shù)級(jí)
let： 嚴(yán)格的，不能重復(fù)聲明，塊級(jí)，變量
const：嚴(yán)格的，不能重復(fù)聲明，塊級(jí)，常量

2.箭頭函數(shù)
2.1方便
i.如果只有一個(gè)參數(shù)，（）可以省
ii.如果只有一個(gè)return，{}可以省
2.2修正了this
this相對(duì)正常點(diǎn)

3.參數(shù)擴(kuò)展
…能收集
…能擴(kuò)展
默認(rèn)參數(shù)

4.數(shù)組方法
map 映射
reduce 匯總
filter 過(guò)濾
forEach 循環(huán)

5.字符串
starsWith/endWith
字符串模板:${a}xxx

6.Promise
封裝異步操作
Promise.all([]);

7.generator
function *show(){
yield
}

8.JSON
JSON.stringify({ a :12,b :5}) => {“a”:12,“b”:5}
JSON.parse(’{“a”:12,“b”:5}’) =>{a:12,b:5}//字符串

9.解構(gòu)賦值
let [a,b,c] = [12,5,8]；
左右結(jié)構(gòu)一樣，右邊是個(gè)合法的東西，連生命帶賦值一次完成。

10.面向?qū)ο?br /> class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
繼承
class Test2 extends Test(){
constructor(){
super();
}
}

談?wù)凟S7和ES8
1.數(shù)組includes
數(shù)組是否包含某個(gè)東西

2.數(shù)組 keys/values/entries
for…in(循環(huán)數(shù)組)
對(duì)于數(shù)組來(lái)講循環(huán)的是下標(biāo)
對(duì)于json循環(huán)的是key

for…of(循環(huán)迭代器)
對(duì)于數(shù)組循環(huán)的是值
不能用于JSON，json并不是迭代器

keys = >所有的key拿出來(lái) 0,1,2,3…
values =>所有的values拿出來(lái) 23,5,8,1…
entries =>所有的鍵值對(duì)拿出來(lái) {key:0,value:a}

let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);

預(yù)覽版，目前極大多數(shù)瀏覽器都不支持，以后可能會(huì)支持，了解一下就好。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

數(shù)字化經(jīng)濟(jì)日益發(fā)達(dá)的現(xiàn)階段，數(shù)字化產(chǎn)品作為線上觸點(diǎn)，也就逐漸成為服務(wù)中的標(biāo)配，它更像一個(gè)服務(wù)員通過(guò)屏幕與用戶發(fā)生對(duì)話。在這場(chǎng)對(duì)話中，好的設(shè)計(jì)應(yīng)該像一門語(yǔ)言，能夠承載起傳達(dá)與溝通的工具屬性。

為什么我們需要設(shè)計(jì)語(yǔ)言系統(tǒng)（DLS）

我們也可以見(jiàn)到，越來(lái)越多的設(shè)計(jì)團(tuán)隊(duì)都會(huì)構(gòu)建一套屬于自己產(chǎn)品的設(shè)計(jì)語(yǔ)言系統(tǒng)。對(duì)于團(tuán)隊(duì)內(nèi)部，它的意義在于通過(guò)系統(tǒng)化的設(shè)計(jì)規(guī)則，來(lái)控制產(chǎn)品長(zhǎng)期迭代的熵值，以及提升團(tuán)隊(duì)的協(xié)同效率，同時(shí)，設(shè)計(jì)師有機(jī)會(huì)從重復(fù)的勞動(dòng)中解放出來(lái)，投入更多精力到探討問(wèn)題本質(zhì)實(shí)現(xiàn)價(jià)值創(chuàng)新。就好像在石器時(shí)代，祖先們記錄事件或表達(dá)情感的混亂程度，遠(yuǎn)遠(yuǎn)高于現(xiàn)代人，關(guān)鍵在于是否擁有一套成熟的語(yǔ)言系統(tǒng)。

對(duì)于外部用戶，設(shè)計(jì)語(yǔ)言系統(tǒng)可以讓產(chǎn)品在不同終端、不同場(chǎng)景中的表現(xiàn)保持一致性，也有機(jī)會(huì)通過(guò)植入品牌基因的方式形成視覺(jué)錘，提升產(chǎn)品的識(shí)別度以及消費(fèi)者對(duì)品牌的認(rèn)知。就好像，我們可以通過(guò)「豬鼻」車頭識(shí)別出那是寶馬，通過(guò)「青蛙眼」車燈知道那是保時(shí)捷，是因?yàn)檫@些汽車品牌通過(guò)長(zhǎng)期保持某個(gè)「一致性」的表現(xiàn)，形成一套高識(shí)別度的設(shè)計(jì)語(yǔ)言來(lái)表達(dá)「這就是我」。

界面設(shè)計(jì)的語(yǔ)言屬性

在這里我們將借助語(yǔ)言學(xué)的角度，來(lái)探討數(shù)字化產(chǎn)品界面設(shè)計(jì)語(yǔ)言系統(tǒng)的構(gòu)建。在語(yǔ)言的應(yīng)用中，我們通常會(huì)涉及語(yǔ)法、語(yǔ)素、語(yǔ)句、語(yǔ)境、語(yǔ)氣等維度，通過(guò)不同的組合達(dá)成應(yīng)景的表達(dá)與適時(shí)的溝通。

1. 語(yǔ)法

設(shè)計(jì)原則，可以理解為設(shè)計(jì)語(yǔ)言中的語(yǔ)法，是構(gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)的起點(diǎn)，用于傳達(dá)品牌主張或設(shè)計(jì)理念，它將指引業(yè)務(wù)設(shè)計(jì)執(zhí)行的方向。

制定設(shè)計(jì)原則時(shí)，首先研究用戶特性，聚焦產(chǎn)品核心價(jià)值，然后通過(guò)腦暴等形式選擇有特點(diǎn)的維度，結(jié)合用戶體驗(yàn)與品牌屬性將其視覺(jué)化，最后用簡(jiǎn)要的語(yǔ)言歸納出來(lái)。

例如 Airbnb 的設(shè)計(jì)原則簡(jiǎn)單歸納為幾點(diǎn)：

• 統(tǒng)一性：每一塊設(shè)計(jì)，都是更大整體中的一部分，因此必須站在更大范圍的角度上，給予系統(tǒng)積極正面的貢獻(xiàn)。設(shè)計(jì)功能不應(yīng)該是孤立的，也不能是離群的。
• 普遍性：Airbnb 在全世界使用，用戶更是一個(gè)全球性的社區(qū)。我們的產(chǎn)品和可視化語(yǔ)言應(yīng)該受到用戶歡迎，同時(shí)也要易于訪問(wèn)。
• 標(biāo)志性：我們專注于設(shè)計(jì)和功能，因此在這兩方面，我們要既大膽又清晰。
• 對(duì)話性：呼吸對(duì)生命如此重要，我們要把同樣的設(shè)計(jì)理念融入到產(chǎn)品里面，通過(guò)更容易理解的方式與我們的用戶進(jìn)行交流、溝通。

2. 語(yǔ)素

視覺(jué)基礎(chǔ)是構(gòu)成設(shè)計(jì)語(yǔ)言的最小單位，就像語(yǔ)素是語(yǔ)言中最小的音義結(jié)合體。在原子設(shè)計(jì)理論中，它屬于最小粒度的元素，通常包括：顏色、字體、圖標(biāo)、網(wǎng)格等。

3. 語(yǔ)句

組件就像由若干個(gè)語(yǔ)素組成的語(yǔ)句，比如一個(gè)基礎(chǔ)按鈕，通常就是由顏色、字體、邊距等元素組成。而我們平時(shí)所說(shuō)的組件庫(kù)，其實(shí)就是一部詞典，其中包含了設(shè)計(jì)系統(tǒng)中所需的基礎(chǔ)組件與用法，在界面設(shè)計(jì)中也具有較高的通用性。

4. 語(yǔ)義

符號(hào)是語(yǔ)言的載體，但符號(hào)本身沒(méi)有意義，只有被賦予含義的符號(hào)才能夠被使用，這時(shí)候語(yǔ)言就轉(zhuǎn)化為信息，而語(yǔ)言的含義就是語(yǔ)義。在視覺(jué)傳達(dá)設(shè)計(jì)中也一樣，使用的圖標(biāo)或圖形，需具備正確的語(yǔ)義屬性。如果商場(chǎng)導(dǎo)視設(shè)計(jì)中非要使用「裙子」圖標(biāo)來(lái)代表「男廁」入口，如此混淆語(yǔ)義挑戰(zhàn)公眾認(rèn)知，那就等著被投訴吧。

5. 語(yǔ)境

這里說(shuō)的語(yǔ)境包含 3 個(gè)維度：一是流程意義上的上下文，二是產(chǎn)品屬性中的語(yǔ)境，三是用戶當(dāng)下所處的環(huán)境。

當(dāng)設(shè)計(jì)需要對(duì)上下文進(jìn)行特別處理時(shí)，有可能對(duì)話的層級(jí)次序是受限于屏幕稀缺性，通常可采用 Z-Depth 疊加（Material Design屬性）、步驟條、元素關(guān)聯(lián)轉(zhuǎn)場(chǎng)動(dòng)效等方式。舉個(gè)常見(jiàn)的例子，當(dāng)用戶發(fā)起一個(gè)刪除數(shù)據(jù)的請(qǐng)求時(shí)，界面會(huì)彈出一個(gè)二次確認(rèn)的模態(tài)會(huì)話，用戶點(diǎn)擊確認(rèn)之后才會(huì)執(zhí)行刪除操作。

過(guò)去很長(zhǎng)一段時(shí)間，數(shù)字產(chǎn)品設(shè)計(jì)圈內(nèi)熱衷于討論的兩種風(fēng)格類型：隱喻（擬物化）與抽象（扁平化），時(shí)至今日可以說(shuō)扁平化的風(fēng)格在應(yīng)用數(shù)量上壓倒擬物化風(fēng)格。然而，我依舊認(rèn)為設(shè)計(jì)的風(fēng)格策略取決于產(chǎn)品屬性中的語(yǔ)境，這也是如今 iOS 人機(jī)界面設(shè)計(jì)規(guī)范所提倡的，它不再像早前的規(guī)則片面拒絕隱喻設(shè)計(jì)，而是鼓勵(lì)設(shè)計(jì)師將用戶在現(xiàn)實(shí)中最為熟悉的視覺(jué)樣式，即操作方法映射與界面設(shè)計(jì)之中，蘋果官方的 Garageband 就是一個(gè)很有說(shuō)服力的例子。

針對(duì)用戶當(dāng)下所處的環(huán)境來(lái)適配界面語(yǔ)境，常見(jiàn)通過(guò)界面換膚的手法來(lái)實(shí)現(xiàn)，比如微信讀書等閱讀應(yīng)用為用戶提供白天模式或黑夜模式的選擇。用戶所處的外部環(huán)境因素可以很大程度上決定界面語(yǔ)言的應(yīng)用，就好像在菜市場(chǎng)買東西要靠吼，在圖書館借書僅需要用肢體語(yǔ)言便能達(dá)成。

△ 如上，微信讀書針對(duì)外部環(huán)境因素的自定義「語(yǔ)境」

6. 語(yǔ)氣

交互界面通常需要使用說(shuō)明或提示文案來(lái)指導(dǎo)用戶完成操作，大多數(shù)情況下都是使用第二人稱，就像在與用戶對(duì)話，從以用戶為中心的角度上講，建議保持謙遜、友善的語(yǔ)氣，盡可能避免使用晦澀的專業(yè)術(shù)語(yǔ)，謹(jǐn)慎使用帶有強(qiáng)烈情感屬性的感嘆號(hào)，或過(guò)于口語(yǔ)化的語(yǔ)言。另外，語(yǔ)氣的拿捏也將直接影響到與用戶的距離感，以及當(dāng)下的應(yīng)景度。

• 正確示例：使用檢索可以快速搜索任務(wù)。
• 不良示例：你一定會(huì)愛(ài)上方便快捷的檢索功能！

7. 語(yǔ)速

語(yǔ)速在這里指的是界面的信息密度，在不同的場(chǎng)合對(duì)語(yǔ)速的控制能夠提升接受者的體驗(yàn)，視覺(jué)設(shè)計(jì)也同樣需要注意把握間距與留白，網(wǎng)格系統(tǒng)在這里可以起到「節(jié)拍器」的作用，借助節(jié)拍器可以讓設(shè)計(jì)更具節(jié)奏感。而交互意義上的語(yǔ)速，更多體現(xiàn)在操作路徑的長(zhǎng)度，以及動(dòng)效的速率。

△  如上，富途證券在產(chǎn)品介紹與盤中交易2個(gè)不同場(chǎng)景下的「語(yǔ)速」

8. 響度

其實(shí)就好像我們說(shuō)話可以通過(guò)音量大小來(lái)控制信息的可感知程度，希望接受者聽(tīng)清楚的就說(shuō)大聲一點(diǎn)。湯姆奧斯本（Tom Osborne）的視覺(jué)響度指南（visual loudness guide）是一個(gè)如何系統(tǒng)地處理按鈕和鏈接的例子，它們不是單獨(dú)列出，而是作為一個(gè)套件呈現(xiàn)，并且根據(jù)每個(gè)元素的視覺(jué)沖擊力會(huì)相應(yīng)的擁有一個(gè)「響度」值。我們?cè)跇?gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)時(shí)，也同樣需要設(shè)置梯級(jí)「響度」的按鈕、字重等組件來(lái)滿足不同場(chǎng)景的表達(dá)需求。

△ Tom Osborne的視覺(jué)響度指南

設(shè)計(jì)語(yǔ)言系統(tǒng)的生態(tài)性

1. 基因遺傳

同一個(gè)語(yǔ)系下的語(yǔ)言，無(wú)論是經(jīng)過(guò)了朝代更迭，還是地域的遷徙，一定會(huì)保留一些固有的特性，這就是語(yǔ)言系統(tǒng)本身具有基因遺傳的生態(tài)特性。

一套成熟的設(shè)計(jì)語(yǔ)言系統(tǒng)，也同樣對(duì)產(chǎn)品設(shè)計(jì)表現(xiàn)著基因級(jí)別的底層影響力：在「代際」遺傳上，體現(xiàn)在經(jīng)久不衰的堅(jiān)持。比如 Burberry 的格子紋理，無(wú)論是在哪一年的產(chǎn)品款式上，都不會(huì)丟失這個(gè)屬性。在「同輩」影響上，通常體現(xiàn)在不同終端場(chǎng)景下產(chǎn)品表現(xiàn)的一致性，或是兄弟產(chǎn)品的相似程度。

2. 動(dòng)態(tài)進(jìn)化

設(shè)計(jì)語(yǔ)言系統(tǒng)不是一份靜態(tài)的組件庫(kù)與規(guī)范文檔，而是一個(gè)動(dòng)態(tài)的且能自我進(jìn)化的系統(tǒng)。它的動(dòng)態(tài)進(jìn)化屬性基于 3 個(gè)契機(jī)：

• 設(shè)計(jì)師基于可復(fù)用組件的設(shè)計(jì)系統(tǒng)構(gòu)建產(chǎn)品功能設(shè)計(jì)時(shí)，可省下更多的時(shí)間，轉(zhuǎn)移到設(shè)計(jì)系統(tǒng)上的優(yōu)化；
• 隨著產(chǎn)品發(fā)展，設(shè)計(jì)師將會(huì)遇到更多特殊需求，從而也會(huì)創(chuàng)建新的設(shè)計(jì)模式來(lái)解決問(wèn)題，而這些新的設(shè)計(jì)模式也將同時(shí)反哺設(shè)計(jì)系統(tǒng)，不斷提升系統(tǒng)的完善程度；
• 設(shè)計(jì)系統(tǒng)中可復(fù)用組件等的規(guī)?；瘧?yīng)用，便于設(shè)計(jì)單元缺陷的暴露，這也將為系統(tǒng)單元優(yōu)化提供優(yōu)勝劣汰的方向。

3. 開(kāi)放兼容

語(yǔ)言同時(shí)具備工具屬性與文化屬性，開(kāi)放兼容對(duì)一門語(yǔ)言的意義在于被更多人接受、應(yīng)用。

當(dāng)前谷歌、蘋果、微軟、阿里巴巴等大型企業(yè)推出了開(kāi)源的設(shè)計(jì)語(yǔ)言，這些成熟的設(shè)計(jì)體系其實(shí)承載著大量的項(xiàng)目實(shí)踐與經(jīng)驗(yàn)總結(jié)，對(duì)其他企業(yè)也有較大的借鑒價(jià)值。同時(shí)，對(duì)于平臺(tái)級(jí)企業(yè)，開(kāi)放統(tǒng)一的數(shù)字語(yǔ)言，讓不同地域、不同類型的項(xiàng)目得以在共同的規(guī)則下發(fā)展、共生，這對(duì)于平臺(tái)生態(tài)無(wú)疑是利好的。

設(shè)計(jì)語(yǔ)言作為工具來(lái)說(shuō)，需具備普適性，在文化層面上也需具備兼容度──在滿足企業(yè)自身品牌與業(yè)務(wù)需求之上，應(yīng)該盡可能規(guī)避因宗教、民俗等因素帶來(lái)的沖突。

舉個(gè)例子，在法國(guó)和比利時(shí)，人們都厭惡墨綠色，因?yàn)槎?zhàn)期間兩國(guó)飽受德國(guó)納粹侵略之苦，而納粹的軍服是墨綠色的。那么，面向這兩個(gè)國(guó)家用戶的設(shè)計(jì)上，便應(yīng)該避免使用墨綠的元素。這時(shí)，設(shè)計(jì)語(yǔ)言系統(tǒng)中組件元素的豐富程度，很大程度決定了設(shè)計(jì)表現(xiàn)的選擇空間與可能性。

就好像，在美國(guó)街頭詢問(wèn)公共廁所時(shí)，老美可能聽(tīng)不懂 WC，那就用他們聽(tīng)得懂的 Restroom 吧。這里想表達(dá)的是，你的語(yǔ)言系統(tǒng)中「詞匯」越豐富，越能兼容不同文化背景下的表達(dá)。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

微信小程序之卡片層疊滑動(dòng)效果

代碼：
js：

// index/gun/jsSwiper2/jsSwiper2.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    startX: 0,
    endX: 0,
    iCenter: 3,
    datas: [{
      id: 1,
      zIndex: 2,
      opacity: 0.2,
      left: 40,
      iamge: "../../images/1.jpg",
      animation: null
    },
    {
      id: 2,
      zIndex: 4,
      opacity: 0.4,
      left: 80,
      iamge: "../../images/2.jpg",
      animation: null
    },
    {
      id: 3,
      zIndex: 6,
      opacity: 0.6,
      left: 120,
      iamge: "../../images/3.jpg",
      animation: null
    },
    {
      id: 4,
      zIndex: 8,
      opacity: 1,
      left: 160,
      iamge: "../../images/4.jpg",
      animation: null
    },
    {
      id: 5,
      zIndex: 6,
      opacity: 0.6,
      left: 200,
      iamge: "../../images/5.jpg",
      animation: null
    },
    {
      id: 6,
      zIndex: 4,
      opacity: 0.4,
      left: 240,
      iamge: "../../images/6.jpg",
      animation: null
    },
    {
      id: 7,
      zIndex: 2,
      opacity: 0.2,
      left: 280,
      iamge: "../../images/7.jpg",
      animation: null
    },
    ],
    order: []
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    this.__set__();
    this.move();
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  },
  move: function () {
    var datas = this.data.datas;
    /*圖片分布*/
    for (var i = 0; i < datas.length; i++) {
      var data = datas[i];
      var animation = wx.createAnimation({
        duration: 200
      });
      animation.translateX(data.left).step();
      this.setData({
        ["datas[" + i + "].animation"]: animation.export(),
        ["datas[" + i + "].zIndex"]: data.zIndex,
        ["datas[" + i + "].opacity"]: data.opacity,
      })
    }
  },
  /**左箭頭 */
  left: function () {
    //
    var last = this.data.datas.pop(); //獲取數(shù)組的最后一個(gè)
    this.data.datas.unshift(last);//放到數(shù)組的第一個(gè)
    var orderFirst = this.data.order.shift();
    this.data.order.push(orderFirst);
    this.move();
  },
  /** */
  right: function () {
    var first = this.data.datas.shift(); //獲取數(shù)組的第一個(gè)
    this.data.datas.push(first);//放到數(shù)組的最后一個(gè)位置
    var orderLast = this.data.order.pop();
    this.data.order.unshift(orderLast);
    this.move();
  },
  /**點(diǎn)擊某項(xiàng) */
  choose: function (e) {
    var that = this;
    var id = e.currentTarget.dataset.id;
    var order = that.data.order;
    var index = 0;
    for (var i = 0; i < order.length; i++) {
      if (id == order[i]) {
        index = i;
        break;
      }
    }
    if (index < that.data.iCenter) {
      for (var i = 0; i < that.data.iCenter - index; i++) {
        this.data.datas.push(this.data.datas.shift()); //獲取第一個(gè)放到最后一個(gè)
        this.data.order.unshift(this.data.order.pop());
        // this.right()  
      }
    } else if (index > that.data.iCenter) {
      for (var i = 0; i < index - that.data.iCenter; i++) {
        this.data.datas.unshift(this.data.datas.pop()); //獲取最后一個(gè)放到第一個(gè)
        this.data.order.push(this.data.order.shift());
        // this.left();
      }
    }
    this.move();
  },
  /**新的排列復(fù)制到新的數(shù)組中 */
  __set__: function () {
    var that = this;
    var order = that.data.order;
    var datas = that.data.datas;
    for (var i = 0; i < datas.length; i++) {
      that.setData({
        ["order[" + i + "]"]: datas[i].id
      })
    }
  },
  //手指觸發(fā)開(kāi)始移動(dòng)
  moveStart: function (e) {
    console.log(e);
    var startX = e.changedTouches[0].pageX;
    this.setData({
      startX: startX
    });
  },
  //手指觸摸后移動(dòng)完成觸發(fā)事件
  moveItem: function (e) {
    console.log(e);
    var that = this;
    var endX = e.changedTouches[0].pageX;
    this.setData({
      endX: endX
    });
    //計(jì)算手指觸摸偏移劇距離
    var moveX = this.data.startX - this.data.endX;
    //向左移動(dòng)
    if (moveX > 20) {
      this.left();
    }
    if (moveX < -20) {
      this.right();
    }
  },
})


wxml：

<view class="teachers_banner">
  <view class="container clearfix teachers_b">
    <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>

      <block wx:for="{{datas}}">
        <li animation="{{item.animation}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};" bindtap="choose" data-id="{{item.id}}">
          <image src="{{item.iamge}}"></image>
        </li>
      </block>

    </view>
  </view>
</view>

wxss：

.teachers_banner {
  width: 100%;
  height: 650px;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.teachers_b {
  position: relative;
  margin-top: 80px;
}

#slide {
  margin: 0 auto;
  width: 100%;
  height: 350px;
  position: relative;
}

image {
  width: 400rpx;
  height: 550rpx;
}

#slide li {
  position: absolute;
  width: 400rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  overflow: hidden;
  box-shadow: 0 0 20px #1d374d;
}

#slide li img {
  width: 100%;
  height: 100%;
}

.slide_right {
  padding: 40px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

.slide_right dl {
  padding-top: 10px;
}

.arrow .prev, .arrow .next {
  position: absolute;
  width: 50px;
  top: 38%;
  z-index: 9;
  font: 700 96px 'simsun';
  opacity: 0.3;
  color: #fff;
  cursor: pointer;
}

效果：
1.左右滑動(dòng)時(shí)，向相應(yīng)方向移動(dòng)一個(gè)卡片位置；
2.點(diǎn)擊某一項(xiàng)時(shí)，將點(diǎn)擊項(xiàng)位置移動(dòng)到中間位置；

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在建立品牌的過(guò)程中，廣告和公關(guān)各有其使用邊界，企業(yè)家不關(guān)心用不用廣告，關(guān)心如何找到適合自己的營(yíng)銷方法。

對(duì)于廣告，大家已經(jīng)比較熟悉，今天我們重點(diǎn)分析公關(guān)建立品牌的方法。

 

一、新經(jīng)濟(jì)品牌比傳統(tǒng)品牌有更大的公關(guān)潛力

新經(jīng)濟(jì)品牌往往比傳統(tǒng)品牌有更大的公關(guān)潛力。昨天潘軻老師講到，無(wú)人機(jī)將是5G時(shí)代的現(xiàn)象級(jí)產(chǎn)品。那么，無(wú)人機(jī)會(huì)制造出什么社會(huì)熱點(diǎn)呢？

比如說(shuō)，無(wú)人機(jī)會(huì)送飯，飛上來(lái)給你送飯。

到時(shí)會(huì)出現(xiàn)爭(zhēng)議：

一是飯掉下去怎么辦？誰(shuí)負(fù)責(zé)？二是飛機(jī)送飯時(shí)能不能開(kāi)攝像頭？會(huì)不會(huì)順帶拍一下鄰居家的窗戶？推出無(wú)人機(jī)送貨第一款高空墜落險(xiǎn)的是誰(shuí)？

而且，高樓的窗戶開(kāi)啟是有角度限制的，怎么拿飯？一定會(huì)出現(xiàn)玻璃窗改造設(shè)計(jì)，第一個(gè)高樓玻璃窗改造品牌是誰(shuí)？

第一個(gè)根據(jù)無(wú)人機(jī)送貨需求設(shè)計(jì)的建筑品牌是誰(shuí)？這個(gè)新品類可能叫“無(wú)人機(jī)友好建筑”，房間都帶無(wú)人機(jī)著陸設(shè)施，像航母的飛機(jī)著陸裝卸平臺(tái)，第一棟無(wú)人機(jī)友好建筑將是重磅新聞。

在無(wú)人機(jī)友好建筑普及之前，不能走窗戶，怎么外賣到戶？無(wú)人機(jī)要坐電梯還是走消防梯？能允許無(wú)人機(jī)坐電梯嗎？如果能坐，無(wú)人機(jī)“坐”哪里？

一架有教養(yǎng)的無(wú)人機(jī)，高度顯然不能位于裙子以下，如果在肩膀以下，也容易和人發(fā)生碰撞，最好的位置應(yīng)該是人頭頂上。到時(shí)大家在電梯里，可能看到無(wú)人機(jī)區(qū)間，抬頭向上，幾架無(wú)人機(jī)呼呼地轉(zhuǎn)。

在無(wú)人機(jī)手臂和電梯直接通信普及之前，無(wú)人機(jī)怎么按電梯？我們是否應(yīng)該幫助無(wú)人機(jī)按電梯，就像幫助老人、小孩一樣？

無(wú)人機(jī)還可以摘菜，既然能摘菜，就能偷菜，就能偷錢包，無(wú)人機(jī)安全問(wèn)題將大幅上升。

可能有人用彈弓擊打惡意無(wú)人機(jī)，也有黑客用程序和網(wǎng)絡(luò)捕捉無(wú)人機(jī)。

當(dāng)然，無(wú)人機(jī)賽事也會(huì)推廣開(kāi)來(lái)，成為大眾喜愛(ài)觀看的運(yùn)動(dòng)，正如汽車賽事一樣。

比如針對(duì)無(wú)人機(jī)復(fù)雜空域飛行的速度競(jìng)賽和花式競(jìng)賽，針對(duì)無(wú)人機(jī)續(xù)航能力的拉力賽，針對(duì)無(wú)人機(jī)視覺(jué)效果的藝術(shù)挑戰(zhàn)賽等等。無(wú)人機(jī)界的F1、達(dá)喀爾、勒芒就會(huì)隨之而生。

考慮到競(jìng)賽無(wú)人機(jī)的價(jià)格可能低于賽車，這項(xiàng)運(yùn)動(dòng)門檻更低。

無(wú)人機(jī)當(dāng)然也可以送人，無(wú)人機(jī)民航也會(huì)出現(xiàn)。第一家無(wú)人機(jī)民航公司會(huì)是誰(shuí)？送的第一位顧客是誰(shuí)？

當(dāng)然，專業(yè)的無(wú)人機(jī)渠道、無(wú)人機(jī)導(dǎo)購(gòu)品牌、無(wú)人機(jī)售后服務(wù)、改裝服務(wù)也會(huì)出現(xiàn)。這里面，既蘊(yùn)含了眾多新品類發(fā)展的機(jī)遇，也將出現(xiàn)大量新聞。

而新聞潛力意味著，企業(yè)家要優(yōu)先用公關(guān)，激發(fā)新聞效應(yīng)，借助免費(fèi)的新聞傳播來(lái)建立品牌。

 

那，到底怎么用公關(guān)建立品牌呢？跟大家分享一下我們的探索歷程。

第一個(gè)，什么是公關(guān)？

越了解工具，越會(huì)使用它。我們對(duì)公關(guān)的理解，決定了對(duì)它的運(yùn)用。

上海的第一財(cái)經(jīng)電視臺(tái)，曾經(jīng)邀請(qǐng)上海交大的公關(guān)教授魏武揮和原GE公關(guān)總監(jiān)李國(guó)威老師進(jìn)行過(guò)一次辯論。

辯題之一是“公關(guān)的基本目的就是發(fā)稿和滅稿。”請(qǐng)問(wèn)，你們公司的公關(guān)是這樣的嗎？你認(rèn)同嗎？

我們不認(rèn)同。就像戰(zhàn)士確實(shí)需要臥倒和射擊，但你不能說(shuō)戰(zhàn)士的基本目的就是臥倒和射擊。為什么臥倒？為什么射擊？能不能不臥倒、不射擊，達(dá)到目標(biāo)？

凡事要學(xué)就學(xué)最高標(biāo)桿，要奔珠峰去練爬山。我們的標(biāo)桿選美國(guó)公關(guān)之父愛(ài)德華·伯內(nèi)斯。

1930年代，美國(guó)幾大書商找到他，請(qǐng)他用公關(guān)幫助書商賣書。各位，你如果是伯內(nèi)斯，會(huì)如何用公關(guān)幫助書商賣書？

我們會(huì)打新書排行榜、請(qǐng)名人推薦、拍賣版權(quán)、做圖書路演、簽名售書、建立讀者社群、一萬(wàn)人一起讀書，羅輯思維推《薛兆豐經(jīng)濟(jì)學(xué)講義》，在菜市場(chǎng)辦了一場(chǎng)特別新書發(fā)布會(huì)，等等。

我們要學(xué)習(xí)伯內(nèi)斯，就要模擬他的思維方式。在這個(gè)項(xiàng)目中，伯內(nèi)斯的思維由幾個(gè)關(guān)鍵問(wèn)題串起來(lái)：

1.美國(guó)人什么時(shí)候買書最多？注意，是買書，不是讀書?；卮鹗牵悍块g里有空書柜的時(shí)候。就像某老總新辦公室裝修，10米長(zhǎng)的空書柜，要填滿，直接買3000本。

2.如何讓美國(guó)人家里有書架呢？誰(shuí)能夠做到？裝修公司、建筑公司能夠做到，尤其是設(shè)計(jì)師能夠做到。小設(shè)計(jì)師看大設(shè)計(jì)師的，大設(shè)計(jì)師能影響設(shè)計(jì)趨勢(shì)。

大家去美國(guó)旅行，可以發(fā)現(xiàn)很多1930年代的別墅，都有嵌入式書柜，嵌入式書柜換不掉，只能買書。

伯內(nèi)斯這個(gè)案例對(duì)我們震動(dòng)很大。以前我們做奧運(yùn)項(xiàng)目，和央視等各大媒體合作，做一堆報(bào)道和簡(jiǎn)報(bào)，感覺(jué)自己很厲害。

現(xiàn)在看來(lái)，都是幻覺(jué)。連自己國(guó)家的書架都沒(méi)改變過(guò)，算什么公關(guān)高手？

伯內(nèi)斯的做法，稱為“The Big Think”，翻譯成中文，可叫“大局思考”。大局思考的局有多大呢？全社會(huì)那么大。

大局思考要求我們：把眼睛從自己品牌上抬起來(lái)，站在高空看地球，從社會(huì)系統(tǒng)角度，找到能夠幫助自己品牌發(fā)展的社會(huì)動(dòng)力，再有效嫁接這種動(dòng)力。

二、企業(yè)公關(guān)和品牌公關(guān)的關(guān)系是什么？

《升級(jí)定位》講商業(yè)模式二分法，分為企業(yè)商業(yè)模式和品牌商業(yè)模式。

企業(yè)商業(yè)模式解決組織和企業(yè)利益相關(guān)方的關(guān)系，如政府、媒體、投資人、員工等；

品牌商業(yè)模式解決品牌及其利益相關(guān)方的關(guān)系，主要是“品牌-顧客-競(jìng)品”這個(gè)三角形。

把伯內(nèi)斯公關(guān)的“大局思考”和商業(yè)模式二分法結(jié)合起來(lái)，我們看到一個(gè)什么畫面？在這個(gè)畫面中間，是品牌商業(yè)模式三角“品牌-顧客-競(jìng)品”，顧客在上面，下面是品牌和競(jìng)品。

這個(gè)三角形的外面，環(huán)繞著一個(gè)巨大的環(huán)形，其上半部分是外部利益相關(guān)者——政府、社區(qū)、公眾、媒體、資本；其下半部分是內(nèi)部利益相關(guān)者——員工、供應(yīng)鏈和渠道。

在這里，企業(yè)公關(guān)和品牌公關(guān)的關(guān)系是什么？——企業(yè)公關(guān)是品牌公關(guān)的外部環(huán)境，品牌公關(guān)是企業(yè)公關(guān)的成果。

這個(gè)圖畫出來(lái)，像什么？像眼睛。中間是瞳孔，是我們聚焦的方向；外面是上眼瞼和下眼瞼。

要打開(kāi)上下眼皮，才能見(jiàn)天地、見(jiàn)眾生，才能在天地和眾生之間重新看見(jiàn)自己。所以，我們把這個(gè)叫“公關(guān)眼”模型。

要打開(kāi)“公關(guān)眼”，關(guān)鍵是看明白三點(diǎn)：

① 世界很大，企業(yè)很小。

② 企業(yè)是企業(yè)家的中心，但不是社會(huì)的中心。既要對(duì)自己的企業(yè)充滿宗教般的熱情，也要認(rèn)識(shí)到自己的企業(yè)不過(guò)是社會(huì)系統(tǒng)中極微小的一部分。

③ 企業(yè)要堅(jiān)定使命，圍繞建立品牌這個(gè)中心，系統(tǒng)尋找和調(diào)動(dòng)社會(huì)動(dòng)力，贏得支持，幫助自己發(fā)展。

 

所以，我們注意到剛才先鋒電器李總的分享，當(dāng)先鋒電器“取暖專家”的戰(zhàn)略確定之后，想要贏得誰(shuí)的支持？先要從內(nèi)部做起來(lái)，說(shuō)服經(jīng)銷商和員工對(duì)我們的事業(yè)充滿熱情。

外部環(huán)境可以影響我們，政府的態(tài)度、公眾的態(tài)度、資本、行業(yè)的經(jīng)營(yíng)環(huán)境，環(huán)境的合作伙伴、上下游的經(jīng)銷商都會(huì)影響我們。

所以從企業(yè)內(nèi)部來(lái)看，中間的那個(gè)三角形無(wú)比重要，但是我們視角拉到整個(gè)社會(huì)，如果社會(huì)是銀河系，企業(yè)就是一個(gè)小小的星球。

 

在這里，廣告、公關(guān)有個(gè)巨大不同：廣告直接通過(guò)媒體影響顧客；公關(guān)則努力借助社會(huì)能量，影響目標(biāo)人群。

在商業(yè)實(shí)踐中，公關(guān)和廣告既有相互重疊、相互替代的區(qū)域，也有相互差異、各有所長(zhǎng)的區(qū)域，還有相互轉(zhuǎn)化、相互支撐的方式。

說(shuō)公關(guān)、廣告相互替代，是因?yàn)樗鼈兌伎梢韵蚰繕?biāo)人群傳遞信息，至于這個(gè)信息是電梯里看到，還是微信群里看到，是次要的。

說(shuō)公關(guān)和廣告相互差異、各有所長(zhǎng)，是因?yàn)閺V告有公關(guān)難以實(shí)現(xiàn)的可控性、可復(fù)制性等長(zhǎng)處，而公關(guān)也有廣告難以擁有的關(guān)注度、可信度和關(guān)聯(lián)度。

比如，我們2017年，在定位之父杰克·特勞特先生逝世的時(shí)候，和定位學(xué)習(xí)網(wǎng)一起，發(fā)起了“紀(jì)念特勞特燭光讀書會(huì)”，全國(guó)13個(gè)城市的定位愛(ài)好者參加。

在特勞特先生的小型葬禮上，鄧德隆先生把這些照片給特勞特夫人過(guò)目，特勞特夫人特意委托鄧總向參與紀(jì)念活動(dòng)的定位愛(ài)好者表達(dá)感謝。

這樣的紀(jì)念活動(dòng)，便是公關(guān)——表達(dá)我們對(duì)定位之父感恩緬懷的活動(dòng)，這是廣告難以完全表達(dá)的。

說(shuō)公關(guān)和廣告相互轉(zhuǎn)化，是因?yàn)閺V告可以做出公關(guān)效應(yīng)，稱之為廣告公關(guān)化；公關(guān)也可以做成廣告效果，直接給賣點(diǎn)，稱之為公關(guān)廣告化。

廣告公關(guān)化，要求把廣告做成新聞。南都的“天下無(wú)三”廣告，神州專車上線的“Beat U”廣告，甚至分眾電梯海報(bào)的“僅售1199元3條的圍欄男士?jī)?nèi)褲”，都制造了話題。

公關(guān)廣告化，則要在新聞或話題中，傳遞品牌名稱，甚至傳遞產(chǎn)品圖片，顧客利益點(diǎn)等等。

比如，某面包車品牌在強(qiáng)手如云的上海車展上，曾把自己的廣告語(yǔ)做成了新華社報(bào)道的導(dǎo)語(yǔ)。

三、公關(guān)、戰(zhàn)略和定位的關(guān)系

 

了解了公關(guān)是什么，廣告和公關(guān)的關(guān)系，接下來(lái)我們看看公關(guān)、戰(zhàn)略和定位的關(guān)系。

和大家分享一下我們曲折的探索歷程，這個(gè)歷程分為四個(gè)階段，簡(jiǎn)稱為“公關(guān)四階”。

 

第一階，制造熱點(diǎn)

相信很多人接觸公關(guān)，熱點(diǎn)話題、熱點(diǎn)事件是一個(gè)重要入口。公關(guān)圈的人，熱衷于制造熱點(diǎn)，包括我們自己一度也喪心病狂地想制造熱點(diǎn)。

比如說(shuō)，有個(gè)網(wǎng)絡(luò)推手叫立二拆四，他們制作了系列的熱點(diǎn)事件，從“別針換別墅”，到“我把下半生交給網(wǎng)絡(luò)”等等，最后搞了“后海和尚搞船震”，最后這個(gè)團(tuán)隊(duì)進(jìn)去了。

9年前，我太太去我們辦公室，一路嘟嘟囔囔說(shuō)，現(xiàn)在年輕人太不像話了，高考畢業(yè)就買鉆戒私定終身。我一看照片，兩位校服男女生，手拉手站在柜臺(tái)前，柜臺(tái)上有個(gè)logo——“I Do”。

我說(shuō)，你看看那邊那個(gè)男同事，是不是眼熟？——她看過(guò)去，哦？竟然是校服男生（的扮演者）。

這個(gè)項(xiàng)目是當(dāng)時(shí)合伙人做的，但它給我?guī)?lái)反思：公關(guān)如果策劃新聞、策劃話題，連自己家人都繞進(jìn)去了，這樣的公關(guān)可以持續(xù)嗎？值得持續(xù)嗎？

大家來(lái)看看這幾個(gè)事情是不是策劃的。第一，2017年維密秀，奚夢(mèng)瑤摔倒，維密秀的百度指數(shù)飛漲到60多萬(wàn)，翻了50倍。請(qǐng)問(wèn)，是策劃的嗎？

策劃不策劃，需要驗(yàn)證。如果是自然事故，對(duì)于維密秀這樣級(jí)別的賽事，犯錯(cuò)誤者按道理會(huì)怎樣？會(huì)被開(kāi)除。

奚夢(mèng)瑤被開(kāi)除了嗎？當(dāng)時(shí)維密CEO發(fā)推特，怎么說(shuō)？好樣的，加油！這像是對(duì)犯錯(cuò)員工說(shuō)的話么？

比語(yǔ)言更說(shuō)明問(wèn)題的是行為。2018年，維密秀嚴(yán)格的選拔開(kāi)始了，請(qǐng)問(wèn)誰(shuí)免試入選了？——奚夢(mèng)瑤。

在老何看來(lái)，維密官方對(duì)奚夢(mèng)瑤的態(tài)度，不像是對(duì)失誤員工的處置，反倒是對(duì)冒受傷危險(xiǎn)摔倒勇士的獎(jiǎng)勵(lì)。想想奚夢(mèng)瑤那么高個(gè)子，摔倒風(fēng)險(xiǎn)多么大？為了熱點(diǎn)，辛苦了。

不光模特，總裁也辛苦。VIVO手機(jī)在水立方開(kāi)新品發(fā)布會(huì)，總裁上臺(tái)時(shí)掉水里了，主持人何炅趕緊圓場(chǎng)——“遇水則發(fā)！”各位，請(qǐng)問(wèn)這是策劃的，還是自然的？

首先，如果總裁不掉水里，老何可能和很多人一樣，不知道這件事，此事對(duì)VIVO有利而非有害。

其次，判斷總裁是不是故意掉水里，要講證據(jù)。比如，回看錄像，總裁出水后是不是把手機(jī)交給助理去處理。

商界領(lǐng)導(dǎo)一般自己拿手機(jī)，如果故意落水，事先把手機(jī)交給他人概率更高。

手機(jī)廠商就此打住了嗎？不?？崤蒳vvi發(fā)布會(huì)，CEO吊威亞出場(chǎng)的時(shí)候，掛半空中了！各位，是策劃的還是自然的？

這件事我們問(wèn)過(guò)酷派內(nèi)部人，他說(shuō)那天確實(shí)是出現(xiàn)了意外——原計(jì)劃是吊10分鐘，后臺(tái)出了故障，結(jié)果吊了20分鐘。

就定位圈來(lái)說(shuō)，喜棉兒童排汗睡衣創(chuàng)始人賈總，在里斯品類戰(zhàn)略大會(huì)的舞臺(tái)上，當(dāng)眾撕衣服。衣服一撕，淘寶流量翻5倍，而且翻完之后穩(wěn)定在5倍附近。

你看，為了品牌，為了熱點(diǎn)，創(chuàng)始人和總裁是不是很拼？

那，追求熱點(diǎn)的方法是什么呢？我們用的模型叫“策劃三要素”。

傳播力=內(nèi)容指數(shù)X媒介指數(shù)X轉(zhuǎn)化指數(shù)。

其中，內(nèi)容指數(shù)主要涉及傳播主題、傳播環(huán)境和傳播對(duì)象，分別概括為：基礎(chǔ)口碑（主體自帶流量）、社會(huì)熱點(diǎn)（傳播環(huán)境流量）和公眾體驗(yàn)（對(duì)傳播對(duì)象的激發(fā)程度）。

內(nèi)容指數(shù)=基礎(chǔ)口碑X社會(huì)熱點(diǎn)X公眾體驗(yàn)。

對(duì)基礎(chǔ)口碑、社會(huì)熱點(diǎn)、公眾體驗(yàn)，可以進(jìn)一步細(xì)分。基礎(chǔ)口碑分為自己口碑和借用他人口碑，自己口碑=關(guān)注者的數(shù)量X質(zhì)量。

自己的關(guān)注度不夠，怎么辦？和自帶流量的明星、大V合作，借助知名的賽事、欄目、影視劇等等。

在公眾體驗(yàn)上，分為情感體驗(yàn)和互動(dòng)體驗(yàn)。內(nèi)容的情感體驗(yàn)越深，越能夠吸引公眾參與互動(dòng)，其傳播力就越強(qiáng)。

在情感體驗(yàn)上，方法是“情感配方”。其基本原理是，雖然人的感情看起來(lái)非常復(fù)雜，但是每種情感類型可以分解為幾個(gè)簡(jiǎn)單要素，你匯聚相關(guān)要素，就會(huì)產(chǎn)生特定的情感類型。

比如產(chǎn)生憤怒，需要四個(gè)要素：第一，發(fā)生了一件意外的事情；第二，結(jié)果是我們不想要的；第三，造成的原因是別人；第四，這個(gè)人可以不這么干。四個(gè)條件具備，就會(huì)產(chǎn)生憤怒。

例如，我們讓人拿一個(gè)盤子給我們，結(jié)果他把盤子掉地上，我們會(huì)生氣。但如果拿盤子的是家里老人，平時(shí)手就哆嗦，情緒就傾向于諒解。

找到情感合成的要素后，就可以制定內(nèi)容模板。

比如我們知道“內(nèi)容和形式的反差”會(huì)帶來(lái)幽默感，就可以用這個(gè)方式來(lái)制造一系列視頻，比如用最正式的形式——“新聞聯(lián)播”，加上最草根的內(nèi)容，就會(huì)產(chǎn)生喜感。這種方法也被網(wǎng)絡(luò)傳播大量運(yùn)用。

我們把這種根據(jù)傳播目標(biāo)，分解傳播模板，批量制作傳播內(nèi)容的內(nèi)容生產(chǎn)方式，叫“內(nèi)容工廠”。

福特發(fā)明了流水線生產(chǎn)汽車，把汽車成本降低到原來(lái)的十分之一。在內(nèi)容生產(chǎn)上，也可以通過(guò)工廠化運(yùn)作，大規(guī)模降低成本，提率。

內(nèi)容生產(chǎn)出來(lái)后，可以用評(píng)分模板來(lái)給內(nèi)容評(píng)分，給基礎(chǔ)口碑、社會(huì)熱點(diǎn)和公眾體驗(yàn)分別打分，然后算總分。

每個(gè)品牌可以摸索評(píng)分規(guī)律，最后對(duì)內(nèi)容傳播力進(jìn)行量化，多少分以上才可以出街，多少分以下要重新修訂內(nèi)容。

 

第二階，追求植入

制造熱點(diǎn)是第一階，我們看看這些大家都熟悉的熱點(diǎn)事件。比如，“4小時(shí)逃離北上廣”，“只要心中有沙，哪里都是馬爾代夫”，“斯巴達(dá)三百勇士北京游行”，“大黃鴨進(jìn)大陸”。這四個(gè)熱點(diǎn)事件很多人聽(tīng)說(shuō)過(guò)，請(qǐng)問(wèn)，這些熱點(diǎn)事件背后的品牌是誰(shuí)呢？

我們?cè)诓煌瑘?chǎng)合做過(guò)調(diào)查，知道品牌的人在5%到10%。那么，對(duì)于很多不知道品牌的而言，這些傳播能量是不是有一部分沒(méi)有發(fā)揮作用？所以，公關(guān)不綁定品牌，多少會(huì)免費(fèi)娛樂(lè)大眾。

如何綁定？方法是“三重植入”，這是我們探索第二個(gè)階段的目標(biāo)。

植入是有標(biāo)準(zhǔn)的，把植入分為三個(gè)層級(jí)，最底層的是“表層植入”，它的定義是：品牌和事件一起出現(xiàn)，但在傳播過(guò)程中品牌和事件可以分離。

比如你們品牌邀請(qǐng)了周杰倫來(lái)現(xiàn)場(chǎng)，媒體在傳播時(shí)會(huì)稱呼你為“某品牌”，把畫面上你的logo打成馬賽克。

表層植入的上一層，是“內(nèi)核植入”，定義是：品牌和事件一起出現(xiàn)，在傳播過(guò)程中品牌和事件不可以分離。

最高層級(jí)是“詞植入”，是指品牌名稱植入到詞媒體中，只要提及事件名稱，品牌就得以曝光。

比如某汽車品牌做了一場(chǎng)“百名網(wǎng)紅直播新車上市”，這個(gè)是表層植入，因?yàn)榭梢圆惶徇@個(gè)汽車品牌的名字。像在世界杯賽場(chǎng)周邊擺一圈廣告牌，表層植入。

再看內(nèi)核植入。浙江有個(gè)網(wǎng)紅景點(diǎn)，飯蒸巖。它的故事是，有一位女驢友，愛(ài)上了一位男驢友，就用繩索垂下懸崖，在巖壁上畫下男驢友的頭像示愛(ài)。

這個(gè)植入，品牌和事件可以分離嗎？不能。不僅不能，每次媒體傳播這張巖石的圖片，就是在幫助這個(gè)景區(qū)曝光它們的認(rèn)知產(chǎn)品。

讓產(chǎn)品成為新聞主角，便是公關(guān)廣告化，把公關(guān)做成直接講賣點(diǎn)的廣告。巖畫事件之所以有趣，在于它不僅曝光了物理賣點(diǎn)，還創(chuàng)造了情感價(jià)值——有網(wǎng)友表示，這個(gè)事件讓TA又重新相信了愛(ài)情。

 

再看詞植入，把品牌名植入到詞媒體里。比如抖音刷出了一個(gè)視頻“吃垮海底撈”，你一說(shuō)起這個(gè)事件，海底撈的品牌名就曝光了。

當(dāng)然，在十五年前，論壇上曾經(jīng)有個(gè)熱點(diǎn)事件，叫“吃垮必勝客”，兩者的策劃邏輯基本相同，只是平臺(tái)從論壇換到了抖音。張家界的“飛越天門山”，凡客的“凡客體”，都屬于詞植入。

 

三重植入，怎么運(yùn)用呢？

首先，盡量避免表層植入。要在事件策劃或事件合作中，尋找更深層植入的方法。

其次，盡量做到內(nèi)核植入。其方法是，把品牌、產(chǎn)品、代言人，變成新聞要素之一即可。

最后，嘗試詞植入。其方法是，自己用帶有品牌名的詞組、短語(yǔ)，為傳播事件命名，并促成名字被大眾采用。

各位，做到詞植入，傳播就一定會(huì)成功嗎？我們接著看。

 

第三階：支撐定位。

 

上面講到一個(gè)詞植入的案例——“凡客體”。凡客體是2010年的熱點(diǎn)，也屢屢被評(píng)為2010年十大營(yíng)銷案例，排名前三甚至第一。

從制造熱點(diǎn)、品牌植入上來(lái)看，凡客體都是成功的，但凡客體對(duì)品牌、對(duì)業(yè)務(wù)是否有幫助？幫助多大？

一開(kāi)始人們知道凡客，是因?yàn)榉部鸵r衫。凡客體里面，韓寒穿的是T恤。

從價(jià)格來(lái)看，凡客襯衫便宜的80-100元，高一點(diǎn)的100-200元。在十年前，算是中檔價(jià)格。而T恤多少錢？29塊。

也就是說(shuō)，凡客體傳播的品類和價(jià)格，都和顧客既有認(rèn)知發(fā)生著沖突。這也意味著，凡客體傳播越廣泛，原有的品牌認(rèn)知會(huì)就越稀釋，越模糊，進(jìn)而影響老顧客的購(gòu)買意愿。

現(xiàn)實(shí)中，凡客的情況怎么樣呢？2010年凡客體大火，2011年末，凡客的庫(kù)存達(dá)到14.45億元，總虧損近6億元，一路從11000人裁員到300人。

凡客體告訴我們，戰(zhàn)略方向如果不對(duì)，傳播能量越強(qiáng)，越南轅北轍，越努力離目標(biāo)越遙遠(yuǎn)。違背戰(zhàn)略，破壞顧客認(rèn)知的公關(guān)，對(duì)品牌反而是有害的。

比如說(shuō)，羅輯思維投資Papi醬很多人知道，拍賣Papi醬首條廣告也是行業(yè)熱點(diǎn)，但羅輯思維CEO脫不花卻隨后反思“投資Papi醬是我們最大的恥辱”。

為什么呢？因?yàn)檫`背了公司的戰(zhàn)略。隨后，羅輯思維也原價(jià)退出了投資。

反之，則是每一次傳播都在支撐戰(zhàn)略，支撐顧客對(duì)品牌的認(rèn)知，也即支持定位。

比如，無(wú)論是做3萬(wàn)米高空極限跳傘，還是做張家界翼裝飛行大賽，紅牛在每一個(gè)極限活動(dòng)中，都會(huì)強(qiáng)調(diào)“能量”兩個(gè)字，不斷向顧客認(rèn)知點(diǎn)上累加資源。

 

公關(guān)怎么支撐戰(zhàn)略，支撐定位呢？

 

首先，是把品類價(jià)值和品類特性表達(dá)出來(lái)，品類事件化。比如今天的電梯領(lǐng)導(dǎo)者奧的斯，奧的斯先生發(fā)明了“安全電梯”，首次亮相就引發(fā)了轟動(dòng)。

1853年，紐約世界博覽會(huì)上，奧的斯先生策劃了一個(gè)戲劇性的事件。他把電梯升到半空中，然后用斧頭砍斷了電梯纜繩，在圍觀眾人的一片驚呼聲中，奧的斯電梯自行鎖死，停止滑落。

公關(guān)還可以把特性事件化，變成品牌資產(chǎn)。比如說(shuō)，有一款七座家用車，其特性是“安全、舒適”。

傳播難點(diǎn)在于，這款車的C-NCAP碰撞星級(jí)和安全氣囊數(shù)上，并不占優(yōu)勢(shì)。公關(guān)如何支撐其特性呢？

仔細(xì)想想，一家三代坐在車?yán)铮l(shuí)的安全更受關(guān)注？?jī)和Ｈ绾误w現(xiàn)兒童安全呢？有沒(méi)有兒童安全碰撞測(cè)試？答案是沒(méi)有。沒(méi)有怎么辦？開(kāi)創(chuàng)。

所以，這個(gè)品牌做了中國(guó)首場(chǎng)兒童安全碰撞測(cè)試，成為新車上市的信任狀和新聞點(diǎn)。

在支撐品類特性時(shí)，不得不提到一個(gè)經(jīng)典公關(guān)案例。2005年之前，基本上很少人喝過(guò)普洱茶，北京馬連道茶城幾千家茶葉店，據(jù)說(shuō)只有一家賣普洱茶。

2005年5月，活動(dòng)發(fā)起人胡明方先生，組織了120匹馬，從云南出發(fā)，歷經(jīng)5個(gè)多月，于10月10日進(jìn)入北京。馬幫進(jìn)京，成了當(dāng)年最熱門的新聞事件之一。

馬幫進(jìn)京體現(xiàn)了普洱茶什么特性？發(fā)酵，而且是富有戲劇性的“馬背發(fā)酵”。馬幫馱進(jìn)京的馬背發(fā)酵普洱茶，達(dá)官貴人爭(zhēng)著求購(gòu)，一茶難求。

 所以，公關(guān)要重點(diǎn)思考如何表達(dá)品類價(jià)值，用戲劇化、事件化的方式表達(dá)出來(lái)，最好占據(jù)某種獨(dú)特的表達(dá)形式，使之成為品牌的專用配稱，成為長(zhǎng)期的品牌資產(chǎn)。

 

第四階段：贏得支持

那是不是支撐定位，公關(guān)就算做到頂峰了呢？

比如，當(dāng)美團(tuán)進(jìn)軍打車市場(chǎng)時(shí)，滴滴程維接受《財(cái)新》雜志訪談，表示“爾要戰(zhàn)，便戰(zhàn)?！边@篇報(bào)道當(dāng)然體現(xiàn)了滴滴在打車市場(chǎng)的領(lǐng)導(dǎo)地位，但是否有效，是否對(duì)滴滴有利呢？

不僅如此，滴滴公關(guān)還攻擊“美團(tuán)補(bǔ)貼擾亂行業(yè)秩序”，雙方線下競(jìng)爭(zhēng)和線上公關(guān)戰(zhàn)一起打響。

對(duì)滴滴的公關(guān)，美團(tuán)怎么回復(fù)的？美團(tuán)的回復(fù)是“人民需要兩個(gè)打車軟件”，“打破壟斷才是終局”，與“人民”結(jié)盟，激發(fā)公眾對(duì)滴滴的反對(duì)。

 

各位，公關(guān)的目標(biāo)僅僅是傳播嗎？公關(guān)不僅要傳播，要支撐定位，還要為品牌贏得支持。

無(wú)論多么重大的傳播項(xiàng)目，即便如北京2008奧運(yùn)會(huì)，一旦結(jié)束，大多數(shù)人就迅速遺忘。傳播就像刮風(fēng)，過(guò)去了就過(guò)去了。

但是如果我們能夠通過(guò)公關(guān)，通過(guò)傳播和溝通，贏得對(duì)方發(fā)自內(nèi)心的支持，影響力就會(huì)像種樹(shù)一樣持久。各位企業(yè)家，如何贏得支持？這是公關(guān)中至關(guān)重要的事情。

所以，第四階，我們要“贏得支持”。

這兩天的華為事件，是一個(gè)典型的熱點(diǎn)。但你們品牌希望攤上這樣的熱點(diǎn)嗎？多半不希望。熱點(diǎn)事件對(duì)品牌有利有弊。不光華為這次的危機(jī)如此，各種策劃熱點(diǎn)的品牌，其實(shí)都有可能被熱點(diǎn)傷害——如果不能贏得支持的話。

贏得支持比傳播更重要。傳播不能贏得支持，就是在樹(shù)立敵人。注意看這次任總的講話，把敵人搞得少少的，只有少數(shù)美國(guó)政客。朋友呢？多多的。美國(guó)公司是朋友，歐洲更是朋友，亞洲是兄弟，中國(guó)是自己人。對(duì)所有國(guó)內(nèi)企業(yè)，無(wú)論你造車還是做手機(jī)，都不批評(píng)，都理解，以和為貴。

任總的危機(jī)公關(guān)，舉重若輕，其中透露的示弱、求和的智慧，正是贏得支持的關(guān)鍵。

贏得支持，首先要求企業(yè)家有使命，有使命才有感召力，你對(duì)全社會(huì)有價(jià)值，全社會(huì)都會(huì)成為你的力量來(lái)源。

如果你有使命，又很強(qiáng)大，別人什么感覺(jué)？點(diǎn)贊。有使命，又相對(duì)使命能力不足，大家才會(huì)想要支持你。正亦如此，廣告示強(qiáng)，公關(guān)要懂得示弱。因?yàn)槭救酰拍芙o別人幫助你的接口。

我們看一個(gè)超年長(zhǎng)網(wǎng)紅——故宮的故事。上一任故宮博物院院長(zhǎng)單霽翔先生問(wèn)：國(guó)家領(lǐng)導(dǎo)來(lái)故宮視察，怎么報(bào)告？

“我們的經(jīng)驗(yàn)是，越是主要領(lǐng)導(dǎo)來(lái)的時(shí)候，我們一定要給他看最不好的地方，看什么地方呢？看那些荒草凄凄的地方，看那些霉味撲鼻的地方，這樣領(lǐng)導(dǎo)的責(zé)任心油然而生，就給我們解決很多問(wèn)題，屢屢得逞。”

所以省領(lǐng)導(dǎo)到你們公司，看完后不是說(shuō)“李總，你真棒！”而是問(wèn)——“缺多少錢？需要什么政策？”這樣的問(wèn)題最好。

剛剛我們介紹了探索公關(guān)建立品牌的四個(gè)階段，簡(jiǎn)稱“公關(guān)四階”。華為的公關(guān)，便是第四階，是在贏得支持指導(dǎo)下，被動(dòng)應(yīng)對(duì)熱點(diǎn)的做法。

任總一方面展示了華為的使命、價(jià)值，同時(shí)展示了華為人的不容易——加班加點(diǎn)、寧愿無(wú)薪也要奮斗，同時(shí)又一直被美國(guó)打壓。這樣的使命和示弱，有利于華為贏得更多的同情，更多的認(rèn)同，更多的支持。

注意，公關(guān)四階不是割裂的：不是有了植入，就不要熱點(diǎn)；有了定位，就不要植入；有了支持，就不要定位；而是向前兼容的，是要在贏得支持的前提下，思考支撐定位、植入品牌、制造熱點(diǎn)。而這，也正是華為此次危機(jī)公關(guān)的印證和啟發(fā)。

四、新經(jīng)濟(jì)品牌做公關(guān)有何不同？

接下來(lái)，我們問(wèn)自己一個(gè)問(wèn)題：新經(jīng)濟(jì)品牌做公關(guān)，和其他品牌有什么不同？這種不同，使得新經(jīng)濟(jì)品牌更適合用公關(guān)打造品牌。

這種不同是，新經(jīng)濟(jì)品牌常常開(kāi)創(chuàng)新品類，而開(kāi)創(chuàng)新品類意味著填補(bǔ)空白，意味著新聞性，意味著有機(jī)會(huì)贏得免費(fèi)的媒體報(bào)道。

開(kāi)創(chuàng)新品類，疊加新經(jīng)濟(jì)品牌更高的社會(huì)關(guān)注度，為公關(guān)打開(kāi)了更廣闊的空間 。

比如，羅輯思維在微信出現(xiàn)時(shí)，就是一個(gè)新事物，60秒的語(yǔ)音形式引發(fā)了關(guān)注。

不僅如此，羅輯思維在有意識(shí)地開(kāi)創(chuàng)新品類：有跨年晚會(huì)，沒(méi)有跨年演講，和深圳衛(wèi)視合作做跨年演講；

有發(fā)布會(huì)，沒(méi)有知識(shí)發(fā)布會(huì)，那做一個(gè)“001號(hào)知識(shí)發(fā)布會(huì)”；有例會(huì)，有直播，沒(méi)有例會(huì)直播，羅輯思維開(kāi)創(chuàng)了例會(huì)直播。

就連脫不花生孩子，還做了一個(gè)“猜生男生女”的互動(dòng)。

事實(shí)上，每一種媒介形態(tài)出現(xiàn)，背后都蘊(yùn)含著開(kāi)創(chuàng)傳播領(lǐng)域新品類的機(jī)會(huì)。

比如百雀羚的一鏡到底長(zhǎng)圖文，開(kāi)創(chuàng)了一種新的表現(xiàn)形式，這種形式，會(huì)激發(fā)話題效應(yīng)，進(jìn)而加乘傳播能量和傳播效果。

最后，各位打造品牌時(shí)，如何綜合使用公關(guān)和廣告呢？

這里是我們講的4種典型形勢(shì)的公關(guān)廣告協(xié)同方式。

1. 品類成熟，兵力優(yōu)勢(shì)：這時(shí)廣告為主，拖對(duì)手打廣告戰(zhàn)，做大品類。

2.品類成熟，兵力劣勢(shì)：慎用大廣告，要注意領(lǐng)導(dǎo)者的反應(yīng)。

3. 品類不成熟，兵力優(yōu)勢(shì)：公關(guān)為主，局部廣告。

4.品類不成熟，兵力劣勢(shì)：公關(guān)為主，大廣告=大風(fēng)險(xiǎn)。

品類成熟，兵力優(yōu)勢(shì)的情況：

比如二手車網(wǎng)絡(luò)交易，有現(xiàn)成的消費(fèi)習(xí)慣，二手車交易網(wǎng)接受度高，瓜子也擁有強(qiáng)大的融資能力。

所以瓜子以打廣告為核心手段，自己打廣告，吸引同行一起打，迅速提升二手車交易網(wǎng)的品類勢(shì)能，做大品類規(guī)模。

品類成熟，兵力劣勢(shì)的情況：

比如簡(jiǎn)一大理石瓷磚，相對(duì)于東鵬和諾貝爾等品牌，簡(jiǎn)一規(guī)模較小。

其大廣告建立品牌是否能奏效，要看領(lǐng)導(dǎo)品牌如何反應(yīng)。如果領(lǐng)導(dǎo)品牌了解定位理論防御戰(zhàn)的打法，用數(shù)倍兵力優(yōu)勢(shì)，迅速跟進(jìn)和覆蓋，情況就會(huì)發(fā)生改變。

品類不成熟，兵力優(yōu)勢(shì)的情況：

常見(jiàn)于擁有豐富資源的公司開(kāi)發(fā)新業(yè)務(wù)，推出新品牌。這種情況下，企業(yè)過(guò)早使用廣告，可能浪費(fèi)部分資源，但不至影響生存。如能用精益創(chuàng)業(yè)方法，對(duì)驗(yàn)證期的關(guān)鍵環(huán)節(jié)進(jìn)行一一驗(yàn)證，建立增長(zhǎng)模型，費(fèi)用會(huì)花得更有效。

品類不成熟，兵力劣勢(shì)的情況：

比如有個(gè)每條400塊的男士?jī)?nèi)褲品牌，剛剛創(chuàng)立，就通過(guò)大廣告建立品牌。這種打法就比較兇險(xiǎn)。

在完成戰(zhàn)略驗(yàn)證期必須的價(jià)值驗(yàn)證和交付驗(yàn)證之前，要謹(jǐn)慎通過(guò)大廣告等重資金的增長(zhǎng)方式，過(guò)早刺激增長(zhǎng)。

對(duì)于新經(jīng)濟(jì)品牌而言，品類創(chuàng)新常常帶來(lái)新聞價(jià)值，通過(guò)媒體、公眾口碑的方式傳遞出去。

過(guò)早打大廣告，會(huì)影響口碑價(jià)值。比如，你跟朋友介紹一家新發(fā)現(xiàn)的餐廳，結(jié)果朋友說(shuō)，早知道了，電梯里都有。什么感覺(jué)？

品類發(fā)展的早期人群，需要一種我知你不知的信息優(yōu)勢(shì)，這種優(yōu)勢(shì)會(huì)提高其價(jià)值感，促進(jìn)人們的自發(fā)和主動(dòng)傳播。

各位，兩條腿走路總比一條腿要快，要好。企業(yè)建立品牌，也要綜合運(yùn)用廣告和公關(guān)兩條腿。

廣告善于直接向顧客傳遞購(gòu)買理由，信息可控，但費(fèi)用全部需要企業(yè)自己投入。公關(guān)可以贏得外部力量的支持，一起做大品類，但需要與外部溝通、合作。

最后，祝各位邁開(kāi)雙腿，在打造品牌的路上跑起來(lái)！ 

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

文章目錄
jQuery
jQuery的安裝：
jQuery 語(yǔ)法
選擇器
基本選擇器：
層級(jí)選擇器
基本篩選器
樣式操作
表單篩選器
遍歷方法
jQuery鏈?zhǔn)讲僮?br /> jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消標(biāo)簽?zāi)J(rèn)的事件
事件冒泡
事件委托
jQuery自帶的動(dòng)畫效果
jQuery
jQuery的字面意思其實(shí)就是JavaScript和查詢（Query），即用于輔助開(kāi)發(fā)JavaScript的庫(kù)。jQuery 極大地簡(jiǎn)化了 JavaScript 編程，jQuery使用戶可以更加方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，而且方便地為網(wǎng)站提供AJAX交互。

實(shí)例找到div標(biāo)簽并給div標(biāo)簽設(shè)置為紅色

原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安裝：
您可以從網(wǎng)頁(yè)中添加 jQuery

1、從官網(wǎng)http://jquery.com/download/下載 jQuery 庫(kù)

里面分為：Production version（用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮）和Development version（用于測(cè)試和開(kāi)發(fā)，未壓縮，是可讀的代碼），一般使用Production version壓縮版本的。

2、從 CDN 中載入 jQuery, 如從 Google 或 百度 中加載 jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
1
2
3
4
5
一定要先導(dǎo)入后使用

jQuery 語(yǔ)法
jQuery 語(yǔ)法是通過(guò)選取 HTML 元素，并對(duì)選取的元素執(zhí)行某些操作。

$(selector).action()
1
美元符號(hào)定義 jQuery
選擇符（selector）“查詢"和"查找” HTML 元素
jQuery 的 action() 執(zhí)行對(duì)元素的操作
選擇器
jQuery 選擇器可以對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。 jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等查找HTML 元素。它基于已經(jīng)存在的 CSS 選擇器外，還有一些自定義的選擇器。

基本選擇器：
ID選擇器、類名選擇器、標(biāo)簽選擇器、組合選擇器

選擇器 實(shí)例 選取
* $("*") 所有元素
#id $("#d1") id=“d1” 的元素
.class $(".name") class=“name” 的所有元素
.class , .class $(".name,.password") class 為 “name” 或 “password” 的所有元素
*element $(“span”) 所有 <span> 元素
el1,el2,el3 $(“h1,div,p”) 所有 <h1>、<div> 和 <p> 元素
提出注意點(diǎn)，原生DOM查找和jQuery查找出來(lái)的結(jié)果區(qū)別DOM對(duì)象與jQuery對(duì)象
DOM對(duì)象與jQuery對(duì)象互相轉(zhuǎn)換
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
層級(jí)選擇器
選擇器 實(shí)例 選取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素
element + next $(“div + p”) 每個(gè) <div> 元素相鄰的下一個(gè) <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同級(jí)的所有 <p> 元素
基本篩選器
選擇器 實(shí)例 選取
:first $(“p:first”) 第一個(gè) <p> 元素
:last $(“p:last”) 最后一個(gè) <p> 元素
:even $(“tr:even”) 所有偶數(shù) <tr> 元素
:odd $(“tr:odd”) 所有奇數(shù) <tr> 元素
:gt(nu) $(“ul li:gt(3)”) 列舉 index 大于 3 的元素
:lt(nu) $(“ul li:lt(3)”) 列舉 index 小于 3 的元素
:eq(nu) $(“ul li:eq(3)”) 列舉 index 等于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不為空的輸入元素
:has(element) $(“div:has(a)”) 返回?fù)碛幸粋€(gè)或多個(gè)元素在其內(nèi)的所有元素
/用ul標(biāo)簽舉例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')

最后一個(gè)has的玩法需要寫個(gè)三個(gè)div:一個(gè)空div、一個(gè)兒子有a標(biāo)簽、一個(gè)兒子沒(méi)有a，孫子有a標(biāo)簽
$('div:has(a)')
輸出：
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
樣式操作
方法 描述
addClass() 向被選元素添加一個(gè)或多個(gè)類名
after() 在被選元素后插入內(nèi)容
append() 在被選元素的結(jié)尾插入內(nèi)容
appendTo() 在被選元素的結(jié)尾插入 HTML 元素
attr() 設(shè)置或返回被選元素的屬性/值
before() 在被選元素前插入內(nèi)容
clone() 生成被選元素的副本
css() 為被選元素設(shè)置或返回一個(gè)或多個(gè)樣式屬性
detach() 移除被選元素（保留數(shù)據(jù)和事件）
empty() 從被選元素移除所有子節(jié)點(diǎn)和內(nèi)容
hasClass() 檢查被選元素是否包含指定的 class 名稱
height() 設(shè)置或返回被選元素的高度
html() 設(shè)置或返回被選元素的內(nèi)容
innerHeight() 返回元素的高度（包含 padding，不包含 border）
innerWidth() 返回元素的寬度（包含 padding，不包含 border）
insertAfter() 在被選元素后插入 HTML 元素
insertBefore() 在被選元素前插入 HTML 元素
offset() 設(shè)置或返回被選元素的偏移坐標(biāo)（相對(duì)于文檔）
offsetParent() 返回第一個(gè)定位的祖先元素
outerHeight() 返回元素的高度（包含 padding 和 border）
outerWidth() 返回元素的寬度（包含 padding 和 border）
position() 返回元素的位置（相對(duì)于父元素）
prepend() 在被選元素的開(kāi)頭插入內(nèi)容
prependTo() 在被選元素的開(kāi)頭插入 HTML 元素
prop() 設(shè)置或返回被選元素的屬性/值
remove() 移除被選元素（包含數(shù)據(jù)和事件）
removeAttr() 從被選元素移除一個(gè)或多個(gè)屬性
removeClass() 從被選元素移除一個(gè)或多個(gè)類
removeProp() 移除通過(guò) prop() 方法設(shè)置的屬性
replaceAll() 把被選元素替換為新的 HTML 元素
replaceWith() 把被選元素替換為新的內(nèi)容
scrollLeft() 設(shè)置或返回被選元素的水平滾動(dòng)條位置
scrollTop() 設(shè)置或返回被選元素的垂直滾動(dòng)條位置
text() 設(shè)置或返回被選元素的文本內(nèi)容
toggleClass() 在被選元素中添加/移除一個(gè)或多個(gè)類之間切換
unwrap() 移除被選元素的父元素
val() 設(shè)置或返回被選元素的屬性值（針對(duì)表單元素）
width() 設(shè)置或返回被選元素的寬度
常用實(shí)例：

三級(jí)菜單展示

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css屬性

// 兩個(gè)參數(shù)設(shè)置屬性
$('#p1').css('font-size','24px')
// 一個(gè)參數(shù)獲取屬性
$('#p1').css('font-size')

// 一次設(shè)置多個(gè)屬性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作

// 不加參數(shù)獲取位置參數(shù)
$(".c3").offset()
// 加參數(shù)設(shè)置位置參數(shù)
$(".c3").offset({top:284,left:400})

// position只能獲取值，不能設(shè)置值

// scrollTop獲取當(dāng)前滾動(dòng)條偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 設(shè)置滾動(dòng)條偏移量
1
2
3
4
5
6
7
8
9
10
文本操作

text() html() 不加參數(shù)獲取值，加參數(shù)設(shè)置值
val() 不加參數(shù)獲取值，加參數(shù)設(shè)置值
1
2
屬性操作

// 獲取文本屬性
$('#d1').attr('s1')  // 獲取屬性值
$('#d1').attr('s1','haha')  // 設(shè)置屬性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 設(shè)置多個(gè)屬性
$('#d1').removeAttr('taidi')  // 刪除一個(gè)屬性

// 獲取check與radio標(biāo)簽的checked屬性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文檔處理

// 標(biāo)簽內(nèi)部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 標(biāo)簽內(nèi)部頭部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 標(biāo)簽外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 標(biāo)簽外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 替換標(biāo)簽
replaceWith()  // 什么被什么替換
replaceAll()  // 拿什么替換什么

// 克隆事例
<button id="b2">屠龍寶刀，點(diǎn)擊就送</button>
// clone方法加參數(shù)true，克隆標(biāo)簽并且克隆標(biāo)簽帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true參數(shù)
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
表單篩選器
選擇器 實(shí)例 選取
:input $(":input") 所有 input 元素
:text $(":text") 所有帶有 type=“text” 的 input 元素
:password $(":password") 所有帶有 type=“password” 的 input 元素
:checkbox $(":checkbox") 所有帶有 type=“checkbox” 的 input 元素
:submit $(":submit") 所有帶有 type=“submit” 的 input 元素
:reset $(":reset") 所有帶有 type=“reset” 的 input 元素
:button $(":button") 所有帶有 type=“button” 的 input 元素
:image $(":image") 所有帶有 type=“image” 的 input 元素
:file $(":file") 所有帶有 type=“file” 的 input 元素
:enabled $(":enabled") 所有啟用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有選定的 input 元素
:checked $(":checked") 所有選中的 input 元素
// 針對(duì)表單內(nèi)的標(biāo)簽
$('input[type="text"]')
// 簡(jiǎn)化寫法
$(':text')

// 找到所有被選中的checkbox
$(':checkbox')  // 注意select框中默認(rèn)selected標(biāo)簽也會(huì)被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍歷方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被選元素的所有直接子元素
closest() 返回被選元素的第一個(gè)祖先元素
contents() 返回被選元素的所有直接子元素（包含文本和注釋節(jié)點(diǎn)）
each() 為每個(gè)匹配元素執(zhí)行函數(shù)
filter() 把匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素
find() 返回被選元素的后代元素
first() 返回被選元素的第一個(gè)元素
is() 根據(jù)選擇器/元素/jQuery 對(duì)象檢查匹配元素集合，如果存在至少一個(gè)匹配元素，則返回 true
last() 返回被選元素的最后一個(gè)元素
next() 返回被選元素的后一個(gè)同級(jí)元素
nextAll() 返回被選元素之后的所有同級(jí)元素
nextUntil() 返回介于兩個(gè)給定參數(shù)之間的每個(gè)元素之后的所有同級(jí)元素
not() 從匹配元素集合中移除元素
offsetParent() 返回第一個(gè)定位的父元素
parent() 返回被選元素的直接父元素
parents() 返回被選元素的所有祖先元素
parentsUntil() 返回介于兩個(gè)給定參數(shù)之間的所有祖先元素
prev() 返回被選元素的前一個(gè)同級(jí)元素
prevAll() 返回被選元素之前的所有同級(jí)元素
prevUntil() 返回介于兩個(gè)給定參數(shù)之間的每個(gè)元素之前的所有同級(jí)元素
siblings() 返回被選元素的所有同級(jí)元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合縮減為指定范圍的子集
each() 方法為每個(gè)匹配元素規(guī)定要運(yùn)行的函數(shù)。
$.each(array,function(index){
  console.log(array[index])
})
$.each(array,function(){
  console.log(this);
})
// 支持簡(jiǎn)寫
$divEles.each(function(){
  console.log(this)  // 標(biāo)簽對(duì)象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery鏈?zhǔn)讲僮?br /> python代碼詮釋鏈?zhǔn)秸{(diào)用,其實(shí)就是在調(diào)用方法之后講對(duì)象再次返回

<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。

$(document).ready()
$(document).ready() 方法允許我們?cè)谖臋n完全加載完后執(zhí)行函數(shù)。為了防止網(wǎng)頁(yè)還沒(méi)加載完，js代碼就已經(jīng)執(zhí)行，通常利用下面兩種方式來(lái)書寫js代碼。

$(document).ready(function(){
// 在這里寫你的JS代碼...
})

網(wǎng)頁(yè)最后
$(function(){
// 在這里寫你的代碼
})
1
2
3
4
5
6
7
8
click()
click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)。

在下面的實(shí)例中，當(dāng)點(diǎn)擊事件在某個(gè)<p> 元素上觸發(fā)時(shí)，隱藏當(dāng)前的 <p> 元素：

$("p").click(function(){ 
  $(this).hide(); 
});
1
2
3
dblclick()
當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件。

$("p").dblclick(function(){ 
  $(this).hide(); 
});
1
2
3
mouseenter()
當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)，會(huì)發(fā)生 mouseenter 事件。

$("#p1").mouseenter(function(){ 
  alert("鼠標(biāo)經(jīng)過(guò)了!"); 
});
1
2
3
mouseleave()
當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)，會(huì)發(fā)生 mouseleave 事件。

$("#p1").mouseleave(function(){ 
  alert("鼠標(biāo)離開(kāi)了!"); 
});
1
2
3
mousedown()
當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生 mousedown 事件。

$("#p1").mousedown(function(){ 
  alert("鼠標(biāo)按下!"); 
});
1
2
3
mouseup()
當(dāng)在元素上松開(kāi)鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生 mouseup 事件。

ouseup(function(){ 
  alert("鼠標(biāo)松開(kāi)!"); 
});
1
2
3
hover()
hover()方法用于模擬光標(biāo)懸停事件。當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)。

$("#p1").hover(function(){ 
  alert("你的光標(biāo)懸停！"); 
  }, 
  function(){ 
  alert("你的光標(biāo)已經(jīng)離開(kāi)！"); 
});
1
2
3
4
5
6
focus()
當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件。

$("input").focus(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
blur()
當(dāng)元素失去焦點(diǎn)時(shí)，發(fā)生 blur 事件。

$("input").blur(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
input()
input實(shí)時(shí)監(jiān)聽(tīng)，輸入內(nèi)容時(shí)發(fā)生 input 事件

 $('#i1').on('input',function () {
        console.log($(this).val())
    });
1
2
3
取消標(biāo)簽?zāi)J(rèn)的事件
利用preventDefault()
$('input').click(function (e) {
        alert(123);
        e.preventDefault();  
    });
直接返回false
$('input').click(function (e) {
        alert(123);
        return false；
    });
  
1
2
3
4
5
6
7
8
9
10
11
事件冒泡
iv>p>span  // 三者均綁定點(diǎn)擊事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });
1
2
3
4
5
事件委托
<button>按鈕</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>
1
2
3
4
5
6
7
jQuery自帶的動(dòng)畫效果
下面的表格列出了用于創(chuàng)建動(dòng)畫效果的 jQuery 方法。

方法 描述
delay() 對(duì)被選元素的所有排隊(duì)函數(shù)（仍未運(yùn)行）設(shè)置延遲
dequeue() 移除下一個(gè)排隊(duì)函數(shù)，然后執(zhí)行函數(shù)
fadeIn() 逐漸改變被選元素的不透明度，從隱藏到可見(jiàn)
fadeOut() 逐漸改變被選元素的不透明度，從可見(jiàn)到隱藏
fadeTo() 把被選元素逐漸改變至給定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之間進(jìn)行切換
finish() 對(duì)被選元素停止、移除并完成所有排隊(duì)動(dòng)畫
hide() 隱藏被選元素
queue() 顯示被選元素的排隊(duì)函數(shù)
show() 顯示被選元素
slideDown() 通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素
slideToggle() slideUp() 和 slideDown() 方法之間的切換
slideUp() 通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素
stop() 停止被選元素上當(dāng)前正在運(yùn)行的動(dòng)畫
toggle() hide() 和 show() 方法之間的切換
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

抽象圖形拼接

坦白說(shuō)，這些抽象的 LOGO 設(shè)計(jì)讓我立刻想起了JK·羅琳和她書中的魔法符號(hào)。如果這些Logo背后都有著獨(dú)特而富有力量的故事，那么它們確實(shí)可以很好地服務(wù)于品牌。這樣的了 LOGO 設(shè)計(jì)應(yīng)當(dāng)在筆觸上保持一致，并且充滿意義，我覺(jué)得如果能傳遞出這樣的信息，它就很優(yōu)秀了。

利落清晰的筆觸，完美的角度和弧線，這樣精準(zhǔn)的設(shè)計(jì)會(huì)給人帶來(lái)可靠的感知。當(dāng)然，這些Logo 的應(yīng)用場(chǎng)景同樣有著嚴(yán)格的環(huán)境要求，設(shè)計(jì)師幾乎沒(méi)有異想天開(kāi)的余地。這些 Logo 看上去相當(dāng)正式，有著明顯的高級(jí)感。

負(fù)空間

借助負(fù)空間來(lái)傳遞信息一直一種巧妙的 LOGO 設(shè)計(jì)技巧，它就像缺少關(guān)鍵證據(jù)的犯罪現(xiàn)場(chǎng)，墻上的洞，它并不是借助現(xiàn)有存在的因素來(lái)告訴你信息，而是通過(guò)一個(gè)「不在場(chǎng)的關(guān)鍵元素」，來(lái)傳遞重要信息。負(fù)空間就是這樣，它同樣也是一塊畫布，只不過(guò)給人的感覺(jué)是通過(guò)畫布的背面來(lái)呈現(xiàn)信息和故事。

負(fù)空間并不是為了隱藏信息而存在，就像聯(lián)邦快遞 (FedEx) Logo中隱藏的箭頭，或是 Toblerone 巧克力 Logo 中山腰上的熊。這些元素都不是為了隱藏信息，而是為了通過(guò)這種不完整來(lái)傳遞更多的信息。通過(guò)正空間來(lái)凸顯負(fù)空間就是關(guān)鍵的技巧，正如 Reinhard Ernst 博物館的 Logo 所示，中間開(kāi)放的矩形區(qū)塊如同畫框，似乎可以代表博物館的任何一件藏品，這也是一種「less is more」的設(shè)計(jì)。

托拽筆觸

很多做 Logo 的設(shè)計(jì)師都曾經(jīng)歷無(wú)法控制的時(shí)刻，發(fā)呆失神應(yīng)該也經(jīng)常會(huì)發(fā)生。如果你是在紙上畫草圖，筆尖無(wú)意識(shí)地滑動(dòng)，或者墨水洇出，都會(huì)產(chǎn)生有趣的筆觸痕跡。我知道這不是電腦上繪圖的方式，但它確實(shí)幫助我描繪出這種視覺(jué)設(shè)計(jì)的特征。將筆尖繪制成一個(gè)完美的圓，而筆尖后則是留下托拽的痕跡，在筆痕結(jié)束的位置，自然留下的也是一個(gè)圓弧邊緣。

不管這些 Logo 的布局特征是怎樣的，它們都呈現(xiàn)了類似視覺(jué)特征。小圓點(diǎn)和托拽痕跡構(gòu)成了它主要的「筆觸」，它們而生動(dòng)地拼出字母，繪制出路徑，或者勾畫出有意義的符號(hào)。我想你已經(jīng)捕捉到了它們的特征了——活力四射，生動(dòng)新鮮的筆觸路徑。

間斷漸變

在logo設(shè)計(jì)中廣泛使用漸變色，是整個(gè)行業(yè)在過(guò)去十年中經(jīng)歷的最兩極分化的趨勢(shì)之一。仍有很多設(shè)計(jì)師抵觸過(guò)渡色，因?yàn)閺腖OGO設(shè)計(jì)的角度上來(lái)說(shuō)，漸變色違背了很多規(guī)則，而這些規(guī)則是在數(shù)字時(shí)代之前就已經(jīng)存在了。不過(guò)，LOGO 設(shè)計(jì)師們總能想出好辦法，比如間隔漸變式的設(shè)計(jì)。

將均勻漸進(jìn)的色彩變化用連續(xù)的純色片段來(lái)替代，同樣呈現(xiàn)出色彩的變化和韻律感，但是消解了漸變色在 LOGO 展示過(guò)程中潛在各種問(wèn)題。上面案例中，Qwant 的 logo 就是通過(guò)輪廓化的顏色分割來(lái)實(shí)現(xiàn)這一點(diǎn)，它真實(shí)地模擬了漸變的效果，所呈現(xiàn)出的效果比CPA Ireland 要好，CPA Ireland 則使用了的四等分幾何分割加上色階轉(zhuǎn)換?？傮w上來(lái)說(shuō)，間隔漸變的色彩使用技巧，很好地在當(dāng)下的流行趨勢(shì)和 LOGO 設(shè)計(jì)訴求之間找到了平衡點(diǎn)，值得嘗試。

輪廓線條

使用線條來(lái)勾勒和描摹事物，傳達(dá)信息，是一項(xiàng)古老而傳統(tǒng)的技藝。在時(shí)下的審美體系當(dāng)中，使用輪廓線條來(lái)繪制 LOGO 似乎顯得太過(guò)于老派，不夠現(xiàn)代。不過(guò)技術(shù)總歸是服務(wù)于表達(dá)的，依然有設(shè)計(jì)師能夠充分的利用這一技術(shù)——加入透視，不再局限于二維，而是開(kāi)始描繪三維的對(duì)象。

這一的設(shè)計(jì)看起來(lái)和如今的線性圖標(biāo)的繪制方式在技法上保持了延續(xù)性，但是它在維度呈現(xiàn)上更加深入，更加具有表現(xiàn)力和形式感。通過(guò)富有規(guī)律性的利落的線條，設(shè)計(jì)師不用太多的線條就能勾勒出立體而抓人眼球的LOGO。這種設(shè)計(jì)要求設(shè)計(jì)具備更強(qiáng)大更精準(zhǔn)的描摹能力。你可以延續(xù)這種思路到整個(gè)設(shè)計(jì)當(dāng)中，這會(huì)使得整個(gè)品牌化設(shè)計(jì)思路更加開(kāi)闊、有趣。

句點(diǎn)元素

在 LOGO 設(shè)計(jì)當(dāng)中，使用句點(diǎn)這樣的標(biāo)點(diǎn)符號(hào)，通常都會(huì)借用它身處標(biāo)點(diǎn)符號(hào)中的含義和功能。當(dāng)我仔細(xì)琢磨這一趨勢(shì)時(shí)，發(fā)現(xiàn)這些類似句點(diǎn)的符號(hào)有時(shí)像句號(hào)，有時(shí)則偏向冒號(hào)，它們?cè)贚OGO中總帶著一些奇特的意味。如你所見(jiàn)，這些原點(diǎn)在更多的時(shí)候，它更接近于句號(hào)，充當(dāng)收尾和封頂?shù)慕K止符。

有的時(shí)候，它的裝飾性更強(qiáng)，以不同的形式漂浮在文本和符號(hào)周圍。如果你要深究這些 LOGO 設(shè)計(jì)本身的含義會(huì)發(fā)現(xiàn)，這個(gè)小圓點(diǎn)可能是字母 i 上的那個(gè)小圓點(diǎn)簡(jiǎn)略之后的殘留痕跡。這個(gè)小圓點(diǎn)，在如今的很多 LOGO 中已經(jīng)超出了裝飾性的范疇，基于不同的需求和設(shè)計(jì)出發(fā)點(diǎn)，它可能意味著時(shí)間，可能代表著字母，承載著特定的詞匯和含義，可能是感嘆號(hào)或者句號(hào)，表達(dá)情緒或者終止。設(shè)計(jì)師將內(nèi)容抽象成幾何圖形，承載意義，提升了對(duì)話的智慧。

翅膀元素

在傳遞放飛、飛翔、展望、自由、遠(yuǎn)見(jiàn)、輕盈、速度等含義的時(shí)候，很多設(shè)計(jì)師都會(huì)借用翅膀的意象。這也是為什么越來(lái)越多的地方會(huì)看到被提煉和抽象出來(lái)的翅膀和羽毛的符號(hào)或者圖形，某種意義上，翅膀已經(jīng)遠(yuǎn)超出了它本身的意味。這些被設(shè)計(jì)得形制不一的翅膀類的圖形，有著冥想的前傾或者后掠的姿態(tài)，仿佛在對(duì)抗變幻莫測(cè)的大風(fēng)，借助空氣動(dòng)力學(xué)向上飛起。

很多翅膀元素形制類似于字母 U，只不過(guò)兩只翅膀在傾斜角度、弧度和長(zhǎng)短上，進(jìn)行了比較深入的調(diào)整。之后，再對(duì) Logo 進(jìn)行弧度和細(xì)節(jié)進(jìn)行修飾，這樣就完成了。如同我們上面所在展示的幾個(gè)案例，設(shè)計(jì)師經(jīng)過(guò)很快的迭代就可以完成這樣的設(shè)計(jì)。與此同時(shí)，在具體的設(shè)計(jì)過(guò)程中，設(shè)計(jì)師還會(huì)引用品牌中一些字母的特征，比如Jetta的字母J，DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了雙翼的意象。蘋果有翅膀，烏龜也可以有翅膀。我們可以用翅膀填補(bǔ)空白。

門窗元素

門其實(shí)我們常常會(huì)引申出「打開(kāi)新世界大門」的概念，它在實(shí)際設(shè)計(jì)中會(huì)帶有通道、時(shí)間、新世界，甚至一種全新心境和意境的概念。很多品牌 LOGO 都想借助這個(gè)意象來(lái)承載更高遠(yuǎn)的含義，微軟就是一個(gè)典型。門和窗本身一直都是一組象征性極強(qiáng)的元素。門象征著通行的權(quán)利，解決方案的途徑，機(jī)會(huì)，甚至歡迎的含義，某種意義上它們和眼睛在含義和隱喻上是共通的。這也是很多設(shè)計(jì)師在設(shè)計(jì) LOGO 的時(shí)候青睞這一意象的原因所在。

關(guān)于2019年的LOGO趨勢(shì)報(bào)告

2019年的LOGO趨勢(shì)報(bào)告，是我們的第17份 LOGO趨勢(shì)報(bào)告。每年的趨勢(shì)報(bào)告都是從成千上萬(wàn)的 Logo 中，尋找新趨勢(shì)和細(xì)微微妙的差別。我們承認(rèn)，每一個(gè)設(shè)計(jì)案例都代表著來(lái)自世界各地的設(shè)計(jì)師們的思考和心血，我們對(duì)他們表示敬畏，并感謝他們不遺余力地幫助我們完成這份報(bào)告。感謝所有在過(guò)去、現(xiàn)在和未來(lái)幾年為潮流報(bào)告做出貢獻(xiàn)的設(shè)計(jì)師們。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

目錄結(jié)構(gòu)：



index.wxml:

<view class="canvasBox">
  <canvas canvas-id="myCanvas" class="myCanvas" catchtouchstart='canvasStart' catchtouchmove='canvasMoving'></canvas>
</view>
<view class="btn">
  <button type="warn" bindtap='drawPen'>畫筆</button>
  <button type="primary" bindtap='clearCanvas'>清空畫板</button>
  <button type="warn" bindtap='clearLine'>橡皮擦</button>
  <button style='background:#000;color:#fff;' bindtap="black">黑色</button>
  <button style='background:yellow;color:#000;' bindtap="yellow">黃色</button>
  <button style='background:red;color:#fff;' bindtap="red">紅色</button>
  <button style='background:blue;color:#fff;' bindtap="blue">藍(lán)色</button>
  <button style='background:green;color:#fff;' bindtap="green">綠色</button>
  <button type="warn" bindtap="startRecording">開(kāi)始錄制</button>
  <button type="primary" bindtap='rePlay'>復(fù)盤</button>
  <button></button>
</view>
index.wxss:

.canvasBox{
  position: relative;
  top:0;
  left:0;
  width: 750rpx;
  height:800rpx;
  background:#eee;
}
.canvasBox .myCanvas{
  width: 100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
}
 
.btn{
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btn button{
  width: 180rpx;
  font-size: 24rpx;
}
index.js:

//index.js
//獲取應(yīng)用實(shí)例
import {hisData} from "../../utils/historyOperation.js";
const app = getApp()
var moveToX = 0, moveToY = 0, lineToX = 0, lineToY = 0;
var context = null;
var isStart = false;
var date;
var startDate;//開(kāi)始時(shí)刻
var penType = "drawPen";
var colorStr = "#000";
var operationType = "mapping";
Page({
  data: {
    
  },
  
  canvasStart:function(e){
    var x = Math.floor(e.touches[0].clientX);
    var y = Math.floor(e.touches[0].clientY);
    date = new Date();
    moveToX = x;
    moveToY = y;
    operationType = "mapping";
    if(penType === "clearPen"){
      operationType = "clearLine";
    }
    if (isStart) {
      hisData.hisDataArr.push({
        time: date.getTime() - startDate,
        operation: operationType,
        lineArr: {
          startX: moveToX,
          startY: moveToY,
          currentX: x,
          currentY: y,
          z: 1,
          colorStr:colorStr
        }
      })
    }
  },
  //繪制線條
  canvasMoving:function(e){
    date = new Date();
    var x = Math.floor(e.changedTouches[0].clientX);
    var y = Math.floor(e.changedTouches[0].clientY);
    lineToX = x;
    lineToY = y;
    if(penType === "clearPen"){
      operationType = "clearLine";
      context.clearRect(x-12, y-12, 24, 24);
      context.draw(true);
    }else{
      operationType = "mapping";
      context.setStrokeStyle(colorStr);
      context.moveTo(moveToX, moveToY);
      context.lineTo(lineToX, lineToY);
    }
    if (isStart) {
      hisData.hisDataArr.push({
        time: date.getTime() - startDate,
        operation: operationType,
        lineArr: {
          startX: moveToX,
          startY: moveToY,
          currentX: lineToX,
          currentY: lineToY,
          z: 1,
          colorStr: colorStr
        }
      })
    }
    moveToX = lineToX;
    moveToY = lineToY;
    context.stroke();
    context.draw(true);
  },
  
  clearCanvas:function(){
    context.clearRect(0,0,375,400);
    context.draw(true);
    date = new Date();//記錄當(dāng)前操作時(shí)刻
    operationType = "clearCanvas";
    if(isStart){
      hisData.hisDataArr.push({
        time: date.getTime() - startDate,
        operation: operationType,
        lineArr: {
          startX: -1,
          startY: -1,
          currentX: -1,
          currentY: -1,
          z: 0,
          colorStr: colorStr
        }
      })
    }
  },
  
  drawPen:function(){
    penType = "drawPen";
  },
  clearLine:function(){
    penType = "clearPen";
  },
  black:function(){
    colorStr = "#000";
  },
  yellow: function () {
    colorStr = "yellow";
  },
  red: function () {
    colorStr = "red";
  },
  blue: function () {
    colorStr = "blue";
  },
  green: function () {
    colorStr = "green";
  },
  startRecording:function(){
    isStart = true;
    date = new Date();
    startDate = date.getTime();
  },
  rePlay:function(){
    wx.navigateTo({
      url: '../replay/replay',
    })
  },
  onLoad: function () {
    isStart = false;
    context = wx.createCanvasContext('myCanvas');
    context.beginPath();
    context.setStrokeStyle('#000');
    context.setLineWidth(5);
    context.setLineCap('round');
    context.setLineJoin('round');
  }
})
historyOperation.js:該文件用來(lái)保存歷史操作，以便復(fù)盤

const hisData = {
  hisDataArr:[
    {
      time:0,//操作時(shí)間
      /**
       * 操作類型
       * 繪圖：mapping
       * 拖動(dòng)球員：moveplayer
       * 清除畫布：clearCanvas
       * 橡皮擦：clearLine
       */
      operation:"mapping",//操作類型
      /**
       * 繪制路徑
       * startX：開(kāi)始x坐標(biāo)
       * startY：開(kāi)y縱坐標(biāo)
       * currentX：目標(biāo)位置的 x 坐標(biāo)
       * currentY：目標(biāo)位置的 y 坐標(biāo)
       * z：1代表畫線時(shí)鼠標(biāo)處于move狀態(tài)，0代表處于松開(kāi)狀態(tài)
       * colorStr：線的填充顏色
       */
      lineArr: {    //繪制路徑
        startX:0,
        startY:0,
        currentX:0,
        currentY:0,
        z:0,
        colorStr:"#000"
      }
    }
  ]
};
 
export {hisData};
復(fù)盤：

reply.wxml:

<!--pages/replay/replay.wxml-->
<view class="replayBox">
  <canvas canvas-id='myCanvas' class="myCanvas"></canvas>
</view>
<button type="warn" bindtap="start">開(kāi)始</button>
reply.wxss:

/* pages/replay/replay.wxss */
.replayBox{
  position:relative;
  width: 750rpx;
  height:800rpx;
  background: #eee;
}
 
.replayBox .myCanvas{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
 
reply.js:

// pages/replay/replay.js
import {hisData} from "../../utils/historyOperation.js";
var startDate;
var date;
var curTime;
var context = null;
var timer = null;
Page({
 
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
 
  },
  start:function(){
    context.clearRect(0, 0, 375, 400);
    clearInterval(timer);
    date = new Date();
    startDate = date.getTime();
    var i = 0;
    var that = this;
    var len = hisData.hisDataArr.length;
    timer = setInterval(function(){
      date = new Date();
      curTime = date.getTime() - startDate;
      if (curTime >= hisData.hisDataArr[i].time){
        switch (hisData.hisDataArr[i].operation) {
          case "mapping":
            context.setStrokeStyle(hisData.hisDataArr[i].lineArr.colorStr);
            context.moveTo(hisData.hisDataArr[i].lineArr.startX, hisData.hisDataArr[i].lineArr.startY);
            context.lineTo(hisData.hisDataArr[i].lineArr.currentX, hisData.hisDataArr[i].lineArr.currentY);
            context.stroke();
            context.draw(true);
            break;
          case "clearCanvas":
            context.clearRect(0, 0, 375, 400);
            context.draw(true);
            break;
          case "clearLine":
            context.clearRect(hisData.hisDataArr[i].lineArr.currentX-12, hisData.hisDataArr[i].lineArr.currentY-12, 24, 24);
            context.draw(true);
            break;
        }
        i++;
      }
      if(i >= len){
        clearInterval(timer);
      }
    },2);
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    context = wx.createCanvasContext('myCanvas');
    context.beginPath();
    context.setStrokeStyle('#000');
    context.setLineWidth(3);
    context.setLineCap('round');
    context.setLineJoin('round');
  }
})
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

設(shè)計(jì)師在日常溝通的時(shí)候，是不是經(jīng)常會(huì)遇到說(shuō)了半天結(jié)果大家說(shuō)的不是一件事的情況？筆者認(rèn)為，要解決這個(gè)問(wèn)題，首先要統(tǒng)一名詞，保證溝通的準(zhǔn)確度。下面是筆者整理的一些關(guān)于 APP（小程序）名詞的規(guī)范樣例，希望能幫助到剛剛?cè)胄械耐瑢W(xué)們。

不同的APP頁(yè)面類型的標(biāo)準(zhǔn)術(shù)語(yǔ)

我們從下載并使用一個(gè) APP 的流程來(lái)展開(kāi)說(shuō)明。

1. 啟動(dòng)圖標(biāo)

點(diǎn)擊后可以啟動(dòng) APP 的圖標(biāo)，如圖分別是淘寶在不同場(chǎng)景下的啟動(dòng)圖標(biāo)。

2. 應(yīng)用市場(chǎng)展示頁(yè)

在應(yīng)用市場(chǎng)中為了幫助用戶在下載之前了解 APP 功能的頁(yè)面叫應(yīng)用市場(chǎng)展示頁(yè)，也能夠通過(guò)優(yōu)秀的 UI 設(shè)計(jì)吸引用戶下載。

如圖中紅框內(nèi)分別是蘇寧易購(gòu)、設(shè)計(jì)本、當(dāng)當(dāng)網(wǎng)的應(yīng)用市場(chǎng)展示頁(yè)。

3. 啟動(dòng)頁(yè)（閃屏）

APP 啟動(dòng)后加載過(guò)程中顯示的頁(yè)面叫啟動(dòng)頁(yè)，如圖是微信、有道云筆記、得到的啟動(dòng)頁(yè)。一般啟動(dòng)頁(yè)的設(shè)計(jì)都會(huì)比較簡(jiǎn)潔，只有啟動(dòng)圖標(biāo)+solgen，或是吉祥物、一張精美圖片的形式。

4. 廣告頁(yè)

國(guó)內(nèi)一些公司由于變現(xiàn)困難在啟動(dòng)頁(yè)之前或之后，進(jìn)入主頁(yè)之前加了一張廣告頁(yè)，主要用來(lái)顯示接的廣告或自己公司的運(yùn)營(yíng)活動(dòng)，可以跳轉(zhuǎn)鏈接或打開(kāi)其他 APP。

如圖是 UC瀏覽器、網(wǎng)易云音樂(lè)、寶寶樹(shù)的廣告頁(yè)。

5. 引導(dǎo)頁(yè)

用戶第一次打開(kāi) APP 后為用戶介紹 APP 主要功能的頁(yè)面，只顯示一次，或是 APP 版本更新后用來(lái)介紹新版本新功能。

如圖是前程無(wú)憂 APP 的引導(dǎo)頁(yè)。

6. 首頁(yè)

進(jìn)入 APP 后默認(rèn)顯示的頁(yè)面，如圖是微信、澎湃新聞、淘寶的首頁(yè)。

7. 一級(jí)頁(yè)面

一般指通過(guò)底部標(biāo)簽切換的方式能夠到達(dá)的頁(yè)面。如：

• 微信的一級(jí)頁(yè)面有微信、通訊錄、發(fā)現(xiàn)、我的；
• 淘寶的一級(jí)頁(yè)面有首頁(yè)、微淘、消息、購(gòu)物車、我的淘寶；
• 澎湃新聞的一級(jí)頁(yè)面有首頁(yè)、視頻、問(wèn)政、問(wèn)吧、我的。

8. 二級(jí)頁(yè)面

指通過(guò)一次反饋操作能夠回到一級(jí)頁(yè)面的頁(yè)面，叫二級(jí)頁(yè)面。

如圖分別是微信聊天頁(yè)面、朋友圈頁(yè)面、支付寶我的余額頁(yè)面，它們都是二級(jí)頁(yè)面。

9. 注冊(cè)登錄頁(yè)面

用戶注冊(cè)賬號(hào)、登錄賬號(hào)的頁(yè)面。如圖是洪恩故事的注冊(cè)登錄頁(yè)。

10. 個(gè)人主頁(yè)/我的頁(yè)面

顯示用戶個(gè)人信息、和用戶有關(guān)的訂單、收藏、優(yōu)惠券、課程、商品等等信息的頁(yè)面。

如圖是 luckin 咖啡、家長(zhǎng)幫、丁香醫(yī)生的個(gè)人主頁(yè)。

11. 菜單導(dǎo)航頁(yè)

包含很多分類、不同欄目，可以跳轉(zhuǎn)到很多個(gè)不同內(nèi)容頁(yè)面的頁(yè)面叫做菜單導(dǎo)航頁(yè)。一般首頁(yè)大部分屬于菜單導(dǎo)航頁(yè)，如我們的 pro 小程序的首頁(yè)就是一個(gè)菜單導(dǎo)航頁(yè)。

如圖是一條、新世相閱讀、美圖秀秀的菜單導(dǎo)航頁(yè)。

12. 搜索頁(yè)面

用于搜索的頁(yè)面。有的 APP 沒(méi)有單獨(dú)的搜索頁(yè)面只有一個(gè)輸入框，有的有單獨(dú)的，因?yàn)榭梢苑乓恍┩扑]內(nèi)容或廣告位。

如圖是喜馬拉雅 FM、貝貝、搜狗閱讀的搜索頁(yè)。

13. 設(shè)置頁(yè)面

更改 APP 設(shè)置的頁(yè)面，如圖是百度閱讀、淘票票、夸克瀏覽器的設(shè)置頁(yè)面。

14. 詳情頁(yè)面

展示內(nèi)容詳細(xì)信息的頁(yè)面，如圖分別是淘寶的商品詳情頁(yè)、起點(diǎn)學(xué)院的課程詳情頁(yè)、今日頭像的咨詢?cè)斍轫?yè)。

15. 關(guān)于我們頁(yè)面

介紹 APP 版本信息、功能介紹、公司信息、聯(lián)系方式、版權(quán)聲明的頁(yè)面。

如圖分別是夸克瀏覽器、極客時(shí)間、火辣健身的關(guān)于我們頁(yè)面。

16. 意見(jiàn)反饋?lái)?yè)面

一般的 APP 都會(huì)設(shè)計(jì)一個(gè)意見(jiàn)反饋功能來(lái)收集用戶需求，對(duì)應(yīng)的頁(yè)面就是意見(jiàn)反饋?lái)?yè)面。

如圖分別是貝貝、阿里釘釘、花生地鐵的意見(jiàn)反饋?lái)?yè)。

APP 中的頁(yè)面類型大致可以分為以上這些，上邊所寫的頁(yè)面名稱是被使用得最多的、最規(guī)范的名稱。溝通時(shí)使用上面的頁(yè)面名稱應(yīng)該 90% 的成員都能理解。

APP頁(yè)面內(nèi)部的標(biāo)準(zhǔn)術(shù)語(yǔ)

對(duì)于不同類型的頁(yè)面名稱一般設(shè)計(jì)師用的比較多，叫法也最準(zhǔn)確，以上名稱是在一些專業(yè)的 UI 設(shè)計(jì)網(wǎng)站查閱資料，又和幾個(gè)設(shè)計(jì)師朋友確認(rèn)后擬定的，準(zhǔn)確度可以保證。

開(kāi)發(fā)常用術(shù)語(yǔ)釋義

1. 編程語(yǔ)言

人的語(yǔ)言可以分為漢語(yǔ)、英語(yǔ)、法語(yǔ)等等，計(jì)算機(jī)的語(yǔ)言同樣可以分為 java、php、html 等等，這些語(yǔ)言就是編程語(yǔ)言。不同的程序員會(huì)的語(yǔ)言不同，每一種語(yǔ)言都需要單獨(dú)學(xué)習(xí)。

2. 程序

通過(guò)編程語(yǔ)言給計(jì)算機(jī)下達(dá)任務(wù)，讓它理解我們要做什么。用編程語(yǔ)言給計(jì)算機(jī)/手機(jī)下達(dá)的任務(wù)書就是程序。

3. 數(shù)據(jù)類型

編程語(yǔ)言中用來(lái)區(qū)分?jǐn)?shù)據(jù)格式的標(biāo)記，如記錄數(shù)字和記錄漢字就要使用不同的數(shù)據(jù)類型。

如：

• 整數(shù)類型：int
• 浮點(diǎn)型（小數(shù)類型）：float、double
• 字符串型（單詞、句子型）：string
• 布爾型：只包含是和否兩個(gè)值

4. 變量

沒(méi)有固定值的量，例如：定義一個(gè)變量 X 表示繪本名稱，那 X 可能叫《我不喜歡哭》，也可能叫《鱷魚媽媽》。即用一個(gè)單詞表示物體的一個(gè)屬性，如上面說(shuō)的繪本標(biāo)題。

5. 接口

電腦需要調(diào)用手機(jī)里面的信息，這時(shí)候你會(huì)拿一根數(shù)據(jù)線將電腦手機(jī)連接起來(lái)，電腦和手機(jī)上連接數(shù)據(jù)線的接口就是傳說(shuō)中的 API 接口──即獲取數(shù)據(jù)、獲取某種功能的通道。

如在 pro 小程序中要想在前端展示文章，那么在定義完文章標(biāo)題的字號(hào)、顏色等等后就需要設(shè)計(jì)師提供給接口獲取具體的文章內(nèi)的文字，常說(shuō)的 API 就是接口的意思。

6. 客戶端（前端）和后臺(tái)

客戶端是用戶使用軟件時(shí)能夠看到的軟件界面，后臺(tái)是控制前端內(nèi)容、功能的控制器，一般給軟件開(kāi)發(fā)者使用。

7. 寫死和后臺(tái)傳過(guò)來(lái)

寫死就是程序員直接在 html 代碼中直接把具體文字寫出來(lái)，想修改的話只能在代碼中進(jìn)行修改，后臺(tái)傳過(guò)來(lái)就行。程序員在 html 代碼中不寫具體文字，而是寫一個(gè)變量，這個(gè)變量可以在后臺(tái)修改成不同的內(nèi)容。

例如，要設(shè)計(jì)一個(gè)管理不同城市分公司的軟件，需要一個(gè)下拉選擇框切換不同城市的分公司，這個(gè)需求在技術(shù)上有兩個(gè)實(shí)現(xiàn)辦法：

• 將城市數(shù)據(jù)放在服務(wù)器上，前端通過(guò)接口獲取服務(wù)器的數(shù)據(jù)顯示出來(lái)。
• 直接將所有城市的名稱寫在前端，也就是寫死。

第一種方案比較靈活，當(dāng)城市數(shù)據(jù)有變化（在新的城市成立了新的分公司）可以在后臺(tái)直接添加，前端不需要做修改。缺點(diǎn)是需要開(kāi)發(fā)相應(yīng)接口，有一定工作量。第二種是比較快速的辦法，省去了開(kāi)發(fā)接口的工作量。

具體使用哪種方案要根據(jù)具體場(chǎng)景選擇，如廣告位的圖片就不適合寫死，而是要開(kāi)發(fā)對(duì)應(yīng)的接口能夠在后臺(tái)靈活更換修改。像導(dǎo)航欄中部的頁(yè)面名稱的文字一般不會(huì)有變化就可以直接寫死。

8. 服務(wù)器

提供服務(wù)的機(jī)器，如微信的服務(wù)器就提供了聊天、傳文件、視頻、朋友圈等服務(wù)，用戶連接服務(wù)器（登錄）后由服務(wù)器對(duì)數(shù)據(jù)和信息進(jìn)行處理，再返回給用戶結(jié)果，而不是在用戶自己的電腦/手機(jī)上處理。

9. 數(shù)據(jù)庫(kù)

儲(chǔ)存用戶信息、軟件內(nèi)容的地方，保存一切數(shù)據(jù)的倉(cāng)庫(kù)。

如我們 pro 小程序的專家文章就保存在自己的數(shù)據(jù)庫(kù)中，上次出問(wèn)題打不開(kāi)文章就是數(shù)據(jù)庫(kù)出了問(wèn)題，其余鏈接式的文章是保存在微信的服務(wù)器上，我們鏈接到微信的服務(wù)器上他為我們提供瀏覽文章的服務(wù)，數(shù)據(jù)庫(kù)是服務(wù)器的一部分。

10. 類、對(duì)象、抽象和實(shí)例

抽象在技術(shù)術(shù)語(yǔ)里的意思是提煉出一個(gè)通用模板，然后基于模板做具象化的實(shí)現(xiàn)。

例如：在現(xiàn)實(shí)世界中關(guān)于人的分類，會(huì)有男人、女人、老人和小孩，如果將這個(gè)具體的分類抽象出一個(gè)類別，得到的抽象結(jié)果就是人。所以，人就是一個(gè)抽象出來(lái)的分類，也就是技術(shù)術(shù)語(yǔ)里面的「類」。

在編程語(yǔ)言的世界中，通過(guò)程序語(yǔ)言描述現(xiàn)實(shí)世界中的事物時(shí)，使用的就是抽象的方法，將一類事物抽象成一個(gè)類。有了類以后就可以根據(jù)類具體出實(shí)例，如根據(jù)「人」這個(gè)類可以具體出老人、小孩，這樣的人就叫實(shí)例。

11. 程序員說(shuō)的「打印」

在調(diào)試程序或開(kāi)發(fā)測(cè)試的時(shí)候經(jīng)常出現(xiàn)打印這個(gè)詞，程序員口中的打印不是用打印機(jī)打印出文字或圖片，而是表示結(jié)果輸出。這個(gè)輸出不是輸出到現(xiàn)實(shí)世界的紙張上，而是把程序運(yùn)行的結(jié)果輸出到他的電腦屏幕上，進(jìn)而查看程序運(yùn)行是否正確。這個(gè)把程序運(yùn)行的結(jié)果輸出到屏幕上的過(guò)程就叫打印。

12. 架構(gòu)和框架

架構(gòu)和框架是程序員經(jīng)常提到的兩個(gè)技術(shù)概念，在工作崗位上也有架構(gòu)師這一崗位。

我們通過(guò)舉例來(lái)理解這兩個(gè)概念，例如：修建房屋時(shí)會(huì)有一個(gè)總設(shè)計(jì)師負(fù)責(zé)設(shè)計(jì)整體藍(lán)圖和規(guī)劃，這個(gè)工作就可以理解為架構(gòu)師的工作。

架構(gòu)設(shè)計(jì)好后，繼續(xù)進(jìn)入具體施工的環(huán)節(jié)，施工時(shí)可以完全自己設(shè)計(jì)裝修方案，也可以使用一些現(xiàn)有的比較成熟的裝修模板來(lái)套用，這里的裝修模板就是框架?？蚣芫褪鞘褂矛F(xiàn)有的成熟技術(shù)框架簡(jiǎn)化開(kāi)發(fā)過(guò)程，降低復(fù)雜度、減少工作量?，F(xiàn)在很多軟件的開(kāi)發(fā)都會(huì)使用一些比較成熟的開(kāi)發(fā)框架代替純自主開(kāi)發(fā)來(lái)提率。

13. 控件和組件

任何一個(gè)網(wǎng)頁(yè)或 APP 都是由大量的輸入框、按鈕、圖文展示框組成的，這些組成頁(yè)面的最小元素就叫控件。一個(gè)按鈕是一個(gè)控件，一個(gè)輸入框也是一個(gè)控件。

而組件是一種功能更全面的升級(jí)版控件，可以把組件理解成多個(gè)控件的組合。如 tab 欄就是一個(gè)組件，它是由圖標(biāo)、文字、按鈕等組成的。

14. 進(jìn)程和線程

經(jīng)常聽(tīng)程序員討論進(jìn)程和線程，如涉及到一些復(fù)雜功能的時(shí)候程序員會(huì)說(shuō)已經(jīng)同時(shí)開(kāi)了幾個(gè)線程在處理了。

還是通過(guò)實(shí)例來(lái)說(shuō)明，例如：我們點(diǎn)擊一個(gè) APP 的啟動(dòng)圖標(biāo)，手機(jī)的操作系統(tǒng)就會(huì)給這個(gè) APP 分配運(yùn)行資源（CPU和內(nèi)存），分配好后這個(gè) APP 就會(huì)開(kāi)始運(yùn)行。這里說(shuō)的 APP 運(yùn)行就是一個(gè)進(jìn)程，也可以理解為每一個(gè)正在運(yùn)行的 APP 都是一個(gè)進(jìn)程，如我們同時(shí)打開(kāi)的微信和淘寶，那么就同時(shí)存在兩個(gè)進(jìn)程。當(dāng)手機(jī)的 cpu 資源或內(nèi)存不足時(shí)就會(huì)關(guān)閉當(dāng)前沒(méi)有正在使用的進(jìn)程（APP），進(jìn)程就會(huì)被終止，對(duì)應(yīng)的 APP 也就關(guān)閉了。

相對(duì)于進(jìn)程，線程是一個(gè)更小的程序運(yùn)行單位。一個(gè) APP 中可以包含多個(gè)線程，如負(fù)責(zé)發(fā)送聊天信息的線程、負(fù)責(zé)連接網(wǎng)絡(luò)的線程。APP 之所以能夠同時(shí)完成很多功能就是因?yàn)榇嬖诙鄠€(gè)線程，多個(gè)線程可以保證系統(tǒng)資源被合理地分配和利用。

15. 腳本

腳本這個(gè)詞出現(xiàn)的頻率也比較高，程序員有時(shí)候就會(huì)說(shuō)「弄一個(gè)腳本統(tǒng)一處理一下」。腳本也是一種計(jì)算機(jī)程序，一般用來(lái)代替人工重復(fù)的操作，例如：我們可以通過(guò)一個(gè)固定格式的表格，來(lái)把繪本信息導(dǎo)入到數(shù)據(jù)庫(kù)中，就是使用了腳本。

腳本一般沒(méi)有圖形界面，通過(guò)代碼命令的形式使用，腳本一般是程序員使用的。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。