網(wǎng)頁設(shè)計(jì)中的版式構(gòu)成類型

  • 2020-04-03 10:02:32
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://supportcoffeeroasters.com

網(wǎng)頁設(shè)計(jì)時(shí),不同的版式就會(huì)有不同的視覺效果,根據(jù)視覺效果不同可以總結(jié)出以下版式構(gòu)成的類型:水平分割、垂直分割、水平-垂直交叉分割、中軸型、傾斜型、曲線型、重心型、反復(fù)型、散點(diǎn)型等。其中,水平分割、垂直分割、水平-垂直交叉分割常用到水平線、垂直線、矩形等,這些形式在網(wǎng)頁制作時(shí)容易實(shí)現(xiàn),且頁面能容納較多的信息含量,因而是網(wǎng)頁設(shè)計(jì)中使用相當(dāng)廣泛的構(gòu)成類型。

水平分割

頁面中的水平分割與排列,強(qiáng)調(diào)了水平線的作用,使頁面具有安定、平靜的感覺,觀眾的視線在左右移動(dòng)中捕捉視覺信息,符合人們的視覺習(xí)慣。

1.水平均勻分割水平均勻分割將頁面分割成上下相等的兩部分。如圖1所示,上半部用作視覺表現(xiàn),引發(fā)情感,下半部用來解釋說明,上半部多為主體形象。

1.jpg

2.水平不均勻分割水平不均勻分割是將頁面分割成上下不相等的兩部分。一般來說,如果在上半部安置標(biāo)題或?qū)Ш?,則面積較小;如果在上半部安置圖片或主體形象,則面積適當(dāng)加大,如圖2所示。

2.jpg

3. 水平多次分割水平多次分割是頁面沿水平分割成大小不等的幾個(gè)部分。如圖3所示,橫向排列的圖片和標(biāo)題文字,強(qiáng)調(diào)了水平分割的層次和精確感。多層分割有助于不同信息的歸類。

3.jpg

4. 水平變化分割水平變化分別是在水平分割的基礎(chǔ)上進(jìn)行變化。如圖4所示,水平分割與斜線相結(jié)合,打破了頁面的安定,產(chǎn)生動(dòng)感。

a3aad5db3a1f12d1493e3096b27272e9.jpg

垂直分割

頁面中的垂直分割與排列,則強(qiáng)調(diào)垂直線的作用,具有堅(jiān)硬、理智、冷靜和秩序的感覺。

1.垂直均勻分割垂直均勻分割是把頁面分割為左右相等的兩部分。在視覺習(xí)慣上,當(dāng)左右兩部分形成強(qiáng)弱對(duì)比時(shí),會(huì)造成視覺心理的不平衡。這時(shí),可將分割線作部分或全部的弱化處理,或在分割處加入其他元素,使左右部分的過渡自然而和諧。如圖所示,左右兩部分在色彩上的對(duì)比由于視覺中心的圖文而減弱,左上角的標(biāo)志減輕左半部的重量感,使頁面更為融合。

5.jpg

2.垂直不均勻分割垂直不均勻分割是把頁面分割為左右不相等的兩部分。左邊的視覺注意度較高,因而放置標(biāo)志、導(dǎo)航信息、主體形象等,如圖6所示。如果將主體形象放在左右分割處,則會(huì)減弱左右部分的對(duì)比,加強(qiáng)它們的聯(lián)系,成為該頁面的視覺中心。

6.jpg

3. 垂直多次分割垂直多次分割是頁面沿垂直方向分割成大小不等的幾部分。在圖7中,頁面具有很強(qiáng)的層次性,左邊為主欄目導(dǎo)航,右邊為次級(jí)欄目導(dǎo)航,中間為相應(yīng)的內(nèi)容,中間和右邊由色彩統(tǒng)一,而左邊用形態(tài)的滲入來加強(qiáng)它與中間部分的銜接。

7.jpg

4. 垂直變化分割垂直變化分割是將垂直分割進(jìn)行特異性處理,容易取得耳目一新的效果。如圖11.21所示,將垂直分割應(yīng)用于網(wǎng)頁設(shè)計(jì),在分割處粘貼一個(gè)典型提示圖案,分割手法靈活多變,在網(wǎng)站建設(shè)時(shí)營(yíng)造出和諧統(tǒng)一的美感。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的版式構(gòu)成類型

當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/3189.html

上一篇:網(wǎng)頁設(shè)計(jì)的版式視覺原理

下一篇:水平垂直分割

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))