網(wǎng)頁(yè)版式設(shè)計(jì)基礎(chǔ)(一)

  • 2020-03-31 14:22:23
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://51zuanshi.com.cn

網(wǎng)頁(yè)版面不同于傳統(tǒng)意義上的報(bào)紙、雜志、平面廣告等具有固定的版面尺寸。首先,在水平方向上,由于大多數(shù)人的桌面顯示器分辨率設(shè)置為800×600像素、1024×768像素或者1366×768像素等,在網(wǎng)頁(yè)設(shè)計(jì)時(shí)應(yīng)以1024×7680像素為標(biāo)準(zhǔn),除去滾動(dòng)條占用的20像素,安全寬度應(yīng)控制在1000像素內(nèi),才能瀏覽到全部頁(yè)面內(nèi)容。

而在分辨率13664×768像素的設(shè)置下,頁(yè)面內(nèi)容只占版面空間的一部分(居左或居中),其余空間為背景色。其次,在垂直方向上,由于頁(yè)面是可以滾動(dòng)的,版面的長(zhǎng)度不做限制。因而這樣一個(gè)動(dòng)態(tài)的、變化的版面空間,給版式設(shè)計(jì)增加了難度。為避免版面空間的不固定給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)的負(fù)面影響,取得較好的版面視覺(jué)效果,很多網(wǎng)頁(yè)在設(shè)計(jì)時(shí)采取了相應(yīng)的措施。   

?將背景作適當(dāng)設(shè)計(jì),以適應(yīng)不同分辨率的版面效果。   

?應(yīng)用自動(dòng)適合寬度的技術(shù),當(dāng)版面寬度大于800像素時(shí),頁(yè)面內(nèi)容會(huì)自動(dòng)伸縮,充滿(mǎn)整個(gè)版面寬度,這一技術(shù)對(duì)版式設(shè)計(jì)提出了更高的要求,以適應(yīng)不同的版面寬度。

在網(wǎng)頁(yè)界面中,各種具體、抽象的形象按其形態(tài)、大小的不同均可以歸納為相應(yīng)的點(diǎn)、線(xiàn)、面,因而,點(diǎn)、線(xiàn)、面、空白的關(guān)系從本質(zhì)上反映了客觀世界普遍存在的對(duì)立統(tǒng)一的關(guān)系。版式中點(diǎn)、線(xiàn)、面、空白的成分兼而有之、相互影響,往往能使觀眾在視覺(jué)上得到滿(mǎn)足。根據(jù)點(diǎn)、線(xiàn)、面、空白各自不同的感覺(jué)屬性,將它們靈活處理,以產(chǎn)生各種生動(dòng)的頁(yè)面版式效果。

網(wǎng)頁(yè)版式構(gòu)成原理

自然界的萬(wàn)事萬(wàn)物,從宏觀的宇宙到微觀的原子、分子,到處都存在著內(nèi)在的規(guī)律性。網(wǎng)頁(yè)版式設(shè)計(jì)和其他視覺(jué)形式一樣,也遵循這些規(guī)律。具有秩序感的版式設(shè)計(jì),善于將各組成部分系統(tǒng)化、整體化,處理好相互關(guān)系,在整體秩序中體現(xiàn)出美感。版式設(shè)計(jì)的造型元素相互依賴(lài)、相互組織、相互配合,體現(xiàn)出構(gòu)成方式的規(guī)律性,具體包括比例、對(duì)稱(chēng)、均衡、反復(fù)、漸變、節(jié)奏、韻律、統(tǒng)一、變化等。

比例

比例是部分與部分之間、部分與整體之間的比率關(guān)系。整體形式中一切有數(shù)量的條件,如長(zhǎng)短、大小、寬窄、明暗、多少等,在搭配適當(dāng)時(shí)均能產(chǎn)生優(yōu)美的比例。比例具有強(qiáng)烈的數(shù)理概念,設(shè)計(jì)中常用的比例均可用數(shù)學(xué)或幾何學(xué)的方法求出。例如,黃金分割率把線(xiàn)段分成兩段,發(fā)現(xiàn)1:1.618的數(shù)比關(guān)系構(gòu)成了美的標(biāo)準(zhǔn)尺度。

網(wǎng)頁(yè)設(shè)計(jì)中,比例表現(xiàn)有多種形式。例如,頁(yè)面的長(zhǎng)寬比,實(shí)體內(nèi)容與虛空間(空白的面積)比,頁(yè)面分割比,圖文關(guān)系比,以及各種造型元素內(nèi)部的比例等。確立良好的比例關(guān)系,能使頁(yè)面各部分之間易于產(chǎn)生相互聯(lián)系,使版式設(shè)計(jì)和諧、勻稱(chēng)、明朗。

【示例1】在如圖所示網(wǎng)頁(yè)頁(yè)面中,上下的灰藍(lán)色塊寬度遠(yuǎn)大于高度,讓人感覺(jué)左右視野開(kāi)闊,左下角的導(dǎo)航照片和右邊的灰底色均采用了接近黃金矩形的比例,視覺(jué)上極為舒適。

1.jpg

【示例2】如圖所示小圖標(biāo)處于頁(yè)面寬度的黃金分割點(diǎn)位置,如同頁(yè)面的支點(diǎn),此種比例的分割讓頁(yè)面穩(wěn)定而不失靈活。

73bb3c06eb0202407871a2bc17f068bd.jpg

重復(fù)與漸變

重復(fù)是相同或相似的形態(tài)連續(xù)而有規(guī)律的反復(fù)出現(xiàn)。重復(fù)的特點(diǎn)是以單純的手法求得整體形象的秩序和統(tǒng)一,具有節(jié)奏美,使人產(chǎn)生清晰、連續(xù)、平和、安定、無(wú)限之感。重復(fù)可分為單純重復(fù)和變化重復(fù)兩種形式。單純重復(fù)是單一基本形的反復(fù)再現(xiàn),其形狀、大小、方向都是相同的,這種重復(fù)體現(xiàn)了一種標(biāo)準(zhǔn)化、追求簡(jiǎn)約的特征。在網(wǎng)頁(yè)界面中,單純重復(fù)多用于具有同一基本形的圖案、底紋中。

【示例1】在如圖所示的網(wǎng)頁(yè)中主體圖片中間有一排重復(fù)排列的3個(gè)長(zhǎng)方形圖形,圖形中的圖案各異,這種變化是為避免重復(fù)的單調(diào),或者在重復(fù)中有變化,這種重復(fù)既整齊又具多樣性,因而在網(wǎng)頁(yè)版式中經(jīng)常被用作通向其他頁(yè)面的超鏈接。

3.jpg

重復(fù)構(gòu)圖漸變是形態(tài)有規(guī)律地連續(xù)變化,它通過(guò)類(lèi)似的形態(tài)獲得了形式的統(tǒng)一。漸變能讓相互對(duì)立的兩極形成過(guò)渡,從而達(dá)到統(tǒng)一,如色彩的黑與白之間,形態(tài)的大與小之間等。漸變體現(xiàn)了形態(tài)的發(fā)展變化過(guò)程,讓人感覺(jué)含蓄、柔和,具有強(qiáng)烈的時(shí)間和空間特征。在網(wǎng)站建設(shè)中,各種造型元素都可以采用漸變的方法進(jìn)行處理。

【示例2】如圖所示頁(yè)面通過(guò)明暗的漸變關(guān)系,襯托一個(gè)變幻而又充滿(mǎn)神秘的魔界,給人一種緊張而又神往的視覺(jué)效果。

4.jpg

當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)版式設(shè)計(jì)基礎(chǔ)(一)

當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/3186.html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的紅色頁(yè)面配色(二)

下一篇:網(wǎng)頁(yè)版式構(gòu)成原理(一)

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