年末福利！三種網(wǎng)頁設(shè)計(jì)常見表現(xiàn)手法

設(shè)計(jì)的理論有很多，這只是其中個(gè)人覺得基礎(chǔ)中的基礎(chǔ)，最有代表性的四條而已，并未有以偏概全的意思，設(shè)計(jì)之域，豈可寥寥概括。未來，有機(jī)會(huì)我再進(jìn)行補(bǔ)充與延展。

一，設(shè)計(jì)常見手法之對比

木有對比就木有傷害，木見過大海，不知海之闊，未見過蒼穹，不知空之廣。沒見過其他人做得好的，不知道自己做得有多齪……
對比作為設(shè)計(jì)最常見的手法，（本PPT也有用到）其實(shí)用性是很強(qiáng)的。
因?yàn)槠邢?，（PS：飛來一腳把我踹飛：明明是你懶編不下去好么）暫且只描述下字體。
以下啪啦啪啦省略五千字……看圖就好
好了，我們繼續(xù)下個(gè)……

什么！內(nèi)誰說的只看圖看不懂的……
一定要我解釋么。。。
其實(shí)字體粗細(xì)對比太常見了。設(shè)計(jì)就是規(guī)則中加入一點(diǎn)變化，無非就只注意的一點(diǎn)是，若是要某段話有粗細(xì)對比，最恰當(dāng)?shù)氖址ㄟ€是使用同一種字體的粗細(xì)效果，但一般中文字體較少，英文的Amsipro，nexa（ps：我會(huì)告訴你這個(gè)就是ppt用的英文字體么），Zona Pro，Gotham就擁有2種或以上的不同效果。大標(biāo)題我們?yōu)榱孙@眼通常都是加粗使用，小部分描述才使用纖細(xì)的。
這樣即保持字體上的統(tǒng)一，減少多余元素，又讓字體不至于太平淡缺乏變化。這樣看起來才更像是相親相愛的一家人……
另外，也不僅僅是只有字體才有大小對比，網(wǎng)頁上各個(gè)元素之間，也存在大小的對比，對比越夸張?jiān)綇?qiáng)烈。其效果……嗯，這又是一個(gè)另外的故事了。

關(guān)于字型對比，其實(shí)這個(gè)也沒什么好說的，主要是在于不同場合怎么去使用這些不同的字體。
偏文藝范的畫面（明信片，攝影集排版組合）用手寫體， 各類電子產(chǎn)品（包含手機(jī)）適合標(biāo)題用纖細(xì)字體，若是化妝品，婚紗影樓，女性用品一類的就是襯線體，中國風(fēng)的，游戲?qū)ｎ}，要做出氣勢的就是毛筆字體，嬰童少兒相關(guān)的才用到圓角字體（因?yàn)樾『⒆尤菀资軅耨R的，所以一切玩具和小孩子用的東西大多都是塑料的，圓圓鈍鈍的，所以引申到設(shè)計(jì)表現(xiàn)形式上，也是相應(yīng)的感覺）

關(guān)于字體的疏密，其實(shí)是最不好拿捏的一環(huán)了， 大品牌官方banner上常有，如果沒有拉開距離有留白，整張圖都失去尿性。
但其實(shí)大眾能接受并且看得更多的還是相對緊密點(diǎn)的字體。為什么？很簡單，因?yàn)橥ǔ７歉叨似放疲o過來的slogan就沒有一個(gè)不是文字多且密集的。
在這種情況下。。。你拉開個(gè)毛線的距離……你以為人人都有這文采能想出簡短干練，而又讓人印象深刻的廣告語??！
說的就是你，來自25世紀(jì)顛覆人類思想升華人類靈魂堪稱千年難得一現(xiàn)道德楷模精神品質(zhì)規(guī)范并且技巧已入臻境的偉大設(shè)計(jì)師某某。

關(guān)于色彩，其實(shí)還是秉承設(shè)計(jì)的原理就是簡潔而不簡單，要和整體更加和諧搭配，同時(shí)顯簡潔的同時(shí)，還能讓人感覺有細(xì)節(jié)。你可以看到我選取的這個(gè)例子中，標(biāo)題的顏色，裝飾的彩帶，頁面的logo和某個(gè)文字都是同樣的色系。增加了畫面色彩不單調(diào)的同時(shí)，其又統(tǒng)一簡練。

關(guān)于方向，在設(shè)計(jì)過程中，你要做這個(gè)效果不僅僅是因?yàn)榭吹狡渌说淖髌防镉眠^這樣的豎排形式覺得好看才使用，更多是為了讓你的構(gòu)圖更加和諧恰當(dāng)，可以看到左側(cè)就是一個(gè)豎長的衣架效果。在這種情況下，設(shè)計(jì)師才想到用豎排的效果去填補(bǔ)右側(cè)的空間。
當(dāng)有一天，你能為你任意某一處細(xì)節(jié)的設(shè)計(jì)都找到一個(gè)合理的解釋的時(shí)候，你的設(shè)計(jì)才算真正入門。

二，設(shè)計(jì)常見手法之重復(fù)

高手是怎么來的？把一件事情重復(fù)一萬遍就好了。
一口氣吃不成一個(gè)胖子，黃裳就算發(fā)明練成九陰神功，等到天下無敵也要在山洞里修煉個(gè)幾十年不是？ 
重復(fù)不僅僅是一個(gè)手法更多是一種精神。反復(fù)去推敲，反復(fù)去打磨，反反復(fù)復(fù)去調(diào)整直至更好一點(diǎn)點(diǎn)。下圖你看人家手法是很簡單，看一眼就懂個(gè)大概，一個(gè)形式左邊右邊重復(fù)去使用，一個(gè)在左邊一個(gè)在右邊。但是要把細(xì)節(jié)做到這樣的程度。其實(shí)更多是在電腦屏幕面前反復(fù)修改的效果。 
我們看到的很多成套系的廣告，也大部分都是一個(gè)idea換一個(gè)不同人物或者場景或文案去進(jìn)行合成不同畫面 。

其中最經(jīng)典的也是點(diǎn)線面的重復(fù)（形狀版式的重復(fù)之前有講述過，這次就不復(fù)述了）

點(diǎn)的重復(fù)常見于自然界當(dāng)中，在設(shè)計(jì)手法中，除了下圖的制作成背景，也有作為頁面上一些風(fēng)沙，雨雪，飄飛，火花去增加畫面中的細(xì)節(jié)和質(zhì)感。很多抽絲的效果也是可以通過在圖案里設(shè)置小點(diǎn)而制作出來，這也是很多點(diǎn)重復(fù)的效果。

線在設(shè)計(jì)中大部分是以圖案底紋而存在，VI整套設(shè)計(jì)當(dāng)中，一個(gè)有逼格的由幾條線組成的圖形+背景色，就足以撐起整個(gè)設(shè)計(jì)的氣場。

點(diǎn)和線集合重復(fù)起來，都可以構(gòu)成面。狹義中的點(diǎn)線面是我們所看到的這些圖案，線條，但廣義的點(diǎn)線面可以引申到一個(gè)畫面中的方方面面。

以下圖片最基本的構(gòu)成就是點(diǎn)線面，但卻是幾個(gè)基礎(chǔ)元素不同形式的反復(fù)使用與演變。但這個(gè)功夫是我沒辦法總結(jié)出規(guī)律來的……你知道原理和執(zhí)行做出來是兩回事，要耍出來是真要有藝術(shù)細(xì)胞和突出起來的靈感的……在這個(gè)領(lǐng)域我做出來的點(diǎn)線面設(shè)計(jì)相對而言是比較初級的效果。所以只能初略提提，還望諒解。

在設(shè)計(jì)常見手法當(dāng)中，其實(shí)最值得一提的就是排列，這也是大部分非科班設(shè)計(jì)唯一不多能把控了解理論后只要花點(diǎn)時(shí)間就能輕松掌握的了。

關(guān)于字體的排列也是老生常談了。但不可否認(rèn)，凡是出色的設(shè)計(jì)，在這個(gè)最基礎(chǔ)的運(yùn)用過程中，幾乎不會(huì)出錯(cuò)。
只是文字越多的情況越考驗(yàn)一個(gè)設(shè)計(jì)師的文字駕馭能力。當(dāng)你不會(huì)排版的時(shí)候，把所有東西都規(guī)規(guī)矩矩排列在這或左或中或右?guī)讉€(gè)位置而不去想著做多少標(biāo)新立異的排版總不會(huì)錯(cuò)。雖然原理是簡單了點(diǎn)，但是實(shí)際要能做到能hold住這么多元素并且做大氣也是不簡單的事情。

當(dāng)你自覺已經(jīng)超脫常規(guī)排版的限制，也不妨試試這樣的。
1.把文字圖像圖形化，如左圖一，感覺像碗里飄出來的煙氣
2.讓文字沿著某個(gè)畫面邊緣輪廓排列，如左下圖
3.讓文字形成傾斜角度，如中間圖
4.讓文字形成3D立體效果排列，如右下圖

說到排列，就不得不提起柵格，這里有兩種形式，當(dāng)你要做圖像之間有間隙的設(shè)計(jì)就類似左圖，留下中間隔開圖片的空間，若是不需要，其實(shí)是可以更為簡化形成更簡單的柵格。具體內(nèi)容因?yàn)楹芫们耙呀?jīng)提到過就不詳敘了。

 uehtml就是柵格化設(shè)計(jì)后的效果，網(wǎng)頁中的板塊設(shè)置都是經(jīng)過計(jì)算后的整數(shù)。一般柵格多用于平臺(tái)型網(wǎng)站，或者需要自適應(yīng)效果的頁面。

在合成圖當(dāng)中，畫面中每一個(gè)合成的元素的位置也其實(shí)是根據(jù)現(xiàn)實(shí)中真實(shí)的方位來進(jìn)行排列的。比例都是正常的比例，畫面中的有些元素稍微做過了，或者位置不對，其實(shí)都會(huì)或多或少讓人感覺不自然。
但其實(shí)這也是很多設(shè)計(jì)師剛開始接觸設(shè)計(jì)一兩年常做不到位的地方，抓不準(zhǔn)正確的位置與角度。具體怎么做到。。。不用問我，問杰克……

好了，以上講了很多大路貨，接下來說點(diǎn)特別的。

設(shè)計(jì)常見手法之親近
其實(shí)很多設(shè)計(jì)并非你表面上看到的那樣簡單，之所以呈現(xiàn)在你的視角里是自然而然的，其中和設(shè)計(jì)師對規(guī)則的掌握密不可分。 
有時(shí)候，要做出好設(shè)計(jì)全憑的就是一種習(xí)慣。強(qiáng)制性讓自己去做符合這些規(guī)則的設(shè)計(jì)。
不僅要靠平時(shí)大量去看去收藏好的東西，去實(shí)踐去利用，日積月累。自己也要懂得去分析去判斷。他人的哪里有亮點(diǎn)，好，好在哪里，不足之處又在哪里，多思考多總結(jié)。
在下圖的設(shè)計(jì)中，作圖如博弈，高手落子，一筆一畫都是蘊(yùn)藏著這些規(guī)律的。當(dāng)然，并非說不能做出突破，超越常規(guī)的東西。但在與很多人還未到能沉淀到能獨(dú)創(chuàng)出處于自己的大招的地步。那么所做的東西其實(shí)都是略散，缺乏完整度的，那還不如一般的套路。
但你看人家無論是左側(cè)排也好右側(cè)排也好，一樣玩很6，你說他難道就不是創(chuàng)新？難到就做得不好？只是他把一個(gè)簡單的原理做到了極致。
當(dāng)你察覺到這些設(shè)計(jì)背后的東西，那可能就是你設(shè)計(jì)之路新的開始。
親近從字面上的意思非常好理解，兩個(gè)人興趣愛好相同，喜歡的東西差不多，有很多東西不謀而合比較接近，雖然距離遙遠(yuǎn)，雖然從前形同陌路，但如今卻一見如故，這就是親近的感覺。
因?yàn)轭愃疲驗(yàn)橹就篮?，所以不論天涯海角，都有著似有似無的聯(lián)系，如那天上的風(fēng)箏，不管飛多高，那手中都有一根線在牽引。如那花果山的孫猴子，不論你怎么上床下跳，都逃不出如來佛祖的手心。
當(dāng)你理解了這一步，不是你去進(jìn)行設(shè)計(jì)，而是不知不覺有個(gè)東西在牽引著你，呼喚著你，你會(huì)發(fā)現(xiàn)，原來最正確最恰當(dāng)?shù)哪菞l路，就在那里，就看你來得早，還是來得遲。所謂文章本天成,妙手偶得之。就是如此。

很多人都知道扁平化的好，都接觸過扁平化的設(shè)計(jì)。
但其實(shí)所有扁平化設(shè)計(jì)都建立在一個(gè)基礎(chǔ)之上，若是缺乏這個(gè)基礎(chǔ)，盲目去做，那效果~
喜愛扁平化設(shè)計(jì)的你，可曾問過自己，你的圖標(biāo)都是統(tǒng)一像素的么？
你對字體的選用，大小間距的把控都到位了么？
你選用的圖片能支撐起整個(gè)畫面么？能讓你的設(shè)計(jì)更加有亮點(diǎn)還是因?yàn)檫^于放大暴露出更多不足？你的排版布局是具有創(chuàng)造力的還是規(guī)整的？
是的，扁平化設(shè)計(jì)不需要你做太多的光效質(zhì)感，但是更需要你在其他細(xì)節(jié)上下功夫。
如下圖，
看上去舒適美觀的背后，是對圖片色彩的嚴(yán)格把控。每一個(gè)板塊，你都能從下一個(gè)板塊找到相對應(yīng)的色彩。
例：第一屏男一身上的衣服與最下邊一屏的女子褲子色調(diào)般配，男一的褲子與中間一屏男二衣服顏色是般配的，同時(shí)也接近女子身上蓋的毯子的顏色。更不用提畫面中都是有顏色相接近的木質(zhì)家具或地板。 
因?yàn)樯?，選圖的親近，讓你更容易感覺到這些都是一致的，是同一個(gè)品牌所傳遞的東西。因?yàn)闇p少了其他無關(guān)的色彩，只有在畫面中出現(xiàn)過的色彩，簡潔而不簡單的效果就這么出來了。

這里我多說兩句。在國外，網(wǎng)頁設(shè)計(jì)是一整套系的設(shè)計(jì)思路的延展。在前期產(chǎn)品拍攝這個(gè)環(huán)節(jié)，大概就已經(jīng)具備照片所要表達(dá)的風(fēng)格與修圖后的色調(diào)了。（甚至攝影師的薪資，公司在攝影上的投入還超越設(shè)計(jì)）
在這樣的環(huán)境下交給設(shè)計(jì)制作才能一氣呵成。從制作的結(jié)果來看，其設(shè)計(jì)感與調(diào)性，品質(zhì)感遠(yuǎn)勝于國內(nèi)大多數(shù)設(shè)計(jì)。
當(dāng)然這也并非完全是技能不如。
在國內(nèi)的話。。?？蛻籼峁┑膱D片本身low或者根本就是各路攝影圖片的拼湊而并非一套系，在產(chǎn)品素材上并未花費(fèi)多少錢?？蛻艏南Ｍ谠O(shè)計(jì)去解決這個(gè)素材不足的問題。
當(dāng)然，我說的是大部分，現(xiàn)在部分電商商家已經(jīng)重視起攝影這個(gè)環(huán)節(jié)了，但是更多的企業(yè)家卻不夠了解。
在這種情況下去做扁平……就像人家用飛機(jī)坦克你用彈弓。。。是有能用一些素材網(wǎng)上圖片來提升檔次的。。。但圖片效果的真實(shí)性與合理度嘛……所以你對設(shè)計(jì)的追求就只是把東西做得美不需要太貼切就好了么？
當(dāng)然。能在一切限制條件下發(fā)揮出來把設(shè)計(jì)做好的，那絕對是真愛。
上面幾張圖若是國外設(shè)計(jì)師，從攝影師給的素材庫里拖拖，稍微修下就好了。而國內(nèi)設(shè)計(jì)要做接近的效果。就這3張圖，要色調(diào)一致，都是差不多人物膚質(zhì)的，服裝也接近的效果，一天還未必能找到。 （當(dāng)然，只限于有追求的，普通設(shè)計(jì)不會(huì)想幾張選圖我還搞這么嚴(yán)密，有?。┧裕思一ㄙM(fèi)一天時(shí)間鍛煉到的“設(shè)計(jì)”的技巧，可能你要近2天時(shí)間。（因?yàn)榇蟀胩旎ㄙM(fèi)在找圖上了）

回到正題，除了色彩之外，最常見的還是各個(gè)元素，位置之間的親近。設(shè)計(jì)的有趣之處就在于此。你設(shè)定了很多小的東西，很多人看不大出，等到揭曉答案的環(huán)節(jié)，才有人恍然大悟，原來如此。當(dāng)你看到以下兩個(gè)例子的時(shí)候，你看著排得很大氣，但是你知道是怎么才能排出來的么？

再來一個(gè)更加貼近網(wǎng)頁的案例吧。來自內(nèi)啥……然后你會(huì)感慨，尼瑪，這滿滿都是套路丫。。。當(dāng)然，要你去原創(chuàng)，你確定你行？因?yàn)樵O(shè)計(jì)這門學(xué)問，絕對不止我今天講述的這些，除了以上這些定律外，作品的高度，是無數(shù)個(gè)因素成就的結(jié)果。并非你單獨(dú)掌控某一種定律就能完全做出來的。如果沒有遠(yuǎn)超你動(dòng)手能力的審美水平，沒有日積月累培養(yǎng)起來的設(shè)計(jì)意識(shí)，沒有對圖片素材的嚴(yán)格挑選，不選到適合的圖片不罷手的精神，對細(xì)節(jié)的執(zhí)著追求，沒有大毅力，沒有夢想，我今天說再多的規(guī)則，就算你能理解，也是絕對做不出來這樣的設(shè)計(jì)來的。

最后這個(gè)算是我給內(nèi)部同事的作業(yè)。聽完我以上的分析，再來看看下圖，你能找到它其中用了我今天說的多少種手法么？它們又是在哪里呢？

END

其實(shí)一直想做這么一件事情，就是將設(shè)計(jì)語言平實(shí)化，通俗化，推廣傳播給普通人，消除與客戶之間的代溝。也為自己未來做設(shè)計(jì)使用的一些手法提供依據(jù)。因?yàn)榇蟛糠肿约阂恢倍荚谟?，真的不想一遍又一遍去向客戶去解釋，我為什么要這樣去設(shè)計(jì)。
希望每個(gè)人也不要都小瞧了這些最基礎(chǔ)的定律， 知道容易，行很難。有多少人還停留在知道，但是沒養(yǎng)成習(xí)慣，總是做不到位的程度呢？
其實(shí)就拿我來說，也是總戒不掉少用一些字體。因?yàn)楦杏X都好的情況下難取舍。所以共勉之。 
2016月12.22
祝小賤