網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧發(fā)布者：本站 時(shí)間：2022-01-19 14:01:07
一篇開(kāi)拓網(wǎng)頁(yè)設(shè)計(jì)思路的文章，雖然有些年代了，但是其中分享的構(gòu)圖技巧到現(xiàn)在依然是非常受用的，如果你能領(lǐng)悟個(gè)中精髓，融會(huì)貫通。那么今后你設(shè)計(jì)出來(lái)的網(wǎng)站，一定會(huì)從格局形勢(shì)上讓客戶(hù)眼前一亮。
網(wǎng)頁(yè)給人最直觀的感受就是它的頁(yè)面框架與構(gòu)造，就像一座大樓的主體框架與形態(tài)，你可能記不起東方明珠塔和艾菲爾鐵塔是用什么顏色或什么材料涂的外墻，但我想你一定記得起它們是什么樣的形狀。同樣，網(wǎng)頁(yè)設(shè)計(jì)中的構(gòu)圖也足以影響到整個(gè)網(wǎng)站給人的感受。雖然比喻并不十分恰當(dāng)，但就網(wǎng)頁(yè)其構(gòu)圖而言，些許的改變和簡(jiǎn)單的創(chuàng)新也許就能起到事半功倍的效果，使網(wǎng)站給人耳目一新的感受。
如何將網(wǎng)頁(yè)這座樓蓋的漂亮?以下就例舉一些在網(wǎng)頁(yè)設(shè)計(jì)上能起到事半功倍的構(gòu)圖技巧。個(gè)人拙見(jiàn)，希望能夠拋磚引玉。
【一】堅(jiān)實(shí)的地基——幾何圖形的力量
幾何圖形在頁(yè)面中往往能起到大梁的作用，也是網(wǎng)頁(yè)內(nèi)容最為常用的承載面板。圖形之間合理的搭配和有效的穿插，能使頁(yè)面除了信息傳達(dá)外，更具層次感和觀賞性。
此網(wǎng)站把圓角矩形巧妙地與信息模塊穿插在一起，在營(yíng)造了網(wǎng)站的主體富有節(jié)奏的形狀之外，更加強(qiáng)了頁(yè)面的層次感，使頁(yè)面不在枯燥單調(diào)。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
圓形和橢圓形的結(jié)合搭載了輪播廣告和重要信息，使得整個(gè)頁(yè)面既有亮點(diǎn)又不失簡(jiǎn)潔。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
同樣是圓角矩形的穿插結(jié)合， 色彩填充的圖形交集既展示了重要信息又勾勒出整個(gè)網(wǎng)站的風(fēng)格形態(tài)。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
豎著的大圓角矩形和線條勾勒出整個(gè)完整畫(huà)面，各種信息鑲嵌于各個(gè)形狀之中，使其相得益彰。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
更多類(lèi)似的例子：
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
【二】鋼筋上的鉚釘——破格而出的素材
素材應(yīng)用的好，往往能起到畫(huà)龍點(diǎn)睛的作用，而素材除了點(diǎn)綴頁(yè)面和表達(dá)主題之外，還能作為構(gòu)圖中的一種主要元素存在，這些素材通常破格而出作為連接頁(yè)面的紐帶，使頁(yè)面結(jié)構(gòu)更加的穩(wěn)固，故稱(chēng)其為“鉚釘”。
看似隨機(jī)的擺放，其實(shí)是有意將素材擺放于左上和右下兩個(gè)對(duì)角點(diǎn)，視覺(jué)上俗稱(chēng)的暗線。左下角信息內(nèi)容的圖片和右上角的登錄窗口組成了另外一條對(duì)角暗線， 兩者并組成了X結(jié)構(gòu)。四個(gè)素材起到到了固定和壓軸的作用，穩(wěn)固而又美觀。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
飛躍的人越于頁(yè)面之上，護(hù)目鏡掛于導(dǎo)航欄之上。這兩個(gè)素材的使用使整個(gè)頁(yè)面既貼切主題又生動(dòng)。在構(gòu)圖上，人連接穿插了1、2兩個(gè)板塊，而護(hù)目鏡所在的2板塊鏈接了3、4板塊，視覺(jué)上的感官延續(xù)讓頁(yè)面脈絡(luò)清晰不脫節(jié)，富有節(jié)奏感。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
頁(yè)面非常簡(jiǎn)單，除了圖形構(gòu)筑的基礎(chǔ)形，還有幾朵起到“鉚釘”作用的花兒?；ǘ淦瓶蚨觯顾夭挠袡C(jī)的融于框內(nèi)又搭于整個(gè)頁(yè)面之上 。讓人有種花是由圓洞內(nèi)長(zhǎng)到頁(yè)面之上的錯(cuò)覺(jué)，簡(jiǎn)單而富有層次。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
這個(gè)頁(yè)面中素材和主體框架的結(jié)合很巧妙，破框而出噴濺的牛奶和靜態(tài)的巧克力、杯子，動(dòng)靜結(jié)合置于頂部，使得整個(gè)頁(yè)面主次清晰而又連貫。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
更多類(lèi)似的例子:
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
【三】打造斜塔之美—斜的視覺(jué)張力
比薩斜塔之斜是地質(zhì)沙化下沉還是設(shè)計(jì)師故意為之，至今還是有人在爭(zhēng)論。拋開(kāi)爭(zhēng)議，斜塔的魅力讓許多人都想來(lái)到它身邊一睹這位傾斜美人之容。湊巧的是，在浩瀚的宇宙中最美麗的星球，也就是地球，也斜著身子對(duì)著太陽(yáng)轉(zhuǎn)著。話題扯的比較遠(yuǎn)，斜線，或者說(shuō)是斜著的物體，似乎天生有一種張力。在網(wǎng)頁(yè)設(shè)計(jì)中亦是如此。而在這里所表現(xiàn)的為視覺(jué)的張力，是種視覺(jué)心里上的延伸力而非物理上的。當(dāng)頁(yè)面過(guò)于平均，毫無(wú)亮點(diǎn)時(shí)，打破通體的平均尤為重要。打破平均的方式有很多，而斜線似乎是網(wǎng)頁(yè)設(shè)計(jì)中最常用的一招，屢試不爽。
斜線的張力讓整個(gè)頁(yè)面富有動(dòng)感和延伸性，即可為頁(yè)面起到修飾的作用，又能作為信息的承載模塊，兩者有機(jī)的融合并不讓人覺(jué)得傾斜的標(biāo)題不好識(shí)別或者有礙閱讀，反之更能讓整個(gè)頁(yè)面富有形式感和表現(xiàn)力。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
斜線的運(yùn)用加上素材和圓形的穿插結(jié)合，讓整個(gè)頁(yè)面具有動(dòng)感，同時(shí)視線又隨著斜線的走向帶入至素材和標(biāo)題之上 ，具有張力的同時(shí)又讓這些線起到一個(gè)很好到視覺(jué)導(dǎo)向作用。
詳細(xì)解析網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)圖技巧,PS教程,
以斜線為暗線排版而成的信息組件和右邊斜線切割而成的圖片形成形態(tài)上的互補(bǔ)，形成節(jié)奏上虛實(shí)和疏密的對(duì)比，使整個(gè)畫(huà)面既有斜線帶來(lái)的張力和動(dòng)感，又不乏整體的穩(wěn)固和均衡。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)