圖像的處理
圖像的外形、大小、數(shù)量以及與背景的關(guān)系,都與內(nèi)容有著密切的聯(lián)系。
(1)圖像的外形處理
圖像的外形能使頁(yè)面的氣氛發(fā)生變化,并直接影響瀏覽者的興趣。一般而言,方形的穩(wěn)定、嚴(yán)肅,三角形的銳利,圓形或曲線外形的柔軟親切,退底圖及一些不規(guī)則或不帶邊框的圖像活潑。
(2)圖像的面積
圖像在網(wǎng)頁(yè)中占據(jù)的面積大小能直接顯示其重要程度。一般地,大圖像容易形成視覺(jué)焦點(diǎn),感染力強(qiáng),傳達(dá)的情感較為強(qiáng)烈;小圖像常用來(lái)穿插在字群中,顯得簡(jiǎn)潔而精致,有點(diǎn)綴和呼應(yīng)頁(yè)面主題的作用。在一個(gè)頁(yè)面中,如果只有大圖像而無(wú)小圖像或細(xì)密的文字,就會(huì)顯得空洞,但只有小圖像而無(wú)大圖像又使頁(yè)面缺乏視覺(jué)沖擊力。
圖像的大小不僅決定著主從關(guān)系,也控制著頁(yè)面的均衡與運(yùn)動(dòng)。大小對(duì)比強(qiáng)烈,給人跳躍感,使主角更突出;大小對(duì)比減弱,則頁(yè)面穩(wěn)定、安靜。這是因?yàn)椋L問(wèn)者在瀏覽頁(yè)面時(shí),首先會(huì)注意到大圖像,然后再看到較小的圖像,這種由大到小的引導(dǎo),使瀏覽者的視線在頁(yè)面上流動(dòng),便造成一種動(dòng)勢(shì),使頁(yè)面活潑起來(lái)。
因此,在網(wǎng)頁(yè)設(shè)計(jì)時(shí),應(yīng)首先確定主要形象與次要形象,擴(kuò)大主要圖像的面積,使次要角色縮小到從屬地位。只有大小圖像主次得當(dāng)?shù)卮┎褰M合,才能構(gòu)成最佳的頁(yè)面視覺(jué)效果

作為主體的人物形象,既突出了大小對(duì)比又增強(qiáng)了頁(yè)面的親和力
3)圖像的數(shù)量
圖像的數(shù)量是根據(jù)內(nèi)容決定的。只用一幅圖像,會(huì)使內(nèi)容突出、頁(yè)面安定。增加一幅圖像,頁(yè)面會(huì)因?yàn)橛辛藢?duì)比和呼應(yīng)而活躍起來(lái)。再增加一幅,則更加熱鬧、活潑。但是,限于目前網(wǎng)絡(luò)的傳輸速度,使用圖像時(shí)一定要謹(jǐn)慎,大的圖像會(huì)降低頁(yè)面顯示速度,即使是小圖像,如果運(yùn)用數(shù)量過(guò)多,同樣會(huì)使頁(yè)面下載速度變慢。隨著網(wǎng)絡(luò)環(huán)境及技術(shù)條件的改善,這種情況已經(jīng)有了很大的改觀。
(4)與背景的關(guān)系
網(wǎng)頁(yè)圖像與背景是對(duì)比和統(tǒng)一的關(guān)系。也就是說(shuō),圖像與背景在和諧統(tǒng)一的基礎(chǔ)上,應(yīng)存在一定的對(duì)比,以使主要圖像更加突出。如精密的相機(jī)鏡頭以粗糙的巖石為背景,明亮的文字以深邃的星空為背景,或者使用沒(méi)有背景及陪襯物的退底圖像,周?chē)舫龃竺娣e空白,都是利用對(duì)比對(duì)主體形象起到突出作用。
5.圖像在長(zhǎng)頁(yè)面中的應(yīng)用
網(wǎng)頁(yè)一般都是縱向的(也有特意設(shè)計(jì)成橫向滾屏的),其長(zhǎng)度從一屏到三屏不等,有時(shí)甚至更多。訪問(wèn)者在瀏覽頁(yè)面時(shí),通過(guò)拖動(dòng)垂直滾動(dòng)條使網(wǎng)頁(yè)一屏一屏地顯示,但這并不意味著我們可以將整個(gè)頁(yè)面分割開(kāi)來(lái),孤立地進(jìn)行每一屏的設(shè)計(jì)。頁(yè)面的整體感是建立在形象的啟承關(guān)系上,盡管頁(yè)面被分割成幾屏來(lái)顯示,但圖像或文字的延續(xù)性應(yīng)使瀏覽者得到完整、統(tǒng)一的視覺(jué)感受。設(shè)計(jì)者所要做的就是進(jìn)行通盤(pán)考慮,例如:尋找對(duì)比中的和諧、建立同一的視覺(jué)識(shí)別等,來(lái)處理好每一屏與整個(gè)頁(yè)面的關(guān)系

作為主體的人物形象,既突出了大小對(duì)比又增強(qiáng)了頁(yè)面的親和力
三、版式的基本類(lèi)型
網(wǎng)頁(yè)版式的基本類(lèi)型主要有骨骼型、滿(mǎn)版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱(chēng)型、焦點(diǎn)型、三角型、自由型十種。
1.骨骼型
網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法,類(lèi)似于報(bào)刊的版式。常見(jiàn)的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用,既理性、條理,又活潑而富有彈性

綜合運(yùn)用多種分欄形式
2.滿(mǎn)版型
頁(yè)面以圖像充滿(mǎn)整版。主要以圖像為訴求點(diǎn),也可將部分文字壓置于圖像之上。視覺(jué)傳達(dá)效果直觀而強(qiáng)烈。滿(mǎn)版型給人以舒展、大方的感覺(jué)。隨著寬帶的普及,這種版式在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用越來(lái)越多

四邊出血,向外擴(kuò)張,適合年輕人的口味
3.分割型
把整個(gè)頁(yè)面分成上下或左右兩部分,分別安排圖片和文案。兩個(gè)部分形成對(duì)比:有圖片的部分感性而具活力,文案部分則理性而平靜。可以調(diào)整圖片和文案所占的面積,來(lái)調(diào)節(jié)對(duì)比的強(qiáng)弱。例如:如果圖片所占比例過(guò)大,文案使用的字體過(guò)于纖細(xì),字距、行距、段落的安排又很疏落,則造成視覺(jué)心理的不平衡,顯得生硬。倘若通過(guò)文字或圖片將分割線虛化處理,就會(huì)產(chǎn)生自然和諧的效果

分割線上的壓置的圖片既打破了頁(yè)面分割的生硬感,也使自身得到強(qiáng)調(diào)。左邊框上的小標(biāo)簽?zāi)它c(diǎn)睛之筆
4.中軸型
沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺(jué)。垂直排列的頁(yè)面給人以舒暢的感覺(jué)

不易覺(jué)察的中軸型版式,給人以輕快之感
5.曲線型
圖片、文字在頁(yè)面上作曲線的分割或編排構(gòu)成,產(chǎn)生韻律與節(jié)奏

網(wǎng)站的導(dǎo)航標(biāo)題沿圖形弧線排列
6.傾斜型
頁(yè)面主題形象或多幅圖片、文字作傾斜編排,形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感,引人注目

文字水平排列,將畫(huà)框斜置,產(chǎn)生對(duì)比與動(dòng)勢(shì),印象被加強(qiáng)
7.對(duì)稱(chēng)型
對(duì)稱(chēng)的頁(yè)面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。
對(duì)稱(chēng)分為絕對(duì)對(duì)稱(chēng)和相對(duì)對(duì)稱(chēng)。一般采用相對(duì)對(duì)稱(chēng)的手法,以避免呆板。左右對(duì)稱(chēng)的頁(yè)面版式比較常見(jiàn)。
四角型也是對(duì)稱(chēng)型的一種,是在頁(yè)面四角安排相應(yīng)的視覺(jué)元素。四個(gè)角是頁(yè)面的邊界點(diǎn),重要性不可低估。在四個(gè)角安排的任何內(nèi)容都能產(chǎn)生安定感。控制好頁(yè)面的四個(gè)角,也就控制了頁(yè)面的空間。越是凌亂的頁(yè)面,越要注意對(duì)四個(gè)角的控制

以相對(duì)對(duì)稱(chēng)手法制作的導(dǎo)航頁(yè)面
8.焦點(diǎn)型
焦點(diǎn)型的網(wǎng)頁(yè)版式通過(guò)對(duì)視線的誘導(dǎo),使頁(yè)面具有強(qiáng)烈的視覺(jué)效果。焦點(diǎn)型分三種情況

通過(guò)離心的版式,清晰地傳達(dá)出網(wǎng)站提供的服務(wù)
(1)中心 以對(duì)比強(qiáng)烈的圖片或文字置于頁(yè)面的視覺(jué)中心。
(2)向心 視覺(jué)元素引導(dǎo)瀏覽者視線向頁(yè)面中心聚攏,就形成了一個(gè)向心的版式。向心版式是集中的、穩(wěn)定的,是一種傳統(tǒng)的手法。
(3)離心 視覺(jué)元素引導(dǎo)瀏覽者視線向外輻射,則形成一個(gè)離心的網(wǎng)頁(yè)版式。離心版式是外向的、活潑的,更具現(xiàn)代感,運(yùn)用時(shí)應(yīng)注意避免凌亂。
9.三角型
網(wǎng)頁(yè)各視覺(jué)元素呈三角形排列。正三角形(金字塔型)最具穩(wěn)定性,倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式,既安定又有動(dòng)感

整體看為正三角形的構(gòu)圖,主體形象穩(wěn)定而突出
10.自由型
自由型的頁(yè)面具有活潑、輕快的風(fēng)格

引導(dǎo)視線的圖片以散點(diǎn)構(gòu)成,傳達(dá)隨意、輕松的氣氛
