今天給朋友們帶來更改this指向的三種方法，以及它們的區(qū)別：
一：call用法
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
console.log(this.color);
}
changeColor.call() //不傳參數(shù)默認(rèn)指向window
changeColor.call(window) //指向window
changeColor.call(document) //指向document
changeColor.call(this) //構(gòu)造函數(shù)的this如果打括號調(diào)用默認(rèn)指向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);//結(jié)果wang
// Pet.apply(this,arguments);//結(jié)果wang
}
var dog = new Dog('wang');
dog.speak(); //wang
apply與call的區(qū)別：
接收的參數(shù)不同
apply()方法接收倆個參數(shù)，一個是函數(shù)運行的作用域（this），另一個是參數(shù)數(shù)組。
call()方法第一個參數(shù)和apply()方法的一樣，但是傳遞給函數(shù)的參數(shù)必須一 一列舉出來。
語法：
apply([thisObj [,argArray]]);
調(diào)用一個對象的一個方法，另一個對象替換當(dāng)前對象
call([thisObj [,arg1[,arg2[…,argn]]]])；
說明：
如果thisObj是null或者undefined的時候，默認(rèn)指向window。
如果argArray不是一個有效數(shù)組或不是arguments對象，那么將導(dǎo)致一個TypeError，如果沒有提供argArray和thisObj任何一個參數(shù)，那么Global對象將用作thisObj。
call方法可以用來代替另一個對象的一個方法，call方法可以將一個函數(shù)的對象上下文從初始的上下文改變?yōu)閠hisObj指定的新對象，如果沒有提供thisObj參數(shù)，那么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
//例三：實現(xiàn)函數(shù)珂里化
var add = function(x) {
return function(y) {
return x + y;
};
};
var increment = add(1);
var addTen = add(10);
increment(2) //3
addTen(2) //12
小總結(jié)：
Function.prototype.bind(thisArg) - - ES5
能夠返回一個新函數(shù)，該新函數(shù)的主體與原函數(shù)主體一致，但當(dāng)新函數(shù)被調(diào)用執(zhí)行時，函數(shù)體中的this指向的是thisArg所表示的對象。
Function.prototype.call(this.Arg,val1,val2, …)
調(diào)用函數(shù)執(zhí)行，在函數(shù)執(zhí)行時將函數(shù)體中的this指向修改為thisArg所表示的對象
val1, val2, … 表示傳遞給調(diào)用函數(shù)的實際參數(shù)列表
Function.prototype.apply(thisArg, array|arguments)
調(diào)用函數(shù)執(zhí)行，在函數(shù)執(zhí)行時將函數(shù)體中的this指向修改為thisArg所表示的對象，
array|arguments 表示調(diào)用函數(shù)的參數(shù)列表，使用數(shù)組或類數(shù)組的格式
區(qū)別：
bind與call和apply的區(qū)別：
返回值的區(qū)別：
bind的返回值是一個函數(shù)，而call和apply是立即調(diào)用。
參數(shù)使用的區(qū)別：
bind與call一樣是從第二個參數(shù)開始將想要傳遞的參數(shù)一 一寫入。但call是把第二個及以后的參數(shù)作為fn方法的實參傳進(jìn)去，而fn1方法的實參實則是在bind中參數(shù)的基礎(chǔ)上再往后排。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
在我們平時的設(shè)計工作中，經(jīng)常會需要做一些有動感的畫面，去體現(xiàn)某些產(chǎn)品所具有的運動屬性，比如汽車的速度感、球鞋的運動感等等?？墒怯捎谳d體或是成本的原因，導(dǎo)致客戶沒辦法投入動態(tài)畫面的制作，所以就要求我們只能在靜態(tài)的平面中去創(chuàng)造動感，讓原本不會動的畫面看上去好像也能動起來，這就是今天要為大家?guī)淼膬?nèi)容。
我們先來看一組照片，這些貓的圖片明明都是靜態(tài)的，可是為什么我們看到這些照片的時候，卻能夠明顯的感覺到貓在跳躍的動感呢，這個主要是因為我們的心理作用。
正如佛教里所講的，不是風(fēng)在動，也不是云在動，而是心在動。那些看上去帶有動感的圖片并不是真的在動，也不是屏幕在動，而是我們的心理作用。
所以我們做設(shè)計的時候，就可以很好的利用這一心理作用，去實現(xiàn)一些具有動感的畫面。既然要做動感的畫面，我們需要先了解，關(guān)于運動在物理學(xué)中的定義。
物理學(xué)中的運動，必須具備兩個要素，分別是速度和能量。
那我們就可以總結(jié)出兩種畫面中的動勢，第一種就是具備速度和方向的動勢，比如畫面中這兩張圖片，我們可以很明顯地感覺到，圖片中的主體是正在運動的，并且具有很快地速度和明確的運動方向。
第二種就是靜止的，但具有強烈能量的動勢。比如畫面中這兩張圖片都沒有在動，可是我們也能夠感覺到它的動感。如果說前一種動勢更注重于刻畫運動的速度感，那么第二種則更加注重刻畫一觸即發(fā)的能量感。
那么，我們在平面中應(yīng)該如何去創(chuàng)造動感呢？其實很簡單，因為張力在畫面中不平衡時，便會產(chǎn)生動感。
所謂張力就是畫面中元素向外擴張的心理作用力。
這么解釋可能有些抽象，我們可以將張力與萬有引力進(jìn)行類比。萬有引力就是，任意兩個物體具有通過連線方向上的力相互吸引。而我們可以將張力定義為畫面中任意兩個元素，通過連線方向上的力相互吸引。也就是說畫面中的任意元素都有相互吸引的力。
比如我們在一個畫面中的上下左右各放一個圓點，然后在畫面的正中間放一個較大的點，中間這個點由于均衡地受到上下左右吸引力的作用，所以它所受到的張力是平衡的。
當(dāng)我們將中間這個大點往上移動，大點受到的張力平衡就會被打破，產(chǎn)生了要往下墜的動勢。
根據(jù)萬有引力定律公式，物體所受的吸引力和質(zhì)量是成正比的。
所以我們同樣可以類比到張力中來，畫面中打破平衡的那個元素的質(zhì)量和面積越大，所帶來的動感就會越強烈。
看完了剛才所講的這些，相信大家現(xiàn)在心里大概都會想起一句話，就是聽過很多道理，依然過不好這一生。的確，聽了這么多的理論公式，難免會越聽越懵。而且我們在做設(shè)計的時候，也不可能去測量畫面中每一個元素的大小、間距、方向，也不可能把每一個元素之間的張力進(jìn)行量化，然后再用公式去計算出動感的大小強弱。那大家肯定還會繼續(xù)追問了，那么到底該如何去制造動感呢？
這里我總結(jié)了三點產(chǎn)生動感的原因，分別是基于生活經(jīng)驗與心理認(rèn)知、誘導(dǎo)視線移動，以及非平衡狀態(tài)下產(chǎn)生的視覺沖擊。
我們先來看基于生活經(jīng)驗與心理認(rèn)知，每個人在成長的過程中都會碰到許多人和事，并且對不同的事物會總結(jié)出一套規(guī)律和認(rèn)知，也可以說是刻板印象，所以我們就能感覺到一件事物是運動的還是靜止的。
比如這兩個小人，雖然只是一個輪廓，但是我們卻能感覺到左邊的人是站立的，靜止的，而右邊的人正在走路，是運動中的。
這樣的例子很多，例如書本是靜，車子是動。
樹懶是靜，猴子是動的。
另外由于人類擁有一種組織傾向，所以當(dāng)我們看到某一個運動的瞬間時，會自動腦補中出他運動的過程。比如這張靜態(tài)圖片，相信很多人看到時都會腦補出那個視頻。
但是這里有一個問題，就是不同的人他的生活經(jīng)驗是不同的，對于事物的認(rèn)知和理解也就不同，可能對于一部分人來說這是具有動感的，而對另一部分人來說卻是靜止的。比如剛才那個打籃球的圖片，如果是沒看過視頻的人，當(dāng)然就腦補不出他的動感了。所以對于這種刻板印象的利用，我們需要根據(jù)受眾的具體特征具體分析，千萬不要盲目使用。
接下來我們來講講第二種情況，誘導(dǎo)視線移動。由于運動是相對的，所以我們在看東西的時候，視線移動也可以理解為是物體相對視線發(fā)生了移動。
比如我們在看報紙的時候，從左上角往右下角看，在我們眼睛里出現(xiàn)的畫面是這樣的，從而便產(chǎn)生了好像報紙在動的動感。
最簡單移動的案例就是箭頭，例如這是一條水平的直線，我們會認(rèn)為他是靜止的，而當(dāng)我們在一端加上箭頭之后，我們的眼睛就會隨著箭頭所指方向移動，從而產(chǎn)生動感。
這兩個都是通過一些指向性的圖形進(jìn)行引導(dǎo)視線移動的作品。
接下來我們來說一下第三種情況，非平衡狀態(tài)下產(chǎn)生的視覺沖擊。
比如在天平的兩端各放一只豬，那么這個天平就是處于一個平衡的狀態(tài)。
當(dāng)我們在其中一邊再加一只豬時，天平就會失去平衡，重量更大的一邊會往下倒，直到找到一個新的平衡。
而我們的大腦其實也和天平相似，當(dāng)我們看到一些不平衡的畫面時，我們就會有把它轉(zhuǎn)換為平衡狀態(tài)的傾向，所以動感的產(chǎn)生，也就是大腦腦補不平衡到平衡的這個運動過程。
我們在半空中放一塊石頭，由于這塊石頭受到重力的作用，處于一個不平衡的狀態(tài)，所以我們認(rèn)為他有向下掉的趨勢，直到與地面接觸找到新的平衡狀態(tài)。
如果我們把石頭換成一個氣球，那么情況就相反了，由于氣球受到重力作用的同時也受到了更大的浮力，所以氣球會有往上飄的趨勢。
舉一個更加能說明的例子，其實我們大多數(shù)人或多或少會有一些強迫癥，比如看到這種一只鉛筆沒對齊的畫面就會很難受，特別想把它懟回去。
所以我們就會腦補出這只鉛筆往左移動的過程，從而產(chǎn)生了動感。
這兩個海報都是通過創(chuàng)造一些不平衡的場景帶來刺激感，從而產(chǎn)生動感。例如顛倒的房子和懸空的蒸籠。
經(jīng)過前面的講解，相信大家應(yīng)該對動感是如何產(chǎn)生的，有了一定的認(rèn)識，但是，我們剛剛只是從理論的角度去講解了動感是如何產(chǎn)生的，運用到實際的設(shè)計中可能還是會一頭霧水。那接下來的部分就是真正的干貨環(huán)節(jié)了，去給大家講一些比較實用的制造動感的技巧。
這里總結(jié)了 9 個小技巧，我們一個個來看。
我們在前面提到了當(dāng)我們看到某一個運動瞬間時，我們就會腦補出整個運動過程。那我們就可以反過來，從運動過程中捕捉某一個瞬間，用這一個瞬間來表達(dá)平面中的動感。
這里可以分為兩種情況，一個是捕捉運動剛開始的瞬間，強調(diào)運動剛開始的那種能量感。
這是兩個捕捉運動開始瞬間的例子，兩名運動員都穿好了裝備，雖然還沒開始動，但是卻能感受到一觸即發(fā)的緊張感。
第二種就是捕捉運動過程的某一瞬間，這種方式帶來的動感會比上一種強烈得多。
例如這兩個例子都是捕捉了運動員正在運動中的瞬間。
這種方式所傳達(dá)的動感強弱是由運動物體的動作姿態(tài)所決定的，所以我們需要認(rèn)真比較每一瞬間的動作，選出最適合的一幀。
第二種技巧是傾斜構(gòu)圖，一般橫線和豎線都會給我們一種穩(wěn)定平衡的感覺，而斜線相對于橫線和豎線來說，則會給我們帶來強烈的不平衡感。
例如這些圖片，無論是邁克爾·杰克遜的經(jīng)典舞蹈動作，還是比薩斜塔，都給我們帶來一種不安定、危險、不平衡的視覺沖擊。通過這種不平衡感從而產(chǎn)生動感。
我們觀察這些線，會發(fā)現(xiàn) 45° 時的斜線相對于橫線和豎線的傾斜角度最大，所以 45° 傾斜時不平衡感最強，動感也最強烈。
漫畫中的傾斜構(gòu)圖
在漫畫作品中經(jīng)常會將劇情畫在傾斜的格子中，目的是為了彌補漫畫紙質(zhì)作品的缺陷，強化漫畫內(nèi)容的動感。
電影中的傾斜鏡頭
在電影中也會故意用到傾斜的鏡頭，由于電影本身就是動態(tài)的，所以運用傾斜鏡頭一般是用來強調(diào)危機感、動蕩不安的漂泊感等等。
攝影中的傾斜鏡頭
攝影作品中也會用到傾斜視角，這兩張都是通過傾斜視角強化速度感的例子。
文字傾斜
那么我們看看傾斜在設(shè)計中是如何使用的，首先可以是文字傾斜，這兩個海報的人物主體都是豎直的，通過文字傾斜來增加動感。
主體傾斜
這兩張海報則是保持文字水平排列，將主體進(jìn)行傾斜處理從而帶出動感。
疊加傾斜色塊
我們也可以將文字和主體都水平或者豎直放置，然后添加傾斜的色塊強化動感。
畫面整體傾斜
這種是將包括主體和文字在內(nèi)的畫面整體進(jìn)行同一角度傾斜處理。
多角度傾斜
最后這種是難度比較高的，畫面中出現(xiàn)了多個角度的傾斜對比，畫面十分靈活且動感十足。
接下來看看第三種傾斜技巧，錯位。什么是錯位呢？就像這輛小車一樣，他在運動的過程中，身后會產(chǎn)生的一些虛影錯位，使得畫面中的一部分被破壞了，視覺需要在腦子里想象補充這一被破壞的部分，使畫面還原為原本的樣貌，從而產(chǎn)生運動感。
重復(fù)
錯位這種技巧我們也可以分為幾種類型，首先第一種就是重復(fù)，通過重復(fù)的手法去模擬物體的運動軌跡，讓人腦補運動的過程，從而產(chǎn)生動感。
模糊
第二種就是通過將背景或者是主體進(jìn)行模糊，從而傳達(dá)動感。第一張圖片是通過模糊主體身后的背景去產(chǎn)生動感，而第二張則是通過模糊文字的外輪廓從而產(chǎn)生一種收放的動感。
錯開
第三種是錯開，就是將畫面的某一個部分進(jìn)行錯開處理，讓畫面遭到破壞，需要人腦去修補這部分的破壞，從而產(chǎn)生運動感。
其他
除了上面三種還有許多別的類型，例如通過車輛行駛濺起的水花，融化往下低落的液體等等，都可以造成對畫面的破壞，從而制造動感。
對于集中與發(fā)散我們可以分為兩種，第一種是這種通過線條繪制的發(fā)射或是集中圖案，從一個中心向某一方向或四周擴展，或者是四周向一個中心集中的線條圖案，盯著看會出現(xiàn)一種光耀感，通過光學(xué)效果產(chǎn)生視覺幻想，從而產(chǎn)生視覺動感。
而第二種則是通過物體或圖形的疏密節(jié)奏變化，從而產(chǎn)生出類似擴散或是集中的效果，這種效果會令我們聯(lián)想到河流或是煙霧擴散的情形，從而產(chǎn)生了動感。
當(dāng)擴散的圖案配合上透視的效果，會使得動感變得更加的強烈。
背景
對于這種集中發(fā)散的圖形，我們可以將它作為背景來烘托動感和氛圍。
文字
也可以將文字編排成發(fā)射狀，模擬出那種噴口而出的效果。
主體
或者是將圖形作為主體去表達(dá)特殊的主題。
以透視作為發(fā)散
這兩個海報是比較特別的例子，將放射狀與透視相結(jié)合，體現(xiàn)了很強烈的動感。
接下來講講關(guān)于螺旋的技巧，因螺旋發(fā)展或內(nèi)收形成的曲線，會讓人聯(lián)想到水的旋渦形，視覺上就形成動感，且螺旋曲線的旋轉(zhuǎn)曲度越大，動感就會越強。
另外，密集的螺旋曲線也能給人帶來一種集中或者是發(fā)散的效果，從而也能帶來一定的動感。
這兩張海報是將螺旋曲線作為主體使用，來表達(dá)其特定主題。
這張海報個人比較喜歡，非常靈活地將畫面中的文字和圖片沿著螺旋曲線排布，加上大小的變化，讓畫面產(chǎn)生了一種集中的動感。
這張海報則是將螺旋線作為背景，并將文字放在螺旋曲線間排列。
第六種技巧是波狀曲線的使用。因為曲線的來回反復(fù)扭曲，會令人聯(lián)想起翻滾的海浪。
而且由于曲線本身就具有不平衡的張力，他會有一種向直線轉(zhuǎn)變的趨勢，所以波狀曲線特別適合用來表達(dá)動感。
波狀曲線的曲度越大，他所產(chǎn)生的動感就會越強烈。
對于波狀曲線，我們可以將其用來作為主體或者是背景進(jìn)而表達(dá)動感。
也可以通過將文字做成這種扭曲的效果，從而產(chǎn)生一種文字在扭動的動態(tài)感。
第七種技巧則是對色彩的使用。因為色彩有前進(jìn)感和后退感，所以我們可以利用這一點來制造動感。其中最容易理解的就是使用色彩的漸變，沿著色彩逐漸變化的方向，來誘導(dǎo)人們的視線移動，從而產(chǎn)生視覺上的動感。
這兩個都是利用不同色彩的漸變來引導(dǎo)視線移動，從而產(chǎn)生動感。
我們在前面講過運動是需要能量的，而象征高溫的暖色調(diào)比象征低溫的冷色調(diào)更具備能量感，所以暖色調(diào)比冷色調(diào)更適合表達(dá)動感。
這是一張日本新干線的海報，雖然用的是靜止的列車作為主體，可是鮮紅的背景卻能很好地傳達(dá)出列車的能量感。如果我們將紅色的畫面換成藍(lán)色的話，那種能量感瞬間就沒了，多了些科技的屬性，畫面變得冷靜克制了。
接下來是重心偏移。一般我們編排版面時都會注意版面重心的均衡，將畫面整體的重心放在畫面中間?？墒窃谒茉靹痈挟嬅鏁r，我們卻可以將畫面的重心偏離視覺中心，使畫面形成一種不平衡感，從而產(chǎn)生動感。
我們來看看這兩個海報，都是通過將畫面的重心全都放在畫面的一側(cè)，從而產(chǎn)生了一種很強烈的不平衡感。
另外，由于視覺重力的原因，當(dāng)畫面重心偏上時，能很好地塑造出往下墜的動感?，F(xiàn)在畫面中的這兩個作品都是將重心放在了畫面的上方，我們能感受到畫面中的主體會有一種往下掉的趨勢。
最后一種是蒙太奇的手法。前面我們說過人類天生具有一種組織傾向，當(dāng)我們看到運動的瞬間狀態(tài)時，我們便能腦補出運動的過程。所以通過蒙太奇的手法，將一些不同時刻或狀態(tài)的圖片放在一起，便能使畫面產(chǎn)生動感。蒙太奇手法比起單純使用一張運動瞬間圖片，能承載更長時間的運動和更多的運動內(nèi)容。例如畫面中的這兩個動作，把他們放一起之后我們就可以聯(lián)想到這個小哥從熱身到起跑的過程。
其實漫畫運用的就是蒙太奇原理，通過幾個關(guān)鍵的情景，去傳達(dá)一個完整的劇情。
這些都是運用蒙太奇手法的作品。
以上就是今天的理論部分，接下來我們進(jìn)入案例實操的環(huán)節(jié)，這次我給大家?guī)砹怂膫€案例，分別運用到了傾斜、重心偏移、發(fā)散與集中，以及蒙太奇的手法去塑造動感。希望通過這些案例的演示，能夠讓大家更好地理解今天的內(nèi)容，下面我們就來進(jìn)入案例的部分。
案例一
首先確定好畫面的頁邊距，并且將畫面橫向分為 6 份。
然后將主體，也就是科比的形象，放在畫面正中間，橫向占中間四欄。
接著在科比的下方疊加一個紅色的傾斜色塊，強化科比傾斜的體態(tài)和動感。
從球鞋的名字中提取出關(guān)鍵詞疊在科比下層，并將球鞋的中文名放在英文下方。
將球鞋與介紹性文字做成文字組的形式放在畫面下方 。
由于主標(biāo)題英文被遮擋了一部分，缺失了一些可讀性，所以我們將球鞋的英文名做一個重復(fù)放在左上角，并在右上角添加 logo。接下來我們在背景上疊加一個籃球場的場景。
并將畫面的四周涂上黑色的漸變，強化主體形象。
由于現(xiàn)在畫面和主體都有一些偏暗了，所以我們對整體畫面進(jìn)行稍微調(diào)亮，那么這個案例就完成了。
案例二
這個案例同樣也是一雙運動鞋，但是我們這次利用重心偏移的技巧去塑造動感。
同樣的確定頁邊距，并將畫面橫向分為四欄，將主體放在畫面左上角占上方兩欄。
然后從球鞋的名字中提取出相關(guān)英文放到版面頂部，并置于主體下方。
因為我們要做一個重心偏移的版面，所以我們接下來將所有的介紹性文字按照主體的負(fù)空間排列在版面上方。
為了防止重心的過度偏移，同時和左上角的球鞋做一個對角線的呼應(yīng)，所以我們在版面的右下方放置價格以及球鞋的型號等信息。
然后吸取球鞋的顏色做一個色彩上的呼應(yīng)。這一張球鞋的海報就完成了。
案例三
這個案例我們來做一個放射光線的海報，這個海報內(nèi)容是一款果汁軟糖的促銷海報。
首先確定好頁邊距。
然后我們從這款軟糖的包裝上提取出一個圖形作為畫面主體。然后將軟糖的名字和介紹文案放到這個圖形中。
把圖形按照黃金比例和網(wǎng)格放到畫面中間。
在主體圖形后面疊加放射線條，底下留出一部分空間放置產(chǎn)品圖片及其他信息。
將產(chǎn)品圖片和促銷信息以居中對齊形式排列在畫面下方。
然后我們可以在放射線上添加一些表情愉悅的人物圖片，去強化吃了這款軟糖會很開心的這個動態(tài)過程。
還可以在畫面周圍添加一些可愛的小圖形去烘托氛圍。
最后加上 logo，這個軟糖的促銷海報就完成了。
我們也可以將這個海報做成不同的配色，每一款產(chǎn)品對應(yīng)一個配色。
案例四
這是一個藝術(shù)展的海報，我們通過蒙太奇的手法來表現(xiàn)。
由于展覽主題是過去、現(xiàn)在和中間的一切，所以我們將畫面分成三份，并用運動過程中的三個不同動作來代表著三個階段。
由于第一張圖片的底色偏亮了，所以我們將它摳出來，做一個與另外兩個圖片的相同背景。
將主題和時間這兩個比較重要的信息放在畫面的左上角。
其余信息排列在右下角。那么這個案例就完成了，也是非常簡單的，利用的就是蒙太奇的手法。
本期教程到這里就結(jié)束了，我們來簡單地總結(jié)一下今天的內(nèi)容。首先我們了解了動感是畫面張力不平衡所造成的，以及強調(diào)速度感和強調(diào)能量感的兩種動勢。接下來我們講解了三種產(chǎn)生動感的原因，分別為基于生活經(jīng)驗與心理認(rèn)知、引導(dǎo)視線移動以及不平衡狀態(tài)下帶來的視覺沖擊。最后我們總結(jié)了 9 點實用的小技巧，分別為捕捉動態(tài)瞬間、傾斜、錯位、集中與發(fā)散、螺旋、波狀曲線、色彩、重心偏移、蒙太奇。希望大家能夠掌握好這些方法，讓原本靜態(tài)的畫面也能帶來全新的動感。
文章來源：優(yōu)設(shè)
1.競品分析的定義
從專業(yè)的角度來講，競品分析是通過系統(tǒng)的分析方法去全面了解市場上位于前列的競爭對手的產(chǎn)品，能夠讓設(shè)計師快速了解自家產(chǎn)品所處的位置，從而來針對性的改進(jìn)自身產(chǎn)品的一個方法。簡而言之，就是要站在巨人的肩膀上去思考，以競品分析的形式去學(xué)習(xí)其他優(yōu)秀的產(chǎn)品，從而解決自身產(chǎn)品所存在的問題。
2.為什么要去做競品分析
做一件事情之前一定要思考做這件事的價值和意義，只有你明白其重要和必要性，你才會知道該怎樣去做這件事情，而不是一提起競品分析就找一大堆專業(yè)框架和術(shù)語然后去填內(nèi)容，這樣雖然產(chǎn)出了很多，但是關(guān)鍵性的內(nèi)容點其實還是不清楚。
說直白點，你需要通過這篇競品分析去解決你工作或者創(chuàng)作中遇到的什么問題，帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況：
因此我們要學(xué)會根據(jù)自己的不同需求，去制定不同的競品分析方案，讓分析的內(nèi)容更聚焦。作為UI設(shè)計師來講，通過競品分析為自己的設(shè)計方案提供科學(xué)的理論依據(jù)，為自己贏得話語權(quán)，能夠更好地科學(xué)產(chǎn)出內(nèi)容。
3. 如何尋找競品：
競品的選擇非常重要，如果找到錯誤的競品，那么你所分析的一切結(jié)論可能都引向了一個錯誤的方向。從而讓自己的努力都白費。那么怎樣才能找到合適的競品呢？分為以下三類情況
A.核心服務(wù)與目標(biāo)用戶相同的產(chǎn)品（直接競品）：
這一點是廣大設(shè)計師都能想到的范疇，也稱為直接競品。即提供的核心服務(wù)、市場目標(biāo)方向、客戶群體等與我們的產(chǎn)品基本一致，產(chǎn)品功能和用戶需求相似度極高的產(chǎn)品 。往往是通過業(yè)務(wù)關(guān)鍵詞就能直接搜索到的競品，比如音樂類產(chǎn)品，那么直接在應(yīng)用商店，或者通過專業(yè)網(wǎng)站（易觀千帆等）搜索關(guān)鍵詞“音樂”即可搜索出排行前列的競品。
B.目標(biāo)人群不同，但功能模塊和服務(wù)接近的產(chǎn)品（間接競品）：
這類競品可以找起來并不那么直接，可以通過對應(yīng)功能去逆推擁有此功能的產(chǎn)品，并進(jìn)行相關(guān)搜索。
如果想不到，可以通過“人人都是產(chǎn)品經(jīng)理” “36氪“等關(guān)于產(chǎn)品資訊的網(wǎng)站進(jìn)行查詢，甚至可以通過百度指數(shù)來進(jìn)行發(fā)散思維，看一下跟你關(guān)鍵功能相接近的都有哪些。比如你研究外賣產(chǎn)品，除去餓了么和美團等直接競品，你還可以在分析用戶下單和購買流程中，去分析淘寶和京東等購物產(chǎn)品，也能得到一定的幫助。
C.目標(biāo)人群和服務(wù)都不同，但交互或者視覺有可以參考的產(chǎn)品（關(guān)聯(lián)競品）：
這里所選擇的產(chǎn)品，定位和領(lǐng)域可以都完全不同，但是你要從這款產(chǎn)品中得到啟發(fā)，從而讓你的產(chǎn)品能夠擁有其他競品不同的特點或者功能模塊。有一個很典型也熟知的的案例，就是衛(wèi)龍辣條的設(shè)計案例，在衛(wèi)龍推出之前，可以說是沒人會想到辣條會和高端扯上關(guān)系，但是衛(wèi)龍就是借鑒與其領(lǐng)域完全不同的蘋果設(shè)計去做，從而在包裝上獨樹一幟，從而吸引人們注意取得成功。因此通過不同領(lǐng)域跨行業(yè)的產(chǎn)品有時候也可以找到不錯的思維方向。
4.如何進(jìn)行商業(yè)分析：
進(jìn)行商業(yè)分析，這里只提及到三個基本選項：商業(yè)背景、產(chǎn)品盈利模式以及用戶人群。通過這三個基本要素，你能對所研究的競品有一個大概的了解。當(dāng)然深入了解還需要其他平臺（官網(wǎng)網(wǎng)站、36Kr等)來查閱更多的相關(guān)性資料，下列是對QQ音樂商業(yè)背景的簡要分析。
5. 如何進(jìn)行交互分析：
我們在做交互分析時，我們需要進(jìn)行必要的兩點分析：用戶路徑和交互維度。
用戶路徑：指用戶從某個開始行為事件直到結(jié)束事件的行為路徑，即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說，我們看看排行前列的競品是怎么做的。通過相應(yīng)的體驗和對比分析，我們就可以找出這其中符合我們產(chǎn)品性質(zhì)的最優(yōu)解，從而提高我們的登錄注冊效率。
交互維度：交互維度和用戶路徑有所區(qū)別。這一層需要弄清楚產(chǎn)品的核心路徑，從而能夠更好的解析產(chǎn)品各個層面的邏輯關(guān)系，這就需要我們以用戶的角度去逐個體驗，整體聯(lián)系，隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細(xì)節(jié)，怎樣分享的，怎樣展示的，比如音樂軟件進(jìn)行截屏后和點擊喜歡按鈕后的反饋是怎樣的。
6. 如何進(jìn)行視覺設(shè)計：
在進(jìn)行視覺分析時，有一點需要注意，如果你需要詳細(xì)分析某一模塊，請用手機尺寸截圖后拿到設(shè)計軟件中進(jìn)行測量，不要光靠眼睛觀察，很多時候的小細(xì)節(jié)我們只有在手動測量后才能感受到，比如控件的尺寸大小，間距的大小，以及顏色的取值，都需要精準(zhǔn)測量后才能得出靠譜的結(jié)論。
怎樣進(jìn)行視覺分析呢，我比較推薦從一個app 視覺語言最基本的五個維度去分析，即“形色字構(gòu)質(zhì)”
最近以音樂APP進(jìn)行了一次競品分析，以QQ音樂APP來舉例進(jìn)行分析（當(dāng)然競品分析并不能只分析一個，而應(yīng)該根據(jù)你需要的功能找多個競品進(jìn)行對比分析，才能看到更多的維度，這里只拿一個舉例）：
6.1 圖形元素的分析
首先我們以形進(jìn)行分析，形即圖形元素，具體來講即LOGO和圖標(biāo)。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標(biāo)整理歸納如下：
可以看到整體的圖標(biāo)色調(diào)更加清新，造型設(shè)計更加圓潤，未選中狀態(tài)的線形圖標(biāo)則采用4px的描邊，粗線形描邊讓整體界面風(fēng)格顯得更加穩(wěn)重的同時對用戶的干擾也較小。新版的圖標(biāo)界面讓界面保持穩(wěn)重的同時又富有活力。
6.2 色彩體系的分析
其次則是對色這一類別進(jìn)行分析，顏色其實是對于品牌調(diào)性有很大的影響，比如一想起QQ音樂就知道主色是綠，一想起網(wǎng)易云音樂就知道主色是紅，對用戶的記憶點更深刻。通過截屏測量進(jìn)行分析，得出整體的顏色如下（由于手機屏幕的色差原因，不可避免會有些許誤差）
從局部來看，分析顏色最重要的一點就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色，觀察成熟的產(chǎn)品是怎樣用顏色（和字重）去區(qū)分層級關(guān)系的。
可以看到，用主色和三種輔色即可區(qū)分界面的整個層級關(guān)系，由此思考我們在制作自己的界面時也避免用太多的顏色，造成界面太過花哨。（顏色的具體色值可能有些許誤差，更重要的是看顏色層級關(guān)系）
6.3 字體體系的分析
接下來是字的分析，字即字體體系，可具體到字體和字號。設(shè)計中字體一般來講是蘋方，字號則根據(jù)設(shè)計師的定義來進(jìn)行相應(yīng)的規(guī)范。通過頁面的測量分析，可以拿到其具體的字號大小層級分析。（以下定義基于750的設(shè)計尺寸）
對于單個界面的分析，個人覺得要帶有思考的眼光去看待，比如在首頁中字號其實分配過多，像“更多”這種按鈕就不應(yīng)該再分一個字號，字號太多整體就顯得有一點點亂了。雖然大廠的設(shè)計能在一定程度上給予我們參考，但并不是說他的每一個設(shè)計都是正確的，我們要學(xué)會用審視的眼光去看待出現(xiàn)在身邊的設(shè)計。
6.4 界面構(gòu)成分析
界面構(gòu)成即界面的元素大小以及他們的布局，例如有時候我們不知道一個標(biāo)準(zhǔn)的搜索框的長寬具體多少才是合適的，這就需要我們?nèi)シ治銎渌墒斓纳虡I(yè)產(chǎn)品，通過測量來知道具體的數(shù)值，從而督促自己進(jìn)行正確的設(shè)計。這里選取了一個默認(rèn)的首頁進(jìn)行分析。
將一個頁面用右邊的形式進(jìn)行原型化，去掉干擾可以把結(jié)構(gòu)看得更清楚。間距之類的也可以通過軟件進(jìn)行測量?？梢钥吹絈Q9.0版本的去線化設(shè)計，利用大間距來區(qū)分各個模塊，去掉了其他的干擾元素，整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統(tǒng)一的圓角化設(shè)計也讓整體設(shè)計符合流行趨勢，顯得更活潑。
6.5 質(zhì)感與風(fēng)格分析
關(guān)于界面的質(zhì)感則是不同于扁平化的一個設(shè)計，即有的頁面在你看來細(xì)節(jié)會更豐富，層級會更深。界面質(zhì)感通過漸變，疊加，透明度等不同方式來呈現(xiàn)，比如在QQ音樂中的會員界面卡片，則體現(xiàn)了微質(zhì)感：
上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質(zhì)感，讓整個界面顯得更精致。當(dāng)然，疊加的圖案都是與內(nèi)容相關(guān)的，不能為了疊加而疊加。包括下方的權(quán)益圖標(biāo)，也采用了漸變的方式來讓整個圖標(biāo)顯得更精致和有質(zhì)感。我們再處理質(zhì)感的時候也可以用這種方式來進(jìn)行。
以上通過“形色字構(gòu)質(zhì)”來分析是屬于單個分析，相當(dāng)于去拆解一個成熟產(chǎn)品中的每一個細(xì)節(jié)點，從而去學(xué)習(xí)和吸收。我們還要學(xué)會進(jìn)行對比分析。把單獨某一個功能模塊拎出來，通過不同類型的對比從而歸納出這一類的設(shè)計方法和樣式，進(jìn)而總結(jié)相應(yīng)規(guī)律。
比如某一天你需要設(shè)計一個歌單列表，你此時就需要分析所有TOP排行的歌單列表，看看分別都有什么，從而總結(jié)歸納出結(jié)構(gòu)來，再進(jìn)行分類。
通過分析提煉，形成以下結(jié)論并進(jìn)行相應(yīng)的概念風(fēng)格展示設(shè)計：
這樣，我們最后制作出來的方案才能涵蓋比較全的解決方案，從而能夠更好的助力設(shè)計產(chǎn)出。上圖的產(chǎn)出可能稍顯簡陋，但只是做一個簡單的示例，真正的產(chǎn)出應(yīng)該更加有細(xì)節(jié)和落地，也要結(jié)合自己的工作需求做相應(yīng)調(diào)整。
7.關(guān)注競品的版本迭代和用戶評價：
關(guān)注版本更迭，閱讀競品版本更新的詳細(xì)說明，你可以從中得出版解決了什么問題，提升了哪些體驗，添加了哪些功能，融合了什么流行的設(shè)計趨勢。產(chǎn)品迭代就是團隊通過用戶需求對某個產(chǎn)品不斷完善的一個過程。迭代對于一個產(chǎn)品來說是至關(guān)重要的，一個產(chǎn)品如果不想被對手超越，就必須不斷的對版本進(jìn)行更新迭代。
除了關(guān)注具體的內(nèi)容，你還可以觀察版本更新的提示信息，例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你，從而讓你更加情愿去更新，提升新版的使用率。
用戶評價則更不用說，產(chǎn)品的最終服務(wù)對象就是用戶，用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價，吸收好的建議，屏蔽無腦的意見，從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網(wǎng)站（https://appbot.co/）去查詢。
總結(jié)
以上的篇幅較長，看下來可能會有一些累，那么此篇文章提及到的點在這里回顧一次：
1.競品分析的定義-站在巨人的肩膀上去學(xué)習(xí)；
2.為什么做-基于自己的目的去進(jìn)行對應(yīng)的競品分析，分析的最終目的是解決自己在設(shè)計過程中遇到的問題；
3.競品分析分為三個層面：視覺分析、交互分析以及商業(yè)分析；
4.怎樣進(jìn)行商業(yè)分析（商業(yè)背景、盈利模式、用戶人群）；
5.怎樣進(jìn)行交互分析 （用戶路徑、核心路徑、交互細(xì)節(jié)）；
6.怎樣進(jìn)行視覺分析 （從“形色字構(gòu)質(zhì)”五個維度去分析以及如何對比分析應(yīng)用）；
7.競品的迭代和用戶評價的重要性。
自己有一個小習(xí)慣，看完每一篇文章，總會告訴自己一定要在腦海里回顧一遍，思考一下這一篇文章到底有什么觀點是自己之前沒有想到的，哪怕只有一點是沒觸及到的知識盲區(qū)，那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。
寫這篇文章的目的是給自己的競品練習(xí)做一個總結(jié)，以輸出倒逼輸入是一種比較有效的學(xué)習(xí)方法。但基于自己的水平有限，在某些分析的地方仍然存在不足和疏漏之處，希望大家諒解并及時交流。感謝大家看到這里，希望大家每天都進(jìn)步～
轉(zhuǎn)自：站酷-進(jìn)擊的M
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
彈窗在設(shè)計中運用的非常廣泛，基本上每個應(yīng)用都會涉及到。恰好這段時間我也在整理公司設(shè)計組件這一塊，所以就想總結(jié)分享一下
設(shè)計師都會使用彈窗，但對于彈窗背后的分類及運用可能還不是特別了解，在寫這篇文章之前，我查看了很多應(yīng)用及資料，所以下面會有大量的案例，相信大家看完可以對彈窗的認(rèn)識更明確，做設(shè)計規(guī)范的時候也能有自己的想法。
現(xiàn)在的彈窗分為兩種，一種是模態(tài)彈窗（重提示），一種是非模態(tài)彈窗（輕提示）。
常見的模態(tài)彈窗：Dialog/Alert、Actionbar、Popover/Popup
常見的非模態(tài)彈窗：Toast/Hud、Tips、Snackbar、
Dialog/Alert 對話框
對話框是我們常用的彈窗，安卓開發(fā)語言是Dialog，iOS開發(fā)語言Alert，它通常出現(xiàn)在頁面的中間，對話框/警示框的類別非常多，對用戶的干擾比較大。前面之所以說模態(tài)彈窗是一種重提示，是因為它需要用戶主動觸發(fā)選擇才可以繼續(xù)當(dāng)前的操作。
① 信息-選擇確定
特點：這類彈窗通常是一些系統(tǒng)功能的授權(quán)、版本更新、消息通知、重要提示等，通常只有1～3個主按鈕，只需要用戶進(jìn)行簡單的選擇。
下圖舉例分析：
iOS詢問是否刪除APP，就屬于重要提示彈窗，它一般會用在像刪除、確認(rèn)提交...一些比較重要的功能操作中。
小紅書的這個是否允許使用網(wǎng)絡(luò)彈窗，大家一定在許多APP中都見過，這屬于一個系統(tǒng)自帶的授權(quán)彈窗。
馬蜂窩與天貓的消息提醒彈窗，一個屬于初次使用APP時，系統(tǒng)自帶的彈窗，一個屬于使用后期APP為了推送消息，主動提示你開啟消息通知。
有錢花和愛奇藝的版本升級彈窗，都屬于偏運營類的彈窗，這一類的彈窗通常會弱化暫不升級的按鈕，突出升級主按鈕。
② 信息-輸入勾選
特點：這類彈窗通常是輸入一些比較少的信息或者勾選信息，常用于備注輸入、規(guī)格選擇、分組選擇等，通常只有確定和取消兩個按鈕。
下圖舉例分析：
微博對于已關(guān)注人的分組及備注，都屬于信息輸入及勾選類彈窗，操作通常都比較簡單。
③ 信息-傳達(dá)展示
特點：這類彈窗通常是一些廣告、紅包優(yōu)惠、節(jié)日活動等一些運營類彈窗，主要是吸引用戶點擊及參加活動，這類運營彈窗通常會設(shè)計的比較吸引人，造型各異，會突出領(lǐng)取、查看等大按鈕，弱化關(guān)閉按鈕。
下圖舉例分析：
拼多多和餓了么這類的紅包優(yōu)惠彈窗，就不多說了，大家都懂，它們最主要的目的就是吸引用戶點擊，提升購買率。
美團的變黃送好禮彈窗，屬于一次比較大的品牌升級，它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設(shè)計都非常清晰，視覺感很強。
支付寶的這個猜世界杯贏螞蟻積分的彈窗，屬于活動彈窗，它的整體設(shè)計非常貼合主題。
Actionbar操作欄
Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出，它的操作及信息會比對話框類型的彈窗更多更復(fù)雜。這種當(dāng)前頁面的下拉彈窗好處就是，可以讓用戶清楚的感知當(dāng)前的操作，比跳轉(zhuǎn)到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。
① Action Views操作視圖
特點：這類視圖彈窗通常占屏比較多，以文字、圖標(biāo)等形式展示各種功能，也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出，不太強調(diào)歸屬，大多出現(xiàn)在購買、支付、分享等場景。
下圖舉例分析：
百度網(wǎng)盤的這個+號擴展彈窗比較特殊，它也可以說是浮層，占滿整個屏幕，它最吸引人的還是它的小動效。
京東購買時的彈窗和支付寶付款時的彈窗，都是比較典型的，在各種電商產(chǎn)品及付款頁面用的非常多。
轉(zhuǎn)轉(zhuǎn)這個的鍵盤與輸入為一體的彈窗，設(shè)計的非常人性化，讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。
網(wǎng)易云音樂的分享彈窗就是典型的以文字與圖標(biāo)來展示功能的。
微信讀書的底部閱讀設(shè)置彈窗，比較特殊，為了使用戶沉浸閱讀，它是比較隱藏的，而且非常輕量化。
② Action Sheets 操作列表
特點：操作列表相對于操作視圖，它更單一。主要是以文字展示功能按鈕，重要敏感的功能操作一般會用主題顏色或紅色顯示，主要運用在一些日?？丶?、功能選擇、刪除、保存等場景。
下圖舉例分析：
Keep的選擇日期，屬于iOS原生控件，非常常見。
淘寶的選擇地址彈窗，整個展示的非常清晰全面，而且用戶每選擇一項，就會有相應(yīng)的顯示。
支付寶和天貓超市的兩種列表彈窗，就不多說了，簡單的功能選擇都會采用這種。
③ 抽屜式彈窗
特點：這種抽屜式彈窗一般從左右兩邊彈出，經(jīng)常運用在一些導(dǎo)航擴展和目錄展示中，它能承載比較多的信息，基本上都是用來放一些不太常用的功能。
下圖舉例分析：
微信讀書及一些其他閱讀類產(chǎn)品，由于目錄很長，而且一般是從上到下瀏覽的，所以基本都采用了這種抽屜式彈窗。
小紅書的這個抽屜式彈窗，以圖標(biāo)和文字的形式展示了一些不是很常用的功能，為我的頁面節(jié)約了不少空間。
Popover/Popup 浮層
Popover是ios的開發(fā)語言，popup是安卓的開發(fā)語言，浮層是指，用戶點擊某個功能后浮出一個臨時氣泡對其作出補充，它通常會伴隨著半透明的遮罩或者投影襯底，用戶需要點擊功能區(qū)域操作，或者點擊空白處取消，才能進(jìn)入下一步操作。它與上面操作欄的最大區(qū)別就在于，它更強調(diào)歸屬，可以出現(xiàn)在頁面的任何地方，而操作欄一般只出現(xiàn)在底部，不強調(diào)歸屬。
① 指向浮層
特點：這類的浮層一般伴隨有小三角指向，強調(diào)歸屬。氣泡里面的功能通常以單一的文字或文字與圖標(biāo)結(jié)合的形式來展示，主要運用在頂部加號補充、復(fù)制、分享轉(zhuǎn)發(fā)等場景。
下圖舉例分析：
支付寶和美團的頂部加號補充浮層，展示形式是差不多的，只是UI樣式不一樣，一個是白色氣泡黑色半透明遮罩，一個是深灰色氣泡。
微信讀書和微信的選擇文字氣泡，在文字復(fù)制中很常見，通常會與其他轉(zhuǎn)發(fā)收藏小功能一起出現(xiàn)。
② 導(dǎo)航篩選浮層
特點：所謂導(dǎo)航篩選，自然是與導(dǎo)航分不開的，再加上浮層是比較強調(diào)歸屬的，所以它通常會與導(dǎo)航連在一起，一般出現(xiàn)在頂部。
下圖舉例分析：
美團的導(dǎo)航篩選，因為選項及開關(guān)很多，所以它的底部會有兩個主按鈕，一個完成，一個重置。
餓了么的這個只有一個功能選項，所以它一般是直接選擇就收起浮層了。
③ 引導(dǎo)浮層
特點：引導(dǎo)浮層的作用就是引導(dǎo)用戶更好的使用產(chǎn)品及交互，降低用戶的學(xué)習(xí)成本。它通常會出現(xiàn)在用戶首次進(jìn)入APP的時候，一般只會出現(xiàn)一次，點擊空白位置或我知道了浮層就會消失。
下圖舉例分析：
QQ音樂與微醫(yī)的引導(dǎo)浮層都是用戶首次進(jìn)入應(yīng)用時，給出的功能搬家提醒浮層。
Toast/Hud 提示框
Hud是ios的控件名詞，Toast是安卓的控件名詞，它們都屬于一種輕提示，給予用戶及時反饋，讓用戶知道自己當(dāng)前所處的狀態(tài)。
Hud一般只出現(xiàn)在屏幕的中央，以毛玻璃的樣式表現(xiàn)，內(nèi)容展示比較富豐富。
Toast可以出現(xiàn)在屏幕任意位置，通常以黑色半透明的小框來表現(xiàn)，內(nèi)容一般是純文字提示或者文字與圖標(biāo)結(jié)合提示。
① 狀態(tài)提示
特點：狀態(tài)提示的Toast，它們一般都是反饋用戶當(dāng)前操作的狀態(tài)，只出現(xiàn)1到2秒就會自動消失，場景一般是關(guān)注成功、密碼錯誤、音量提示、靜音、清除緩存等。
下圖舉例分析：
移動的屬于操作遇阻提示。
京東的屬于操作成功反饋。
iOS的音量控制屬于毛玻璃Hud。
微信的清除緩存屬于正在操作狀態(tài)。
② 按鍵提示
特點：按鍵Toast提示與狀態(tài)提示不同，它們一般自動出現(xiàn)或者點擊觸發(fā)才會出現(xiàn)，用于對功能點的補充說明，讓用戶對功能有更深的了解。
下圖舉例分析：
螞蟻森林里點擊樹木就會出現(xiàn)相關(guān)信息，當(dāng)然它也會自動出現(xiàn)，點擊其他區(qū)域也會自動消失。
知乎的消息標(biāo)簽不僅有小紅點提示，還會在上方自動出現(xiàn)數(shù)字提示。
Snackbar
Snackbar是Android中的一個控件。它一般會在超時自動關(guān)閉或者在屏幕上滑動關(guān)閉，它沒有Toast那么輕量，設(shè)置出現(xiàn)的時間會比Toast長，而且可以點擊按鈕進(jìn)行交互。
下圖舉例分析：
UC瀏覽器的Snackbar，是在提示用戶上滑，來查看更多內(nèi)容，它需要滑動或者超時才能關(guān)閉。
京東的Snackbar，是在為用戶推薦商品，提示用戶點擊箭頭來查看喜歡的商品，它比UC瀏覽器多了一個關(guān)閉的按鈕。
Tips提示
Tips與Snackbar最主要的區(qū)別就是：Tips它是內(nèi)嵌在頁面上的，而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發(fā)關(guān)閉按鈕或點擊進(jìn)入下級頁面才會消失，一般用于需要用戶感知到的通知信息，或者植入廣告。
下圖舉例分析：
百度網(wǎng)盤在下載視頻時，就會出現(xiàn)一個Tips的提示，讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告，但它抓住了用戶的場景及心理，觀看廣告的幾率大大提升。
愛奇藝的Tips提示就屬于重要通知提示了，提示用戶VIP即將到期，續(xù)費可優(yōu)惠，它們都有一個主按鈕及關(guān)閉按鈕，需要用戶主動觸發(fā)提示才會消失。
規(guī)范總結(jié)
目前的彈窗樣式非常多，你能想到的，你想不到的基本都可以技術(shù)實現(xiàn)。但這同時也帶來一個問題，那就是“不規(guī)范”。以上提到的彈窗種類，你只需要選擇符合你產(chǎn)品要求的幾個類型，最好不要在一個產(chǎn)品中運用多個同種類型的彈窗，否則后期會很難規(guī)范及組件化，當(dāng)然運營廣告類彈窗可以另當(dāng)別論。
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
一、搭建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
創(chuàng)建一個腳手架項目（每次創(chuàng)建需要）
eg:這時在命令行中有需要你填的信息{
你的項目名；
你的項目描述；
還有你想是否下載的插件（y/n）；
}
4.使用 npm run dev來運行項目
就這樣，一個簡單的vue開發(fā)項目模板就這樣下載完成了。
eg：
i 是install 的簡寫。
全局安裝依賴：
cnpm i 依賴名
1
局部安裝依賴：
cnpm i -D 依賴名
1
二、vue-router
一般事先安裝模板時，已經(jīng)安裝上了。
可以查看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: [
// 一進(jìn)入就顯示頁面
{
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: '系統(tǒng)首頁' }
},
{
path: '/biaoge',
component: pather => require(['../components/page/biaoge.vue'], pather),
meta: { title: '基礎(chǔ)表格' }
},
{
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: '權(quán)限測試', 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 獲取數(shù)據(jù)了
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、然后需要手動創(chuàng)建一個文件夾store在src目錄當(dāng)中，
接著在store文件夾中創(chuàng)建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]')
}
},
{ //從這一段上面是默認(rèn)的！不用改！下面是沒有的需要你手動添加，相當(dāng)于是編譯識別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>
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
設(shè)計概要（Design briefs），也可以理解為設(shè)計簡報、設(shè)計說明文檔。設(shè)計概要負(fù)責(zé)說明設(shè)計的目標(biāo)、設(shè)計的方向風(fēng)格、不同階段及對應(yīng)的里程碑（指標(biāo)）。
簡而言之，設(shè)計概要是對本次設(shè)計項目的簡要概括，可能是一份文檔，或者一組文件內(nèi)容，其中包括設(shè)計的幾個關(guān)鍵概念如項目描述、項目范圍、項目目標(biāo)，目標(biāo)受眾、風(fēng)格外觀、預(yù)算時間安排。那么我們所整理的設(shè)計概要是提給誰看的呢？按照原作者觀點是增進(jìn)設(shè)計師和需求方的理解及信任。作者的觀點是建立在服務(wù)甲方的基礎(chǔ)上提出的，因為作者所屬領(lǐng)域為平面設(shè)計領(lǐng)域，偏向創(chuàng)意性設(shè)計活動，因此通過建立共同目標(biāo)，統(tǒng)一想法更容易創(chuàng)造出高滿意度的方案。
但事實上設(shè)計概要不止于此，它不應(yīng)該被局限在平面設(shè)計領(lǐng)域，雖然作者是以平面設(shè)計師的身份來普及這個觀念（傾向提點平面廣告類設(shè)計工作者，而不是UI/UX領(lǐng)域），但事實上其中很多角度都是從設(shè)計本質(zhì)及設(shè)計工作的協(xié)作本質(zhì)上提出的，它也可以被我們移植到UI/UX領(lǐng)域。當(dāng)我讀完這篇文章，我發(fā)現(xiàn)了設(shè)計概要一個更加重要的功能，那就是幫助UX設(shè)計團隊梳理關(guān)鍵工作，建立共同目標(biāo)，提高設(shè)計工作的效率，促進(jìn)團隊成員的協(xié)作與信任。（從設(shè)計團隊角度）
當(dāng)然如果從甲方角度考慮，設(shè)計簡報依然可以用于UIUX領(lǐng)域，比如向leader提案，以及在項目初期向外包方展示設(shè)計說明，增進(jìn)溝通交流，以保證設(shè)計師對需求的理解，同時更展示了設(shè)計人員的專業(yè)性。
總之設(shè)計概要適合在設(shè)計流程的前期被組織，并分享至團隊和需求方，增進(jìn)團隊的凝聚力，促進(jìn)創(chuàng)意的發(fā)生，展示團隊專業(yè)性及增加需求方與設(shè)計人員的理解與信任。設(shè)計概要與最終提案實際上是一次完整的設(shè)計活動的首與尾，兩者應(yīng)當(dāng)相互對應(yīng)，設(shè)計結(jié)果應(yīng)當(dāng)圍繞最初定義的目標(biāo)進(jìn)行，設(shè)計概要更像是設(shè)計思維的理解和定義階段，把我們面臨的問題，假設(shè)的目標(biāo)呈現(xiàn)出來，以便在接下來的設(shè)計過程中精準(zhǔn)打擊，去解決設(shè)計概要中提到的問題或者目標(biāo)。
下面開始正文。這里是帥氣的分割線
在過去18年的廣告設(shè)計工作中，我逐漸意識到這個行業(yè)里最好的事情就是與你合作的人——作家，藝術(shù)總監(jiān)，用戶體驗和用戶界面設(shè)計師，擁有出色的有創(chuàng)意的大腦，卓越的才能，不同的心態(tài)。
當(dāng)他們有清晰的指導(dǎo)和足夠的自由與時間時，他們往往能迸發(fā)出好的想法，提出創(chuàng)意性的解決方案。但只要是缺乏指導(dǎo)，各種相互矛盾的指示，混亂的目標(biāo)及緊迫的時間，將導(dǎo)致設(shè)計師無法產(chǎn)出優(yōu)秀的方案。
我多年來一直在觀察這個現(xiàn)象，但我不知道該如何解決。一開始，我很難將客戶需求好創(chuàng)意輸出完美的結(jié)合，隨著時間流逝，我逐漸明白，這一切都因為我們沒有一個清晰地設(shè)計概要。從客戶的需求文檔開始，我們從中收集信息建立我們的總的設(shè)計概要，然后以此總概要來進(jìn)一步細(xì)分為具體的概要，如視覺設(shè)計概要、體驗設(shè)計概要、布局排版設(shè)計概要等。
沒有任何東西可以取代一份準(zhǔn)確詳細(xì)的設(shè)計概要。沒有任何電子郵件或者個人會議可以取代創(chuàng)意概要。如果缺少基本信息，你無法開始任何工作，無法估算資源，無法保證最后期限。
如果認(rèn)真對待，設(shè)計概要就是任何創(chuàng)造性工作的關(guān)鍵。主要問題是客戶和設(shè)計師在某些情況下都被低估了。設(shè)計行業(yè)變得如此龐大且不斷擴張，任何人都可以稱自己為設(shè)計師，任何人都可以收取任何費用。因此，需要特定流程的真正的設(shè)計被置于次要地位，完全以價格來評判。雖然我支持競爭并且完全理解并非每個公司或個人都能獲得同樣的預(yù)算，但它仍然對整個行業(yè)不利。
設(shè)計概要是一個很關(guān)鍵的部分，應(yīng)當(dāng)在正式設(shè)計開始前就組織好，但在一般設(shè)計流程中，它經(jīng)常會缺失，通常我們認(rèn)為我們一切都準(zhǔn)備好了，認(rèn)為我們的方案沒有問題可以直接開始設(shè)計了，但事實往往相反。
什么是概要（brief）？
“概要”一詞來源于軍事術(shù)語，在軍事術(shù)語中，簡報被定義為“事先給出具體指示或信息的行為”?！八幸粋€具體的結(jié)構(gòu)，簡短扼要，包括所有必要的資信息，但不多，并包括一項既定的任務(wù)和要完成的結(jié)果，但有足夠的自由來適應(yīng)局勢(任務(wù)摘要)。
當(dāng)指示部隊接管敵方陣地時，將軍可能會給出如何執(zhí)行以及考慮哪些因素的指示，但不會說把右腳放在左腳前面，重復(fù)這個動作100米（前進(jìn)一百米），然后右轉(zhuǎn)，等等。軍事簡報只給出一項任務(wù)，留給個人決定的空間。同樣，creative briefing也不是一個描述創(chuàng)意過程的詳細(xì)用戶手冊。它也不是對預(yù)期結(jié)果的描述。創(chuàng)意概要是一個框架，它可以通過提供足夠的指導(dǎo)來推動創(chuàng)意過程，使創(chuàng)意保持在正確的軌道上，并為創(chuàng)意提供足夠的自由。（譯者注：核心是指導(dǎo)列表，且保證足夠的自由，只提供框架，不干擾創(chuàng)意執(zhí)行）
為什么我們在創(chuàng)作過程中需要概要？
如果我們有一個需要別人解決的問題，我們需要創(chuàng)意簡報和創(chuàng)意簡報用作說明，就是這么簡單。當(dāng)我們要進(jìn)行創(chuàng)意活動時我們會寫創(chuàng)意概要，列出關(guān)鍵的點，這意味著我們此時已經(jīng)清楚存在的既定問題，我們列出問題然后才知道去解決什么。當(dāng)然，也只有在別人要執(zhí)行設(shè)計活動時，我們才需要去寫一份概要，以供說明。 （簡單理解，從某種角度，設(shè)計概是要寫給需要執(zhí)行設(shè)計的人員看的，我們需要別人去解決問題，而概要負(fù)責(zé)說明這些問題。）
什么是設(shè)計概要？
設(shè)計概要是描述設(shè)計項目的目標(biāo)和里程碑的書面文檔。它是設(shè)計過程中至關(guān)重要的一部分，因為它有助于在客戶和設(shè)計師之間建立信任和理解。它和合同一樣重要，是雙方的重要參照點。它確保重要的設(shè)計問題在設(shè)計師開始工作之前就被考慮和討論。
根據(jù)不同工作范圍和不同產(chǎn)品領(lǐng)域，設(shè)計概要可以由許多元素組成，每個元素都詳細(xì)描述某個范圍的特定部分。
但為了保持簡潔，以下五個要素不容忽視:
1.項目描述
簡單描述一下我們需要做什么:我們對任務(wù)了解多少?期望是什么?一個新的設(shè)計?一個新的想法?現(xiàn)有的網(wǎng)站重新設(shè)計?我們需要用它來解決什么問題?這最多只能是一句話。
譯者注：項目描述是對你所進(jìn)行的項目的最簡潔的概括，比如"我們在做一個共享打車的產(chǎn)品"。當(dāng)然可以在這基礎(chǔ)上豐富一點如：“我們在做一個服務(wù)白領(lǐng)人群、針對夜間打車場景的共享打車產(chǎn)品”，后面這個描述增加了用戶和場景，但整個描述仍然是清晰易懂的。項目描述一般由戰(zhàn)略層相關(guān)人員來定義，如公司老大，產(chǎn)品經(jīng)理等。當(dāng)然對于redesign項目，則需要設(shè)計師自己明確項目目標(biāo)，然后去定義一個簡潔的項目描述。
2.項目范圍
根據(jù)項目的大小，這里需要提供更多的細(xì)節(jié)。什么是預(yù)期目標(biāo)，有多少頁多少內(nèi)容量，它將具有什么功能和特性。你需要了解更多的細(xì)節(jié)來服務(wù)一個新的企業(yè)品牌項目，而不是一個簡單的網(wǎng)站。報價將主要依據(jù)這一環(huán)節(jié)。盡可能具體是至關(guān)重要的。
此外，在互聯(lián)網(wǎng)世界中，客戶相信設(shè)計師能夠解決所有問題，從UI到UX，最終開發(fā)一個完整的網(wǎng)站并解決SEO排名（seo即搜索引擎優(yōu)化的意思），非常重要的是，盡早說明哪些內(nèi)容在范圍內(nèi)，哪些不包括在范圍內(nèi)。
譯者注：項目范圍即范圍層中的內(nèi)容規(guī)格。我們在產(chǎn)品設(shè)計的五個層面中第二層中可以了解這部分內(nèi)容，內(nèi)容規(guī)格是對產(chǎn)品目標(biāo)的拆解，細(xì)化為具體的內(nèi)容和功能，例如我們設(shè)計一款打車應(yīng)用，它可能會包含，順風(fēng)車（對應(yīng)順路接送服務(wù)）、普通快車（對應(yīng)出租車服務(wù)）、高端用車（對應(yīng)企業(yè)服務(wù)高端出行領(lǐng)域）這三種規(guī)格。
3.目標(biāo)
通常情況下，你的客戶并不知道他們的目標(biāo)，也不知道設(shè)計工作會如何影響他們。但概括下來有以下三種不同類型的目標(biāo)。
業(yè)務(wù)目標(biāo):客戶給出的一個可衡量的目標(biāo)，例如增加銷售、市場份額、滲透率、減少X%的客戶流失率等KPI。
營銷目標(biāo):幫助客戶實現(xiàn)商業(yè)目標(biāo)中一切與營銷相關(guān)的事情。幫助客戶提升客戶參與度的活動:意識-考慮-偏好-試用-購買-忠誠-宣傳。（對標(biāo)用戶生命周期模型：獲客、留存、激活、變現(xiàn)、傳播 ）
溝通目標(biāo):我們需要行動的目標(biāo)!預(yù)期的結(jié)果是什么，消費者的行為或預(yù)期從我們設(shè)計的產(chǎn)品中獲得什么?它必須以具體有形的形式表達(dá)出來，例如1500人注冊，5000個額外的點贊，優(yōu)惠券下載，產(chǎn)品試用，撰寫評論，應(yīng)用程序的使用，潛在客戶，分享。
雖然了解業(yè)務(wù)和營銷目標(biāo)很重要，但是讓我們的客戶了解UI和UX有其局限性，并且它們并不會對糟糕的商業(yè)策略產(chǎn)生影響，這一點非常重要。這可能很關(guān)鍵（撇清責(zé)任俗稱帥鍋哈哈）。
4. 目標(biāo)受眾
這個產(chǎn)品是給誰的?誰將使用它，在什么時候什么場景下，為什么使用?描述用戶受眾必須盡可能具體，因為設(shè)計師通常會考慮到角色，特別是在UX方面，產(chǎn)品使用流程主要由用戶角色及其在客戶旅程中的特定階段決定。
6.預(yù)算和時間
有些人可能會爭論是否應(yīng)該在一個簡短的報告中加入預(yù)算，不一定是準(zhǔn)確的預(yù)算，但我們至少要確定一個大致范圍。清晰的預(yù)算可能意味著設(shè)計師或代理機構(gòu)甚至不會接受該項目，或者如果客戶無法支付他們的服務(wù)費用，他們會考慮另一種成本更低的解決方案。但若沒有溝通清楚，在設(shè)計進(jìn)行期間更容易產(chǎn)生分歧和問題。
定義總的時間和預(yù)期的各時間節(jié)點則是為了避免那些清晰溝通可以避免的沖突點。時間還會影響預(yù)算;在任何緊急情況下，獲得額外資源都是可能的（比如若時間緊急可會提高價格）。
根據(jù)我的經(jīng)驗，真正重要的問題都是雙重的。
1.客戶的教育程度不足以提供可以推動項目正常運行的必要信息
2.設(shè)計師在沒有正確理解客戶的需求的情況下就心急直接開始設(shè)計。
總結(jié)
如果您是客戶，一個好的設(shè)計概要將節(jié)省您在無意義的電子郵件，電話和會議上花費的時間。它還可以幫助您獲得來自不同設(shè)計師和代理商的更和可比的報價。
如果你是一名設(shè)計師，如果你堅持從一個設(shè)計概要文件開始你的設(shè)計工作，你會從客戶那里獲得簡潔的愿景和期望，這可以讓你保持動力。你的時間和努力是昂貴的，從潛在客戶那里獲取的某種信息可能毫無意義。明智的做法是優(yōu)先考慮那些已經(jīng)有一些遠(yuǎn)見、愿意承擔(dān)自己那部分工作的客戶。（即優(yōu)先考慮那些清晰的分析了產(chǎn)品的各類目標(biāo)、預(yù)算等關(guān)鍵內(nèi)容規(guī)格的客戶）
一個好的簡介應(yīng)該是簡潔、清晰和全面的。如果目標(biāo)足夠清晰，應(yīng)當(dāng)不超過兩頁。
為了使最終的結(jié)果盡可能的好，我們需要鼓勵和教育客戶和設(shè)計師去做更好的設(shè)計概要（說明文件），讓我們的工作更容易，并把重點放在更重要的事情上。
文章來源：UI中國
在java的學(xué)習(xí)中，當(dāng)接觸到類這一章的時候，就會避免不了的接觸到this關(guān)鍵字。
首先，this關(guān)鍵字指向的是當(dāng)前對象的引用
作用：
this.屬性名稱
指的是訪問類中的成員變量，用來區(qū)分成員變量和局部變量（重名問題）
class Test_08{
public static void main(String [] args){
//調(diào)用無參構(gòu)造函數(shù)，
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運行后發(fā)現(xiàn)，調(diào)用的set方法并沒有對 對象中的變量進(jìn)行賦值，是因為，傳入的參數(shù)變量名與類中屬性變量名重復(fù)，因此我們在set方法和有參構(gòu)造方法中加上了this.類屬性名稱，這樣就可以完成對 對象變量的賦值。如下圖：
this.方法名稱
用來訪問本類的成員方法
this();
訪問本類的構(gòu)造方法
()中可以有參數(shù)的 如果有參數(shù) 就是調(diào)用指定的有參構(gòu)造
注意事項:
1.this() 不能使用在普通方法中 只能寫在構(gòu)造方法中
2.必須是構(gòu)造方法中的第一條語句
例如，當(dāng)我們把this()放在有參構(gòu)造函數(shù)的末尾時，例如用this("哈哈");我們先不管語法是否有錯誤，試著按照程序的運行來判斷一下結(jié)果，我們可以看出，當(dāng)在創(chuàng)建對象時，假定調(diào)用含有this（“哈哈”）的構(gòu)造函數(shù)，則剛開始存放的值，會被this（“哈哈”）調(diào)用的只含有一個參數(shù)的構(gòu)造函數(shù)覆蓋，也就是說，最后的name會變成“哈哈”，這是與我們的初衷相違背的，而且運行結(jié)果也是報錯，
當(dāng)我們換到構(gòu)造方法的第一句時，則不會有這種錯誤，因為它并不會影響到后面name的賦值。
我們接下來把this語句放在構(gòu)造函數(shù)的第一句位置，
就不會有報錯
————————————————
版權(quán)聲明：本文為CSDN博主「BetterShon」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42386014/article/details/81138684
實現(xiàn)導(dǎo)航的左右滑動類似于騰訊新聞，網(wǎng)易等導(dǎo)航，一下貼上代碼：
<!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;//開始的導(dǎo)航頁的第幾屏
this.speed = this.options.speed || 300;//速度
this.lwidth = this.options.width || 80;//導(dǎo)航li寬度
this.delay = this.options.auto || 0;//自動滾動菜單速度0為不自動滾動
this.container = b;//在那個容器內(nèi)
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);//監(jiān)聽過度動畫是否結(jié)束
window.addEventListener("resize", this, false)
}
};
Swipe.prototype = {
//設(shè)置其基本樣式
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) {//沒有子節(jié)點，獲取不到屏幕寬度均返回
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()
}
};
//開始調(diào)用插件
var slider=new Swipe(document.getElementById('nav'),{speed:500,auto:0,width:100,col:4,});
</script>
</body>
</html>
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
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 // 監(jiān)聽路由變化時的狀態(tài)為前進(jìn)還是后退
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
}
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com
