今天給朋友們帶來更改this指向的三種方法，以及它們的區別：
一：call用法
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
console.log(this.color);
}
changeColor.call() //不傳參數默認指向window
changeColor.call(window) //指向window
changeColor.call(document) //指向document
changeColor.call(this) //構造函數的this如果打括號調用默認指向window
changeColor.call(s1) //指向s1對象
//例二：
var Pet = {
words: '...',
speak: function (say) {
console.log(say + '' + this.words)
}
}
Pet.speak('123') //輸出123...
var Dog = {
words: 'WangWangWang'
}
Pet.speak.call(Dog,'123') //輸出123WangWangWang
二：apply用法：
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three'};
function changeNum() {
console.log(this.number)
}
changeNum.apply(); //one
changeNum.apply(window); //one
changeNum.apply(document);//two
changeNum.apply(this);//one
changeNum.apply(s1);//three
//例二：
function Pet(words){
this.words = words;
this.speak = function(){
console.log(this.words)
}
}
function Dog(words){
Pet.call(this,words);//結果wang
// Pet.apply(this,arguments);//結果wang
}
var dog = new Dog('wang');
dog.speak(); //wang
apply與call的區別：
接收的參數不同
apply()方法接收倆個參數，一個是函數運行的作用域（this），另一個是參數數組。
call()方法第一個參數和apply()方法的一樣，但是傳遞給函數的參數必須一 一列舉出來。
語法：
apply([thisObj [,argArray]]);
調用一個對象的一個方法，另一個對象替換當前對象
call([thisObj [,arg1[,arg2[…,argn]]]])；
說明：
如果thisObj是null或者undefined的時候，默認指向window。
如果argArray不是一個有效數組或不是arguments對象，那么將導致一個TypeError，如果沒有提供argArray和thisObj任何一個參數，那么Global對象將用作thisObj。
call方法可以用來代替另一個對象的一個方法，call方法可以將一個函數的對象上下文從初始的上下文改變為thisObj指定的新對象，如果沒有提供thisObj參數，那么Global對象被用于thisObj。
三：bind的用法：
var obj = {
name: 'WuXiaoDi'
}
function printName() {
console.log(this.name)
}
var wuXiaoDi = printName.bind(obj)
console.log(wuXiaoDi) //function(){...}
wuXiaoDi() //WuXiaoDi
//例二：
function fn(a, b, c) {
console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');
fn('A', 'B', 'C'); //A B C
fn1('A', 'B', 'C'); // Dot A B
fn1('B', 'C'); // Dot B C
fn.call(null, 'Dot'); // Dot undefined undefined
//例三：實現函數珂里化
var add = function(x) {
return function(y) {
return x + y;
};
};
var increment = add(1);
var addTen = add(10);
increment(2) //3
addTen(2) //12
小總結：
Function.prototype.bind(thisArg) - - ES5
能夠返回一個新函數，該新函數的主體與原函數主體一致，但當新函數被調用執行時，函數體中的this指向的是thisArg所表示的對象。
Function.prototype.call(this.Arg,val1,val2, …)
調用函數執行，在函數執行時將函數體中的this指向修改為thisArg所表示的對象
val1, val2, … 表示傳遞給調用函數的實際參數列表
Function.prototype.apply(thisArg, array|arguments)
調用函數執行，在函數執行時將函數體中的this指向修改為thisArg所表示的對象，
array|arguments 表示調用函數的參數列表，使用數組或類數組的格式
區別：
bind與call和apply的區別：
返回值的區別：
bind的返回值是一個函數，而call和apply是立即調用。
參數使用的區別：
bind與call一樣是從第二個參數開始將想要傳遞的參數一 一寫入。但call是把第二個及以后的參數作為fn方法的實參傳進去，而fn1方法的實參實則是在bind中參數的基礎上再往后排。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
在我們平時的設計工作中，經常會需要做一些有動感的畫面，去體現某些產品所具有的運動屬性，比如汽車的速度感、球鞋的運動感等等。可是由于載體或是成本的原因，導致客戶沒辦法投入動態畫面的制作，所以就要求我們只能在靜態的平面中去創造動感，讓原本不會動的畫面看上去好像也能動起來，這就是今天要為大家帶來的內容。
我們先來看一組照片，這些貓的圖片明明都是靜態的，可是為什么我們看到這些照片的時候，卻能夠明顯的感覺到貓在跳躍的動感呢，這個主要是因為我們的心理作用。
正如佛教里所講的，不是風在動，也不是云在動，而是心在動。那些看上去帶有動感的圖片并不是真的在動，也不是屏幕在動，而是我們的心理作用。
所以我們做設計的時候，就可以很好的利用這一心理作用，去實現一些具有動感的畫面。既然要做動感的畫面，我們需要先了解，關于運動在物理學中的定義。
物理學中的運動，必須具備兩個要素，分別是速度和能量。
那我們就可以總結出兩種畫面中的動勢，第一種就是具備速度和方向的動勢，比如畫面中這兩張圖片，我們可以很明顯地感覺到，圖片中的主體是正在運動的，并且具有很快地速度和明確的運動方向。
第二種就是靜止的，但具有強烈能量的動勢。比如畫面中這兩張圖片都沒有在動，可是我們也能夠感覺到它的動感。如果說前一種動勢更注重于刻畫運動的速度感，那么第二種則更加注重刻畫一觸即發的能量感。
那么，我們在平面中應該如何去創造動感呢？其實很簡單，因為張力在畫面中不平衡時，便會產生動感。
所謂張力就是畫面中元素向外擴張的心理作用力。
這么解釋可能有些抽象，我們可以將張力與萬有引力進行類比。萬有引力就是，任意兩個物體具有通過連線方向上的力相互吸引。而我們可以將張力定義為畫面中任意兩個元素，通過連線方向上的力相互吸引。也就是說畫面中的任意元素都有相互吸引的力。
比如我們在一個畫面中的上下左右各放一個圓點，然后在畫面的正中間放一個較大的點，中間這個點由于均衡地受到上下左右吸引力的作用，所以它所受到的張力是平衡的。
當我們將中間這個大點往上移動，大點受到的張力平衡就會被打破，產生了要往下墜的動勢。
根據萬有引力定律公式，物體所受的吸引力和質量是成正比的。
所以我們同樣可以類比到張力中來，畫面中打破平衡的那個元素的質量和面積越大，所帶來的動感就會越強烈。
看完了剛才所講的這些，相信大家現在心里大概都會想起一句話，就是聽過很多道理，依然過不好這一生。的確，聽了這么多的理論公式，難免會越聽越懵。而且我們在做設計的時候，也不可能去測量畫面中每一個元素的大小、間距、方向，也不可能把每一個元素之間的張力進行量化，然后再用公式去計算出動感的大小強弱。那大家肯定還會繼續追問了，那么到底該如何去制造動感呢？
這里我總結了三點產生動感的原因，分別是基于生活經驗與心理認知、誘導視線移動，以及非平衡狀態下產生的視覺沖擊。
我們先來看基于生活經驗與心理認知，每個人在成長的過程中都會碰到許多人和事，并且對不同的事物會總結出一套規律和認知，也可以說是刻板印象，所以我們就能感覺到一件事物是運動的還是靜止的。
比如這兩個小人，雖然只是一個輪廓，但是我們卻能感覺到左邊的人是站立的，靜止的，而右邊的人正在走路，是運動中的。
這樣的例子很多，例如書本是靜，車子是動。
樹懶是靜，猴子是動的。
另外由于人類擁有一種組織傾向，所以當我們看到某一個運動的瞬間時，會自動腦補中出他運動的過程。比如這張靜態圖片，相信很多人看到時都會腦補出那個視頻。
但是這里有一個問題，就是不同的人他的生活經驗是不同的，對于事物的認知和理解也就不同，可能對于一部分人來說這是具有動感的，而對另一部分人來說卻是靜止的。比如剛才那個打籃球的圖片，如果是沒看過視頻的人，當然就腦補不出他的動感了。所以對于這種刻板印象的利用，我們需要根據受眾的具體特征具體分析，千萬不要盲目使用。
接下來我們來講講第二種情況，誘導視線移動。由于運動是相對的，所以我們在看東西的時候，視線移動也可以理解為是物體相對視線發生了移動。
比如我們在看報紙的時候，從左上角往右下角看，在我們眼睛里出現的畫面是這樣的，從而便產生了好像報紙在動的動感。
最簡單移動的案例就是箭頭，例如這是一條水平的直線，我們會認為他是靜止的，而當我們在一端加上箭頭之后，我們的眼睛就會隨著箭頭所指方向移動，從而產生動感。
這兩個都是通過一些指向性的圖形進行引導視線移動的作品。
接下來我們來說一下第三種情況，非平衡狀態下產生的視覺沖擊。
比如在天平的兩端各放一只豬，那么這個天平就是處于一個平衡的狀態。
當我們在其中一邊再加一只豬時，天平就會失去平衡，重量更大的一邊會往下倒，直到找到一個新的平衡。
而我們的大腦其實也和天平相似，當我們看到一些不平衡的畫面時，我們就會有把它轉換為平衡狀態的傾向，所以動感的產生，也就是大腦腦補不平衡到平衡的這個運動過程。
我們在半空中放一塊石頭，由于這塊石頭受到重力的作用，處于一個不平衡的狀態，所以我們認為他有向下掉的趨勢，直到與地面接觸找到新的平衡狀態。
如果我們把石頭換成一個氣球，那么情況就相反了，由于氣球受到重力作用的同時也受到了更大的浮力，所以氣球會有往上飄的趨勢。
舉一個更加能說明的例子，其實我們大多數人或多或少會有一些強迫癥，比如看到這種一只鉛筆沒對齊的畫面就會很難受，特別想把它懟回去。
所以我們就會腦補出這只鉛筆往左移動的過程，從而產生了動感。
這兩個海報都是通過創造一些不平衡的場景帶來刺激感，從而產生動感。例如顛倒的房子和懸空的蒸籠。
經過前面的講解，相信大家應該對動感是如何產生的，有了一定的認識，但是，我們剛剛只是從理論的角度去講解了動感是如何產生的，運用到實際的設計中可能還是會一頭霧水。那接下來的部分就是真正的干貨環節了，去給大家講一些比較實用的制造動感的技巧。
這里總結了 9 個小技巧，我們一個個來看。
我們在前面提到了當我們看到某一個運動瞬間時，我們就會腦補出整個運動過程。那我們就可以反過來，從運動過程中捕捉某一個瞬間，用這一個瞬間來表達平面中的動感。
這里可以分為兩種情況，一個是捕捉運動剛開始的瞬間，強調運動剛開始的那種能量感。
這是兩個捕捉運動開始瞬間的例子，兩名運動員都穿好了裝備，雖然還沒開始動，但是卻能感受到一觸即發的緊張感。
第二種就是捕捉運動過程的某一瞬間，這種方式帶來的動感會比上一種強烈得多。
例如這兩個例子都是捕捉了運動員正在運動中的瞬間。
這種方式所傳達的動感強弱是由運動物體的動作姿態所決定的，所以我們需要認真比較每一瞬間的動作，選出最適合的一幀。
第二種技巧是傾斜構圖，一般橫線和豎線都會給我們一種穩定平衡的感覺，而斜線相對于橫線和豎線來說，則會給我們帶來強烈的不平衡感。
例如這些圖片，無論是邁克爾·杰克遜的經典舞蹈動作，還是比薩斜塔，都給我們帶來一種不安定、危險、不平衡的視覺沖擊。通過這種不平衡感從而產生動感。
我們觀察這些線，會發現 45° 時的斜線相對于橫線和豎線的傾斜角度最大，所以 45° 傾斜時不平衡感最強，動感也最強烈。
漫畫中的傾斜構圖
在漫畫作品中經常會將劇情畫在傾斜的格子中，目的是為了彌補漫畫紙質作品的缺陷，強化漫畫內容的動感。
電影中的傾斜鏡頭
在電影中也會故意用到傾斜的鏡頭，由于電影本身就是動態的，所以運用傾斜鏡頭一般是用來強調危機感、動蕩不安的漂泊感等等。
攝影中的傾斜鏡頭
攝影作品中也會用到傾斜視角，這兩張都是通過傾斜視角強化速度感的例子。
文字傾斜
那么我們看看傾斜在設計中是如何使用的，首先可以是文字傾斜，這兩個海報的人物主體都是豎直的，通過文字傾斜來增加動感。
主體傾斜
這兩張海報則是保持文字水平排列，將主體進行傾斜處理從而帶出動感。
疊加傾斜色塊
我們也可以將文字和主體都水平或者豎直放置，然后添加傾斜的色塊強化動感。
畫面整體傾斜
這種是將包括主體和文字在內的畫面整體進行同一角度傾斜處理。
多角度傾斜
最后這種是難度比較高的，畫面中出現了多個角度的傾斜對比，畫面十分靈活且動感十足。
接下來看看第三種傾斜技巧，錯位。什么是錯位呢？就像這輛小車一樣，他在運動的過程中，身后會產生的一些虛影錯位，使得畫面中的一部分被破壞了，視覺需要在腦子里想象補充這一被破壞的部分，使畫面還原為原本的樣貌，從而產生運動感。
重復
錯位這種技巧我們也可以分為幾種類型，首先第一種就是重復，通過重復的手法去模擬物體的運動軌跡，讓人腦補運動的過程，從而產生動感。
模糊
第二種就是通過將背景或者是主體進行模糊，從而傳達動感。第一張圖片是通過模糊主體身后的背景去產生動感，而第二張則是通過模糊文字的外輪廓從而產生一種收放的動感。
錯開
第三種是錯開，就是將畫面的某一個部分進行錯開處理，讓畫面遭到破壞，需要人腦去修補這部分的破壞，從而產生運動感。
其他
除了上面三種還有許多別的類型，例如通過車輛行駛濺起的水花，融化往下低落的液體等等，都可以造成對畫面的破壞，從而制造動感。
對于集中與發散我們可以分為兩種，第一種是這種通過線條繪制的發射或是集中圖案，從一個中心向某一方向或四周擴展，或者是四周向一個中心集中的線條圖案，盯著看會出現一種光耀感，通過光學效果產生視覺幻想，從而產生視覺動感。
而第二種則是通過物體或圖形的疏密節奏變化，從而產生出類似擴散或是集中的效果，這種效果會令我們聯想到河流或是煙霧擴散的情形，從而產生了動感。
當擴散的圖案配合上透視的效果，會使得動感變得更加的強烈。
背景
對于這種集中發散的圖形，我們可以將它作為背景來烘托動感和氛圍。
文字
也可以將文字編排成發射狀，模擬出那種噴口而出的效果。
主體
或者是將圖形作為主體去表達特殊的主題。
以透視作為發散
這兩個海報是比較特別的例子，將放射狀與透視相結合，體現了很強烈的動感。
接下來講講關于螺旋的技巧，因螺旋發展或內收形成的曲線，會讓人聯想到水的旋渦形，視覺上就形成動感，且螺旋曲線的旋轉曲度越大，動感就會越強。
另外，密集的螺旋曲線也能給人帶來一種集中或者是發散的效果，從而也能帶來一定的動感。
這兩張海報是將螺旋曲線作為主體使用，來表達其特定主題。
這張海報個人比較喜歡，非常靈活地將畫面中的文字和圖片沿著螺旋曲線排布，加上大小的變化，讓畫面產生了一種集中的動感。
這張海報則是將螺旋線作為背景，并將文字放在螺旋曲線間排列。
第六種技巧是波狀曲線的使用。因為曲線的來回反復扭曲，會令人聯想起翻滾的海浪。
而且由于曲線本身就具有不平衡的張力，他會有一種向直線轉變的趨勢，所以波狀曲線特別適合用來表達動感。
波狀曲線的曲度越大，他所產生的動感就會越強烈。
對于波狀曲線，我們可以將其用來作為主體或者是背景進而表達動感。
也可以通過將文字做成這種扭曲的效果，從而產生一種文字在扭動的動態感。
第七種技巧則是對色彩的使用。因為色彩有前進感和后退感，所以我們可以利用這一點來制造動感。其中最容易理解的就是使用色彩的漸變，沿著色彩逐漸變化的方向，來誘導人們的視線移動，從而產生視覺上的動感。
這兩個都是利用不同色彩的漸變來引導視線移動，從而產生動感。
我們在前面講過運動是需要能量的，而象征高溫的暖色調比象征低溫的冷色調更具備能量感，所以暖色調比冷色調更適合表達動感。
這是一張日本新干線的海報，雖然用的是靜止的列車作為主體，可是鮮紅的背景卻能很好地傳達出列車的能量感。如果我們將紅色的畫面換成藍色的話，那種能量感瞬間就沒了，多了些科技的屬性，畫面變得冷靜克制了。
接下來是重心偏移。一般我們編排版面時都會注意版面重心的均衡，將畫面整體的重心放在畫面中間?？墒窃谒茉靹痈挟嬅鏁r，我們卻可以將畫面的重心偏離視覺中心，使畫面形成一種不平衡感，從而產生動感。
我們來看看這兩個海報，都是通過將畫面的重心全都放在畫面的一側，從而產生了一種很強烈的不平衡感。
另外，由于視覺重力的原因，當畫面重心偏上時，能很好地塑造出往下墜的動感?，F在畫面中的這兩個作品都是將重心放在了畫面的上方，我們能感受到畫面中的主體會有一種往下掉的趨勢。
最后一種是蒙太奇的手法。前面我們說過人類天生具有一種組織傾向，當我們看到運動的瞬間狀態時，我們便能腦補出運動的過程。所以通過蒙太奇的手法，將一些不同時刻或狀態的圖片放在一起，便能使畫面產生動感。蒙太奇手法比起單純使用一張運動瞬間圖片，能承載更長時間的運動和更多的運動內容。例如畫面中的這兩個動作，把他們放一起之后我們就可以聯想到這個小哥從熱身到起跑的過程。
其實漫畫運用的就是蒙太奇原理，通過幾個關鍵的情景，去傳達一個完整的劇情。
這些都是運用蒙太奇手法的作品。
以上就是今天的理論部分，接下來我們進入案例實操的環節，這次我給大家帶來了四個案例，分別運用到了傾斜、重心偏移、發散與集中，以及蒙太奇的手法去塑造動感。希望通過這些案例的演示，能夠讓大家更好地理解今天的內容，下面我們就來進入案例的部分。
案例一
首先確定好畫面的頁邊距，并且將畫面橫向分為 6 份。
然后將主體，也就是科比的形象，放在畫面正中間，橫向占中間四欄。
接著在科比的下方疊加一個紅色的傾斜色塊，強化科比傾斜的體態和動感。
從球鞋的名字中提取出關鍵詞疊在科比下層，并將球鞋的中文名放在英文下方。
將球鞋與介紹性文字做成文字組的形式放在畫面下方 。
由于主標題英文被遮擋了一部分，缺失了一些可讀性，所以我們將球鞋的英文名做一個重復放在左上角，并在右上角添加 logo。接下來我們在背景上疊加一個籃球場的場景。
并將畫面的四周涂上黑色的漸變，強化主體形象。
由于現在畫面和主體都有一些偏暗了，所以我們對整體畫面進行稍微調亮，那么這個案例就完成了。
案例二
這個案例同樣也是一雙運動鞋，但是我們這次利用重心偏移的技巧去塑造動感。
同樣的確定頁邊距，并將畫面橫向分為四欄，將主體放在畫面左上角占上方兩欄。
然后從球鞋的名字中提取出相關英文放到版面頂部，并置于主體下方。
因為我們要做一個重心偏移的版面，所以我們接下來將所有的介紹性文字按照主體的負空間排列在版面上方。
為了防止重心的過度偏移，同時和左上角的球鞋做一個對角線的呼應，所以我們在版面的右下方放置價格以及球鞋的型號等信息。
然后吸取球鞋的顏色做一個色彩上的呼應。這一張球鞋的海報就完成了。
案例三
這個案例我們來做一個放射光線的海報，這個海報內容是一款果汁軟糖的促銷海報。
首先確定好頁邊距。
然后我們從這款軟糖的包裝上提取出一個圖形作為畫面主體。然后將軟糖的名字和介紹文案放到這個圖形中。
把圖形按照黃金比例和網格放到畫面中間。
在主體圖形后面疊加放射線條，底下留出一部分空間放置產品圖片及其他信息。
將產品圖片和促銷信息以居中對齊形式排列在畫面下方。
然后我們可以在放射線上添加一些表情愉悅的人物圖片，去強化吃了這款軟糖會很開心的這個動態過程。
還可以在畫面周圍添加一些可愛的小圖形去烘托氛圍。
最后加上 logo，這個軟糖的促銷海報就完成了。
我們也可以將這個海報做成不同的配色，每一款產品對應一個配色。
案例四
這是一個藝術展的海報，我們通過蒙太奇的手法來表現。
由于展覽主題是過去、現在和中間的一切，所以我們將畫面分成三份，并用運動過程中的三個不同動作來代表著三個階段。
由于第一張圖片的底色偏亮了，所以我們將它摳出來，做一個與另外兩個圖片的相同背景。
將主題和時間這兩個比較重要的信息放在畫面的左上角。
其余信息排列在右下角。那么這個案例就完成了，也是非常簡單的，利用的就是蒙太奇的手法。
本期教程到這里就結束了，我們來簡單地總結一下今天的內容。首先我們了解了動感是畫面張力不平衡所造成的，以及強調速度感和強調能量感的兩種動勢。接下來我們講解了三種產生動感的原因，分別為基于生活經驗與心理認知、引導視線移動以及不平衡狀態下帶來的視覺沖擊。最后我們總結了 9 點實用的小技巧，分別為捕捉動態瞬間、傾斜、錯位、集中與發散、螺旋、波狀曲線、色彩、重心偏移、蒙太奇。希望大家能夠掌握好這些方法，讓原本靜態的畫面也能帶來全新的動感。
文章來源：優設
1.競品分析的定義
從專業的角度來講，競品分析是通過系統的分析方法去全面了解市場上位于前列的競爭對手的產品，能夠讓設計師快速了解自家產品所處的位置，從而來針對性的改進自身產品的一個方法。簡而言之，就是要站在巨人的肩膀上去思考，以競品分析的形式去學習其他優秀的產品，從而解決自身產品所存在的問題。
2.為什么要去做競品分析
做一件事情之前一定要思考做這件事的價值和意義，只有你明白其重要和必要性，你才會知道該怎樣去做這件事情，而不是一提起競品分析就找一大堆專業框架和術語然后去填內容，這樣雖然產出了很多，但是關鍵性的內容點其實還是不清楚。
說直白點，你需要通過這篇競品分析去解決你工作或者創作中遇到的什么問題，帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況：
因此我們要學會根據自己的不同需求，去制定不同的競品分析方案，讓分析的內容更聚焦。作為UI設計師來講，通過競品分析為自己的設計方案提供科學的理論依據，為自己贏得話語權，能夠更好地科學產出內容。
3. 如何尋找競品：
競品的選擇非常重要，如果找到錯誤的競品，那么你所分析的一切結論可能都引向了一個錯誤的方向。從而讓自己的努力都白費。那么怎樣才能找到合適的競品呢？分為以下三類情況
A.核心服務與目標用戶相同的產品（直接競品）：
這一點是廣大設計師都能想到的范疇，也稱為直接競品。即提供的核心服務、市場目標方向、客戶群體等與我們的產品基本一致，產品功能和用戶需求相似度極高的產品 。往往是通過業務關鍵詞就能直接搜索到的競品，比如音樂類產品，那么直接在應用商店，或者通過專業網站（易觀千帆等）搜索關鍵詞“音樂”即可搜索出排行前列的競品。
B.目標人群不同，但功能模塊和服務接近的產品（間接競品）：
這類競品可以找起來并不那么直接，可以通過對應功能去逆推擁有此功能的產品，并進行相關搜索。
如果想不到，可以通過“人人都是產品經理” “36氪“等關于產品資訊的網站進行查詢，甚至可以通過百度指數來進行發散思維，看一下跟你關鍵功能相接近的都有哪些。比如你研究外賣產品，除去餓了么和美團等直接競品，你還可以在分析用戶下單和購買流程中，去分析淘寶和京東等購物產品，也能得到一定的幫助。
C.目標人群和服務都不同，但交互或者視覺有可以參考的產品（關聯競品）：
這里所選擇的產品，定位和領域可以都完全不同，但是你要從這款產品中得到啟發，從而讓你的產品能夠擁有其他競品不同的特點或者功能模塊。有一個很典型也熟知的的案例，就是衛龍辣條的設計案例，在衛龍推出之前，可以說是沒人會想到辣條會和高端扯上關系，但是衛龍就是借鑒與其領域完全不同的蘋果設計去做，從而在包裝上獨樹一幟，從而吸引人們注意取得成功。因此通過不同領域跨行業的產品有時候也可以找到不錯的思維方向。
4.如何進行商業分析：
進行商業分析，這里只提及到三個基本選項：商業背景、產品盈利模式以及用戶人群。通過這三個基本要素，你能對所研究的競品有一個大概的了解。當然深入了解還需要其他平臺（官網網站、36Kr等)來查閱更多的相關性資料，下列是對QQ音樂商業背景的簡要分析。
5. 如何進行交互分析：
我們在做交互分析時，我們需要進行必要的兩點分析：用戶路徑和交互維度。
用戶路徑：指用戶從某個開始行為事件直到結束事件的行為路徑，即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說，我們看看排行前列的競品是怎么做的。通過相應的體驗和對比分析，我們就可以找出這其中符合我們產品性質的最優解，從而提高我們的登錄注冊效率。
交互維度：交互維度和用戶路徑有所區別。這一層需要弄清楚產品的核心路徑，從而能夠更好的解析產品各個層面的邏輯關系，這就需要我們以用戶的角度去逐個體驗，整體聯系，隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細節，怎樣分享的，怎樣展示的，比如音樂軟件進行截屏后和點擊喜歡按鈕后的反饋是怎樣的。
6. 如何進行視覺設計：
在進行視覺分析時，有一點需要注意，如果你需要詳細分析某一模塊，請用手機尺寸截圖后拿到設計軟件中進行測量，不要光靠眼睛觀察，很多時候的小細節我們只有在手動測量后才能感受到，比如控件的尺寸大小，間距的大小，以及顏色的取值，都需要精準測量后才能得出靠譜的結論。
怎樣進行視覺分析呢，我比較推薦從一個app 視覺語言最基本的五個維度去分析，即“形色字構質”
最近以音樂APP進行了一次競品分析，以QQ音樂APP來舉例進行分析（當然競品分析并不能只分析一個，而應該根據你需要的功能找多個競品進行對比分析，才能看到更多的維度，這里只拿一個舉例）：
6.1 圖形元素的分析
首先我們以形進行分析，形即圖形元素，具體來講即LOGO和圖標。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標整理歸納如下：
可以看到整體的圖標色調更加清新，造型設計更加圓潤，未選中狀態的線形圖標則采用4px的描邊，粗線形描邊讓整體界面風格顯得更加穩重的同時對用戶的干擾也較小。新版的圖標界面讓界面保持穩重的同時又富有活力。
6.2 色彩體系的分析
其次則是對色這一類別進行分析，顏色其實是對于品牌調性有很大的影響，比如一想起QQ音樂就知道主色是綠，一想起網易云音樂就知道主色是紅，對用戶的記憶點更深刻。通過截屏測量進行分析，得出整體的顏色如下（由于手機屏幕的色差原因，不可避免會有些許誤差）
從局部來看，分析顏色最重要的一點就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色，觀察成熟的產品是怎樣用顏色（和字重）去區分層級關系的。
可以看到，用主色和三種輔色即可區分界面的整個層級關系，由此思考我們在制作自己的界面時也避免用太多的顏色，造成界面太過花哨。（顏色的具體色值可能有些許誤差，更重要的是看顏色層級關系）
6.3 字體體系的分析
接下來是字的分析，字即字體體系，可具體到字體和字號。設計中字體一般來講是蘋方，字號則根據設計師的定義來進行相應的規范。通過頁面的測量分析，可以拿到其具體的字號大小層級分析。（以下定義基于750的設計尺寸）
對于單個界面的分析，個人覺得要帶有思考的眼光去看待，比如在首頁中字號其實分配過多，像“更多”這種按鈕就不應該再分一個字號，字號太多整體就顯得有一點點亂了。雖然大廠的設計能在一定程度上給予我們參考，但并不是說他的每一個設計都是正確的，我們要學會用審視的眼光去看待出現在身邊的設計。
6.4 界面構成分析
界面構成即界面的元素大小以及他們的布局，例如有時候我們不知道一個標準的搜索框的長寬具體多少才是合適的，這就需要我們去分析其他成熟的商業產品，通過測量來知道具體的數值，從而督促自己進行正確的設計。這里選取了一個默認的首頁進行分析。
將一個頁面用右邊的形式進行原型化，去掉干擾可以把結構看得更清楚。間距之類的也可以通過軟件進行測量?？梢钥吹絈Q9.0版本的去線化設計，利用大間距來區分各個模塊，去掉了其他的干擾元素，整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統一的圓角化設計也讓整體設計符合流行趨勢，顯得更活潑。
6.5 質感與風格分析
關于界面的質感則是不同于扁平化的一個設計，即有的頁面在你看來細節會更豐富，層級會更深。界面質感通過漸變，疊加，透明度等不同方式來呈現，比如在QQ音樂中的會員界面卡片，則體現了微質感：
上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質感，讓整個界面顯得更精致。當然，疊加的圖案都是與內容相關的，不能為了疊加而疊加。包括下方的權益圖標，也采用了漸變的方式來讓整個圖標顯得更精致和有質感。我們再處理質感的時候也可以用這種方式來進行。
以上通過“形色字構質”來分析是屬于單個分析，相當于去拆解一個成熟產品中的每一個細節點，從而去學習和吸收。我們還要學會進行對比分析。把單獨某一個功能模塊拎出來，通過不同類型的對比從而歸納出這一類的設計方法和樣式，進而總結相應規律。
比如某一天你需要設計一個歌單列表，你此時就需要分析所有TOP排行的歌單列表，看看分別都有什么，從而總結歸納出結構來，再進行分類。
通過分析提煉，形成以下結論并進行相應的概念風格展示設計：
這樣，我們最后制作出來的方案才能涵蓋比較全的解決方案，從而能夠更好的助力設計產出。上圖的產出可能稍顯簡陋，但只是做一個簡單的示例，真正的產出應該更加有細節和落地，也要結合自己的工作需求做相應調整。
7.關注競品的版本迭代和用戶評價：
關注版本更迭，閱讀競品版本更新的詳細說明，你可以從中得出版解決了什么問題，提升了哪些體驗，添加了哪些功能，融合了什么流行的設計趨勢。產品迭代就是團隊通過用戶需求對某個產品不斷完善的一個過程。迭代對于一個產品來說是至關重要的，一個產品如果不想被對手超越，就必須不斷的對版本進行更新迭代。
除了關注具體的內容，你還可以觀察版本更新的提示信息，例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你，從而讓你更加情愿去更新，提升新版的使用率。
用戶評價則更不用說，產品的最終服務對象就是用戶，用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價，吸收好的建議，屏蔽無腦的意見，從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網站（https://appbot.co/）去查詢。
總結
以上的篇幅較長，看下來可能會有一些累，那么此篇文章提及到的點在這里回顧一次：
1.競品分析的定義-站在巨人的肩膀上去學習；
2.為什么做-基于自己的目的去進行對應的競品分析，分析的最終目的是解決自己在設計過程中遇到的問題；
3.競品分析分為三個層面：視覺分析、交互分析以及商業分析；
4.怎樣進行商業分析（商業背景、盈利模式、用戶人群）；
5.怎樣進行交互分析 （用戶路徑、核心路徑、交互細節）；
6.怎樣進行視覺分析 （從“形色字構質”五個維度去分析以及如何對比分析應用）；
7.競品的迭代和用戶評價的重要性。
自己有一個小習慣，看完每一篇文章，總會告訴自己一定要在腦海里回顧一遍，思考一下這一篇文章到底有什么觀點是自己之前沒有想到的，哪怕只有一點是沒觸及到的知識盲區，那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。
寫這篇文章的目的是給自己的競品練習做一個總結，以輸出倒逼輸入是一種比較有效的學習方法。但基于自己的水平有限，在某些分析的地方仍然存在不足和疏漏之處，希望大家諒解并及時交流。感謝大家看到這里，希望大家每天都進步～
轉自：站酷-進擊的M
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
彈窗在設計中運用的非常廣泛，基本上每個應用都會涉及到。恰好這段時間我也在整理公司設計組件這一塊，所以就想總結分享一下
設計師都會使用彈窗，但對于彈窗背后的分類及運用可能還不是特別了解，在寫這篇文章之前，我查看了很多應用及資料，所以下面會有大量的案例，相信大家看完可以對彈窗的認識更明確，做設計規范的時候也能有自己的想法。
現在的彈窗分為兩種，一種是模態彈窗（重提示），一種是非模態彈窗（輕提示）。
常見的模態彈窗：Dialog/Alert、Actionbar、Popover/Popup
常見的非模態彈窗：Toast/Hud、Tips、Snackbar、
Dialog/Alert 對話框
對話框是我們常用的彈窗，安卓開發語言是Dialog，iOS開發語言Alert，它通常出現在頁面的中間，對話框/警示框的類別非常多，對用戶的干擾比較大。前面之所以說模態彈窗是一種重提示，是因為它需要用戶主動觸發選擇才可以繼續當前的操作。
① 信息-選擇確定
特點：這類彈窗通常是一些系統功能的授權、版本更新、消息通知、重要提示等，通常只有1～3個主按鈕，只需要用戶進行簡單的選擇。
下圖舉例分析：
iOS詢問是否刪除APP，就屬于重要提示彈窗，它一般會用在像刪除、確認提交...一些比較重要的功能操作中。
小紅書的這個是否允許使用網絡彈窗，大家一定在許多APP中都見過，這屬于一個系統自帶的授權彈窗。
馬蜂窩與天貓的消息提醒彈窗，一個屬于初次使用APP時，系統自帶的彈窗，一個屬于使用后期APP為了推送消息，主動提示你開啟消息通知。
有錢花和愛奇藝的版本升級彈窗，都屬于偏運營類的彈窗，這一類的彈窗通常會弱化暫不升級的按鈕，突出升級主按鈕。
② 信息-輸入勾選
特點：這類彈窗通常是輸入一些比較少的信息或者勾選信息，常用于備注輸入、規格選擇、分組選擇等，通常只有確定和取消兩個按鈕。
下圖舉例分析：
微博對于已關注人的分組及備注，都屬于信息輸入及勾選類彈窗，操作通常都比較簡單。
③ 信息-傳達展示
特點：這類彈窗通常是一些廣告、紅包優惠、節日活動等一些運營類彈窗，主要是吸引用戶點擊及參加活動，這類運營彈窗通常會設計的比較吸引人，造型各異，會突出領取、查看等大按鈕，弱化關閉按鈕。
下圖舉例分析：
拼多多和餓了么這類的紅包優惠彈窗，就不多說了，大家都懂，它們最主要的目的就是吸引用戶點擊，提升購買率。
美團的變黃送好禮彈窗，屬于一次比較大的品牌升級，它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設計都非常清晰，視覺感很強。
支付寶的這個猜世界杯贏螞蟻積分的彈窗，屬于活動彈窗，它的整體設計非常貼合主題。
Actionbar操作欄
Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出，它的操作及信息會比對話框類型的彈窗更多更復雜。這種當前頁面的下拉彈窗好處就是，可以讓用戶清楚的感知當前的操作，比跳轉到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。
① Action Views操作視圖
特點：這類視圖彈窗通常占屏比較多，以文字、圖標等形式展示各種功能，也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出，不太強調歸屬，大多出現在購買、支付、分享等場景。
下圖舉例分析：
百度網盤的這個+號擴展彈窗比較特殊，它也可以說是浮層，占滿整個屏幕，它最吸引人的還是它的小動效。
京東購買時的彈窗和支付寶付款時的彈窗，都是比較典型的，在各種電商產品及付款頁面用的非常多。
轉轉這個的鍵盤與輸入為一體的彈窗，設計的非常人性化，讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。
網易云音樂的分享彈窗就是典型的以文字與圖標來展示功能的。
微信讀書的底部閱讀設置彈窗，比較特殊，為了使用戶沉浸閱讀，它是比較隱藏的，而且非常輕量化。
② Action Sheets 操作列表
特點：操作列表相對于操作視圖，它更單一。主要是以文字展示功能按鈕，重要敏感的功能操作一般會用主題顏色或紅色顯示，主要運用在一些日?？丶⒐δ苓x擇、刪除、保存等場景。
下圖舉例分析：
Keep的選擇日期，屬于iOS原生控件，非常常見。
淘寶的選擇地址彈窗，整個展示的非常清晰全面，而且用戶每選擇一項，就會有相應的顯示。
支付寶和天貓超市的兩種列表彈窗，就不多說了，簡單的功能選擇都會采用這種。
③ 抽屜式彈窗
特點：這種抽屜式彈窗一般從左右兩邊彈出，經常運用在一些導航擴展和目錄展示中，它能承載比較多的信息，基本上都是用來放一些不太常用的功能。
下圖舉例分析：
微信讀書及一些其他閱讀類產品，由于目錄很長，而且一般是從上到下瀏覽的，所以基本都采用了這種抽屜式彈窗。
小紅書的這個抽屜式彈窗，以圖標和文字的形式展示了一些不是很常用的功能，為我的頁面節約了不少空間。
Popover/Popup 浮層
Popover是ios的開發語言，popup是安卓的開發語言，浮層是指，用戶點擊某個功能后浮出一個臨時氣泡對其作出補充，它通常會伴隨著半透明的遮罩或者投影襯底，用戶需要點擊功能區域操作，或者點擊空白處取消，才能進入下一步操作。它與上面操作欄的最大區別就在于，它更強調歸屬，可以出現在頁面的任何地方，而操作欄一般只出現在底部，不強調歸屬。
① 指向浮層
特點：這類的浮層一般伴隨有小三角指向，強調歸屬。氣泡里面的功能通常以單一的文字或文字與圖標結合的形式來展示，主要運用在頂部加號補充、復制、分享轉發等場景。
下圖舉例分析：
支付寶和美團的頂部加號補充浮層，展示形式是差不多的，只是UI樣式不一樣，一個是白色氣泡黑色半透明遮罩，一個是深灰色氣泡。
微信讀書和微信的選擇文字氣泡，在文字復制中很常見，通常會與其他轉發收藏小功能一起出現。
② 導航篩選浮層
特點：所謂導航篩選，自然是與導航分不開的，再加上浮層是比較強調歸屬的，所以它通常會與導航連在一起，一般出現在頂部。
下圖舉例分析：
美團的導航篩選，因為選項及開關很多，所以它的底部會有兩個主按鈕，一個完成，一個重置。
餓了么的這個只有一個功能選項，所以它一般是直接選擇就收起浮層了。
③ 引導浮層
特點：引導浮層的作用就是引導用戶更好的使用產品及交互，降低用戶的學習成本。它通常會出現在用戶首次進入APP的時候，一般只會出現一次，點擊空白位置或我知道了浮層就會消失。
下圖舉例分析：
QQ音樂與微醫的引導浮層都是用戶首次進入應用時，給出的功能搬家提醒浮層。
Toast/Hud 提示框
Hud是ios的控件名詞，Toast是安卓的控件名詞，它們都屬于一種輕提示，給予用戶及時反饋，讓用戶知道自己當前所處的狀態。
Hud一般只出現在屏幕的中央，以毛玻璃的樣式表現，內容展示比較富豐富。
Toast可以出現在屏幕任意位置，通常以黑色半透明的小框來表現，內容一般是純文字提示或者文字與圖標結合提示。
① 狀態提示
特點：狀態提示的Toast，它們一般都是反饋用戶當前操作的狀態，只出現1到2秒就會自動消失，場景一般是關注成功、密碼錯誤、音量提示、靜音、清除緩存等。
下圖舉例分析：
移動的屬于操作遇阻提示。
京東的屬于操作成功反饋。
iOS的音量控制屬于毛玻璃Hud。
微信的清除緩存屬于正在操作狀態。
② 按鍵提示
特點：按鍵Toast提示與狀態提示不同，它們一般自動出現或者點擊觸發才會出現，用于對功能點的補充說明，讓用戶對功能有更深的了解。
下圖舉例分析：
螞蟻森林里點擊樹木就會出現相關信息，當然它也會自動出現，點擊其他區域也會自動消失。
知乎的消息標簽不僅有小紅點提示，還會在上方自動出現數字提示。
Snackbar
Snackbar是Android中的一個控件。它一般會在超時自動關閉或者在屏幕上滑動關閉，它沒有Toast那么輕量，設置出現的時間會比Toast長，而且可以點擊按鈕進行交互。
下圖舉例分析：
UC瀏覽器的Snackbar，是在提示用戶上滑，來查看更多內容，它需要滑動或者超時才能關閉。
京東的Snackbar，是在為用戶推薦商品，提示用戶點擊箭頭來查看喜歡的商品，它比UC瀏覽器多了一個關閉的按鈕。
Tips提示
Tips與Snackbar最主要的區別就是：Tips它是內嵌在頁面上的，而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁面才會消失，一般用于需要用戶感知到的通知信息，或者植入廣告。
下圖舉例分析：
百度網盤在下載視頻時，就會出現一個Tips的提示，讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告，但它抓住了用戶的場景及心理，觀看廣告的幾率大大提升。
愛奇藝的Tips提示就屬于重要通知提示了，提示用戶VIP即將到期，續費可優惠，它們都有一個主按鈕及關閉按鈕，需要用戶主動觸發提示才會消失。
規范總結
目前的彈窗樣式非常多，你能想到的，你想不到的基本都可以技術實現。但這同時也帶來一個問題，那就是“不規范”。以上提到的彈窗種類，你只需要選擇符合你產品要求的幾個類型，最好不要在一個產品中運用多個同種類型的彈窗，否則后期會很難規范及組件化，當然運營廣告類彈窗可以另當別論。
轉自：站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
一、搭建cli
1.事先安裝好cnpm(淘寶鏡像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
2.cnpm install -g vue-cli
全局安裝vue腳手架工具。（下載一次就好）
3.vue init webpack your_project_name
創建一個腳手架項目（每次創建需要）
eg:這時在命令行中有需要你填的信息{
你的項目名；
你的項目描述；
還有你想是否下載的插件（y/n）；
}
4.使用 npm run dev來運行項目
就這樣，一個簡單的vue開發項目模板就這樣下載完成了。
eg：
i 是install 的簡寫。
全局安裝依賴：
cnpm i 依賴名
1
局部安裝依賴：
cnpm i -D 依賴名
1
二、vue-router
一般事先安裝模板時，已經安裝上了。
可以查看package.json中。
如果沒有安裝
cnpm i -D vue-router
1
安裝好之后，在src目錄中會生成一個router目錄，里面放著index.js，
一般有兩種配置
第一種：
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
// 一進入就顯示頁面
{
path: '/',
redirect: '/index'
},
{
path: '/',
component: pather => require(['../components/common/bodys.vue'], pather),
meta: { title: '主體' },
children:[
{
path: '/index',
component: pather => require(['../components/page/index.vue'], pather),
meta: { title: '系統首頁' }
},
{
path: '/biaoge',
component: pather => require(['../components/page/biaoge.vue'], pather),
meta: { title: '基礎表格' }
},
{
path: '/Tab',
component: pather => require(['../components/page/Tab.vue'], pather),
meta: { title: 'tab選項卡' }
},
{
path: '/jibenbiaodan',
component: pather => require(['../components/page/jibenbiaodan.vue'], pather),
meta: { title: '基本表單' }
},
{
path: '/fuwenben',
component: pather => require(['../components/page/fuwenben.vue'], pather),
meta: { title: '富文本編輯器' }
},
{
path: '/bianjiqi',
component: pather => require(['../components/page/bianjiqi.vue'], pather),
meta: { title: 'markdown編輯器' }
},
{
path: '/shangchuan',
component: pather => require(['../components/page/shangchuan.vue'], pather),
meta: { title: '文件上傳' }
},
{
path: '/scharts',
component: pather => require(['../components/page/scharts.vue'], pather),
meta: { title: 'schart圖表' }
},
{
path: '/tuozhuai',
component: pather => require(['../components/page/tuozhuai.vue'], pather),
meta: { title: '拖拽列表' }
},
{
path: '/quanxianceshi',
component: pather => require(['../components/page/quanxianceshi.vue'], pather),
meta: { title: '權限測試', permission: true }
}
]
},
{
path: '/login',
component: pather => require(['../components/page/login.vue'], pather)
},
{
path: '/cuowu404',
component: pather => require(['../components/page/cuowu404.vue'], pather)
},
{
path: '/cuowu403',
component: pather => require(['../components/page/cuowu403.vue'], pather)
},
{
path: '*',
redirect: '/404'
}
],
// 去掉#號
mode:"history"
})
第二種：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
三、axios
先安裝
cnpm i -D axios
1
然后在main.js寫入
import axios from 'axios'
Vue.prototype.$axios = axios
1
2
3
這樣就可以在組件中使用axios 獲取數據了
loadData(){
this.$axios.get(['
.then((response) => {
// success
console.log(response.data);
})
.catch((error) => {
//error
console.log(error);
})
},
四、vuex
1、安裝
cnpm i -D vuex
1
2、然后需要手動創建一個文件夾store在src目錄當中，
接著在store文件夾中創建store.js
例：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--,
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
3、然后在main.js引入注冊
import Vuex from 'vuex'
import store from './store/store'
Vue.use(Vuex)
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
比如在headers.vue使用vuex
<template>
<div class="headers">
<p>{{count}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'headers',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
increment(){
this.$store.commit('increment')
},
decrement(){
this.$store.commit('decrement')
}
},
computed:{
count(){
return this.$store.state.count
},
}
}
</script>
<style scoped lang="scss" >
</style>
五、sass
1、需要安裝sass
(1)安裝node-sass
(2)安裝sass-loader
(3)安裝style-loader 有些人安裝的是 vue-style-loader 其實是一樣的！
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
1
2
3
2、接著需要更改build文件夾下面的webpack.base.config.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(dirname, '..', dir)
}
module.exports = {
context: path.resolve(dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(\?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //從這一段上面是默認的！不用改！下面是沒有的需要你手動添加，相當于是編譯識別sass!
test: /.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
3、在你需要使用sass的地方寫入即可
<style lang="scss" scoped="" type="text/css">
$primary-color: #333;
body {
color: $primary-color;
}
</style>
六、vue UI庫
這里已著名的Element組件庫為例
https://element.eleme.cn/#/zh-CN/component/carousel
1、安裝
npm i element-ui -S
1
2、使用
在main.js寫入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
1
2
3
4
3、然后在組件使用就可以了
例：輪播圖
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carouselitem h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carouselitem:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
設計概要（Design briefs），也可以理解為設計簡報、設計說明文檔。設計概要負責說明設計的目標、設計的方向風格、不同階段及對應的里程碑（指標）。
簡而言之，設計概要是對本次設計項目的簡要概括，可能是一份文檔，或者一組文件內容，其中包括設計的幾個關鍵概念如項目描述、項目范圍、項目目標，目標受眾、風格外觀、預算時間安排。那么我們所整理的設計概要是提給誰看的呢？按照原作者觀點是增進設計師和需求方的理解及信任。作者的觀點是建立在服務甲方的基礎上提出的，因為作者所屬領域為平面設計領域，偏向創意性設計活動，因此通過建立共同目標，統一想法更容易創造出高滿意度的方案。
但事實上設計概要不止于此，它不應該被局限在平面設計領域，雖然作者是以平面設計師的身份來普及這個觀念（傾向提點平面廣告類設計工作者，而不是UI/UX領域），但事實上其中很多角度都是從設計本質及設計工作的協作本質上提出的，它也可以被我們移植到UI/UX領域。當我讀完這篇文章，我發現了設計概要一個更加重要的功能，那就是幫助UX設計團隊梳理關鍵工作，建立共同目標，提高設計工作的效率，促進團隊成員的協作與信任。（從設計團隊角度）
當然如果從甲方角度考慮，設計簡報依然可以用于UIUX領域，比如向leader提案，以及在項目初期向外包方展示設計說明，增進溝通交流，以保證設計師對需求的理解，同時更展示了設計人員的專業性。
總之設計概要適合在設計流程的前期被組織，并分享至團隊和需求方，增進團隊的凝聚力，促進創意的發生，展示團隊專業性及增加需求方與設計人員的理解與信任。設計概要與最終提案實際上是一次完整的設計活動的首與尾，兩者應當相互對應，設計結果應當圍繞最初定義的目標進行，設計概要更像是設計思維的理解和定義階段，把我們面臨的問題，假設的目標呈現出來，以便在接下來的設計過程中精準打擊，去解決設計概要中提到的問題或者目標。
下面開始正文。這里是帥氣的分割線
在過去18年的廣告設計工作中，我逐漸意識到這個行業里最好的事情就是與你合作的人——作家，藝術總監，用戶體驗和用戶界面設計師，擁有出色的有創意的大腦，卓越的才能，不同的心態。
當他們有清晰的指導和足夠的自由與時間時，他們往往能迸發出好的想法，提出創意性的解決方案。但只要是缺乏指導，各種相互矛盾的指示，混亂的目標及緊迫的時間，將導致設計師無法產出優秀的方案。
我多年來一直在觀察這個現象，但我不知道該如何解決。一開始，我很難將客戶需求好創意輸出完美的結合，隨著時間流逝，我逐漸明白，這一切都因為我們沒有一個清晰地設計概要。從客戶的需求文檔開始，我們從中收集信息建立我們的總的設計概要，然后以此總概要來進一步細分為具體的概要，如視覺設計概要、體驗設計概要、布局排版設計概要等。
沒有任何東西可以取代一份準確詳細的設計概要。沒有任何電子郵件或者個人會議可以取代創意概要。如果缺少基本信息，你無法開始任何工作，無法估算資源，無法保證最后期限。
如果認真對待，設計概要就是任何創造性工作的關鍵。主要問題是客戶和設計師在某些情況下都被低估了。設計行業變得如此龐大且不斷擴張，任何人都可以稱自己為設計師，任何人都可以收取任何費用。因此，需要特定流程的真正的設計被置于次要地位，完全以價格來評判。雖然我支持競爭并且完全理解并非每個公司或個人都能獲得同樣的預算，但它仍然對整個行業不利。
設計概要是一個很關鍵的部分，應當在正式設計開始前就組織好，但在一般設計流程中，它經常會缺失，通常我們認為我們一切都準備好了，認為我們的方案沒有問題可以直接開始設計了，但事實往往相反。
什么是概要（brief）？
“概要”一詞來源于軍事術語，在軍事術語中，簡報被定義為“事先給出具體指示或信息的行為”?！八幸粋€具體的結構，簡短扼要，包括所有必要的資信息，但不多，并包括一項既定的任務和要完成的結果，但有足夠的自由來適應局勢(任務摘要)。
當指示部隊接管敵方陣地時，將軍可能會給出如何執行以及考慮哪些因素的指示，但不會說把右腳放在左腳前面，重復這個動作100米（前進一百米），然后右轉，等等。軍事簡報只給出一項任務，留給個人決定的空間。同樣，creative briefing也不是一個描述創意過程的詳細用戶手冊。它也不是對預期結果的描述。創意概要是一個框架，它可以通過提供足夠的指導來推動創意過程，使創意保持在正確的軌道上，并為創意提供足夠的自由。（譯者注：核心是指導列表，且保證足夠的自由，只提供框架，不干擾創意執行）
為什么我們在創作過程中需要概要？
如果我們有一個需要別人解決的問題，我們需要創意簡報和創意簡報用作說明，就是這么簡單。當我們要進行創意活動時我們會寫創意概要，列出關鍵的點，這意味著我們此時已經清楚存在的既定問題，我們列出問題然后才知道去解決什么。當然，也只有在別人要執行設計活動時，我們才需要去寫一份概要，以供說明。 （簡單理解，從某種角度，設計概是要寫給需要執行設計的人員看的，我們需要別人去解決問題，而概要負責說明這些問題。）
什么是設計概要？
設計概要是描述設計項目的目標和里程碑的書面文檔。它是設計過程中至關重要的一部分，因為它有助于在客戶和設計師之間建立信任和理解。它和合同一樣重要，是雙方的重要參照點。它確保重要的設計問題在設計師開始工作之前就被考慮和討論。
根據不同工作范圍和不同產品領域，設計概要可以由許多元素組成，每個元素都詳細描述某個范圍的特定部分。
但為了保持簡潔，以下五個要素不容忽視:
1.項目描述
簡單描述一下我們需要做什么:我們對任務了解多少?期望是什么?一個新的設計?一個新的想法?現有的網站重新設計?我們需要用它來解決什么問題?這最多只能是一句話。
譯者注：項目描述是對你所進行的項目的最簡潔的概括，比如"我們在做一個共享打車的產品"。當然可以在這基礎上豐富一點如：“我們在做一個服務白領人群、針對夜間打車場景的共享打車產品”，后面這個描述增加了用戶和場景，但整個描述仍然是清晰易懂的。項目描述一般由戰略層相關人員來定義，如公司老大，產品經理等。當然對于redesign項目，則需要設計師自己明確項目目標，然后去定義一個簡潔的項目描述。
2.項目范圍
根據項目的大小，這里需要提供更多的細節。什么是預期目標，有多少頁多少內容量，它將具有什么功能和特性。你需要了解更多的細節來服務一個新的企業品牌項目，而不是一個簡單的網站。報價將主要依據這一環節。盡可能具體是至關重要的。
此外，在互聯網世界中，客戶相信設計師能夠解決所有問題，從UI到UX，最終開發一個完整的網站并解決SEO排名（seo即搜索引擎優化的意思），非常重要的是，盡早說明哪些內容在范圍內，哪些不包括在范圍內。
譯者注：項目范圍即范圍層中的內容規格。我們在產品設計的五個層面中第二層中可以了解這部分內容，內容規格是對產品目標的拆解，細化為具體的內容和功能，例如我們設計一款打車應用，它可能會包含，順風車（對應順路接送服務）、普通快車（對應出租車服務）、高端用車（對應企業服務高端出行領域）這三種規格。
3.目標
通常情況下，你的客戶并不知道他們的目標，也不知道設計工作會如何影響他們。但概括下來有以下三種不同類型的目標。
業務目標:客戶給出的一個可衡量的目標，例如增加銷售、市場份額、滲透率、減少X%的客戶流失率等KPI。
營銷目標:幫助客戶實現商業目標中一切與營銷相關的事情。幫助客戶提升客戶參與度的活動:意識-考慮-偏好-試用-購買-忠誠-宣傳。（對標用戶生命周期模型：獲客、留存、激活、變現、傳播 ）
溝通目標:我們需要行動的目標!預期的結果是什么，消費者的行為或預期從我們設計的產品中獲得什么?它必須以具體有形的形式表達出來，例如1500人注冊，5000個額外的點贊，優惠券下載，產品試用，撰寫評論，應用程序的使用，潛在客戶，分享。
雖然了解業務和營銷目標很重要，但是讓我們的客戶了解UI和UX有其局限性，并且它們并不會對糟糕的商業策略產生影響，這一點非常重要。這可能很關鍵（撇清責任俗稱帥鍋哈哈）。
4. 目標受眾
這個產品是給誰的?誰將使用它，在什么時候什么場景下，為什么使用?描述用戶受眾必須盡可能具體，因為設計師通常會考慮到角色，特別是在UX方面，產品使用流程主要由用戶角色及其在客戶旅程中的特定階段決定。
6.預算和時間
有些人可能會爭論是否應該在一個簡短的報告中加入預算，不一定是準確的預算，但我們至少要確定一個大致范圍。清晰的預算可能意味著設計師或代理機構甚至不會接受該項目，或者如果客戶無法支付他們的服務費用，他們會考慮另一種成本更低的解決方案。但若沒有溝通清楚，在設計進行期間更容易產生分歧和問題。
定義總的時間和預期的各時間節點則是為了避免那些清晰溝通可以避免的沖突點。時間還會影響預算;在任何緊急情況下，獲得額外資源都是可能的（比如若時間緊急可會提高價格）。
根據我的經驗，真正重要的問題都是雙重的。
1.客戶的教育程度不足以提供可以推動項目正常運行的必要信息
2.設計師在沒有正確理解客戶的需求的情況下就心急直接開始設計。
總結
如果您是客戶，一個好的設計概要將節省您在無意義的電子郵件，電話和會議上花費的時間。它還可以幫助您獲得來自不同設計師和代理商的更和可比的報價。
如果你是一名設計師，如果你堅持從一個設計概要文件開始你的設計工作，你會從客戶那里獲得簡潔的愿景和期望，這可以讓你保持動力。你的時間和努力是昂貴的，從潛在客戶那里獲取的某種信息可能毫無意義。明智的做法是優先考慮那些已經有一些遠見、愿意承擔自己那部分工作的客戶。（即優先考慮那些清晰的分析了產品的各類目標、預算等關鍵內容規格的客戶）
一個好的簡介應該是簡潔、清晰和全面的。如果目標足夠清晰，應當不超過兩頁。
為了使最終的結果盡可能的好，我們需要鼓勵和教育客戶和設計師去做更好的設計概要（說明文件），讓我們的工作更容易，并把重點放在更重要的事情上。
文章來源：UI中國
在java的學習中，當接觸到類這一章的時候，就會避免不了的接觸到this關鍵字。
首先，this關鍵字指向的是當前對象的引用
作用：
this.屬性名稱
指的是訪問類中的成員變量，用來區分成員變量和局部變量（重名問題）
class Test_08{
public static void main(String [] args){
//調用無參構造函數，
Person p1 = new Person();
p1.setAge(20);
p1.setName("張三");
p1.setGender("男");
System.out.println(""+p1.getName()+" 今年"+p1.getAge()+"歲 性別為："+p1.getGender());
}
}
class Person{
private String name;
private int age;
private String gender;
Person(){}
Person(String name,int age,String gender){
this.name = name;
this.age = age;
this.gender = gender;
}
public void setName(String name){
name = name;
}
public String getName(){
return name;
}
public void setAge(int age){
age = age;
}
public int getAge(){
return age;
}
public void setGender(String gender){
gender = gender;
}
public String getGender(){
return gender;
}
}
對Test_08運行后發現，調用的set方法并沒有對 對象中的變量進行賦值，是因為，傳入的參數變量名與類中屬性變量名重復，因此我們在set方法和有參構造方法中加上了this.類屬性名稱，這樣就可以完成對 對象變量的賦值。如下圖：
this.方法名稱
用來訪問本類的成員方法
this();
訪問本類的構造方法
()中可以有參數的 如果有參數 就是調用指定的有參構造
注意事項:
1.this() 不能使用在普通方法中 只能寫在構造方法中
2.必須是構造方法中的第一條語句
例如，當我們把this()放在有參構造函數的末尾時，例如用this("哈哈");我們先不管語法是否有錯誤，試著按照程序的運行來判斷一下結果，我們可以看出，當在創建對象時，假定調用含有this（“哈哈”）的構造函數，則剛開始存放的值，會被this（“哈哈”）調用的只含有一個參數的構造函數覆蓋，也就是說，最后的name會變成“哈哈”，這是與我們的初衷相違背的，而且運行結果也是報錯，
當我們換到構造方法的第一句時，則不會有這種錯誤，因為它并不會影響到后面name的賦值。
我們接下來把this語句放在構造函數的第一句位置，
就不會有報錯
————————————————
版權聲明：本文為CSDN博主「BetterShon」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42386014/article/details/81138684
實現導航的左右滑動類似于騰訊新聞，網易等導航，一下貼上代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
th,em{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
img,a img{border:0;}
body{font:12px 'Microsoft YaHei',Arial;color:#666;background-color:#eee;}
.nav{width:100%;overflow:hidden;margin:0 auto;height:35px;position:relative; line-height:35px;background-color:#000;}
.nav ul{position:absolute;left:0;top:0;width:640px;z-index:1;}
.nav ul li{width:80px; float:left; overflow:hidden;}
.nav a{color:#fff;width:100%; display:block; text-decoration:none; text-align:center;}
</style>
<body>
<div class="nav" id="nav">
<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單7</a></li>
<li><a href="#">菜單8</a></li>
<li><a href="#">菜單9</a></li>
<li><a href="#">菜單10</a></li>
</ul>
</div>
<script>
window.Swipe = function(b, a) {
if (!b) {
return null
}
this.options = a || {};
this.index = this.options.startSlide || 0;//開始的導航頁的第幾屏
this.speed = this.options.speed || 300;//速度
this.lwidth = this.options.width || 80;//導航li寬度
this.delay = this.options.auto || 0;//自動滾動菜單速度0為不自動滾動
this.container = b;//在那個容器內
this.element = this.container.children[0];//
this.setup();
if (this.delay != 0) {
this.begin();
}
if (this.element.addEventListener) {
this.element.addEventListener("touchstart", this, false);
this.element.addEventListener("touchmove", this, false);
this.element.addEventListener("touchend", this, false);
this.element.addEventListener("touchcancel", this, false);
this.element.addEventListener("webkitTransitionEnd", this, false);
this.element.addEventListener("msTransitionEnd", this, false);
this.element.addEventListener("oTransitionEnd", this, false);
this.element.addEventListener("transitionend", this, false);//監聽過度動畫是否結束
window.addEventListener("resize", this, false)
}
};
Swipe.prototype = {
//設置其基本樣式
setup: function() {
this.slides = this.element.children;
this.width = Math.ceil(("getBoundingClientRect" in this.container) ? this.container.getBoundingClientRect().width: this.container.offsetWidth);
if (!this.width||this.slides.length < 1) {//沒有子節點，獲取不到屏幕寬度均返回
return null
}
this.element.style.width = Math.ceil(this.slides.length this.lwidth) + "px";
var a = this.slides.length;
while (a--) {
var b = this.slides[a];
b.style.width = this.lwidth + "px";
}
this.slide(this.index, 0);
},
slide: function(a, c) {
var b = this.element.style;
if (c == undefined) {
c = this.speed
}
//過度效果需要花費時間
b.webkitTransitionDuration = b.MozTransitionDuration = b.msTransitionDuration = b.OTransitionDuration = b.transitionDuration = c + "ms";
this.index = a
//console.log(a this.width,Math.ceil((this.slides.lengththis.lwidth)/this.width));
if(a this.width>(Math.ceil((this.slides.lengththis.lwidth)/this.width)-1)this.width){
// b.MozTransform = b.webkitTransform = "translate3d(" + -((Math.ceil((this.slides.lengththis.lwidth)/this.width)-1) this.width) + "px,0,0)";
// b.msTransform = b.OTransform = "translateX(" + -((Math.ceil((this.slides.lengththis.lwidth)/this.width)-1) this.width) + "px)";
return false;
}
else{
b.MozTransform = b.webkitTransform = "translate3d(" + -(a this.width) + "px,0,0)";
b.msTransform = b.OTransform = "translateX(" + -(a this.width) + "px)";
}
},
getPos: function() {
return this.index
},
//前一個，
prev: function(a) {
this.delay = a || 0;
clearTimeout(this.interval);
// console.log(this.index);
if (this.index) {
this.slide(this.index - 1, this.speed)
//console.log( this.index);
} else {
this.slide(this.length - 1, this.speed)
}
},
//后一個
next: function(a) {
this.delay = a || 0;
clearTimeout(this.interval);
if (this.index < this.length - 1) {
this.slide(this.index + 1, this.speed)
} else {
this.slide(0, this.speed)
}
},
begin: function() {
var a = this;
console.log(a);
this.interval = (this.delay) ? setTimeout(function() {
a.next(a.delay)
},
this.delay) : 0
},
stop: function() {
this.delay = 0;
clearTimeout(this.interval)
},
resume: function() {
this.delay = this.options.auto || 0;
this.begin()
},
handleEvent: function(a) {
switch (a.type) {
case "touchstart":
this.onTouchStart(a);
break;
case "touchmove":
this.onTouchMove(a);
break;
case "touchcancel":
case "touchend":
this.onTouchEnd(a);
break;
case "webkitTransitionEnd":
case "msTransitionEnd":
case "oTransitionEnd":
case "transitionend":
this.transitionEnd(a);
break;
case "resize":
this.setup();
break
}
},
transitionEnd: function(a) {
if (this.delay) {
this.begin()
}
},
onTouchStart: function(a) {
this.start = {
pageX: a.touches[0].pageX,
pageY: a.touches[0].pageY,
time: Number(new Date())
};
// console.log(this.start)
this.isScrolling = undefined;
this.deltaX = 0;
this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;
a.stopPropagation()
},
onTouchMove: function(a) {
if (a.touches.length > 1 || a.scale && a.scale !== 1) {
return
}
this.deltaX = a.touches[0].pageX - this.start.pageX;
if (typeof this.isScrolling == "undefined") {
//判斷是橫向還是樹向滑動
this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(a.touches[0].pageY - this.start.pageY))
}
if (!this.isScrolling) {
a.preventDefault();
clearTimeout(this.interval);
this.deltaX = this.deltaX / ((!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0) ? (Math.abs(this.deltaX) / this.width + 1) : 1);
this.element.style.MozTransform = this.element.style.webkitTransform = "translate3d(" + (this.deltaX - this.index * this.width) + "px,0,0)";
a.stopPropagation()
}
},
onTouchEnd: function(c) {
var b = Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > this.width / 2,
a = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0;
if (!this.isScrolling) {
this.slide(this.index + (b && !a ? (this.deltaX < 0 ? 1: -1) : 0), this.speed)
}
c.stopPropagation()
}
};
//開始調用插件
var slider=new Swipe(document.getElementById('nav'),{speed:500,auto:0,width:100,col:4,});
</script>
</body>
</html>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
app.vue
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive >
<router-view v-if="$route.meta.keepAlive" class="Router"></router-view>
</keep-alive>
</transition >
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive" class="Router"></router-view>
</transition >
<Play></Play>
</div>
</template>
<script>import Play from './components/play'
export default {
name: 'App',
data () {
return {
transitionName: 'slide-left'
}
},
watch: {
'$route' (to, from) {
// 切換動畫
let isBack = this.$router.isBack // 監聽路由變化時的狀態為前進還是后退
if (isBack === true) {
this.transitionName = 'slide-right'
// from.meta.keepAlive = false
// to.meta.keepAlive = true
} else {
// from.meta.keepAlive = true
// to.meta.keepAlive = false
// this.transitionName = 'slide-left'
if (this.$route.path.split('/').length < 3) {
this.transitionName = 'slide-fade'
} else {
this.transitionName = 'slide-left'
}
}
this.$router.isBack = false
}
},
components: {
Play
}
}
</script>
<style>
.Router {
font-family: Roboto, Lato, sans-serif;
position: absolute;
width: 100%;
height: 100%;
padding-bottom: 60px;
transition: all .377s ease;
box-sizing: border-box;
overflow: auto;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}
.ovf {
overflow: hidden;
}
.center {
width: 95%;
margin: 0 auto;
overflow-y: hidden;
}
li {
list-style: none;
}
</style>
路由配置
{
path: '/playListDetail/:id',
name: 'playListDetail',
component: pather => require(['../components/playListDetail.vue'], pather),
meta: {
title: '歌單詳情',
keepAlive: true,
isBack: false
}
},
返回事件
back () {
this.$router.go(-1)
this.$router.isBack = true
}
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
