如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
微信小程序動畫之點擊效果
代碼：
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;
}
}
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
2018年如自己所愿，終于有機會可以嘗試下數據大屏的可視化設計，但是想象總歸是美好的，新手上崗第一次總是那么不太如意，陌生而又熟悉著。在做過幾次嘗試后，自己又私下里翻閱了一些關于數據大屏方面的設計文章，好的設計圖片。有很多不足，也有很多剛開始做的時候沒有注意到的點，這次整理作品，也順便把大概的設計流程整理了一下。給自己的一個復盤總結，也是一次設計分享。
文章來源：UI中國
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
這周萌芽決定好好學習一下ES6，感興趣的小伙伴們來一起學習吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移動端、Node.js
編譯轉換
1.在線轉換（browser.js）
2.提前編譯
ES6新特性
1.變量
2.函數
3.數組
4.字符串
5.面向對象
6.promise（串行化異步交互）
7.generator（把同步拆分為異步）
8.模塊化（ES6自帶模塊化）
變量
var
1.可以重復聲明
2.無法限制修改
3.沒有塊級作用域（沒有語法塊?。?br />
let 不能重復聲明(變量，可以修改)
const 不能重復聲明(常量，不能修改)
塊級作用域，let在外部無法調用
函數
箭頭函數 =>
function show(){
//這是我們平常的函數
}
let show=()=>{
//箭頭函數
}
//區別不大，把function省略掉換成箭頭，主要就是為了方便，可傳參
1.如果只有一個參數，（）可以省去。
let show=a=>{
return a*2
}
2.如果只有一個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)
函數的參數
1.參數擴展/展開
2.默認參數
參數的擴展
1.收集參數
function arrData(a,b,...args) {
alert(a);
alert(b);
alert(args);
}
*注意：Rest Parameter必須是最后一個(除其他語言)
1
2.展開數組
arrData(...arr); //等價于 arrData(1,2,3);
1
這仨點兒【…】代表把數組內容掏出來放這。
默認參數
//jQuery中的默認參數
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);
//ES6默認傳參
function showOne(a,b=10,c=5) {
console.log(a,b,c)
}
解構賦值
1.左右兩邊解構必須一樣
2.右邊必須是個合法的東西
3.聲明和賦值不能分開(必須在一句話里完成)
let [one,two,three] = [10,20,30];
let {one1,two2,three3} = {a:10,b:20,c:30};
數組
map 映射（一個對一個。傳幾個返回幾個）
let result = arr.map(function (item) {
return item*2;
});//簡寫一下
let result = arr.map(item=>item*2 );
//判斷考試成績
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');
reduce 匯總（算個總數，算個平均數）
//tmp：上次求和總和，為兩兩相加，如果之前沒有結果則為傳進來的數組的第一個數。
//itme：當前的數。
//index：執行的次數。
let result = arr.reduce(function (tmp, item, index) {
return tmp + item;
});
//簡寫
arr.reduce((tmp, item, index)=>tmp + item);
filter 過濾器(篩選掉不需要的)
let result = arr.filter(item=>{
if (item%2 == 0){
return true;
} else {
return false;
}
});
//簡寫
let result = arr.filter(item=>item%2 == 0);
//***萌芽在這里提一下！json和之前的item都不是固定的，可以隨便命名。意思都是當前的值！
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循環(迭代)
arr.forEach((item,index)=>{
alert(index+":"+item)
})
字符串
1.多了倆新方法
startsWith()； //判斷開頭，返回布爾類型
endWith()； //判斷結尾，返回布爾類型
let str='hello,world!'
str.startsWith('h')
str.endWith('!') //返回true
2.字符串模板
字符串連接
2.1直接把東西塞進字符串里面 ${東西}
2.2可以折行
<h1>${title}</h1>
<p>${content}</p>
ES6的面向對象
1.class關鍵字，構造器和類分開啦。
2.class里面直接加方法。
class User{
constructor(name,password){ //構造器
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();
不得不說作為一只JAVA汪，這種寫法真得勁！
面向對象的應用
React
1.組件化（class）
2.JSX（JSXbabelbrowser.js）
JSX屬于JS的擴展版
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
);
};
打卡，下次就學這個了！===============
json
1.JSON對象
JSON.stringify() json轉字符串
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() 字符串轉json
let str = '{"a":12,"b":20,"c":"可樂"}';
let json = JSON.parse(str);
console.log(json);
2.簡寫
在新版的ES6當中名字一樣的鍵（key）和值（value）可以只寫一個。
let a = 12;
let b = 5;
let json = {a,b,c:21};
簡化了JSON中的方法。
let json ={
a:12,
showJson(){
alert(this.a);
}
};
json.showJson();
json的標準寫法：
1.只能用雙引號
2.所有的名字都必須用引號包起來（所有的key都必須是雙引號）
{a:12,b:5} × 錯誤的寫法
{"a":"萌萌萌","b":"芽子"} √ 正確的寫法
1
2
Promise(承諾)
異步：操作之間沒啥關系，同時進行多個操作
同步：同時只能做一件事
優缺點：
異步：代碼更復雜
同步：代碼簡單
Promise——消除異步操作
*用同步一樣的方式來書寫異步代碼；
let p = new Promise(function (resolve,reject) {
//異步代碼
//resolve——成功
//reject——失敗
})
-----------------------------------------訪問我們的arr.txt文件，這里用到了jQuery的ajax就不詳細介紹了。
let p = new Promise(function (resolve, reject) {
//異步代碼
//resolve——成功
//reject——失敗
$.ajax({
url: 'arr.txt',
dataType: 'json',
success(arr) {
resolve(arr);
}, error(err) {
reject(err);
}
})
});
//結果
p.then(function (arr) {
alert('成功啦' + arr)
}, function (err) {
alert('失敗了' + err)
console.log(err)
});
-----------------------------------------------多個請求地址
Promise.all([p1,p2]).then(function (arr){
let [res1,res2] = arr;
alert('全部成功啦');
console.log(res1);
console.log(res2);
},function (){
alert('至少有一個失敗了');
});
----------------------------再簡化
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('至少有一個失敗了');
});
----------------------完美寫法
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=>{
//對了
},err=> {
//錯了
})
Promise.all （必須全部成功）
Promise.race（同事讀多個數據，即使失敗也沒關系）
generator(生成器)
普通函數 - 一路到底執行不可中斷
generator函數 - 可中斷
function * show() {
alert('a');
yield;//暫時放棄執行
alert('b');
}
let genObj = show();
genObj.next();
genObj.next();
yield
yield傳參
function * show(num1,num2) {
alert(`${num1},${num2}`);//es6
alert('a');
let a = yield;//暫時放棄執行
console.log(a);
alert('b');
}
let genObj = show(99,88);
genObj.next(12);//第一個next無法給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}
還沒做的菜叫函數參數，過程是yield之前函數里面的東西，干凈的菜，切好的菜是中間過程也就是yield，最終我們將它返回出去！不得不說這圖很生動。
異步操作
1.回調
$.ajax({
url:'url',
dataType:'json',
success(data){
$.ajax({
url:'xxx',
dataType: 'json',
success(data) {
//完事兒了
},error(err) {
alert('錯了')
}
})
},error(){
alert('失敗')
}
})
2.Promise
Promise.all([
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'})
]).then(results=>{
//完事兒
},err=>{
//錯誤的
})
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（不能用=>函數）
邏輯判斷下非常好用。
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'});
}
//生成...
}
}）
總結
1.變量：
var：能重復聲明、函數級
let： 嚴格的，不能重復聲明，塊級，變量
const：嚴格的，不能重復聲明，塊級，常量
2.箭頭函數
2.1方便
i.如果只有一個參數，（）可以省
ii.如果只有一個return，{}可以省
2.2修正了this
this相對正常點
3.參數擴展
…能收集
…能擴展
默認參數
4.數組方法
map 映射
reduce 匯總
filter 過濾
forEach 循環
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.解構賦值
let [a,b,c] = [12,5,8]；
左右結構一樣，右邊是個合法的東西，連生命帶賦值一次完成。
10.面向對象
class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
繼承
class Test2 extends Test(){
constructor(){
super();
}
}
談談ES7和ES8
1.數組includes
數組是否包含某個東西
2.數組 keys/values/entries
for…in(循環數組)
對于數組來講循環的是下標
對于json循環的是key
for…of(循環迭代器)
對于數組循環的是值
不能用于JSON，json并不是迭代器
keys = >所有的key拿出來 0,1,2,3…
values =>所有的values拿出來 23,5,8,1…
entries =>所有的鍵值對拿出來 {key:0,value:a}
let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);
預覽版，目前極大多數瀏覽器都不支持，以后可能會支持，了解一下就好。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
數字化經濟日益發達的現階段，數字化產品作為線上觸點，也就逐漸成為服務中的標配，它更像一個服務員通過屏幕與用戶發生對話。在這場對話中，好的設計應該像一門語言，能夠承載起傳達與溝通的工具屬性。我們也可以見到，越來越多的設計團隊都會構建一套屬于自己產品的設計語言系統。對于團隊內部，它的意義在于通過系統化的設計規則，來控制產品長期迭代的熵值，以及提升團隊的協同效率，同時，設計師有機會從重復的勞動中解放出來，投入更多精力到探討問題本質實現價值創新。就好像在石器時代，祖先們記錄事件或表達情感的混亂程度，遠遠高于現代人，關鍵在于是否擁有一套成熟的語言系統。
對于外部用戶，設計語言系統可以讓產品在不同終端、不同場景中的表現保持一致性，也有機會通過植入品牌基因的方式形成視覺錘，提升產品的識別度以及消費者對品牌的認知。就好像，我們可以通過「豬鼻」車頭識別出那是寶馬，通過「青蛙眼」車燈知道那是保時捷，是因為這些汽車品牌通過長期保持某個「一致性」的表現，形成一套高識別度的設計語言來表達「這就是我」。
在這里我們將借助語言學的角度，來探討數字化產品界面設計語言系統的構建。在語言的應用中，我們通常會涉及語法、語素、語句、語境、語氣等維度，通過不同的組合達成應景的表達與適時的溝通。
1. 語法
設計原則，可以理解為設計語言中的語法，是構建設計語言系統的起點，用于傳達品牌主張或設計理念，它將指引業務設計執行的方向。
制定設計原則時，首先研究用戶特性，聚焦產品核心價值，然后通過腦暴等形式選擇有特點的維度，結合用戶體驗與品牌屬性將其視覺化，最后用簡要的語言歸納出來。
例如 Airbnb 的設計原則簡單歸納為幾點：
2. 語素
視覺基礎是構成設計語言的最小單位，就像語素是語言中最小的音義結合體。在原子設計理論中，它屬于最小粒度的元素，通常包括：顏色、字體、圖標、網格等。
3. 語句
組件就像由若干個語素組成的語句，比如一個基礎按鈕，通常就是由顏色、字體、邊距等元素組成。而我們平時所說的組件庫，其實就是一部詞典，其中包含了設計系統中所需的基礎組件與用法，在界面設計中也具有較高的通用性。
4. 語義
符號是語言的載體，但符號本身沒有意義，只有被賦予含義的符號才能夠被使用，這時候語言就轉化為信息，而語言的含義就是語義。在視覺傳達設計中也一樣，使用的圖標或圖形，需具備正確的語義屬性。如果商場導視設計中非要使用「裙子」圖標來代表「男廁」入口，如此混淆語義挑戰公眾認知，那就等著被投訴吧。
5. 語境
這里說的語境包含 3 個維度：一是流程意義上的上下文，二是產品屬性中的語境，三是用戶當下所處的環境。
當設計需要對上下文進行特別處理時，有可能對話的層級次序是受限于屏幕稀缺性，通常可采用 Z-Depth 疊加（Material Design屬性）、步驟條、元素關聯轉場動效等方式。舉個常見的例子，當用戶發起一個刪除數據的請求時，界面會彈出一個二次確認的模態會話，用戶點擊確認之后才會執行刪除操作。
過去很長一段時間，數字產品設計圈內熱衷于討論的兩種風格類型：隱喻（擬物化）與抽象（扁平化），時至今日可以說扁平化的風格在應用數量上壓倒擬物化風格。然而，我依舊認為設計的風格策略取決于產品屬性中的語境，這也是如今 iOS 人機界面設計規范所提倡的，它不再像早前的規則片面拒絕隱喻設計，而是鼓勵設計師將用戶在現實中最為熟悉的視覺樣式，即操作方法映射與界面設計之中，蘋果官方的 Garageband 就是一個很有說服力的例子。
針對用戶當下所處的環境來適配界面語境，常見通過界面換膚的手法來實現，比如微信讀書等閱讀應用為用戶提供白天模式或黑夜模式的選擇。用戶所處的外部環境因素可以很大程度上決定界面語言的應用，就好像在菜市場買東西要靠吼，在圖書館借書僅需要用肢體語言便能達成。
△ 如上，微信讀書針對外部環境因素的自定義「語境」
6. 語氣
交互界面通常需要使用說明或提示文案來指導用戶完成操作，大多數情況下都是使用第二人稱，就像在與用戶對話，從以用戶為中心的角度上講，建議保持謙遜、友善的語氣，盡可能避免使用晦澀的專業術語，謹慎使用帶有強烈情感屬性的感嘆號，或過于口語化的語言。另外，語氣的拿捏也將直接影響到與用戶的距離感，以及當下的應景度。
7. 語速
語速在這里指的是界面的信息密度，在不同的場合對語速的控制能夠提升接受者的體驗，視覺設計也同樣需要注意把握間距與留白，網格系統在這里可以起到「節拍器」的作用，借助節拍器可以讓設計更具節奏感。而交互意義上的語速，更多體現在操作路徑的長度，以及動效的速率。
△ 如上，富途證券在產品介紹與盤中交易2個不同場景下的「語速」
8. 響度
其實就好像我們說話可以通過音量大小來控制信息的可感知程度，希望接受者聽清楚的就說大聲一點。湯姆奧斯本（Tom Osborne）的視覺響度指南（visual loudness guide）是一個如何系統地處理按鈕和鏈接的例子，它們不是單獨列出，而是作為一個套件呈現，并且根據每個元素的視覺沖擊力會相應的擁有一個「響度」值。我們在構建設計語言系統時，也同樣需要設置梯級「響度」的按鈕、字重等組件來滿足不同場景的表達需求。
△ Tom Osborne的視覺響度指南
1. 基因遺傳
同一個語系下的語言，無論是經過了朝代更迭，還是地域的遷徙，一定會保留一些固有的特性，這就是語言系統本身具有基因遺傳的生態特性。
一套成熟的設計語言系統，也同樣對產品設計表現著基因級別的底層影響力：在「代際」遺傳上，體現在經久不衰的堅持。比如 Burberry 的格子紋理，無論是在哪一年的產品款式上，都不會丟失這個屬性。在「同輩」影響上，通常體現在不同終端場景下產品表現的一致性，或是兄弟產品的相似程度。
2. 動態進化
設計語言系統不是一份靜態的組件庫與規范文檔，而是一個動態的且能自我進化的系統。它的動態進化屬性基于 3 個契機：
3. 開放兼容
語言同時具備工具屬性與文化屬性，開放兼容對一門語言的意義在于被更多人接受、應用。
當前谷歌、蘋果、微軟、阿里巴巴等大型企業推出了開源的設計語言，這些成熟的設計體系其實承載著大量的項目實踐與經驗總結，對其他企業也有較大的借鑒價值。同時，對于平臺級企業，開放統一的數字語言，讓不同地域、不同類型的項目得以在共同的規則下發展、共生，這對于平臺生態無疑是利好的。
設計語言作為工具來說，需具備普適性，在文化層面上也需具備兼容度──在滿足企業自身品牌與業務需求之上，應該盡可能規避因宗教、民俗等因素帶來的沖突。
舉個例子，在法國和比利時，人們都厭惡墨綠色，因為二戰期間兩國飽受德國納粹侵略之苦，而納粹的軍服是墨綠色的。那么，面向這兩個國家用戶的設計上，便應該避免使用墨綠的元素。這時，設計語言系統中組件元素的豐富程度，很大程度決定了設計表現的選擇空間與可能性。
就好像，在美國街頭詢問公共廁所時，老美可能聽不懂 WC，那就用他們聽得懂的 Restroom 吧。這里想表達的是，你的語言系統中「詞匯」越豐富，越能兼容不同文化背景下的表達。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
微信小程序之卡片層疊滑動效果
代碼：
js：
// index/gun/jsSwiper2/jsSwiper2.js
Page({
/**
* 頁面的初始數據
*/
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: []
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
this.__set__();
this.move();
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
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(); //獲取數組的最后一個
this.data.datas.unshift(last);//放到數組的第一個
var orderFirst = this.data.order.shift();
this.data.order.push(orderFirst);
this.move();
},
/** */
right: function () {
var first = this.data.datas.shift(); //獲取數組的第一個
this.data.datas.push(first);//放到數組的最后一個位置
var orderLast = this.data.order.pop();
this.data.order.unshift(orderLast);
this.move();
},
/**點擊某項 */
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()); //獲取第一個放到最后一個
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()); //獲取最后一個放到第一個
this.data.order.push(this.data.order.shift());
// this.left();
}
}
this.move();
},
/**新的排列復制到新的數組中 */
__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
})
}
},
//手指觸發開始移動
moveStart: function (e) {
console.log(e);
var startX = e.changedTouches[0].pageX;
this.setData({
startX: startX
});
},
//手指觸摸后移動完成觸發事件
moveItem: function (e) {
console.log(e);
var that = this;
var endX = e.changedTouches[0].pageX;
this.setData({
endX: endX
});
//計算手指觸摸偏移劇距離
var moveX = this.data.startX - this.data.endX;
//向左移動
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.左右滑動時，向相應方向移動一個卡片位置；
2.點擊某一項時，將點擊項位置移動到中間位置；
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在建立品牌的過程中，廣告和公關各有其使用邊界，企業家不關心用不用廣告，關心如何找到適合自己的營銷方法。
對于廣告，大家已經比較熟悉，今天我們重點分析公關建立品牌的方法。
一、新經濟品牌比傳統品牌有更大的公關潛力
新經濟品牌往往比傳統品牌有更大的公關潛力。昨天潘軻老師講到，無人機將是5G時代的現象級產品。那么，無人機會制造出什么社會熱點呢？
比如說，無人機會送飯，飛上來給你送飯。
到時會出現爭議：
一是飯掉下去怎么辦？誰負責？二是飛機送飯時能不能開攝像頭？會不會順帶拍一下鄰居家的窗戶？推出無人機送貨第一款高空墜落險的是誰？
而且，高樓的窗戶開啟是有角度限制的，怎么拿飯？一定會出現玻璃窗改造設計，第一個高樓玻璃窗改造品牌是誰？
第一個根據無人機送貨需求設計的建筑品牌是誰？這個新品類可能叫“無人機友好建筑”，房間都帶無人機著陸設施，像航母的飛機著陸裝卸平臺，第一棟無人機友好建筑將是重磅新聞。
在無人機友好建筑普及之前，不能走窗戶，怎么外賣到戶？無人機要坐電梯還是走消防梯？能允許無人機坐電梯嗎？如果能坐，無人機“坐”哪里？
一架有教養的無人機，高度顯然不能位于裙子以下，如果在肩膀以下，也容易和人發生碰撞，最好的位置應該是人頭頂上。到時大家在電梯里，可能看到無人機區間，抬頭向上，幾架無人機呼呼地轉。
在無人機手臂和電梯直接通信普及之前，無人機怎么按電梯？我們是否應該幫助無人機按電梯，就像幫助老人、小孩一樣？
無人機還可以摘菜，既然能摘菜，就能偷菜，就能偷錢包，無人機安全問題將大幅上升。
可能有人用彈弓擊打惡意無人機，也有黑客用程序和網絡捕捉無人機。
當然，無人機賽事也會推廣開來，成為大眾喜愛觀看的運動，正如汽車賽事一樣。
比如針對無人機復雜空域飛行的速度競賽和花式競賽，針對無人機續航能力的拉力賽，針對無人機視覺效果的藝術挑戰賽等等。無人機界的F1、達喀爾、勒芒就會隨之而生。
考慮到競賽無人機的價格可能低于賽車，這項運動門檻更低。
無人機當然也可以送人，無人機民航也會出現。第一家無人機民航公司會是誰？送的第一位顧客是誰？
當然，專業的無人機渠道、無人機導購品牌、無人機售后服務、改裝服務也會出現。這里面，既蘊含了眾多新品類發展的機遇，也將出現大量新聞。
而新聞潛力意味著，企業家要優先用公關，激發新聞效應，借助免費的新聞傳播來建立品牌。
那，到底怎么用公關建立品牌呢？跟大家分享一下我們的探索歷程。
第一個，什么是公關？
越了解工具，越會使用它。我們對公關的理解，決定了對它的運用。
上海的第一財經電視臺，曾經邀請上海交大的公關教授魏武揮和原GE公關總監李國威老師進行過一次辯論。
辯題之一是“公關的基本目的就是發稿和滅稿?！闭垎?，你們公司的公關是這樣的嗎？你認同嗎？
我們不認同。就像戰士確實需要臥倒和射擊，但你不能說戰士的基本目的就是臥倒和射擊。為什么臥倒？為什么射擊？能不能不臥倒、不射擊，達到目標？
凡事要學就學最高標桿，要奔珠峰去練爬山。我們的標桿選美國公關之父愛德華·伯內斯。
1930年代，美國幾大書商找到他，請他用公關幫助書商賣書。各位，你如果是伯內斯，會如何用公關幫助書商賣書？
我們會打新書排行榜、請名人推薦、拍賣版權、做圖書路演、簽名售書、建立讀者社群、一萬人一起讀書，羅輯思維推《薛兆豐經濟學講義》，在菜市場辦了一場特別新書發布會，等等。
我們要學習伯內斯，就要模擬他的思維方式。在這個項目中，伯內斯的思維由幾個關鍵問題串起來：
1.美國人什么時候買書最多？注意，是買書，不是讀書。回答是：房間里有空書柜的時候。就像某老總新辦公室裝修，10米長的空書柜，要填滿，直接買3000本。
2.如何讓美國人家里有書架呢？誰能夠做到？裝修公司、建筑公司能夠做到，尤其是設計師能夠做到。小設計師看大設計師的，大設計師能影響設計趨勢。
大家去美國旅行，可以發現很多1930年代的別墅，都有嵌入式書柜，嵌入式書柜換不掉，只能買書。
伯內斯這個案例對我們震動很大。以前我們做奧運項目，和央視等各大媒體合作，做一堆報道和簡報，感覺自己很厲害。
現在看來，都是幻覺。連自己國家的書架都沒改變過，算什么公關高手？
伯內斯的做法，稱為“The Big Think”，翻譯成中文，可叫“大局思考”。大局思考的局有多大呢？全社會那么大。
大局思考要求我們：把眼睛從自己品牌上抬起來，站在高空看地球，從社會系統角度，找到能夠幫助自己品牌發展的社會動力，再有效嫁接這種動力。
二、企業公關和品牌公關的關系是什么？
《升級定位》講商業模式二分法，分為企業商業模式和品牌商業模式。
企業商業模式解決組織和企業利益相關方的關系，如政府、媒體、投資人、員工等；
品牌商業模式解決品牌及其利益相關方的關系，主要是“品牌-顧客-競品”這個三角形。
把伯內斯公關的“大局思考”和商業模式二分法結合起來，我們看到一個什么畫面？在這個畫面中間，是品牌商業模式三角“品牌-顧客-競品”，顧客在上面，下面是品牌和競品。
這個三角形的外面，環繞著一個巨大的環形，其上半部分是外部利益相關者——政府、社區、公眾、媒體、資本；其下半部分是內部利益相關者——員工、供應鏈和渠道。
在這里，企業公關和品牌公關的關系是什么？——企業公關是品牌公關的外部環境，品牌公關是企業公關的成果。
這個圖畫出來，像什么？像眼睛。中間是瞳孔，是我們聚焦的方向；外面是上眼瞼和下眼瞼。
要打開上下眼皮，才能見天地、見眾生，才能在天地和眾生之間重新看見自己。所以，我們把這個叫“公關眼”模型。
要打開“公關眼”，關鍵是看明白三點：
① 世界很大，企業很小。
② 企業是企業家的中心，但不是社會的中心。既要對自己的企業充滿宗教般的熱情，也要認識到自己的企業不過是社會系統中極微小的一部分。
③ 企業要堅定使命，圍繞建立品牌這個中心，系統尋找和調動社會動力，贏得支持，幫助自己發展。
所以，我們注意到剛才先鋒電器李總的分享，當先鋒電器“取暖專家”的戰略確定之后，想要贏得誰的支持？先要從內部做起來，說服經銷商和員工對我們的事業充滿熱情。
外部環境可以影響我們，政府的態度、公眾的態度、資本、行業的經營環境，環境的合作伙伴、上下游的經銷商都會影響我們。
所以從企業內部來看，中間的那個三角形無比重要，但是我們視角拉到整個社會，如果社會是銀河系，企業就是一個小小的星球。
在這里，廣告、公關有個巨大不同：廣告直接通過媒體影響顧客；公關則努力借助社會能量，影響目標人群。
在商業實踐中，公關和廣告既有相互重疊、相互替代的區域，也有相互差異、各有所長的區域，還有相互轉化、相互支撐的方式。
說公關、廣告相互替代，是因為它們都可以向目標人群傳遞信息，至于這個信息是電梯里看到，還是微信群里看到，是次要的。
說公關和廣告相互差異、各有所長，是因為廣告有公關難以實現的可控性、可復制性等長處，而公關也有廣告難以擁有的關注度、可信度和關聯度。
比如，我們2017年，在定位之父杰克·特勞特先生逝世的時候，和定位學習網一起，發起了“紀念特勞特燭光讀書會”，全國13個城市的定位愛好者參加。
在特勞特先生的小型葬禮上，鄧德隆先生把這些照片給特勞特夫人過目，特勞特夫人特意委托鄧總向參與紀念活動的定位愛好者表達感謝。
這樣的紀念活動，便是公關——表達我們對定位之父感恩緬懷的活動，這是廣告難以完全表達的。
說公關和廣告相互轉化，是因為廣告可以做出公關效應，稱之為廣告公關化；公關也可以做成廣告效果，直接給賣點，稱之為公關廣告化。
廣告公關化，要求把廣告做成新聞。南都的“天下無三”廣告，神州專車上線的“Beat U”廣告，甚至分眾電梯海報的“僅售1199元3條的圍欄男士內褲”，都制造了話題。
公關廣告化，則要在新聞或話題中，傳遞品牌名稱，甚至傳遞產品圖片，顧客利益點等等。
比如，某面包車品牌在強手如云的上海車展上，曾把自己的廣告語做成了新華社報道的導語。
三、公關、戰略和定位的關系
了解了公關是什么，廣告和公關的關系，接下來我們看看公關、戰略和定位的關系。
和大家分享一下我們曲折的探索歷程，這個歷程分為四個階段，簡稱為“公關四階”。
第一階，制造熱點
相信很多人接觸公關，熱點話題、熱點事件是一個重要入口。公關圈的人，熱衷于制造熱點，包括我們自己一度也喪心病狂地想制造熱點。
比如說，有個網絡推手叫立二拆四，他們制作了系列的熱點事件，從“別針換別墅”，到“我把下半生交給網絡”等等，最后搞了“后海和尚搞船震”，最后這個團隊進去了。
9年前，我太太去我們辦公室，一路嘟嘟囔囔說，現在年輕人太不像話了，高考畢業就買鉆戒私定終身。我一看照片，兩位校服男女生，手拉手站在柜臺前，柜臺上有個logo——“I Do”。
我說，你看看那邊那個男同事，是不是眼熟？——她看過去，哦？竟然是校服男生（的扮演者）。
這個項目是當時合伙人做的，但它給我帶來反思：公關如果策劃新聞、策劃話題，連自己家人都繞進去了，這樣的公關可以持續嗎？值得持續嗎？
大家來看看這幾個事情是不是策劃的。第一，2017年維密秀，奚夢瑤摔倒，維密秀的百度指數飛漲到60多萬，翻了50倍。請問，是策劃的嗎？
策劃不策劃，需要驗證。如果是自然事故，對于維密秀這樣級別的賽事，犯錯誤者按道理會怎樣？會被開除。
奚夢瑤被開除了嗎？當時維密CEO發推特，怎么說？好樣的，加油！這像是對犯錯員工說的話么？
比語言更說明問題的是行為。2018年，維密秀嚴格的選拔開始了，請問誰免試入選了？——奚夢瑤。
在老何看來，維密官方對奚夢瑤的態度，不像是對失誤員工的處置，反倒是對冒受傷危險摔倒勇士的獎勵。想想奚夢瑤那么高個子，摔倒風險多么大？為了熱點，辛苦了。
不光模特，總裁也辛苦。VIVO手機在水立方開新品發布會，總裁上臺時掉水里了，主持人何炅趕緊圓場——“遇水則發！”各位，請問這是策劃的，還是自然的？
首先，如果總裁不掉水里，老何可能和很多人一樣，不知道這件事，此事對VIVO有利而非有害。
其次，判斷總裁是不是故意掉水里，要講證據。比如，回看錄像，總裁出水后是不是把手機交給助理去處理。
商界領導一般自己拿手機，如果故意落水，事先把手機交給他人概率更高。
手機廠商就此打住了嗎？不?？崤蒳vvi發布會，CEO吊威亞出場的時候，掛半空中了！各位，是策劃的還是自然的？
這件事我們問過酷派內部人，他說那天確實是出現了意外——原計劃是吊10分鐘，后臺出了故障，結果吊了20分鐘。
就定位圈來說，喜棉兒童排汗睡衣創始人賈總，在里斯品類戰略大會的舞臺上，當眾撕衣服。衣服一撕，淘寶流量翻5倍，而且翻完之后穩定在5倍附近。
你看，為了品牌，為了熱點，創始人和總裁是不是很拼？
那，追求熱點的方法是什么呢？我們用的模型叫“策劃三要素”。
傳播力=內容指數X媒介指數X轉化指數。
其中，內容指數主要涉及傳播主題、傳播環境和傳播對象，分別概括為：基礎口碑（主體自帶流量）、社會熱點（傳播環境流量）和公眾體驗（對傳播對象的激發程度）。
內容指數=基礎口碑X社會熱點X公眾體驗。
對基礎口碑、社會熱點、公眾體驗，可以進一步細分?；A口碑分為自己口碑和借用他人口碑，自己口碑=關注者的數量X質量。
自己的關注度不夠，怎么辦？和自帶流量的明星、大V合作，借助知名的賽事、欄目、影視劇等等。
在公眾體驗上，分為情感體驗和互動體驗。內容的情感體驗越深，越能夠吸引公眾參與互動，其傳播力就越強。
在情感體驗上，方法是“情感配方”。其基本原理是，雖然人的感情看起來非常復雜，但是每種情感類型可以分解為幾個簡單要素，你匯聚相關要素，就會產生特定的情感類型。
比如產生憤怒，需要四個要素：第一，發生了一件意外的事情；第二，結果是我們不想要的；第三，造成的原因是別人；第四，這個人可以不這么干。四個條件具備，就會產生憤怒。
例如，我們讓人拿一個盤子給我們，結果他把盤子掉地上，我們會生氣。但如果拿盤子的是家里老人，平時手就哆嗦，情緒就傾向于諒解。
找到情感合成的要素后，就可以制定內容模板。
比如我們知道“內容和形式的反差”會帶來幽默感，就可以用這個方式來制造一系列視頻，比如用最正式的形式——“新聞聯播”，加上最草根的內容，就會產生喜感。這種方法也被網絡傳播大量運用。
我們把這種根據傳播目標，分解傳播模板，批量制作傳播內容的內容生產方式，叫“內容工廠”。
福特發明了流水線生產汽車，把汽車成本降低到原來的十分之一。在內容生產上，也可以通過工廠化運作，大規模降低成本，提率。
內容生產出來后，可以用評分模板來給內容評分，給基礎口碑、社會熱點和公眾體驗分別打分，然后算總分。
每個品牌可以摸索評分規律，最后對內容傳播力進行量化，多少分以上才可以出街，多少分以下要重新修訂內容。
第二階，追求植入
制造熱點是第一階，我們看看這些大家都熟悉的熱點事件。比如，“4小時逃離北上廣”，“只要心中有沙，哪里都是馬爾代夫”，“斯巴達三百勇士北京游行”，“大黃鴨進大陸”。這四個熱點事件很多人聽說過，請問，這些熱點事件背后的品牌是誰呢？
我們在不同場合做過調查，知道品牌的人在5%到10%。那么，對于很多不知道品牌的而言，這些傳播能量是不是有一部分沒有發揮作用？所以，公關不綁定品牌，多少會免費娛樂大眾。
如何綁定？方法是“三重植入”，這是我們探索第二個階段的目標。
植入是有標準的，把植入分為三個層級，最底層的是“表層植入”，它的定義是：品牌和事件一起出現，但在傳播過程中品牌和事件可以分離。
比如你們品牌邀請了周杰倫來現場，媒體在傳播時會稱呼你為“某品牌”，把畫面上你的logo打成馬賽克。
表層植入的上一層，是“內核植入”，定義是：品牌和事件一起出現，在傳播過程中品牌和事件不可以分離。
最高層級是“詞植入”，是指品牌名稱植入到詞媒體中，只要提及事件名稱，品牌就得以曝光。
比如某汽車品牌做了一場“百名網紅直播新車上市”，這個是表層植入，因為可以不提這個汽車品牌的名字。像在世界杯賽場周邊擺一圈廣告牌，表層植入。
再看內核植入。浙江有個網紅景點，飯蒸巖。它的故事是，有一位女驢友，愛上了一位男驢友，就用繩索垂下懸崖，在巖壁上畫下男驢友的頭像示愛。
這個植入，品牌和事件可以分離嗎？不能。不僅不能，每次媒體傳播這張巖石的圖片，就是在幫助這個景區曝光它們的認知產品。
讓產品成為新聞主角，便是公關廣告化，把公關做成直接講賣點的廣告。巖畫事件之所以有趣，在于它不僅曝光了物理賣點，還創造了情感價值——有網友表示，這個事件讓TA又重新相信了愛情。
再看詞植入，把品牌名植入到詞媒體里。比如抖音刷出了一個視頻“吃垮海底撈”，你一說起這個事件，海底撈的品牌名就曝光了。
當然，在十五年前，論壇上曾經有個熱點事件，叫“吃垮必勝客”，兩者的策劃邏輯基本相同，只是平臺從論壇換到了抖音。張家界的“飛越天門山”，凡客的“凡客體”，都屬于詞植入。
三重植入，怎么運用呢？
首先，盡量避免表層植入。要在事件策劃或事件合作中，尋找更深層植入的方法。
其次，盡量做到內核植入。其方法是，把品牌、產品、代言人，變成新聞要素之一即可。
最后，嘗試詞植入。其方法是，自己用帶有品牌名的詞組、短語，為傳播事件命名，并促成名字被大眾采用。
各位，做到詞植入，傳播就一定會成功嗎？我們接著看。
第三階：支撐定位。
上面講到一個詞植入的案例——“凡客體”。凡客體是2010年的熱點，也屢屢被評為2010年十大營銷案例，排名前三甚至第一。
從制造熱點、品牌植入上來看，凡客體都是成功的，但凡客體對品牌、對業務是否有幫助？幫助多大？
一開始人們知道凡客，是因為凡客襯衫。凡客體里面，韓寒穿的是T恤。
從價格來看，凡客襯衫便宜的80-100元，高一點的100-200元。在十年前，算是中檔價格。而T恤多少錢？29塊。
也就是說，凡客體傳播的品類和價格，都和顧客既有認知發生著沖突。這也意味著，凡客體傳播越廣泛，原有的品牌認知會就越稀釋，越模糊，進而影響老顧客的購買意愿。
現實中，凡客的情況怎么樣呢？2010年凡客體大火，2011年末，凡客的庫存達到14.45億元，總虧損近6億元，一路從11000人裁員到300人。
凡客體告訴我們，戰略方向如果不對，傳播能量越強，越南轅北轍，越努力離目標越遙遠。違背戰略，破壞顧客認知的公關，對品牌反而是有害的。
比如說，羅輯思維投資Papi醬很多人知道，拍賣Papi醬首條廣告也是行業熱點，但羅輯思維CEO脫不花卻隨后反思“投資Papi醬是我們最大的恥辱”。
為什么呢？因為違背了公司的戰略。隨后，羅輯思維也原價退出了投資。
反之，則是每一次傳播都在支撐戰略，支撐顧客對品牌的認知，也即支持定位。
比如，無論是做3萬米高空極限跳傘，還是做張家界翼裝飛行大賽，紅牛在每一個極限活動中，都會強調“能量”兩個字，不斷向顧客認知點上累加資源。
公關怎么支撐戰略，支撐定位呢？
首先，是把品類價值和品類特性表達出來，品類事件化。比如今天的電梯領導者奧的斯，奧的斯先生發明了“安全電梯”，首次亮相就引發了轟動。
1853年，紐約世界博覽會上，奧的斯先生策劃了一個戲劇性的事件。他把電梯升到半空中，然后用斧頭砍斷了電梯纜繩，在圍觀眾人的一片驚呼聲中，奧的斯電梯自行鎖死，停止滑落。
公關還可以把特性事件化，變成品牌資產。比如說，有一款七座家用車，其特性是“安全、舒適”。
傳播難點在于，這款車的C-NCAP碰撞星級和安全氣囊數上，并不占優勢。公關如何支撐其特性呢？
仔細想想，一家三代坐在車里，誰的安全更受關注？兒童。如何體現兒童安全呢？有沒有兒童安全碰撞測試？答案是沒有。沒有怎么辦？開創。
所以，這個品牌做了中國首場兒童安全碰撞測試，成為新車上市的信任狀和新聞點。
在支撐品類特性時，不得不提到一個經典公關案例。2005年之前，基本上很少人喝過普洱茶，北京馬連道茶城幾千家茶葉店，據說只有一家賣普洱茶。
2005年5月，活動發起人胡明方先生，組織了120匹馬，從云南出發，歷經5個多月，于10月10日進入北京。馬幫進京，成了當年最熱門的新聞事件之一。
馬幫進京體現了普洱茶什么特性？發酵，而且是富有戲劇性的“馬背發酵”。馬幫馱進京的馬背發酵普洱茶，達官貴人爭著求購，一茶難求。
所以，公關要重點思考如何表達品類價值，用戲劇化、事件化的方式表達出來，最好占據某種獨特的表達形式，使之成為品牌的專用配稱，成為長期的品牌資產。
第四階段：贏得支持
那是不是支撐定位，公關就算做到頂峰了呢？
比如，當美團進軍打車市場時，滴滴程維接受《財新》雜志訪談，表示“爾要戰，便戰?！边@篇報道當然體現了滴滴在打車市場的領導地位，但是否有效，是否對滴滴有利呢？
不僅如此，滴滴公關還攻擊“美團補貼擾亂行業秩序”，雙方線下競爭和線上公關戰一起打響。
對滴滴的公關，美團怎么回復的？美團的回復是“人民需要兩個打車軟件”，“打破壟斷才是終局”，與“人民”結盟，激發公眾對滴滴的反對。
各位，公關的目標僅僅是傳播嗎？公關不僅要傳播，要支撐定位，還要為品牌贏得支持。
無論多么重大的傳播項目，即便如北京2008奧運會，一旦結束，大多數人就迅速遺忘。傳播就像刮風，過去了就過去了。
但是如果我們能夠通過公關，通過傳播和溝通，贏得對方發自內心的支持，影響力就會像種樹一樣持久。各位企業家，如何贏得支持？這是公關中至關重要的事情。
所以，第四階，我們要“贏得支持”。
這兩天的華為事件，是一個典型的熱點。但你們品牌希望攤上這樣的熱點嗎？多半不希望。熱點事件對品牌有利有弊。不光華為這次的危機如此，各種策劃熱點的品牌，其實都有可能被熱點傷害——如果不能贏得支持的話。
贏得支持比傳播更重要。傳播不能贏得支持，就是在樹立敵人。注意看這次任總的講話，把敵人搞得少少的，只有少數美國政客。朋友呢？多多的。美國公司是朋友，歐洲更是朋友，亞洲是兄弟，中國是自己人。對所有國內企業，無論你造車還是做手機，都不批評，都理解，以和為貴。
任總的危機公關，舉重若輕，其中透露的示弱、求和的智慧，正是贏得支持的關鍵。
贏得支持，首先要求企業家有使命，有使命才有感召力，你對全社會有價值，全社會都會成為你的力量來源。
如果你有使命，又很強大，別人什么感覺？點贊。有使命，又相對使命能力不足，大家才會想要支持你。正亦如此，廣告示強，公關要懂得示弱。因為示弱，才能給別人幫助你的接口。
我們看一個超年長網紅——故宮的故事。上一任故宮博物院院長單霽翔先生問：國家領導來故宮視察，怎么報告？
“我們的經驗是，越是主要領導來的時候，我們一定要給他看最不好的地方，看什么地方呢？看那些荒草凄凄的地方，看那些霉味撲鼻的地方，這樣領導的責任心油然而生，就給我們解決很多問題，屢屢得逞?！?
所以省領導到你們公司，看完后不是說“李總，你真棒！”而是問——“缺多少錢？需要什么政策？”這樣的問題最好。
剛剛我們介紹了探索公關建立品牌的四個階段，簡稱“公關四階”。華為的公關，便是第四階，是在贏得支持指導下，被動應對熱點的做法。
任總一方面展示了華為的使命、價值，同時展示了華為人的不容易——加班加點、寧愿無薪也要奮斗，同時又一直被美國打壓。這樣的使命和示弱，有利于華為贏得更多的同情，更多的認同，更多的支持。
注意，公關四階不是割裂的：不是有了植入，就不要熱點；有了定位，就不要植入；有了支持，就不要定位；而是向前兼容的，是要在贏得支持的前提下，思考支撐定位、植入品牌、制造熱點。而這，也正是華為此次危機公關的印證和啟發。
四、新經濟品牌做公關有何不同？
接下來，我們問自己一個問題：新經濟品牌做公關，和其他品牌有什么不同？這種不同，使得新經濟品牌更適合用公關打造品牌。
這種不同是，新經濟品牌常常開創新品類，而開創新品類意味著填補空白，意味著新聞性，意味著有機會贏得免費的媒體報道。
開創新品類，疊加新經濟品牌更高的社會關注度，為公關打開了更廣闊的空間 。
比如，羅輯思維在微信出現時，就是一個新事物，60秒的語音形式引發了關注。
不僅如此，羅輯思維在有意識地開創新品類：有跨年晚會，沒有跨年演講，和深圳衛視合作做跨年演講；
有發布會，沒有知識發布會，那做一個“001號知識發布會”；有例會，有直播，沒有例會直播，羅輯思維開創了例會直播。
就連脫不花生孩子，還做了一個“猜生男生女”的互動。
事實上，每一種媒介形態出現，背后都蘊含著開創傳播領域新品類的機會。
比如百雀羚的一鏡到底長圖文，開創了一種新的表現形式，這種形式，會激發話題效應，進而加乘傳播能量和傳播效果。
最后，各位打造品牌時，如何綜合使用公關和廣告呢？
這里是我們講的4種典型形勢的公關廣告協同方式。
1. 品類成熟，兵力優勢：這時廣告為主，拖對手打廣告戰，做大品類。
2.品類成熟，兵力劣勢：慎用大廣告，要注意領導者的反應。
3. 品類不成熟，兵力優勢：公關為主，局部廣告。
4.品類不成熟，兵力劣勢：公關為主，大廣告=大風險。
品類成熟，兵力優勢的情況：
比如二手車網絡交易，有現成的消費習慣，二手車交易網接受度高，瓜子也擁有強大的融資能力。
所以瓜子以打廣告為核心手段，自己打廣告，吸引同行一起打，迅速提升二手車交易網的品類勢能，做大品類規模。
品類成熟，兵力劣勢的情況：
比如簡一大理石瓷磚，相對于東鵬和諾貝爾等品牌，簡一規模較小。
其大廣告建立品牌是否能奏效，要看領導品牌如何反應。如果領導品牌了解定位理論防御戰的打法，用數倍兵力優勢，迅速跟進和覆蓋，情況就會發生改變。
品類不成熟，兵力優勢的情況：
常見于擁有豐富資源的公司開發新業務，推出新品牌。這種情況下，企業過早使用廣告，可能浪費部分資源，但不至影響生存。如能用精益創業方法，對驗證期的關鍵環節進行一一驗證，建立增長模型，費用會花得更有效。
品類不成熟，兵力劣勢的情況：
比如有個每條400塊的男士內褲品牌，剛剛創立，就通過大廣告建立品牌。這種打法就比較兇險。
在完成戰略驗證期必須的價值驗證和交付驗證之前，要謹慎通過大廣告等重資金的增長方式，過早刺激增長。
對于新經濟品牌而言，品類創新常常帶來新聞價值，通過媒體、公眾口碑的方式傳遞出去。
過早打大廣告，會影響口碑價值。比如，你跟朋友介紹一家新發現的餐廳，結果朋友說，早知道了，電梯里都有。什么感覺？
品類發展的早期人群，需要一種我知你不知的信息優勢，這種優勢會提高其價值感，促進人們的自發和主動傳播。
各位，兩條腿走路總比一條腿要快，要好。企業建立品牌，也要綜合運用廣告和公關兩條腿。
廣告善于直接向顧客傳遞購買理由，信息可控，但費用全部需要企業自己投入。公關可以贏得外部力量的支持，一起做大品類，但需要與外部溝通、合作。
最后，祝各位邁開雙腿，在打造品牌的路上跑起來！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
文章目錄
jQuery
jQuery的安裝：
jQuery 語法
選擇器
基本選擇器：
層級選擇器
基本篩選器
樣式操作
表單篩選器
遍歷方法
jQuery鏈式操作
jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消標簽默認的事件
事件冒泡
事件委托
jQuery自帶的動畫效果
jQuery
jQuery的字面意思其實就是JavaScript和查詢（Query），即用于輔助開發JavaScript的庫。jQuery 極大地簡化了 JavaScript 編程，jQuery使用戶可以更加方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地為網站提供AJAX交互。
實例找到div標簽并給div標簽設置為紅色
原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安裝：
您可以從網頁中添加 jQuery
1、從官網http://jquery.com/download/下載 jQuery 庫
里面分為：Production version（用于實際的網站中，已被精簡和壓縮）和Development version（用于測試和開發，未壓縮，是可讀的代碼），一般使用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
一定要先導入后使用
jQuery 語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。
$(selector).action()
1
美元符號定義 jQuery
選擇符（selector）“查詢"和"查找” HTML 元素
jQuery 的 action() 執行對元素的操作
選擇器
jQuery 選擇器可以對 HTML 元素組或單個元素進行操作。 jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等查找HTML 元素。它基于已經存在的 CSS 選擇器外，還有一些自定義的選擇器。
基本選擇器：
ID選擇器、類名選擇器、標簽選擇器、組合選擇器
選擇器 實例 選取
* $("*") 所有元素
#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> 元素
提出注意點，原生DOM查找和jQuery查找出來的結果區別DOM對象與jQuery對象
DOM對象與jQuery對象互相轉換
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
層級選擇器
選擇器 實例 選取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素
element + next $(“div + p”) 每個 <div> 元素相鄰的下一個 <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同級的所有 <p> 元素
基本篩選器
選擇器 實例 選取
:first $(“p:first”) 第一個 <p> 元素
:last $(“p:last”) 最后一個 <p> 元素
:even $(“tr:even”) 所有偶數 <tr> 元素
:odd $(“tr:odd”) 所有奇數 <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)”) 返回擁有一個或多個元素在其內的所有元素
/用ul標簽舉例
$('#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)')
最后一個has的玩法需要寫個三個div:一個空div、一個兒子有a標簽、一個兒子沒有a，孫子有a標簽
$('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() 向被選元素添加一個或多個類名
after() 在被選元素后插入內容
append() 在被選元素的結尾插入內容
appendTo() 在被選元素的結尾插入 HTML 元素
attr() 設置或返回被選元素的屬性/值
before() 在被選元素前插入內容
clone() 生成被選元素的副本
css() 為被選元素設置或返回一個或多個樣式屬性
detach() 移除被選元素（保留數據和事件）
empty() 從被選元素移除所有子節點和內容
hasClass() 檢查被選元素是否包含指定的 class 名稱
height() 設置或返回被選元素的高度
html() 設置或返回被選元素的內容
innerHeight() 返回元素的高度（包含 padding，不包含 border）
innerWidth() 返回元素的寬度（包含 padding，不包含 border）
insertAfter() 在被選元素后插入 HTML 元素
insertBefore() 在被選元素前插入 HTML 元素
offset() 設置或返回被選元素的偏移坐標（相對于文檔）
offsetParent() 返回第一個定位的祖先元素
outerHeight() 返回元素的高度（包含 padding 和 border）
outerWidth() 返回元素的寬度（包含 padding 和 border）
position() 返回元素的位置（相對于父元素）
prepend() 在被選元素的開頭插入內容
prependTo() 在被選元素的開頭插入 HTML 元素
prop() 設置或返回被選元素的屬性/值
remove() 移除被選元素（包含數據和事件）
removeAttr() 從被選元素移除一個或多個屬性
removeClass() 從被選元素移除一個或多個類
removeProp() 移除通過 prop() 方法設置的屬性
replaceAll() 把被選元素替換為新的 HTML 元素
replaceWith() 把被選元素替換為新的內容
scrollLeft() 設置或返回被選元素的水平滾動條位置
scrollTop() 設置或返回被選元素的垂直滾動條位置
text() 設置或返回被選元素的文本內容
toggleClass() 在被選元素中添加/移除一個或多個類之間切換
unwrap() 移除被選元素的父元素
val() 設置或返回被選元素的屬性值（針對表單元素）
width() 設置或返回被選元素的寬度
常用實例：
三級菜單展示
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css屬性
// 兩個參數設置屬性
$('#p1').css('font-size','24px')
// 一個參數獲取屬性
$('#p1').css('font-size')
// 一次設置多個屬性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作
// 不加參數獲取位置參數
$(".c3").offset()
// 加參數設置位置參數
$(".c3").offset({top:284,left:400})
// position只能獲取值，不能設置值
// scrollTop獲取當前滾動條偏移量
$('window').scrollTop();
$('window').scrollTop(0); // 設置滾動條偏移量
1
2
3
4
5
6
7
8
9
10
文本操作
text() html() 不加參數獲取值，加參數設置值
val() 不加參數獲取值，加參數設置值
1
2
屬性操作
// 獲取文本屬性
$('#d1').attr('s1') // 獲取屬性值
$('#d1').attr('s1','haha') // 設置屬性值
$('#d1').attr({'num':50,'taidi':'gay'}) // 設置多個屬性
$('#d1').removeAttr('taidi') // 刪除一個屬性
// 獲取check與radio標簽的checked屬性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文檔處理
// 標簽內部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))
// 標簽內部頭部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))
// 標簽外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
// 標簽外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
// 替換標簽
replaceWith() // 什么被什么替換
replaceAll() // 拿什么替換什么
// 克隆事例
<button id="b2">屠龍寶刀，點擊就送</button>
// clone方法加參數true，克隆標簽并且克隆標簽帶的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this); // true參數
});
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
表單篩選器
選擇器 實例 選取
: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 元素
// 針對表單內的標簽
$('input[type="text"]')
// 簡化寫法
$(':text')
// 找到所有被選中的checkbox
$(':checkbox') // 注意select框中默認selected標簽也會被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍歷方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被選元素的所有直接子元素
closest() 返回被選元素的第一個祖先元素
contents() 返回被選元素的所有直接子元素（包含文本和注釋節點）
each() 為每個匹配元素執行函數
filter() 把匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素
find() 返回被選元素的后代元素
first() 返回被選元素的第一個元素
is() 根據選擇器/元素/jQuery 對象檢查匹配元素集合，如果存在至少一個匹配元素，則返回 true
last() 返回被選元素的最后一個元素
next() 返回被選元素的后一個同級元素
nextAll() 返回被選元素之后的所有同級元素
nextUntil() 返回介于兩個給定參數之間的每個元素之后的所有同級元素
not() 從匹配元素集合中移除元素
offsetParent() 返回第一個定位的父元素
parent() 返回被選元素的直接父元素
parents() 返回被選元素的所有祖先元素
parentsUntil() 返回介于兩個給定參數之間的所有祖先元素
prev() 返回被選元素的前一個同級元素
prevAll() 返回被選元素之前的所有同級元素
prevUntil() 返回介于兩個給定參數之間的每個元素之前的所有同級元素
siblings() 返回被選元素的所有同級元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合縮減為指定范圍的子集
each() 方法為每個匹配元素規定要運行的函數。
$.each(array,function(index){
console.log(array[index])
})
$.each(array,function(){
console.log(this);
})
// 支持簡寫
$divEles.each(function(){
console.log(this) // 標簽對象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery鏈式操作
python代碼詮釋鏈式調用,其實就是在調用方法之后講對象再次返回
<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
$(document).ready()
$(document).ready() 方法允許我們在文檔完全加載完后執行函數。為了防止網頁還沒加載完，js代碼就已經執行，通常利用下面兩種方式來書寫js代碼。
$(document).ready(function(){
// 在這里寫你的JS代碼...
})
網頁最后
$(function(){
// 在這里寫你的代碼
})
1
2
3
4
5
6
7
8
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
在下面的實例中，當點擊事件在某個<p> 元素上觸發時，隱藏當前的 <p> 元素：
$("p").click(function(){
$(this).hide();
});
1
2
3
dblclick()
當雙擊元素時，會發生 dblclick 事件。
$("p").dblclick(function(){
$(this).hide();
});
1
2
3
mouseenter()
當鼠標指針穿過元素時，會發生 mouseenter 事件。
$("#p1").mouseenter(function(){
alert("鼠標經過了!");
});
1
2
3
mouseleave()
當鼠標指針離開元素時，會發生 mouseleave 事件。
$("#p1").mouseleave(function(){
alert("鼠標離開了!");
});
1
2
3
mousedown()
當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件。
$("#p1").mousedown(function(){
alert("鼠標按下!");
});
1
2
3
mouseup()
當在元素上松開鼠標按鈕時，會發生 mouseup 事件。
ouseup(function(){
alert("鼠標松開!");
});
1
2
3
hover()
hover()方法用于模擬光標懸停事件。當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。
$("#p1").hover(function(){
alert("你的光標懸停！");
},
function(){
alert("你的光標已經離開！");
});
1
2
3
4
5
6
focus()
當元素獲得焦點時，發生 focus 事件。
$("input").focus(function(){
$(this).css("background-color","#eee");
});
1
2
3
blur()
當元素失去焦點時，發生 blur 事件。
$("input").blur(function(){
$(this).css("background-color","#eee");
});
1
2
3
input()
input實時監聽，輸入內容時發生 input 事件
$('#i1').on('input',function () {
console.log($(this).val())
});
1
2
3
取消標簽默認的事件
利用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 // 三者均綁定點擊事件
$("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自帶的動畫效果
下面的表格列出了用于創建動畫效果的 jQuery 方法。
方法 描述
delay() 對被選元素的所有排隊函數（仍未運行）設置延遲
dequeue() 移除下一個排隊函數，然后執行函數
fadeIn() 逐漸改變被選元素的不透明度，從隱藏到可見
fadeOut() 逐漸改變被選元素的不透明度，從可見到隱藏
fadeTo() 把被選元素逐漸改變至給定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之間進行切換
finish() 對被選元素停止、移除并完成所有排隊動畫
hide() 隱藏被選元素
queue() 顯示被選元素的排隊函數
show() 顯示被選元素
slideDown() 通過調整高度來滑動顯示被選元素
slideToggle() slideUp() 和 slideDown() 方法之間的切換
slideUp() 通過調整高度來滑動隱藏被選元素
stop() 停止被選元素上當前正在運行的動畫
toggle() hide() 和 show() 方法之間的切換
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
抽象圖形拼接
坦白說，這些抽象的 LOGO 設計讓我立刻想起了JK·羅琳和她書中的魔法符號。如果這些Logo背后都有著獨特而富有力量的故事，那么它們確實可以很好地服務于品牌。這樣的了 LOGO 設計應當在筆觸上保持一致，并且充滿意義，我覺得如果能傳遞出這樣的信息，它就很優秀了。
利落清晰的筆觸，完美的角度和弧線，這樣精準的設計會給人帶來可靠的感知。當然，這些Logo 的應用場景同樣有著嚴格的環境要求，設計師幾乎沒有異想天開的余地。這些 Logo 看上去相當正式，有著明顯的高級感。
借助負空間來傳遞信息一直一種巧妙的 LOGO 設計技巧，它就像缺少關鍵證據的犯罪現場，墻上的洞，它并不是借助現有存在的因素來告訴你信息，而是通過一個「不在場的關鍵元素」，來傳遞重要信息。負空間就是這樣，它同樣也是一塊畫布，只不過給人的感覺是通過畫布的背面來呈現信息和故事。
負空間并不是為了隱藏信息而存在，就像聯邦快遞 (FedEx) Logo中隱藏的箭頭，或是 Toblerone 巧克力 Logo 中山腰上的熊。這些元素都不是為了隱藏信息，而是為了通過這種不完整來傳遞更多的信息。通過正空間來凸顯負空間就是關鍵的技巧，正如 Reinhard Ernst 博物館的 Logo 所示，中間開放的矩形區塊如同畫框，似乎可以代表博物館的任何一件藏品，這也是一種「less is more」的設計。
很多做 Logo 的設計師都曾經歷無法控制的時刻，發呆失神應該也經常會發生。如果你是在紙上畫草圖，筆尖無意識地滑動，或者墨水洇出，都會產生有趣的筆觸痕跡。我知道這不是電腦上繪圖的方式，但它確實幫助我描繪出這種視覺設計的特征。將筆尖繪制成一個完美的圓，而筆尖后則是留下托拽的痕跡，在筆痕結束的位置，自然留下的也是一個圓弧邊緣。
不管這些 Logo 的布局特征是怎樣的，它們都呈現了類似視覺特征。小圓點和托拽痕跡構成了它主要的「筆觸」，它們而生動地拼出字母，繪制出路徑，或者勾畫出有意義的符號。我想你已經捕捉到了它們的特征了——活力四射，生動新鮮的筆觸路徑。
在logo設計中廣泛使用漸變色，是整個行業在過去十年中經歷的最兩極分化的趨勢之一。仍有很多設計師抵觸過渡色，因為從LOGO設計的角度上來說，漸變色違背了很多規則，而這些規則是在數字時代之前就已經存在了。不過，LOGO 設計師們總能想出好辦法，比如間隔漸變式的設計。
將均勻漸進的色彩變化用連續的純色片段來替代，同樣呈現出色彩的變化和韻律感，但是消解了漸變色在 LOGO 展示過程中潛在各種問題。上面案例中，Qwant 的 logo 就是通過輪廓化的顏色分割來實現這一點，它真實地模擬了漸變的效果，所呈現出的效果比CPA Ireland 要好，CPA Ireland 則使用了的四等分幾何分割加上色階轉換?？傮w上來說，間隔漸變的色彩使用技巧，很好地在當下的流行趨勢和 LOGO 設計訴求之間找到了平衡點，值得嘗試。
使用線條來勾勒和描摹事物，傳達信息，是一項古老而傳統的技藝。在時下的審美體系當中，使用輪廓線條來繪制 LOGO 似乎顯得太過于老派，不夠現代。不過技術總歸是服務于表達的，依然有設計師能夠充分的利用這一技術——加入透視，不再局限于二維，而是開始描繪三維的對象。
這一的設計看起來和如今的線性圖標的繪制方式在技法上保持了延續性，但是它在維度呈現上更加深入，更加具有表現力和形式感。通過富有規律性的利落的線條，設計師不用太多的線條就能勾勒出立體而抓人眼球的LOGO。這種設計要求設計具備更強大更精準的描摹能力。你可以延續這種思路到整個設計當中，這會使得整個品牌化設計思路更加開闊、有趣。
在 LOGO 設計當中，使用句點這樣的標點符號，通常都會借用它身處標點符號中的含義和功能。當我仔細琢磨這一趨勢時，發現這些類似句點的符號有時像句號，有時則偏向冒號，它們在LOGO中總帶著一些奇特的意味。如你所見，這些原點在更多的時候，它更接近于句號，充當收尾和封頂的終止符。
有的時候，它的裝飾性更強，以不同的形式漂浮在文本和符號周圍。如果你要深究這些 LOGO 設計本身的含義會發現，這個小圓點可能是字母 i 上的那個小圓點簡略之后的殘留痕跡。這個小圓點，在如今的很多 LOGO 中已經超出了裝飾性的范疇，基于不同的需求和設計出發點，它可能意味著時間，可能代表著字母，承載著特定的詞匯和含義，可能是感嘆號或者句號，表達情緒或者終止。設計師將內容抽象成幾何圖形，承載意義，提升了對話的智慧。
在傳遞放飛、飛翔、展望、自由、遠見、輕盈、速度等含義的時候，很多設計師都會借用翅膀的意象。這也是為什么越來越多的地方會看到被提煉和抽象出來的翅膀和羽毛的符號或者圖形，某種意義上，翅膀已經遠超出了它本身的意味。這些被設計得形制不一的翅膀類的圖形，有著冥想的前傾或者后掠的姿態，仿佛在對抗變幻莫測的大風，借助空氣動力學向上飛起。
很多翅膀元素形制類似于字母 U，只不過兩只翅膀在傾斜角度、弧度和長短上，進行了比較深入的調整。之后，再對 Logo 進行弧度和細節進行修飾，這樣就完成了。如同我們上面所在展示的幾個案例，設計師經過很快的迭代就可以完成這樣的設計。與此同時，在具體的設計過程中，設計師還會引用品牌中一些字母的特征，比如Jetta的字母J，DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了雙翼的意象。蘋果有翅膀，烏龜也可以有翅膀。我們可以用翅膀填補空白。
門其實我們常常會引申出「打開新世界大門」的概念，它在實際設計中會帶有通道、時間、新世界，甚至一種全新心境和意境的概念。很多品牌 LOGO 都想借助這個意象來承載更高遠的含義，微軟就是一個典型。門和窗本身一直都是一組象征性極強的元素。門象征著通行的權利，解決方案的途徑，機會，甚至歡迎的含義，某種意義上它們和眼睛在含義和隱喻上是共通的。這也是很多設計師在設計 LOGO 的時候青睞這一意象的原因所在。
2019年的LOGO趨勢報告，是我們的第17份 LOGO趨勢報告。每年的趨勢報告都是從成千上萬的 Logo 中，尋找新趨勢和細微微妙的差別。我們承認，每一個設計案例都代表著來自世界各地的設計師們的思考和心血，我們對他們表示敬畏，并感謝他們不遺余力地幫助我們完成這份報告。感謝所有在過去、現在和未來幾年為潮流報告做出貢獻的設計師們。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目錄結構：
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">藍色</button>
<button style='background:green;color:#fff;' bindtap="green">綠色</button>
<button type="warn" bindtap="startRecording">開始錄制</button>
<button type="primary" bindtap='rePlay'>復盤</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
//獲取應用實例
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;//開始時刻
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();//記錄當前操作時刻
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:該文件用來保存歷史操作，以便復盤
const hisData = {
hisDataArr:[
{
time:0,//操作時間
/**
* 操作類型
* 繪圖：mapping
* 拖動球員：moveplayer
* 清除畫布：clearCanvas
* 橡皮擦：clearLine
*/
operation:"mapping",//操作類型
/**
* 繪制路徑
* startX：開始x坐標
* startY：開y縱坐標
* currentX：目標位置的 x 坐標
* currentY：目標位置的 y 坐標
* z：1代表畫線時鼠標處于move狀態，0代表處于松開狀態
* colorStr：線的填充顏色
*/
lineArr: { //繪制路徑
startX:0,
startY:0,
currentX:0,
currentY:0,
z:0,
colorStr:"#000"
}
}
]
};
export {hisData};
復盤：
reply.wxml:
<!--pages/replay/replay.wxml-->
<view class="replayBox">
<canvas canvas-id='myCanvas' class="myCanvas"></canvas>
</view>
<button type="warn" bindtap="start">開始</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({
/**
* 頁面的初始數據
*/
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);
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
context = wx.createCanvasContext('myCanvas');
context.beginPath();
context.setStrokeStyle('#000');
context.setLineWidth(3);
context.setLineCap('round');
context.setLineJoin('round');
}
})
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
設計師在日常溝通的時候，是不是經常會遇到說了半天結果大家說的不是一件事的情況？筆者認為，要解決這個問題，首先要統一名詞，保證溝通的準確度。下面是筆者整理的一些關于 APP（小程序）名詞的規范樣例，希望能幫助到剛剛入行的同學們。我們從下載并使用一個 APP 的流程來展開說明。
1. 啟動圖標
點擊后可以啟動 APP 的圖標，如圖分別是淘寶在不同場景下的啟動圖標。
2. 應用市場展示頁
在應用市場中為了幫助用戶在下載之前了解 APP 功能的頁面叫應用市場展示頁，也能夠通過優秀的 UI 設計吸引用戶下載。
如圖中紅框內分別是蘇寧易購、設計本、當當網的應用市場展示頁。
3. 啟動頁（閃屏）
APP 啟動后加載過程中顯示的頁面叫啟動頁，如圖是微信、有道云筆記、得到的啟動頁。一般啟動頁的設計都會比較簡潔，只有啟動圖標+solgen，或是吉祥物、一張精美圖片的形式。
4. 廣告頁
國內一些公司由于變現困難在啟動頁之前或之后，進入主頁之前加了一張廣告頁，主要用來顯示接的廣告或自己公司的運營活動，可以跳轉鏈接或打開其他 APP。
如圖是 UC瀏覽器、網易云音樂、寶寶樹的廣告頁。
5. 引導頁
用戶第一次打開 APP 后為用戶介紹 APP 主要功能的頁面，只顯示一次，或是 APP 版本更新后用來介紹新版本新功能。
如圖是前程無憂 APP 的引導頁。
6. 首頁
進入 APP 后默認顯示的頁面，如圖是微信、澎湃新聞、淘寶的首頁。
7. 一級頁面
一般指通過底部標簽切換的方式能夠到達的頁面。如：
8. 二級頁面
指通過一次反饋操作能夠回到一級頁面的頁面，叫二級頁面。
如圖分別是微信聊天頁面、朋友圈頁面、支付寶我的余額頁面，它們都是二級頁面。
9. 注冊登錄頁面
用戶注冊賬號、登錄賬號的頁面。如圖是洪恩故事的注冊登錄頁。
10. 個人主頁/我的頁面
顯示用戶個人信息、和用戶有關的訂單、收藏、優惠券、課程、商品等等信息的頁面。
如圖是 luckin 咖啡、家長幫、丁香醫生的個人主頁。
11. 菜單導航頁
包含很多分類、不同欄目，可以跳轉到很多個不同內容頁面的頁面叫做菜單導航頁。一般首頁大部分屬于菜單導航頁，如我們的 pro 小程序的首頁就是一個菜單導航頁。
如圖是一條、新世相閱讀、美圖秀秀的菜單導航頁。
12. 搜索頁面
用于搜索的頁面。有的 APP 沒有單獨的搜索頁面只有一個輸入框，有的有單獨的，因為可以放一些推薦內容或廣告位。
如圖是喜馬拉雅 FM、貝貝、搜狗閱讀的搜索頁。
13. 設置頁面
更改 APP 設置的頁面，如圖是百度閱讀、淘票票、夸克瀏覽器的設置頁面。
14. 詳情頁面
展示內容詳細信息的頁面，如圖分別是淘寶的商品詳情頁、起點學院的課程詳情頁、今日頭像的咨詢詳情頁。
15. 關于我們頁面
介紹 APP 版本信息、功能介紹、公司信息、聯系方式、版權聲明的頁面。
如圖分別是夸克瀏覽器、極客時間、火辣健身的關于我們頁面。
16. 意見反饋頁面
一般的 APP 都會設計一個意見反饋功能來收集用戶需求，對應的頁面就是意見反饋頁面。
如圖分別是貝貝、阿里釘釘、花生地鐵的意見反饋頁。
APP 中的頁面類型大致可以分為以上這些，上邊所寫的頁面名稱是被使用得最多的、最規范的名稱。溝通時使用上面的頁面名稱應該 90% 的成員都能理解。
對于不同類型的頁面名稱一般設計師用的比較多，叫法也最準確，以上名稱是在一些專業的 UI 設計網站查閱資料，又和幾個設計師朋友確認后擬定的，準確度可以保證。
1. 編程語言
人的語言可以分為漢語、英語、法語等等，計算機的語言同樣可以分為 java、php、html 等等，這些語言就是編程語言。不同的程序員會的語言不同，每一種語言都需要單獨學習。
2. 程序
通過編程語言給計算機下達任務，讓它理解我們要做什么。用編程語言給計算機/手機下達的任務書就是程序。
3. 數據類型
編程語言中用來區分數據格式的標記，如記錄數字和記錄漢字就要使用不同的數據類型。
如：
4. 變量
沒有固定值的量，例如：定義一個變量 X 表示繪本名稱，那 X 可能叫《我不喜歡哭》，也可能叫《鱷魚媽媽》。即用一個單詞表示物體的一個屬性，如上面說的繪本標題。
5. 接口
電腦需要調用手機里面的信息，這時候你會拿一根數據線將電腦手機連接起來，電腦和手機上連接數據線的接口就是傳說中的 API 接口──即獲取數據、獲取某種功能的通道。
如在 pro 小程序中要想在前端展示文章，那么在定義完文章標題的字號、顏色等等后就需要設計師提供給接口獲取具體的文章內的文字，常說的 API 就是接口的意思。
6. 客戶端（前端）和后臺
客戶端是用戶使用軟件時能夠看到的軟件界面，后臺是控制前端內容、功能的控制器，一般給軟件開發者使用。
7. 寫死和后臺傳過來
寫死就是程序員直接在 html 代碼中直接把具體文字寫出來，想修改的話只能在代碼中進行修改，后臺傳過來就行。程序員在 html 代碼中不寫具體文字，而是寫一個變量，這個變量可以在后臺修改成不同的內容。
例如，要設計一個管理不同城市分公司的軟件，需要一個下拉選擇框切換不同城市的分公司，這個需求在技術上有兩個實現辦法：
第一種方案比較靈活，當城市數據有變化（在新的城市成立了新的分公司）可以在后臺直接添加，前端不需要做修改。缺點是需要開發相應接口，有一定工作量。第二種是比較快速的辦法，省去了開發接口的工作量。
具體使用哪種方案要根據具體場景選擇，如廣告位的圖片就不適合寫死，而是要開發對應的接口能夠在后臺靈活更換修改。像導航欄中部的頁面名稱的文字一般不會有變化就可以直接寫死。
8. 服務器
提供服務的機器，如微信的服務器就提供了聊天、傳文件、視頻、朋友圈等服務，用戶連接服務器（登錄）后由服務器對數據和信息進行處理，再返回給用戶結果，而不是在用戶自己的電腦/手機上處理。
9. 數據庫
儲存用戶信息、軟件內容的地方，保存一切數據的倉庫。
如我們 pro 小程序的專家文章就保存在自己的數據庫中，上次出問題打不開文章就是數據庫出了問題，其余鏈接式的文章是保存在微信的服務器上，我們鏈接到微信的服務器上他為我們提供瀏覽文章的服務，數據庫是服務器的一部分。
10. 類、對象、抽象和實例
抽象在技術術語里的意思是提煉出一個通用模板，然后基于模板做具象化的實現。
例如：在現實世界中關于人的分類，會有男人、女人、老人和小孩，如果將這個具體的分類抽象出一個類別，得到的抽象結果就是人。所以，人就是一個抽象出來的分類，也就是技術術語里面的「類」。
在編程語言的世界中，通過程序語言描述現實世界中的事物時，使用的就是抽象的方法，將一類事物抽象成一個類。有了類以后就可以根據類具體出實例，如根據「人」這個類可以具體出老人、小孩，這樣的人就叫實例。
11. 程序員說的「打印」
在調試程序或開發測試的時候經常出現打印這個詞，程序員口中的打印不是用打印機打印出文字或圖片，而是表示結果輸出。這個輸出不是輸出到現實世界的紙張上，而是把程序運行的結果輸出到他的電腦屏幕上，進而查看程序運行是否正確。這個把程序運行的結果輸出到屏幕上的過程就叫打印。
12. 架構和框架
架構和框架是程序員經常提到的兩個技術概念，在工作崗位上也有架構師這一崗位。
我們通過舉例來理解這兩個概念，例如：修建房屋時會有一個總設計師負責設計整體藍圖和規劃，這個工作就可以理解為架構師的工作。
架構設計好后，繼續進入具體施工的環節，施工時可以完全自己設計裝修方案，也可以使用一些現有的比較成熟的裝修模板來套用，這里的裝修模板就是框架?？蚣芫褪鞘褂矛F有的成熟技術框架簡化開發過程，降低復雜度、減少工作量。現在很多軟件的開發都會使用一些比較成熟的開發框架代替純自主開發來提率。
13. 控件和組件
任何一個網頁或 APP 都是由大量的輸入框、按鈕、圖文展示框組成的，這些組成頁面的最小元素就叫控件。一個按鈕是一個控件，一個輸入框也是一個控件。
而組件是一種功能更全面的升級版控件，可以把組件理解成多個控件的組合。如 tab 欄就是一個組件，它是由圖標、文字、按鈕等組成的。
14. 進程和線程
經常聽程序員討論進程和線程，如涉及到一些復雜功能的時候程序員會說已經同時開了幾個線程在處理了。
還是通過實例來說明，例如：我們點擊一個 APP 的啟動圖標，手機的操作系統就會給這個 APP 分配運行資源（CPU和內存），分配好后這個 APP 就會開始運行。這里說的 APP 運行就是一個進程，也可以理解為每一個正在運行的 APP 都是一個進程，如我們同時打開的微信和淘寶，那么就同時存在兩個進程。當手機的 cpu 資源或內存不足時就會關閉當前沒有正在使用的進程（APP），進程就會被終止，對應的 APP 也就關閉了。
相對于進程，線程是一個更小的程序運行單位。一個 APP 中可以包含多個線程，如負責發送聊天信息的線程、負責連接網絡的線程。APP 之所以能夠同時完成很多功能就是因為存在多個線程，多個線程可以保證系統資源被合理地分配和利用。
15. 腳本
腳本這個詞出現的頻率也比較高，程序員有時候就會說「弄一個腳本統一處理一下」。腳本也是一種計算機程序，一般用來代替人工重復的操作，例如：我們可以通過一個固定格式的表格，來把繪本信息導入到數據庫中，就是使用了腳本。
腳本一般沒有圖形界面，通過代碼命令的形式使用，腳本一般是程序員使用的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn