- 相關(guān)推薦
網(wǎng)頁設(shè)計的三大構(gòu)圖技巧
網(wǎng)頁給人最直觀的感受就是它的頁面框架與構(gòu)造,就像一座大樓的主體框架與形態(tài),下面小編為大家?guī)砹司W(wǎng)頁設(shè)計的三大構(gòu)圖技巧,希望對大家有用。
網(wǎng)頁設(shè)計的三大構(gòu)圖技巧
一、堅實的地基-幾何圖形的力量。
幾何圖形在頁面中往往能起到大梁的作用,也是網(wǎng)頁內(nèi)容最為常用的承載面板。這些圖形合理的搭配和有效的穿插,能使頁面除了信息傳達外,更具層次感和觀賞性。
此網(wǎng)站圓角矩形巧妙的結(jié)合信息模塊穿插在一起,除了營造了網(wǎng)站的主體富有節(jié)奏的形狀之外,更加強了頁面的層次感,不會顯得頁面枯燥和單調(diào)。
圓形和橢圓形的結(jié)合搭載了輪播廣告和重要信息,使得整個頁面既有亮點又不失簡潔。
同樣是圓角矩形的穿插結(jié)合, 色彩填充的圖形交集既能展示重要信息又勾勒出整個網(wǎng)站的風格形態(tài)。
豎著的大圓角矩形和線條勾勒出整個完整的畫面,各種信息鑲嵌于各個形狀只中,既不顯得亂又使其相得益彰。
二、鋼筋上的鉚釘—破格而出的素材
素材應(yīng)用的好,往往能起到畫龍點睛的作用,而素材起點綴頁面和表達主題之外,還能作為構(gòu)圖中的一種主要元素存在,這些素材通常破格而出作為連接頁面的紐帶,使頁面結(jié)構(gòu)更加的穩(wěn)固,故稱其為“鉚釘”。
素材看似隨機的擺放,其實是有意的將素材擺放于左上和右下兩個對角點,視覺上俗稱的暗線,左下角信息內(nèi)容的圖片和右上角的登錄窗口組成了另外一條對角暗線, 兩者并組成了X結(jié)構(gòu),而四個素材起到到了固定和壓軸的作用,穩(wěn)固而又美觀。
飛躍的人越于頁面之上,護目鏡掛于導(dǎo)航欄之上。這兩個素材的使用使整個頁面既貼切于主題又生動,而在構(gòu)圖上人連接穿插了1、2兩個板塊,而護目鏡所在的2板塊鏈接了3、4板塊,視覺上的感官延續(xù)讓頁面脈絡(luò)清晰不脫節(jié),切富有節(jié)奏感。
頁面非常簡單,除了圖形構(gòu)筑的基礎(chǔ)形,就是幾朵起到“鉚釘”作用的花兒,花朵破框而出,使得素材有機的`融于框內(nèi)又搭于整個頁面之上 ,讓人有種花是由圓洞內(nèi)長到頁面之上的錯覺,簡單而富有層次。
這個頁面的素材和主體框架的結(jié)合很巧妙,破框而出的噴濺牛奶和靜態(tài)的巧克力、杯子的動靜結(jié)合于頁面頭部,使得整個頁面主次清晰而又連貫。
三、打造斜塔之美—斜的視覺張力
比薩斜塔之斜是地質(zhì)沙化下沉還是設(shè)計師故意為之,至今還是有人在爭論,拋開爭議,斜塔的美似乎讓許多人都想來到它身邊一睹這位傾斜美人之容,湊巧的是,在浩瀚的宇宙中最美麗的星球,也就是地球,也斜著身子對著太陽轉(zhuǎn)著。話題扯的比較遠,斜線,或者說是斜著的物體,似乎天生有一種張力。在網(wǎng)頁設(shè)計中亦是如此,而在這里所表現(xiàn)的為視覺的張力,是種視覺心里上的延伸力而非物理上的。當頁面過于平均,畫面平平毫無亮點時,打破平均打破通體的平均尤為重要,打破平均的方式有很多,而斜線似乎是網(wǎng)頁設(shè)計中慣用的一招,屢試不爽。
斜線的張力讓整個頁面富有動感和延伸性,即可為頁面起到修飾的作用,又能做為信息的承載模塊,兩者有機的融合并不讓人覺得傾斜的標題不好識別或者有礙閱讀,反之更能讓整個頁面富有形式感和表現(xiàn)力。
斜線的運用加上素材和圓形的穿插結(jié)合,讓整個頁面具有動感,同時視線又隨著斜線的走向帶入至素材和標題之上 ,具有張力的同時又讓這些線起到一個很好到視覺導(dǎo)向作用。
以斜線為暗線排版而成的信息組件和右邊斜線切割而成的圖片形成形態(tài)上的互補,又形成節(jié)奏上虛實和疏密的對比,使得整個畫面既有斜線帶來的張力和動感之外,又不乏整體的穩(wěn)固和均衡。
【網(wǎng)頁設(shè)計的三大構(gòu)圖技巧】相關(guān)文章:
營銷型網(wǎng)站的網(wǎng)頁構(gòu)圖設(shè)計技巧07-16
光盤封面設(shè)計構(gòu)圖技巧07-16
平面設(shè)計構(gòu)圖5大技巧10-06
插花的構(gòu)圖技巧09-08
攝影構(gòu)圖技巧介紹09-11
風光攝影構(gòu)圖技巧10-10
影視畫面構(gòu)圖技巧11-07
繪畫構(gòu)圖技巧分析05-26
風光攝影的構(gòu)圖技巧09-25
手機攝影構(gòu)圖技巧07-06