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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

END

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