{網(wǎng)頁設(shè)計干貨}網(wǎng)頁設(shè)計中常見的幾種表現(xiàn)手法

今天創(chuàng)新互聯(lián)為大家，整理一些網(wǎng)頁設(shè)計干貨：網(wǎng)頁設(shè)計中常見的幾種表現(xiàn)手法。

其實這些理論很多大神都有分享過，只不過我是新瓶裝舊酒，多包裝了一下，加入了一些新的案例和自己的見解而已。水平有限，不代表就是真理。有什么不妥地方，也可以指出多探討。

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

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

木有對比就木有傷害，木見過大海，不知海之闊，未見過蒼穹，不知空之廣。沒見過其他人做得好的，不知道自己做得有多齪……

對比作為設(shè)計最常見的手法，(本PPT也有用到)其實用性是很強的。

因為篇幅有限，(PS：飛來一腳把我踹飛：明明是你懶編不下去好么)暫且只描述下字體。

以下啪啦啪啦省略五千字……看圖就好

好了，我們繼續(xù)下個……

什么!是誰說的只看圖看不懂的……一定要我解釋么...

其實字體粗細(xì)對比太常見了。設(shè)計就是規(guī)則中加入一點變化，無非就只注意的一點是，若是要某段話有粗細(xì)對比，最恰當(dāng)?shù)氖址ㄟ€是使用同一種字體的粗細(xì)效果，但一般中文字體較少，英文的Amsipro，nexa(ps：我會告訴你這個就是ppt用的英文字體么)，Zona Pro，Gotham就擁有2種或以上的不同效果。大標(biāo)題我們?yōu)榱孙@眼通常都是加粗使用，小部分描述才使用纖細(xì)的。

這樣即保持字體上的統(tǒng)一，減少多余元素，又讓字體不至于太平淡缺乏變化。這樣看起來才更像是相親相愛的一家人……

另外，也不僅僅是只有字體才有大小對比，網(wǎng)頁上各個元素之間，也存在大小的對比，對比越夸張越強烈。其效果……嗯，這又是一個另外的故事了。

關(guān)于字型對比，其實這個也沒什么好說的，主要是在于不同場合怎么去使用這些不同的字體。

偏文藝范的畫面(明信片，攝影集排版組合)用手寫體， 各類電子產(chǎn)品(包含手機)適合標(biāo)題用纖細(xì)字體，若是化妝品，婚紗影樓，女性用品一類的就是襯線體，中國風(fēng)的，游戲?qū)ｎ}，要做出氣勢的就是毛筆字體，嬰童少兒相關(guān)的才用到圓角字體(因為小孩子容易受傷神馬的，所以一切玩具和小孩子用的東西大多都是塑料的，圓圓鈍鈍的，所以引申到設(shè)計表現(xiàn)形式上，也是相應(yīng)的感覺)

關(guān)于字體的疏密，其實是最不好拿捏的一環(huán)了， 大品牌官方banner上常有，如果沒有拉開距離有留白，整張圖都失去尿性。

但其實大眾能接受并且看得更多的還是相對緊密點的字體。為什么?很簡單，因為通常非高端品牌，給過來的slogan就沒有一個不是文字多且密集的。

在這種情況下。。。你拉開個毛線的距離……你以為人人都有這文采能想出簡短干練，而又讓人印象深刻的廣告語啊!

說的就是你，來自25世紀(jì)顛覆人類思想升華人類靈魂堪稱千年難得一現(xiàn)道德楷模精神品質(zhì)規(guī)范并且技巧已入臻境的偉大設(shè)計師某某。

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

關(guān)于方向，在設(shè)計過程中，你要做這個效果不僅僅是因為看到其他人的作品里用過這樣的豎排形式覺得好看才使用，更多是為了讓你的構(gòu)圖更加和諧恰當(dāng)，可以看到左側(cè)就是一個豎長的衣架效果。在這種情況下，設(shè)計師才想到用豎排的效果去填補右側(cè)的空間。

當(dāng)有一天，你能為你任意某一處細(xì)節(jié)的設(shè)計都找到一個合理的解釋的時候，你的設(shè)計才算真正入門。

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

高手是怎么來的?把一件事情重復(fù)一萬遍就好了。

一口氣吃不成一個胖子，黃裳就算發(fā)明練成九陰神功，等到天下無敵也要在山洞里修煉個幾十年不是?

重復(fù)不僅僅是一個手法更多是一種精神。反復(fù)去推敲，反復(fù)去打磨，反反復(fù)復(fù)去調(diào)整直至更好一點點。下圖你看人家手法是很簡單，看一眼就懂個大概，一個形式左邊右邊重復(fù)去使用，一個在左邊一個在右邊。但是要把細(xì)節(jié)做到這樣的程度。其實更多是在電腦屏幕面前反復(fù)修改的效果。

我們看到的很多成套系的廣告，也大部分都是一個idea換一個不同人物或者場景或文案去進行合成不同畫面 。

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

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

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

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

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

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

關(guān)于字體的排列也是老生常談了。但不可否認(rèn)，凡是出色的設(shè)計，在這個最基礎(chǔ)的運用過程中，幾乎不會出錯。

只是文字越多的情況越考驗一個設(shè)計師的文字駕馭能力。當(dāng)你不會排版的時候，把所有東西都規(guī)規(guī)矩矩排列在這或左或中或右?guī)讉€位置而不去想著做多少標(biāo)新立異的排版總不會錯。雖然原理是簡單了點，但是實際要能做到能hold住這么多元素并且做大氣也是不簡單的事情。

當(dāng)你自覺已經(jīng)超脫常規(guī)排版的限制，也不妨試試這樣的。

1.把文字圖像圖形化，如左圖一，感覺像碗里飄出來的煙氣

2.讓文字沿著某個畫面邊緣輪廓排列，如左下圖

3.讓文字形成傾斜角度，如中間圖

4.讓文字形成3D立體效果排列，如右下圖

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

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

在合成圖當(dāng)中，畫面中每一個合成的元素的位置也其實是根據(jù)現(xiàn)實中真實的方位來進行排列的。比例都是正常的比例，畫面中的有些元素稍微做過了，或者位置不對，其實都會或多或少讓人感覺不自然。

但其實這也是很多設(shè)計師剛開始接觸設(shè)計一兩年常做不到位的地方，抓不準(zhǔn)正確的位置與角度。具體怎么做到。。。不用問我，問杰克……

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

設(shè)計常見手法之親近

其實很多設(shè)計并非你表面上看到的那樣簡單，之所以呈現(xiàn)在你的視角里是自然而然的，其中和設(shè)計師對規(guī)則的掌握密不可分。有時候，要做出好設(shè)計全憑的就是一種習(xí)慣。強制性讓自己去做符合這些規(guī)則的設(shè)計。不僅要靠平時大量去看去收藏好的東西，去實踐去利用，日積月累。自己也要懂得去分析去判斷。他人的哪里有亮點，好，好在哪里，不足之處又在哪里，多思考多總結(jié)。在下圖的設(shè)計中，作圖如博弈，高手落子，一筆一畫都是蘊藏著這些規(guī)律的。當(dāng)然，并非說不能做出突破，超越常規(guī)的東西。但在與很多人還未到能沉淀到能獨創(chuàng)出處于自己的大招的地步。那么所做的東西其實都是略散，缺乏完整度的，那還不如一般的套路。

但你看人家無論是左側(cè)排也好右側(cè)排也好，一樣玩很6，你說他難道就不是創(chuàng)新?難到就做得不好?只是他把一個簡單的原理做到了極致。當(dāng)你察覺到這些設(shè)計背后的東西，那可能就是你設(shè)計之路新的開始。親近從字面上的意思非常好理解，兩個人興趣愛好相同，喜歡的東西差不多，有很多東西不謀而合比較接近，雖然距離遙遠(yuǎn)，雖然從前形同陌路，但如今卻一見如故，這就是親近的感覺。因為類似，因為志同道合，所以不論天涯海角，都有著似有似無的聯(lián)系，如那天上的風(fēng)箏，不管飛多高，那手中都有一根線在牽引。如那花果山的孫猴子，不論你怎么上床下跳，都逃不出如來佛祖的手心。

當(dāng)你理解了這一步，不是你去進行設(shè)計，而是不知不覺有個東西在牽引著你，呼喚著你，你會發(fā)現(xiàn)，原來最正確最恰當(dāng)?shù)哪菞l路，就在那里，就看你來得早，還是來得遲。所謂文章本天成,妙手偶得之。就是如此。

很多人都知道扁平化的好，都接觸過扁平化的設(shè)計。

但其實所有扁平化設(shè)計都建立在一個基礎(chǔ)之上，若是缺乏這個基礎(chǔ)，盲目去做，那效果~喜愛扁平化設(shè)計的你，可曾問過自己，你的圖標(biāo)都是統(tǒng)一像素的么?你對字體的選用，大小間距的把控都到位了么?你選用的圖片能支撐起整個畫面么?能讓你的設(shè)計更加有亮點還是因為過于放大暴露出更多不足?你的排版布局是具有創(chuàng)造力的還是規(guī)整的?是的，扁平化設(shè)計不需要你做太多的光效質(zhì)感，但是更需要你在其他細(xì)節(jié)上下功夫。

如下圖，看上去舒適美觀的背后，是對圖片色彩的嚴(yán)格把控。每一個板塊，你都能從下一個板塊找到相對應(yīng)的色彩。例：第一屏男一身上的衣服與最下邊一屏的女子褲子色調(diào)般配，男一的褲子與中間一屏男二衣服顏色是般配的，同時也接近女子身上蓋的毯子的顏色。更不用提畫面中都是有顏色相接近的木質(zhì)家具或地板。

因為色彩，選圖的親近，讓你更容易感覺到這些都是一致的，是同一個品牌所傳遞的東西。因為減少了其他無關(guān)的色彩，只有在畫面中出現(xiàn)過的色彩，簡潔而不簡單的效果就這么出來了。

這里我多說兩句。在國外，網(wǎng)頁設(shè)計是一整套系的設(shè)計思路的延展。在前期產(chǎn)品拍攝這個環(huán)節(jié)，大概就已經(jīng)具備照片所要表達的風(fēng)格與修圖后的色調(diào)了。(甚至攝影師的薪資，公司在攝影上的投入還超越設(shè)計)在這樣的環(huán)境下交給設(shè)計制作才能一氣呵成。從制作的結(jié)果來看，其設(shè)計感與調(diào)性，品質(zhì)感遠(yuǎn)勝于國內(nèi)大多數(shù)設(shè)計。

當(dāng)然這也并非完全是技能不如。在國內(nèi)的話，客戶提供的圖片本身low或者根本就是各路攝影圖片的拼湊而并非一套系，在產(chǎn)品素材上并未花費多少錢?？蛻艏南Ｍ谠O(shè)計去解決這個素材不足的問題。當(dāng)然，我說的是大部分，現(xiàn)在部分電商商家已經(jīng)重視起攝影這個環(huán)節(jié)了，但是更多的企業(yè)家卻不夠了解。在這種情況下去做扁平……就像人家用飛機坦克你用彈弓。是有能用一些素材網(wǎng)上圖片來提升檔次的。但圖片效果的真實性與合理度嘛… …所以你對設(shè)計的追求就只是把東西做得美不需要太貼切就好了么?當(dāng)然。能在一切限制條件下發(fā)揮出來把設(shè)計做好的，那絕對是真愛。

上面幾張圖若是國外設(shè)計師，從攝影師給的素材庫里拖拖，稍微修下就好了。而國內(nèi)設(shè)計要做接近的效果。就這3張圖，要色調(diào)一致，都是差不多人物膚質(zhì)的我，服裝也接近的效果，一天還未必能找到。 (當(dāng)然，只限于有追求的，普通設(shè)計不會想幾張選圖我還搞這么嚴(yán)密，有病)所以，人家花費一天時間鍛煉到的“設(shè)計”的技巧，可能你要近2天時間。(因為大半天花費在找圖上了)

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

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

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

END

其實一直想做這么一件事情，就是將設(shè)計語言平實化，通俗化，推廣傳播給普通人，消除與客戶之間的代溝。也為自己未來做設(shè)計使用的一些手法提供依據(jù)。因為大部分自己一直都在用，真的不想一遍又一遍去向客戶去解釋，我為什么要這樣去設(shè)計。

希望每個人也不要都小瞧了這些最基礎(chǔ)的定律， 知道容易，行很難。有多少人還停留在知道，但是沒養(yǎng)成習(xí)慣，總是做不到位的程度呢?其實就拿我來說，也是總戒不掉少用一些字體。因為感覺都好的情況下難取舍。所以共勉之。

分享題目：{網(wǎng)頁設(shè)計干貨}網(wǎng)頁設(shè)計中常見的幾種表現(xiàn)手法
本文網(wǎng)址：http://www.muchs.cn/news4/163054.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、微信小程序、網(wǎng)站排名、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)