今天給朋友們帶來更改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如果打括號(hào)調(diào)用默認(rèn)指向window

changeColor.call(s1) //指向s1對(duì)象



//例二：

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()方法接收倆個(gè)參數(shù)，一個(gè)是函數(shù)運(yùn)行的作用域（this），另一個(gè)是參數(shù)數(shù)組。

call()方法第一個(gè)參數(shù)和apply()方法的一樣，但是傳遞給函數(shù)的參數(shù)必須一 一列舉出來。

語法：

apply([thisObj [,argArray]]);

調(diào)用一個(gè)對(duì)象的一個(gè)方法，另一個(gè)對(duì)象替換當(dāng)前對(duì)象

call([thisObj [,arg1[,arg2[…,argn]]]])；

說明：

如果thisObj是null或者undefined的時(shí)候，默認(rèn)指向window。

如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象，那么將導(dǎo)致一個(gè)TypeError，如果沒有提供argArray和thisObj任何一個(gè)參數(shù)，那么Global對(duì)象將用作thisObj。

call方法可以用來代替另一個(gè)對(duì)象的一個(gè)方法，call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閠hisObj指定的新對(duì)象，如果沒有提供thisObj參數(shù)，那么Global對(duì)象被用于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



//例三：實(shí)現(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



能夠返回一個(gè)新函數(shù)，該新函數(shù)的主體與原函數(shù)主體一致，但當(dāng)新函數(shù)被調(diào)用執(zhí)行時(shí)，函數(shù)體中的this指向的是thisArg所表示的對(duì)象。



Function.prototype.call(this.Arg,val1,val2, …)



調(diào)用函數(shù)執(zhí)行，在函數(shù)執(zhí)行時(shí)將函數(shù)體中的this指向修改為thisArg所表示的對(duì)象



val1, val2, … 表示傳遞給調(diào)用函數(shù)的實(shí)際參數(shù)列表



Function.prototype.apply(thisArg, array|arguments)



調(diào)用函數(shù)執(zhí)行，在函數(shù)執(zhí)行時(shí)將函數(shù)體中的this指向修改為thisArg所表示的對(duì)象，



array|arguments 表示調(diào)用函數(shù)的參數(shù)列表，使用數(shù)組或類數(shù)組的格式



區(qū)別：

bind與call和apply的區(qū)別：

返回值的區(qū)別：

bind的返回值是一個(gè)函數(shù)，而call和apply是立即調(diào)用。

參數(shù)使用的區(qū)別：

bind與call一樣是從第二個(gè)參數(shù)開始將想要傳遞的參數(shù)一 一寫入。但call是把第二個(gè)及以后的參數(shù)作為fn方法的實(shí)參傳進(jìn)去，而fn1方法的實(shí)參實(shí)則是在bind中參數(shù)的基礎(chǔ)上再往后排。

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

文章來源：站酷

在我們平時(shí)的設(shè)計(jì)工作中，經(jīng)常會(huì)需要做一些有動(dòng)感的畫面，去體現(xiàn)某些產(chǎn)品所具有的運(yùn)動(dòng)屬性，比如汽車的速度感、球鞋的運(yùn)動(dòng)感等等?？墒怯捎谳d體或是成本的原因，導(dǎo)致客戶沒辦法投入動(dòng)態(tài)畫面的制作，所以就要求我們只能在靜態(tài)的平面中去創(chuàng)造動(dòng)感，讓原本不會(huì)動(dòng)的畫面看上去好像也能動(dòng)起來，這就是今天要為大家?guī)淼膬?nèi)容。

我們先來看一組照片，這些貓的圖片明明都是靜態(tài)的，可是為什么我們看到這些照片的時(shí)候，卻能夠明顯的感覺到貓?jiān)谔S的動(dòng)感呢，這個(gè)主要是因?yàn)槲覀兊男睦碜饔谩?

正如佛教里所講的，不是風(fēng)在動(dòng)，也不是云在動(dòng)，而是心在動(dòng)。那些看上去帶有動(dòng)感的圖片并不是真的在動(dòng)，也不是屏幕在動(dòng)，而是我們的心理作用。

所以我們做設(shè)計(jì)的時(shí)候，就可以很好的利用這一心理作用，去實(shí)現(xiàn)一些具有動(dòng)感的畫面。既然要做動(dòng)感的畫面，我們需要先了解，關(guān)于運(yùn)動(dòng)在物理學(xué)中的定義。

物理學(xué)中的運(yùn)動(dòng)，必須具備兩個(gè)要素，分別是速度和能量。

那我們就可以總結(jié)出兩種畫面中的動(dòng)勢，第一種就是具備速度和方向的動(dòng)勢，比如畫面中這兩張圖片，我們可以很明顯地感覺到，圖片中的主體是正在運(yùn)動(dòng)的，并且具有很快地速度和明確的運(yùn)動(dòng)方向。

第二種就是靜止的，但具有強(qiáng)烈能量的動(dòng)勢。比如畫面中這兩張圖片都沒有在動(dòng)，可是我們也能夠感覺到它的動(dòng)感。如果說前一種動(dòng)勢更注重于刻畫運(yùn)動(dòng)的速度感，那么第二種則更加注重刻畫一觸即發(fā)的能量感。

那么，我們?cè)谄矫嬷袘?yīng)該如何去創(chuàng)造動(dòng)感呢？其實(shí)很簡單，因?yàn)閺埩υ诋嬅嬷胁黄胶鈺r(shí)，便會(huì)產(chǎn)生動(dòng)感。

所謂張力就是畫面中元素向外擴(kuò)張的心理作用力。

這么解釋可能有些抽象，我們可以將張力與萬有引力進(jìn)行類比。萬有引力就是，任意兩個(gè)物體具有通過連線方向上的力相互吸引。而我們可以將張力定義為畫面中任意兩個(gè)元素，通過連線方向上的力相互吸引。也就是說畫面中的任意元素都有相互吸引的力。

比如我們?cè)谝粋€(gè)畫面中的上下左右各放一個(gè)圓點(diǎn)，然后在畫面的正中間放一個(gè)較大的點(diǎn)，中間這個(gè)點(diǎn)由于均衡地受到上下左右吸引力的作用，所以它所受到的張力是平衡的。

當(dāng)我們將中間這個(gè)大點(diǎn)往上移動(dòng)，大點(diǎn)受到的張力平衡就會(huì)被打破，產(chǎn)生了要往下墜的動(dòng)勢。

根據(jù)萬有引力定律公式，物體所受的吸引力和質(zhì)量是成正比的。

所以我們同樣可以類比到張力中來，畫面中打破平衡的那個(gè)元素的質(zhì)量和面積越大，所帶來的動(dòng)感就會(huì)越強(qiáng)烈。

看完了剛才所講的這些，相信大家現(xiàn)在心里大概都會(huì)想起一句話，就是聽過很多道理，依然過不好這一生。的確，聽了這么多的理論公式，難免會(huì)越聽越懵。而且我們?cè)谧鲈O(shè)計(jì)的時(shí)候，也不可能去測量畫面中每一個(gè)元素的大小、間距、方向，也不可能把每一個(gè)元素之間的張力進(jìn)行量化，然后再用公式去計(jì)算出動(dòng)感的大小強(qiáng)弱。那大家肯定還會(huì)繼續(xù)追問了，那么到底該如何去制造動(dòng)感呢？

這里我總結(jié)了三點(diǎn)產(chǎn)生動(dòng)感的原因，分別是基于生活經(jīng)驗(yàn)與心理認(rèn)知、誘導(dǎo)視線移動(dòng)，以及非平衡狀態(tài)下產(chǎn)生的視覺沖擊。

基于生活經(jīng)驗(yàn)與心理認(rèn)知

我們先來看基于生活經(jīng)驗(yàn)與心理認(rèn)知，每個(gè)人在成長的過程中都會(huì)碰到許多人和事，并且對(duì)不同的事物會(huì)總結(jié)出一套規(guī)律和認(rèn)知，也可以說是刻板印象，所以我們就能感覺到一件事物是運(yùn)動(dòng)的還是靜止的。

比如這兩個(gè)小人，雖然只是一個(gè)輪廓，但是我們卻能感覺到左邊的人是站立的，靜止的，而右邊的人正在走路，是運(yùn)動(dòng)中的。

這樣的例子很多，例如書本是靜，車子是動(dòng)。

樹懶是靜，猴子是動(dòng)的。

另外由于人類擁有一種組織傾向，所以當(dāng)我們看到某一個(gè)運(yùn)動(dòng)的瞬間時(shí)，會(huì)自動(dòng)腦補(bǔ)中出他運(yùn)動(dòng)的過程。比如這張靜態(tài)圖片，相信很多人看到時(shí)都會(huì)腦補(bǔ)出那個(gè)視頻。

但是這里有一個(gè)問題，就是不同的人他的生活經(jīng)驗(yàn)是不同的，對(duì)于事物的認(rèn)知和理解也就不同，可能對(duì)于一部分人來說這是具有動(dòng)感的，而對(duì)另一部分人來說卻是靜止的。比如剛才那個(gè)打籃球的圖片，如果是沒看過視頻的人，當(dāng)然就腦補(bǔ)不出他的動(dòng)感了。所以對(duì)于這種刻板印象的利用，我們需要根據(jù)受眾的具體特征具體分析，千萬不要盲目使用。

誘導(dǎo)視線移動(dòng)

接下來我們來講講第二種情況，誘導(dǎo)視線移動(dòng)。由于運(yùn)動(dòng)是相對(duì)的，所以我們?cè)诳礀|西的時(shí)候，視線移動(dòng)也可以理解為是物體相對(duì)視線發(fā)生了移動(dòng)。

比如我們?cè)诳磮?bào)紙的時(shí)候，從左上角往右下角看，在我們眼睛里出現(xiàn)的畫面是這樣的，從而便產(chǎn)生了好像報(bào)紙?jiān)趧?dòng)的動(dòng)感。

最簡單移動(dòng)的案例就是箭頭，例如這是一條水平的直線，我們會(huì)認(rèn)為他是靜止的，而當(dāng)我們?cè)谝欢思由霞^之后，我們的眼睛就會(huì)隨著箭頭所指方向移動(dòng)，從而產(chǎn)生動(dòng)感。

這兩個(gè)都是通過一些指向性的圖形進(jìn)行引導(dǎo)視線移動(dòng)的作品。

非平衡狀態(tài)下產(chǎn)生的視覺沖擊

接下來我們來說一下第三種情況，非平衡狀態(tài)下產(chǎn)生的視覺沖擊。

比如在天平的兩端各放一只豬，那么這個(gè)天平就是處于一個(gè)平衡的狀態(tài)。

當(dāng)我們?cè)谄渲幸贿呍偌右恢回i時(shí)，天平就會(huì)失去平衡，重量更大的一邊會(huì)往下倒，直到找到一個(gè)新的平衡。

而我們的大腦其實(shí)也和天平相似，當(dāng)我們看到一些不平衡的畫面時(shí)，我們就會(huì)有把它轉(zhuǎn)換為平衡狀態(tài)的傾向，所以動(dòng)感的產(chǎn)生，也就是大腦腦補(bǔ)不平衡到平衡的這個(gè)運(yùn)動(dòng)過程。

我們?cè)诎肟罩蟹乓粔K石頭，由于這塊石頭受到重力的作用，處于一個(gè)不平衡的狀態(tài)，所以我們認(rèn)為他有向下掉的趨勢，直到與地面接觸找到新的平衡狀態(tài)。

如果我們把石頭換成一個(gè)氣球，那么情況就相反了，由于氣球受到重力作用的同時(shí)也受到了更大的浮力，所以氣球會(huì)有往上飄的趨勢。

舉一個(gè)更加能說明的例子，其實(shí)我們大多數(shù)人或多或少會(huì)有一些強(qiáng)迫癥，比如看到這種一只鉛筆沒對(duì)齊的畫面就會(huì)很難受，特別想把它懟回去。

所以我們就會(huì)腦補(bǔ)出這只鉛筆往左移動(dòng)的過程，從而產(chǎn)生了動(dòng)感。

這兩個(gè)海報(bào)都是通過創(chuàng)造一些不平衡的場景帶來刺激感，從而產(chǎn)生動(dòng)感。例如顛倒的房子和懸空的蒸籠。

制造動(dòng)感的技巧

經(jīng)過前面的講解，相信大家應(yīng)該對(duì)動(dòng)感是如何產(chǎn)生的，有了一定的認(rèn)識(shí)，但是，我們剛剛只是從理論的角度去講解了動(dòng)感是如何產(chǎn)生的，運(yùn)用到實(shí)際的設(shè)計(jì)中可能還是會(huì)一頭霧水。那接下來的部分就是真正的干貨環(huán)節(jié)了，去給大家講一些比較實(shí)用的制造動(dòng)感的技巧。

這里總結(jié)了 9 個(gè)小技巧，我們一個(gè)個(gè)來看。

1. 捕捉動(dòng)態(tài)瞬間

我們?cè)谇懊嫣岬搅水?dāng)我們看到某一個(gè)運(yùn)動(dòng)瞬間時(shí)，我們就會(huì)腦補(bǔ)出整個(gè)運(yùn)動(dòng)過程。那我們就可以反過來，從運(yùn)動(dòng)過程中捕捉某一個(gè)瞬間，用這一個(gè)瞬間來表達(dá)平面中的動(dòng)感。

這里可以分為兩種情況，一個(gè)是捕捉運(yùn)動(dòng)剛開始的瞬間，強(qiáng)調(diào)運(yùn)動(dòng)剛開始的那種能量感。

這是兩個(gè)捕捉運(yùn)動(dòng)開始瞬間的例子，兩名運(yùn)動(dòng)員都穿好了裝備，雖然還沒開始動(dòng)，但是卻能感受到一觸即發(fā)的緊張感。

第二種就是捕捉運(yùn)動(dòng)過程的某一瞬間，這種方式帶來的動(dòng)感會(huì)比上一種強(qiáng)烈得多。

例如這兩個(gè)例子都是捕捉了運(yùn)動(dòng)員正在運(yùn)動(dòng)中的瞬間。

這種方式所傳達(dá)的動(dòng)感強(qiáng)弱是由運(yùn)動(dòng)物體的動(dòng)作姿態(tài)所決定的，所以我們需要認(rèn)真比較每一瞬間的動(dòng)作，選出最適合的一幀。

2. 傾斜

第二種技巧是傾斜構(gòu)圖，一般橫線和豎線都會(huì)給我們一種穩(wěn)定平衡的感覺，而斜線相對(duì)于橫線和豎線來說，則會(huì)給我們帶來強(qiáng)烈的不平衡感。

例如這些圖片，無論是邁克爾·杰克遜的經(jīng)典舞蹈動(dòng)作，還是比薩斜塔，都給我們帶來一種不安定、危險(xiǎn)、不平衡的視覺沖擊。通過這種不平衡感從而產(chǎn)生動(dòng)感。

我們觀察這些線，會(huì)發(fā)現(xiàn) 45° 時(shí)的斜線相對(duì)于橫線和豎線的傾斜角度最大，所以 45° 傾斜時(shí)不平衡感最強(qiáng)，動(dòng)感也最強(qiáng)烈。

漫畫中的傾斜構(gòu)圖

在漫畫作品中經(jīng)常會(huì)將劇情畫在傾斜的格子中，目的是為了彌補(bǔ)漫畫紙質(zhì)作品的缺陷，強(qiáng)化漫畫內(nèi)容的動(dòng)感。

電影中的傾斜鏡頭

在電影中也會(huì)故意用到傾斜的鏡頭，由于電影本身就是動(dòng)態(tài)的，所以運(yùn)用傾斜鏡頭一般是用來強(qiáng)調(diào)危機(jī)感、動(dòng)蕩不安的漂泊感等等。

攝影中的傾斜鏡頭

攝影作品中也會(huì)用到傾斜視角，這兩張都是通過傾斜視角強(qiáng)化速度感的例子。

文字傾斜

那么我們看看傾斜在設(shè)計(jì)中是如何使用的，首先可以是文字傾斜，這兩個(gè)海報(bào)的人物主體都是豎直的，通過文字傾斜來增加動(dòng)感。

主體傾斜

這兩張海報(bào)則是保持文字水平排列，將主體進(jìn)行傾斜處理從而帶出動(dòng)感。

疊加傾斜色塊

我們也可以將文字和主體都水平或者豎直放置，然后添加傾斜的色塊強(qiáng)化動(dòng)感。

畫面整體傾斜

這種是將包括主體和文字在內(nèi)的畫面整體進(jìn)行同一角度傾斜處理。

多角度傾斜

最后這種是難度比較高的，畫面中出現(xiàn)了多個(gè)角度的傾斜對(duì)比，畫面十分靈活且動(dòng)感十足。

3. 錯(cuò)位

接下來看看第三種傾斜技巧，錯(cuò)位。什么是錯(cuò)位呢？就像這輛小車一樣，他在運(yùn)動(dòng)的過程中，身后會(huì)產(chǎn)生的一些虛影錯(cuò)位，使得畫面中的一部分被破壞了，視覺需要在腦子里想象補(bǔ)充這一被破壞的部分，使畫面還原為原本的樣貌，從而產(chǎn)生運(yùn)動(dòng)感。

重復(fù)

錯(cuò)位這種技巧我們也可以分為幾種類型，首先第一種就是重復(fù)，通過重復(fù)的手法去模擬物體的運(yùn)動(dòng)軌跡，讓人腦補(bǔ)運(yùn)動(dòng)的過程，從而產(chǎn)生動(dòng)感。

模糊

第二種就是通過將背景或者是主體進(jìn)行模糊，從而傳達(dá)動(dòng)感。第一張圖片是通過模糊主體身后的背景去產(chǎn)生動(dòng)感，而第二張則是通過模糊文字的外輪廓從而產(chǎn)生一種收放的動(dòng)感。

錯(cuò)開

第三種是錯(cuò)開，就是將畫面的某一個(gè)部分進(jìn)行錯(cuò)開處理，讓畫面遭到破壞，需要人腦去修補(bǔ)這部分的破壞，從而產(chǎn)生運(yùn)動(dòng)感。

其他

除了上面三種還有許多別的類型，例如通過車輛行駛濺起的水花，融化往下低落的液體等等，都可以造成對(duì)畫面的破壞，從而制造動(dòng)感。

4. 集中與發(fā)散

對(duì)于集中與發(fā)散我們可以分為兩種，第一種是這種通過線條繪制的發(fā)射或是集中圖案，從一個(gè)中心向某一方向或四周擴(kuò)展，或者是四周向一個(gè)中心集中的線條圖案，盯著看會(huì)出現(xiàn)一種光耀感，通過光學(xué)效果產(chǎn)生視覺幻想，從而產(chǎn)生視覺動(dòng)感。

而第二種則是通過物體或圖形的疏密節(jié)奏變化，從而產(chǎn)生出類似擴(kuò)散或是集中的效果，這種效果會(huì)令我們聯(lián)想到河流或是煙霧擴(kuò)散的情形，從而產(chǎn)生了動(dòng)感。

當(dāng)擴(kuò)散的圖案配合上透視的效果，會(huì)使得動(dòng)感變得更加的強(qiáng)烈。

背景

對(duì)于這種集中發(fā)散的圖形，我們可以將它作為背景來烘托動(dòng)感和氛圍。

文字

也可以將文字編排成發(fā)射狀，模擬出那種噴口而出的效果。

主體

或者是將圖形作為主體去表達(dá)特殊的主題。

以透視作為發(fā)散

這兩個(gè)海報(bào)是比較特別的例子，將放射狀與透視相結(jié)合，體現(xiàn)了很強(qiáng)烈的動(dòng)感。

5. 螺旋曲線

接下來講講關(guān)于螺旋的技巧，因螺旋發(fā)展或內(nèi)收形成的曲線，會(huì)讓人聯(lián)想到水的旋渦形，視覺上就形成動(dòng)感，且螺旋曲線的旋轉(zhuǎn)曲度越大，動(dòng)感就會(huì)越強(qiáng)。

另外，密集的螺旋曲線也能給人帶來一種集中或者是發(fā)散的效果，從而也能帶來一定的動(dòng)感。

這兩張海報(bào)是將螺旋曲線作為主體使用，來表達(dá)其特定主題。

這張海報(bào)個(gè)人比較喜歡，非常靈活地將畫面中的文字和圖片沿著螺旋曲線排布，加上大小的變化，讓畫面產(chǎn)生了一種集中的動(dòng)感。

這張海報(bào)則是將螺旋線作為背景，并將文字放在螺旋曲線間排列。

6. 波狀曲線

第六種技巧是波狀曲線的使用。因?yàn)榍€的來回反復(fù)扭曲，會(huì)令人聯(lián)想起翻滾的海浪。

而且由于曲線本身就具有不平衡的張力，他會(huì)有一種向直線轉(zhuǎn)變的趨勢，所以波狀曲線特別適合用來表達(dá)動(dòng)感。

波狀曲線的曲度越大，他所產(chǎn)生的動(dòng)感就會(huì)越強(qiáng)烈。

對(duì)于波狀曲線，我們可以將其用來作為主體或者是背景進(jìn)而表達(dá)動(dòng)感。

也可以通過將文字做成這種扭曲的效果，從而產(chǎn)生一種文字在扭動(dòng)的動(dòng)態(tài)感。

7. 色彩

第七種技巧則是對(duì)色彩的使用。因?yàn)樯视星斑M(jìn)感和后退感，所以我們可以利用這一點(diǎn)來制造動(dòng)感。其中最容易理解的就是使用色彩的漸變，沿著色彩逐漸變化的方向，來誘導(dǎo)人們的視線移動(dòng)，從而產(chǎn)生視覺上的動(dòng)感。

這兩個(gè)都是利用不同色彩的漸變來引導(dǎo)視線移動(dòng)，從而產(chǎn)生動(dòng)感。

我們?cè)谇懊嬷v過運(yùn)動(dòng)是需要能量的，而象征高溫的暖色調(diào)比象征低溫的冷色調(diào)更具備能量感，所以暖色調(diào)比冷色調(diào)更適合表達(dá)動(dòng)感。

這是一張日本新干線的海報(bào)，雖然用的是靜止的列車作為主體，可是鮮紅的背景卻能很好地傳達(dá)出列車的能量感。如果我們將紅色的畫面換成藍(lán)色的話，那種能量感瞬間就沒了，多了些科技的屬性，畫面變得冷靜克制了。

8. 重心偏移

接下來是重心偏移。一般我們編排版面時(shí)都會(huì)注意版面重心的均衡，將畫面整體的重心放在畫面中間?？墒窃谒茉靹?dòng)感畫面時(shí)，我們卻可以將畫面的重心偏離視覺中心，使畫面形成一種不平衡感，從而產(chǎn)生動(dòng)感。

我們來看看這兩個(gè)海報(bào)，都是通過將畫面的重心全都放在畫面的一側(cè)，從而產(chǎn)生了一種很強(qiáng)烈的不平衡感。

另外，由于視覺重力的原因，當(dāng)畫面重心偏上時(shí)，能很好地塑造出往下墜的動(dòng)感。現(xiàn)在畫面中的這兩個(gè)作品都是將重心放在了畫面的上方，我們能感受到畫面中的主體會(huì)有一種往下掉的趨勢。

9. 蒙太奇

最后一種是蒙太奇的手法。前面我們說過人類天生具有一種組織傾向，當(dāng)我們看到運(yùn)動(dòng)的瞬間狀態(tài)時(shí)，我們便能腦補(bǔ)出運(yùn)動(dòng)的過程。所以通過蒙太奇的手法，將一些不同時(shí)刻或狀態(tài)的圖片放在一起，便能使畫面產(chǎn)生動(dòng)感。蒙太奇手法比起單純使用一張運(yùn)動(dòng)瞬間圖片，能承載更長時(shí)間的運(yùn)動(dòng)和更多的運(yùn)動(dòng)內(nèi)容。例如畫面中的這兩個(gè)動(dòng)作，把他們放一起之后我們就可以聯(lián)想到這個(gè)小哥從熱身到起跑的過程。

其實(shí)漫畫運(yùn)用的就是蒙太奇原理，通過幾個(gè)關(guān)鍵的情景，去傳達(dá)一個(gè)完整的劇情。

這些都是運(yùn)用蒙太奇手法的作品。

案例

以上就是今天的理論部分，接下來我們進(jìn)入案例實(shí)操的環(huán)節(jié)，這次我給大家?guī)砹怂膫€(gè)案例，分別運(yùn)用到了傾斜、重心偏移、發(fā)散與集中，以及蒙太奇的手法去塑造動(dòng)感。希望通過這些案例的演示，能夠讓大家更好地理解今天的內(nèi)容，下面我們就來進(jìn)入案例的部分。

案例一

首先確定好畫面的頁邊距，并且將畫面橫向分為 6 份。

然后將主體，也就是科比的形象，放在畫面正中間，橫向占中間四欄。

接著在科比的下方疊加一個(gè)紅色的傾斜色塊，強(qiáng)化科比傾斜的體態(tài)和動(dòng)感。

從球鞋的名字中提取出關(guān)鍵詞疊在科比下層，并將球鞋的中文名放在英文下方。

將球鞋與介紹性文字做成文字組的形式放在畫面下方 。

由于主標(biāo)題英文被遮擋了一部分，缺失了一些可讀性，所以我們將球鞋的英文名做一個(gè)重復(fù)放在左上角，并在右上角添加 logo。接下來我們?cè)诒尘吧席B加一個(gè)籃球場的場景。

并將畫面的四周涂上黑色的漸變，強(qiáng)化主體形象。

由于現(xiàn)在畫面和主體都有一些偏暗了，所以我們對(duì)整體畫面進(jìn)行稍微調(diào)亮，那么這個(gè)案例就完成了。

案例二

這個(gè)案例同樣也是一雙運(yùn)動(dòng)鞋，但是我們這次利用重心偏移的技巧去塑造動(dòng)感。

同樣的確定頁邊距，并將畫面橫向分為四欄，將主體放在畫面左上角占上方兩欄。

然后從球鞋的名字中提取出相關(guān)英文放到版面頂部，并置于主體下方。

因?yàn)槲覀円鲆粋€(gè)重心偏移的版面，所以我們接下來將所有的介紹性文字按照主體的負(fù)空間排列在版面上方。

為了防止重心的過度偏移，同時(shí)和左上角的球鞋做一個(gè)對(duì)角線的呼應(yīng)，所以我們?cè)诎婷娴挠蚁路椒胖脙r(jià)格以及球鞋的型號(hào)等信息。

然后吸取球鞋的顏色做一個(gè)色彩上的呼應(yīng)。這一張球鞋的海報(bào)就完成了。

案例三

這個(gè)案例我們來做一個(gè)放射光線的海報(bào)，這個(gè)海報(bào)內(nèi)容是一款果汁軟糖的促銷海報(bào)。

首先確定好頁邊距。

然后我們從這款軟糖的包裝上提取出一個(gè)圖形作為畫面主體。然后將軟糖的名字和介紹文案放到這個(gè)圖形中。

把圖形按照黃金比例和網(wǎng)格放到畫面中間。

在主體圖形后面疊加放射線條，底下留出一部分空間放置產(chǎn)品圖片及其他信息。

將產(chǎn)品圖片和促銷信息以居中對(duì)齊形式排列在畫面下方。

然后我們可以在放射線上添加一些表情愉悅的人物圖片，去強(qiáng)化吃了這款軟糖會(huì)很開心的這個(gè)動(dòng)態(tài)過程。

還可以在畫面周圍添加一些可愛的小圖形去烘托氛圍。

最后加上 logo，這個(gè)軟糖的促銷海報(bào)就完成了。

我們也可以將這個(gè)海報(bào)做成不同的配色，每一款產(chǎn)品對(duì)應(yīng)一個(gè)配色。

案例四

這是一個(gè)藝術(shù)展的海報(bào)，我們通過蒙太奇的手法來表現(xiàn)。

由于展覽主題是過去、現(xiàn)在和中間的一切，所以我們將畫面分成三份，并用運(yùn)動(dòng)過程中的三個(gè)不同動(dòng)作來代表著三個(gè)階段。

由于第一張圖片的底色偏亮了，所以我們將它摳出來，做一個(gè)與另外兩個(gè)圖片的相同背景。

將主題和時(shí)間這兩個(gè)比較重要的信息放在畫面的左上角。

其余信息排列在右下角。那么這個(gè)案例就完成了，也是非常簡單的，利用的就是蒙太奇的手法。

本期教程到這里就結(jié)束了，我們來簡單地總結(jié)一下今天的內(nèi)容。首先我們了解了動(dòng)感是畫面張力不平衡所造成的，以及強(qiáng)調(diào)速度感和強(qiáng)調(diào)能量感的兩種動(dòng)勢。接下來我們講解了三種產(chǎn)生動(dòng)感的原因，分別為基于生活經(jīng)驗(yàn)與心理認(rèn)知、引導(dǎo)視線移動(dòng)以及不平衡狀態(tài)下帶來的視覺沖擊。最后我們總結(jié)了 9 點(diǎn)實(shí)用的小技巧，分別為捕捉動(dòng)態(tài)瞬間、傾斜、錯(cuò)位、集中與發(fā)散、螺旋、波狀曲線、色彩、重心偏移、蒙太奇。希望大家能夠掌握好這些方法，讓原本靜態(tài)的畫面也能帶來全新的動(dòng)感。

文章來源：優(yōu)設(shè)

一、搭建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)建一個(gè)腳手架項(xiàng)目（每次創(chuàng)建需要）



eg:這時(shí)在命令行中有需要你填的信息{

你的項(xiàng)目名；

你的項(xiàng)目描述；

還有你想是否下載的插件（y/n）；

}



4.使用 npm run dev來運(yùn)行項(xiàng)目



就這樣，一個(gè)簡單的vue開發(fā)項(xiàng)目模板就這樣下載完成了。



eg：

i 是install 的簡寫。

全局安裝依賴：



cnpm i   依賴名

1

局部安裝依賴：



cnpm i -D  依賴名

1

二、vue-router

一般事先安裝模板時(shí)，已經(jīng)安裝上了。

可以查看package.json中。

如果沒有安裝



cnpm i -D vue-router

1

安裝好之后，在src目錄中會(huì)生成一個(gè)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選項(xiàng)卡' }

                },

                {

                    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'

        }

    ],

// 去掉#號(hào)

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、然后需要手動(dòng)創(chuàng)建一個(gè)文件夾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引入注冊(cè)



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 其實(shí)是一樣的！



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)添加，相當(dāng)于是編譯識(shí)別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è)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

設(shè)計(jì)概要（Design briefs），也可以理解為設(shè)計(jì)簡報(bào)、設(shè)計(jì)說明文檔。設(shè)計(jì)概要負(fù)責(zé)說明設(shè)計(jì)的目標(biāo)、設(shè)計(jì)的方向風(fēng)格、不同階段及對(duì)應(yīng)的里程碑（指標(biāo)）。

簡而言之，設(shè)計(jì)概要是對(duì)本次設(shè)計(jì)項(xiàng)目的簡要概括，可能是一份文檔，或者一組文件內(nèi)容，其中包括設(shè)計(jì)的幾個(gè)關(guān)鍵概念如項(xiàng)目描述、項(xiàng)目范圍、項(xiàng)目目標(biāo)，目標(biāo)受眾、風(fēng)格外觀、預(yù)算時(shí)間安排。那么我們所整理的設(shè)計(jì)概要是提給誰看的呢？按照原作者觀點(diǎn)是增進(jìn)設(shè)計(jì)師和需求方的理解及信任。作者的觀點(diǎn)是建立在服務(wù)甲方的基礎(chǔ)上提出的，因?yàn)樽髡咚鶎兕I(lǐng)域?yàn)槠矫嬖O(shè)計(jì)領(lǐng)域，偏向創(chuàng)意性設(shè)計(jì)活動(dòng)，因此通過建立共同目標(biāo)，統(tǒng)一想法更容易創(chuàng)造出高滿意度的方案。

但事實(shí)上設(shè)計(jì)概要不止于此，它不應(yīng)該被局限在平面設(shè)計(jì)領(lǐng)域，雖然作者是以平面設(shè)計(jì)師的身份來普及這個(gè)觀念（傾向提點(diǎn)平面廣告類設(shè)計(jì)工作者，而不是UI/UX領(lǐng)域），但事實(shí)上其中很多角度都是從設(shè)計(jì)本質(zhì)及設(shè)計(jì)工作的協(xié)作本質(zhì)上提出的，它也可以被我們移植到UI/UX領(lǐng)域。當(dāng)我讀完這篇文章，我發(fā)現(xiàn)了設(shè)計(jì)概要一個(gè)更加重要的功能，那就是幫助UX設(shè)計(jì)團(tuán)隊(duì)梳理關(guān)鍵工作，建立共同目標(biāo)，提高設(shè)計(jì)工作的效率，促進(jìn)團(tuán)隊(duì)成員的協(xié)作與信任。（從設(shè)計(jì)團(tuán)隊(duì)角度）

當(dāng)然如果從甲方角度考慮，設(shè)計(jì)簡報(bào)依然可以用于UIUX領(lǐng)域，比如向leader提案，以及在項(xiàng)目初期向外包方展示設(shè)計(jì)說明，增進(jìn)溝通交流，以保證設(shè)計(jì)師對(duì)需求的理解，同時(shí)更展示了設(shè)計(jì)人員的專業(yè)性。

總之設(shè)計(jì)概要適合在設(shè)計(jì)流程的前期被組織，并分享至團(tuán)隊(duì)和需求方，增進(jìn)團(tuán)隊(duì)的凝聚力，促進(jìn)創(chuàng)意的發(fā)生，展示團(tuán)隊(duì)專業(yè)性及增加需求方與設(shè)計(jì)人員的理解與信任。設(shè)計(jì)概要與最終提案實(shí)際上是一次完整的設(shè)計(jì)活動(dòng)的首與尾，兩者應(yīng)當(dāng)相互對(duì)應(yīng)，設(shè)計(jì)結(jié)果應(yīng)當(dāng)圍繞最初定義的目標(biāo)進(jìn)行，設(shè)計(jì)概要更像是設(shè)計(jì)思維的理解和定義階段，把我們面臨的問題，假設(shè)的目標(biāo)呈現(xiàn)出來，以便在接下來的設(shè)計(jì)過程中精準(zhǔn)打擊，去解決設(shè)計(jì)概要中提到的問題或者目標(biāo)。

下面開始正文。這里是帥氣的分割線

在過去18年的廣告設(shè)計(jì)工作中，我逐漸意識(shí)到這個(gè)行業(yè)里最好的事情就是與你合作的人——作家，藝術(shù)總監(jiān)，用戶體驗(yàn)和用戶界面設(shè)計(jì)師，擁有出色的有創(chuàng)意的大腦，卓越的才能，不同的心態(tài)。 
當(dāng)他們有清晰的指導(dǎo)和足夠的自由與時(shí)間時(shí)，他們往往能迸發(fā)出好的想法，提出創(chuàng)意性的解決方案。但只要是缺乏指導(dǎo)，各種相互矛盾的指示，混亂的目標(biāo)及緊迫的時(shí)間，將導(dǎo)致設(shè)計(jì)師無法產(chǎn)出優(yōu)秀的方案。 
我多年來一直在觀察這個(gè)現(xiàn)象，但我不知道該如何解決。一開始，我很難將客戶需求好創(chuàng)意輸出完美的結(jié)合，隨著時(shí)間流逝，我逐漸明白，這一切都因?yàn)槲覀儧]有一個(gè)清晰地設(shè)計(jì)概要。從客戶的需求文檔開始，我們從中收集信息建立我們的總的設(shè)計(jì)概要，然后以此總概要來進(jìn)一步細(xì)分為具體的概要，如視覺設(shè)計(jì)概要、體驗(yàn)設(shè)計(jì)概要、布局排版設(shè)計(jì)概要等。 
沒有任何東西可以取代一份準(zhǔn)確詳細(xì)的設(shè)計(jì)概要。沒有任何電子郵件或者個(gè)人會(huì)議可以取代創(chuàng)意概要。如果缺少基本信息，你無法開始任何工作，無法估算資源，無法保證最后期限。 

如果認(rèn)真對(duì)待，設(shè)計(jì)概要就是任何創(chuàng)造性工作的關(guān)鍵。主要問題是客戶和設(shè)計(jì)師在某些情況下都被低估了。設(shè)計(jì)行業(yè)變得如此龐大且不斷擴(kuò)張，任何人都可以稱自己為設(shè)計(jì)師，任何人都可以收取任何費(fèi)用。因此，需要特定流程的真正的設(shè)計(jì)被置于次要地位，完全以價(jià)格來評(píng)判。雖然我支持競爭并且完全理解并非每個(gè)公司或個(gè)人都能獲得同樣的預(yù)算，但它仍然對(duì)整個(gè)行業(yè)不利。 

設(shè)計(jì)概要是一個(gè)很關(guān)鍵的部分，應(yīng)當(dāng)在正式設(shè)計(jì)開始前就組織好，但在一般設(shè)計(jì)流程中，它經(jīng)常會(huì)缺失，通常我們認(rèn)為我們一切都準(zhǔn)備好了，認(rèn)為我們的方案沒有問題可以直接開始設(shè)計(jì)了，但事實(shí)往往相反。 

什么是概要（brief）？

“概要”一詞來源于軍事術(shù)語，在軍事術(shù)語中，簡報(bào)被定義為“事先給出具體指示或信息的行為”?！八幸粋€(gè)具體的結(jié)構(gòu)，簡短扼要，包括所有必要的資信息，但不多，并包括一項(xiàng)既定的任務(wù)和要完成的結(jié)果，但有足夠的自由來適應(yīng)局勢(任務(wù)摘要)。 
當(dāng)指示部隊(duì)接管敵方陣地時(shí)，將軍可能會(huì)給出如何執(zhí)行以及考慮哪些因素的指示，但不會(huì)說把右腳放在左腳前面，重復(fù)這個(gè)動(dòng)作100米（前進(jìn)一百米），然后右轉(zhuǎn)，等等。軍事簡報(bào)只給出一項(xiàng)任務(wù)，留給個(gè)人決定的空間。同樣，creative briefing也不是一個(gè)描述創(chuàng)意過程的詳細(xì)用戶手冊(cè)。它也不是對(duì)預(yù)期結(jié)果的描述。創(chuàng)意概要是一個(gè)框架，它可以通過提供足夠的指導(dǎo)來推動(dòng)創(chuàng)意過程，使創(chuàng)意保持在正確的軌道上，并為創(chuàng)意提供足夠的自由。（譯者注：核心是指導(dǎo)列表，且保證足夠的自由，只提供框架，不干擾創(chuàng)意執(zhí)行） 

為什么我們?cè)趧?chuàng)作過程中需要概要？
如果我們有一個(gè)需要?jiǎng)e人解決的問題，我們需要?jiǎng)?chuàng)意簡報(bào)和創(chuàng)意簡報(bào)用作說明，就是這么簡單。當(dāng)我們要進(jìn)行創(chuàng)意活動(dòng)時(shí)我們會(huì)寫創(chuàng)意概要，列出關(guān)鍵的點(diǎn)，這意味著我們此時(shí)已經(jīng)清楚存在的既定問題，我們列出問題然后才知道去解決什么。當(dāng)然，也只有在別人要執(zhí)行設(shè)計(jì)活動(dòng)時(shí)，我們才需要去寫一份概要，以供說明。 （簡單理解，從某種角度，設(shè)計(jì)概是要寫給需要執(zhí)行設(shè)計(jì)的人員看的，我們需要?jiǎng)e人去解決問題，而概要負(fù)責(zé)說明這些問題。） 

什么是設(shè)計(jì)概要？
設(shè)計(jì)概要是描述設(shè)計(jì)項(xiàng)目的目標(biāo)和里程碑的書面文檔。它是設(shè)計(jì)過程中至關(guān)重要的一部分，因?yàn)樗兄谠诳蛻艉驮O(shè)計(jì)師之間建立信任和理解。它和合同一樣重要，是雙方的重要參照點(diǎn)。它確保重要的設(shè)計(jì)問題在設(shè)計(jì)師開始工作之前就被考慮和討論。 

根據(jù)不同工作范圍和不同產(chǎn)品領(lǐng)域，設(shè)計(jì)概要可以由許多元素組成，每個(gè)元素都詳細(xì)描述某個(gè)范圍的特定部分。 
但為了保持簡潔，以下五個(gè)要素不容忽視: 

1.項(xiàng)目描述
簡單描述一下我們需要做什么:我們對(duì)任務(wù)了解多少?期望是什么?一個(gè)新的設(shè)計(jì)?一個(gè)新的想法?現(xiàn)有的網(wǎng)站重新設(shè)計(jì)?我們需要用它來解決什么問題?這最多只能是一句話。

譯者注：項(xiàng)目描述是對(duì)你所進(jìn)行的項(xiàng)目的最簡潔的概括，比如"我們?cè)谧鲆粋€(gè)共享打車的產(chǎn)品"。當(dāng)然可以在這基礎(chǔ)上豐富一點(diǎn)如：“我們?cè)谧鲆粋€(gè)服務(wù)白領(lǐng)人群、針對(duì)夜間打車場景的共享打車產(chǎn)品”，后面這個(gè)描述增加了用戶和場景，但整個(gè)描述仍然是清晰易懂的。項(xiàng)目描述一般由戰(zhàn)略層相關(guān)人員來定義，如公司老大，產(chǎn)品經(jīng)理等。當(dāng)然對(duì)于redesign項(xiàng)目，則需要設(shè)計(jì)師自己明確項(xiàng)目目標(biāo)，然后去定義一個(gè)簡潔的項(xiàng)目描述。 

2.項(xiàng)目范圍
根據(jù)項(xiàng)目的大小，這里需要提供更多的細(xì)節(jié)。什么是預(yù)期目標(biāo)，有多少頁多少內(nèi)容量，它將具有什么功能和特性。你需要了解更多的細(xì)節(jié)來服務(wù)一個(gè)新的企業(yè)品牌項(xiàng)目，而不是一個(gè)簡單的網(wǎng)站。報(bào)價(jià)將主要依據(jù)這一環(huán)節(jié)。盡可能具體是至關(guān)重要的。 
此外，在互聯(lián)網(wǎng)世界中，客戶相信設(shè)計(jì)師能夠解決所有問題，從UI到UX，最終開發(fā)一個(gè)完整的網(wǎng)站并解決SEO排名（seo即搜索引擎優(yōu)化的意思），非常重要的是，盡早說明哪些內(nèi)容在范圍內(nèi)，哪些不包括在范圍內(nèi)。 
譯者注：項(xiàng)目范圍即范圍層中的內(nèi)容規(guī)格。我們?cè)诋a(chǎn)品設(shè)計(jì)的五個(gè)層面中第二層中可以了解這部分內(nèi)容，內(nèi)容規(guī)格是對(duì)產(chǎn)品目標(biāo)的拆解，細(xì)化為具體的內(nèi)容和功能，例如我們?cè)O(shè)計(jì)一款打車應(yīng)用，它可能會(huì)包含，順風(fēng)車（對(duì)應(yīng)順路接送服務(wù)）、普通快車（對(duì)應(yīng)出租車服務(wù)）、高端用車（對(duì)應(yīng)企業(yè)服務(wù)高端出行領(lǐng)域）這三種規(guī)格。 

3.目標(biāo)
通常情況下，你的客戶并不知道他們的目標(biāo)，也不知道設(shè)計(jì)工作會(huì)如何影響他們。但概括下來有以下三種不同類型的目標(biāo)。 
業(yè)務(wù)目標(biāo):客戶給出的一個(gè)可衡量的目標(biāo)，例如增加銷售、市場份額、滲透率、減少X%的客戶流失率等KPI。 
營銷目標(biāo):幫助客戶實(shí)現(xiàn)商業(yè)目標(biāo)中一切與營銷相關(guān)的事情。幫助客戶提升客戶參與度的活動(dòng):意識(shí)-考慮-偏好-試用-購買-忠誠-宣傳。（對(duì)標(biāo)用戶生命周期模型：獲客、留存、激活、變現(xiàn)、傳播 ） 
溝通目標(biāo):我們需要行動(dòng)的目標(biāo)!預(yù)期的結(jié)果是什么，消費(fèi)者的行為或預(yù)期從我們?cè)O(shè)計(jì)的產(chǎn)品中獲得什么?它必須以具體有形的形式表達(dá)出來，例如1500人注冊(cè)，5000個(gè)額外的點(diǎn)贊，優(yōu)惠券下載，產(chǎn)品試用，撰寫評(píng)論，應(yīng)用程序的使用，潛在客戶，分享。 
雖然了解業(yè)務(wù)和營銷目標(biāo)很重要，但是讓我們的客戶了解UI和UX有其局限性，并且它們并不會(huì)對(duì)糟糕的商業(yè)策略產(chǎn)生影響，這一點(diǎn)非常重要。這可能很關(guān)鍵（撇清責(zé)任俗稱帥鍋哈哈）。 

4. 目標(biāo)受眾
這個(gè)產(chǎn)品是給誰的?誰將使用它，在什么時(shí)候什么場景下，為什么使用?描述用戶受眾必須盡可能具體，因?yàn)樵O(shè)計(jì)師通常會(huì)考慮到角色，特別是在UX方面，產(chǎn)品使用流程主要由用戶角色及其在客戶旅程中的特定階段決定。 

6.預(yù)算和時(shí)間
有些人可能會(huì)爭論是否應(yīng)該在一個(gè)簡短的報(bào)告中加入預(yù)算，不一定是準(zhǔn)確的預(yù)算，但我們至少要確定一個(gè)大致范圍。清晰的預(yù)算可能意味著設(shè)計(jì)師或代理機(jī)構(gòu)甚至不會(huì)接受該項(xiàng)目，或者如果客戶無法支付他們的服務(wù)費(fèi)用，他們會(huì)考慮另一種成本更低的解決方案。但若沒有溝通清楚，在設(shè)計(jì)進(jìn)行期間更容易產(chǎn)生分歧和問題。 

定義總的時(shí)間和預(yù)期的各時(shí)間節(jié)點(diǎn)則是為了避免那些清晰溝通可以避免的沖突點(diǎn)。時(shí)間還會(huì)影響預(yù)算;在任何緊急情況下，獲得額外資源都是可能的（比如若時(shí)間緊急可會(huì)提高價(jià)格）。 

根據(jù)我的經(jīng)驗(yàn)，真正重要的問題都是雙重的。 
1.客戶的教育程度不足以提供可以推動(dòng)項(xiàng)目正常運(yùn)行的必要信息 
2.設(shè)計(jì)師在沒有正確理解客戶的需求的情況下就心急直接開始設(shè)計(jì)。 

總結(jié)
如果您是客戶，一個(gè)好的設(shè)計(jì)概要將節(jié)省您在無意義的電子郵件，電話和會(huì)議上花費(fèi)的時(shí)間。它還可以幫助您獲得來自不同設(shè)計(jì)師和代理商的更和可比的報(bào)價(jià)。 
如果你是一名設(shè)計(jì)師，如果你堅(jiān)持從一個(gè)設(shè)計(jì)概要文件開始你的設(shè)計(jì)工作，你會(huì)從客戶那里獲得簡潔的愿景和期望，這可以讓你保持動(dòng)力。你的時(shí)間和努力是昂貴的，從潛在客戶那里獲取的某種信息可能毫無意義。明智的做法是優(yōu)先考慮那些已經(jīng)有一些遠(yuǎn)見、愿意承擔(dān)自己那部分工作的客戶。（即優(yōu)先考慮那些清晰的分析了產(chǎn)品的各類目標(biāo)、預(yù)算等關(guān)鍵內(nèi)容規(guī)格的客戶） 

一個(gè)好的簡介應(yīng)該是簡潔、清晰和全面的。如果目標(biāo)足夠清晰，應(yīng)當(dāng)不超過兩頁。 

為了使最終的結(jié)果盡可能的好，我們需要鼓勵(lì)和教育客戶和設(shè)計(jì)師去做更好的設(shè)計(jì)概要（說明文件），讓我們的工作更容易，并把重點(diǎn)放在更重要的事情上。 

文章來源：UI中國

在java的學(xué)習(xí)中，當(dāng)接觸到類這一章的時(shí)候，就會(huì)避免不了的接觸到this關(guān)鍵字。



首先，this關(guān)鍵字指向的是當(dāng)前對(duì)象的引用



作用：

             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;

}

}

 







對(duì)Test_08運(yùn)行后發(fā)現(xiàn)，調(diào)用的set方法并沒有對(duì) 對(duì)象中的變量進(jìn)行賦值，是因?yàn)椋瑐魅氲膮?shù)變量名與類中屬性變量名重復(fù)，因此我們?cè)趕et方法和有參構(gòu)造方法中加上了this.類屬性名稱，這樣就可以完成對(duì) 對(duì)象變量的賦值。如下圖：







             this.方法名稱              

                                用來訪問本類的成員方法



              this();                              

                                                    訪問本類的構(gòu)造方法



                                                    ()中可以有參數(shù)的 如果有參數(shù) 就是調(diào)用指定的有參構(gòu)造

           注意事項(xiàng):

                            1.this() 不能使用在普通方法中 只能寫在構(gòu)造方法中

                            2.必須是構(gòu)造方法中的第一條語句



例如，當(dāng)我們把this()放在有參構(gòu)造函數(shù)的末尾時(shí)，例如用this("哈哈");我們先不管語法是否有錯(cuò)誤，試著按照程序的運(yùn)行來判斷一下結(jié)果，我們可以看出，當(dāng)在創(chuàng)建對(duì)象時(shí)，假定調(diào)用含有this（“哈哈”）的構(gòu)造函數(shù)，則剛開始存放的值，會(huì)被this（“哈哈”）調(diào)用的只含有一個(gè)參數(shù)的構(gòu)造函數(shù)覆蓋，也就是說，最后的name會(huì)變成“哈哈”，這是與我們的初衷相違背的，而且運(yùn)行結(jié)果也是報(bào)錯(cuò)，



當(dāng)我們換到構(gòu)造方法的第一句時(shí)，則不會(huì)有這種錯(cuò)誤，因?yàn)樗⒉粫?huì)影響到后面name的賦值。







 







 



我們接下來把this語句放在構(gòu)造函數(shù)的第一句位置，



就不會(huì)有報(bào)錯(cuò)







 

————————————————

版權(quán)聲明：本文為CSDN博主「BetterShon」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_42386014/article/details/81138684

實(shí)現(xiàn)導(dǎo)航的左右滑動(dòng)類似于騰訊新聞，網(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;//自動(dòng)滾動(dòng)菜單速度0為不自動(dòng)滾動(dòng)

    this.container = b;//在那個(gè)容器內(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)聽過度動(dòng)畫是否結(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é)點(diǎn)，獲取不到屏幕寬度均返回

            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

        }

        //過度效果需要花費(fèi)時(shí)間

        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

    },

    //前一個(gè)，

    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)

        }

    },

    //后一個(gè)

    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") {

        //判斷是橫向還是樹向滑動(dòng)

            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è)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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) {

      // 切換動(dòng)畫

      let isBack = this.$router.isBack // 監(jiān)聽路由變化時(shí)的狀態(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è)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。