




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
1、網(wǎng)頁藝術(shù)設(shè)計第一章 網(wǎng)頁藝術(shù)設(shè)計概論一、網(wǎng)頁設(shè)計的發(fā)展趨勢網(wǎng)絡(luò)已經(jīng)不斷演進(jìn)并成為現(xiàn)代社會不可缺少的一部分,盡管網(wǎng)頁設(shè)計會以人們意想不到的方式發(fā)生變化,可是我們有理由相信,人們對網(wǎng)頁的視覺追求永無止境,這正是推動網(wǎng)頁設(shè)計向前發(fā)展的主要因素。從發(fā)展趨勢來看,網(wǎng)頁設(shè)計會更加注重網(wǎng)頁的創(chuàng)意和個性化。1、網(wǎng)頁創(chuàng)意網(wǎng)頁設(shè)計中的創(chuàng)意主要體現(xiàn)在設(shè)計觀念、設(shè)計方法、設(shè)計元素等方面。創(chuàng)意是通過形象轉(zhuǎn)換、元素轉(zhuǎn)換、空間轉(zhuǎn)換等方法構(gòu)造新的視覺形式,并由此產(chǎn)生不同的意境。2、網(wǎng)頁的圖形網(wǎng)頁中的圖形創(chuàng)意分抽象類和具象類兩種。抽象類圖形是通過點、線、面等視覺元素在一定的版面空間范圍內(nèi)有間隔地反復(fù)組合形成圖形。它以連續(xù)、漸變
2、、大小、長短、明暗、高低等變化手法來構(gòu)成。同一視覺元素的反復(fù)出現(xiàn),可構(gòu)成視覺認(rèn)知中虛實、強(qiáng)弱的對比,形成輕、重、緩、急的趨勢,從而使人感覺到節(jié)奏的存在。3、個性化網(wǎng)頁網(wǎng)頁設(shè)計特別需要具有個性,不能忍受雷同。設(shè)計風(fēng)格的形成不是偶然的,它是知識和智慧的必然結(jié)晶,也是設(shè)計本身的需要。設(shè)計風(fēng)格的形成離不開設(shè)計元素、設(shè)計方法、設(shè)計個性。每一次設(shè)計的新“變化”都源于設(shè)計師對設(shè)計元素與設(shè)計方法的新發(fā)現(xiàn)或新理解。網(wǎng)頁個性化已成為當(dāng)今網(wǎng)頁設(shè)計的新標(biāo)準(zhǔn)。在網(wǎng)頁設(shè)計中倡導(dǎo)網(wǎng)頁設(shè)計風(fēng)格,有利于網(wǎng)頁的差異識別。優(yōu)秀主頁具備的六個條件滿足6個條件就會給人留下好印象讓人賞心悅目的優(yōu)秀主頁要具備6個條件。滿足這些條件并不困難
3、,任何人都能做到。具備了這些條件,就能做出令人滿意的優(yōu)秀主頁。其中,4個是必要條什,2個是附加條件。4個必要條件使人產(chǎn)生信賴感以下4個條件是最基本的必要條件。雖然我們認(rèn)為每一個條件都必不可少,但在實際應(yīng)用中,所有條件都完備的主頁是很少見的。然而在這4個條件中,缺少任何一個都會使訪問者對網(wǎng)頁的印象一落千丈,使得初次訪問者不愿再次光臨。條件1明示標(biāo)題對于初次訪問網(wǎng)站的讀者來說,首要目的就是確認(rèn)標(biāo)題。那些晦澀難懂的標(biāo)題會使難得光臨的訪問者感到不知所措。雖然我們以美觀和與眾不同為設(shè)計日標(biāo),但如果吸引不了訪問者,這個網(wǎng)頁的設(shè)計和建設(shè)也是沒有意義的。過于個性化的表現(xiàn),會使網(wǎng)站內(nèi)容的公開性受到質(zhì)疑。條件2明
4、示信息讓訪問者第一眼就明了表達(dá)的內(nèi)容的網(wǎng)頁才是最優(yōu)秀的。如果訪問者對信息的種類、是趣味性的網(wǎng)頁還是商業(yè)性的,以及行業(yè)類型等問題能夠一目了然的話,他才能安心地繼續(xù)訪問,對網(wǎng)頁的好感也會逐步增強(qiáng)。所以我們運(yùn)用排版樣式、圖像、文字的造型以及配色類型等元素來準(zhǔn)確傳遞信息。條件4整理目錄信息對于網(wǎng)頁來說,最重要的就是信息內(nèi)容。信息的品質(zhì)與數(shù)量決定了人們對這個網(wǎng)頁的評價高低。但首先要做到的是,怎樣將讀者順利地引向信息內(nèi)容。明確劃分信息群,不讓讀者產(chǎn)生迷惑,使之迅速找到所需要的信息,是目錄設(shè)計最重要的任務(wù)。目錄的整理決定了網(wǎng)頁的可讀性。條件5傳達(dá)信任感4個必要條件之中,最難掌握的就是條件。但如果我們站在訪問
5、者的立場上,就很容易理解它了。舉個例子:如果配色強(qiáng)烈的航空公司主頁上排列著許多模糊不清的百貨公司的照片,它自然不會擁有許多觀眾。因為畫面的造型性太低會使整個主頁失去信任感。2個附加條件增強(qiáng)效果在4個必要條件之外,還有2個附加條件。表現(xiàn)歡迎態(tài)度:傳達(dá)歡迎的心情,給人感覺良好。加強(qiáng)說服力:給訪問者留下深刻、強(qiáng)烈的印象。加上這兩個條件,就能設(shè)計出更有競爭力的網(wǎng)頁,但請注意,這兩個條件不是絕對的。必要條件占優(yōu)先地位有時過于強(qiáng)調(diào)附加條件,反而使必要條件失去作用。例如,為了強(qiáng)化說服力而使用強(qiáng)烈的配色,雖然加深了印象,卻削弱了標(biāo)題和信息性,對條件和條件產(chǎn)生了負(fù)面作用。第一部分 首頁的三個構(gòu)成空間畫面空間空間
6、的作用1、標(biāo)題空間 明示標(biāo)題(標(biāo)題如同商店引人注目的招牌,要清楚,明確的表示出來,讓訪問者毫不猶豫、放心大膽的進(jìn)入)2、歡迎空間 明示信息、表現(xiàn)歡迎態(tài)度(是被標(biāo)題吸引進(jìn)來的人在進(jìn)入目錄信息之前歇歇腳、休息一下的地方,相當(dāng)于網(wǎng)頁的玄關(guān)。在確認(rèn)主頁內(nèi)容的同時,希望能夠傳達(dá)歡迎態(tài)度。)3、目錄信息空間 整理目錄信息(訪問者希望能夠總攬主頁的全部信息,所以對大量信息的整理歸納、發(fā)掘共同點等為使網(wǎng)頁更加引人入勝而下的工夫都是十分必要的。當(dāng)然,最重要的是要讓訪問者感覺到這是你為他著想而做的整理。)4、畫面整體 傳達(dá)信任感、加強(qiáng)說服力檢索型首頁這是典型的關(guān)于國際新聞的新聞檢索型頁面。剛勁有力的標(biāo)題傳達(dá)出強(qiáng)烈
7、的可信度。舒服的對稱式這是與上圖相對的印象主體型主頁。對目錄信息進(jìn)行控制的同時擴(kuò)大歡迎空間,傳遞出歡樂和親切的感覺。I、標(biāo)題空間(必要條件1明示標(biāo)題)標(biāo)題就是商店的招牌和住宅的門牌。如同門牌的位置要固定一樣,標(biāo)題也有一定的位置。為了使初次訪問者不會產(chǎn)生迷惑,它通常位于頁面的上端或中央。寫在哪、怎么寫以及對題目本身的探討暫且不論,為了使訪問者安心,標(biāo)題一定要清楚明確地表示出來。1、標(biāo)題應(yīng)有的強(qiáng)度與其他文字相比,標(biāo)題的字號大一些、粗一點為宜。再加上鮮艷的色彩,標(biāo)題就具有了適當(dāng)?shù)膹?qiáng)度,畫面整體的安定感也隨之產(chǎn)生,訪問者也能夠放心查看了。2、與網(wǎng)頁風(fēng)格相和諧的標(biāo)題優(yōu)秀的設(shè)計使人第一眼就關(guān)注到標(biāo)題。但是
8、如果過度放大標(biāo)題也是一種失敗,應(yīng)該選擇與主頁風(fēng)格相和諧的字號、粗細(xì)及配色。A、大小、粗細(xì)要與標(biāo)題相稱1、 越大、越粗、越有力量若要明確的表示標(biāo)題,就要將標(biāo)題文字放大、加粗,使其更醒目。在大小相同的情況下,加粗文字也能產(chǎn)生強(qiáng)化效果。作出幾種大小、粗細(xì)不同的樣例,看看哪一種文字最有吸引力,以找到完美的型號。2、 檢查一下標(biāo)題字號是否太小小巧的字體顯得格凋高雅,所以在以創(chuàng)建高品位網(wǎng)站為目標(biāo)的主頁設(shè)計過程中,標(biāo)題常常有縮小的傾向。字體縮小的程度是否合適,還需重新驗證標(biāo)題大小是否與最初的想法一致,再次確認(rèn)不會使初次訪問者產(chǎn)生困惑。3、 大小合適是最重要的標(biāo)題對頁面整體的平衡效果非常重要。無視周圍內(nèi)容而將
9、標(biāo)題一味放大,就會顯得庸俗;頁面周圍空間全部用白色填充的話,就會給人一種信息量少的印象;在希望突出格調(diào)的頁面上,字型過大,就會顯得過于活躍而內(nèi)斂不足。所以應(yīng)該選擇與頁面風(fēng)格最相匹配的字號。即使是同樣大小的字,粗細(xì)的變化也會在很大程度上改變印象。B、通過高色價明示標(biāo)題1、 鮮艷的色彩能夠強(qiáng)化標(biāo)題需要強(qiáng)化標(biāo)題的時候,鮮艷的色彩不可或缺。同樣大小、粗細(xì)的文字,若換成鮮艷的顏色,強(qiáng)度馬上就會增加。當(dāng)基于特定風(fēng)格的要求而不得不將文字縮小時,鮮艷的彩色能夠有效的保持文字的強(qiáng)度,使標(biāo)題得到強(qiáng)化,效果清晰,引人注目。2、 強(qiáng)調(diào)主體性將標(biāo)題加上鮮艷的顏色,視線就會集中在那里。正如舞臺上突出主角能夠使觀眾感到安心
10、一樣,將標(biāo)題作為主體進(jìn)行適當(dāng)?shù)膹?qiáng)化,能夠保持頁面的穩(wěn)定感;反之,如果輔助部分,如按鈕或下劃線的顏色過于鮮艷,以至強(qiáng)過標(biāo)題部分,就會使整體畫面顯的松散混亂。3、 所謂高色階,是指鮮艷和耀眼的顏色色彩越鮮艷、純度越高,色階就越高。相對的,與白色及黑色越接近純度越低色階也越低。另一方面,如果幾種低純度顏色之間的對比較強(qiáng)烈,色階也會提高。例如黑和白的組合,雖然兩方純度都為0,但由于明度差最大,色階也高。C、通過寬闊的領(lǐng)地襯托標(biāo)題1、 寬闊的領(lǐng)地起到強(qiáng)化標(biāo)題的作用標(biāo)題周圍如果有大面積空白,標(biāo)題的印象就會顯得更加強(qiáng)烈。將文字和圖像等視覺要素從標(biāo)題周圍移開,代之以空白,這塊地方就叫做標(biāo)題的領(lǐng)地。在標(biāo)題的大小
11、和配色都不變的情況下,僅僅通過擴(kuò)展領(lǐng)地,也能達(dá)到強(qiáng)化標(biāo)題印象的作用。2、 通過擴(kuò)展領(lǐng)地來強(qiáng)化弱效的標(biāo)題標(biāo)題的領(lǐng)地是指將標(biāo)題周圍的圖像和文字移遠(yuǎn)而得到的空白部分??瞻椎牟糠譃闃?biāo)題的支配空間,也就是我們所說的領(lǐng)地。領(lǐng)地越廣闊,標(biāo)題越醒目,主體性也就越強(qiáng)。表現(xiàn)都市、女性形象時,不便于使用效果強(qiáng)烈和色彩鮮艷的文字,這個時候就要開拓足夠的領(lǐng)地,使小而弱的標(biāo)題文字也能具有強(qiáng)烈且醒目的效果。用廣闊的領(lǐng)地傳遞優(yōu)雅風(fēng)格的同時,小字也與標(biāo)題相搭配。II、歡迎空間必要條件2明示信息標(biāo)題與目錄信息之間的部分是歡迎空間。這個空間是訪問者被標(biāo)題吸引進(jìn)來后,看到目錄信息前喘口氣的休息場所。以餐廳為例,這里就是客人開門進(jìn)來之
12、后、被帶到餐桌之前等候的地方。歡迎空間的兩個作用:1、標(biāo)明信息進(jìn)入歡迎空間的人,會查明這里是否有與標(biāo)題相同的信息。訪問者會在歡迎空間再次確認(rèn)自己先前從標(biāo)題中得到的主頁的大體印象。如果與預(yù)想的相反,訪問者就會變得不安而急于返回了。歡迎空間是再次確認(rèn)信息和獲得安心感的地方。2、表達(dá)歡迎的態(tài)度歡迎空間是在信息再確認(rèn)的同時,進(jìn)入目錄信息前,能夠得到放松的地方。這里應(yīng)該是歡迎訪問者,使他們感覺良好、心情愉快的地方。表達(dá)歡迎的方法多種多樣,選擇一個與主頁特性相符的類型是最重要的。另一方面,在以檢索為主體的頁面中,有限度的表現(xiàn)歡迎是較為合適的。A、利用排版樣式傳遞信息1、 排版樣式是不說話的口信即使圖像與信
13、息內(nèi)容完全相同,排版樣式的改變也會創(chuàng)造出兩個完全不同的主頁。如下圖,版式采取對稱型或是檢索型所傳遞出來的信息是完全不同的:采用對稱樣式進(jìn)行排版,頁面格調(diào)高雅;采用檢索型的左右對齊樣式則給人帶來信息豐富、熱門的印象。版式對主頁的影響不同于圖片或標(biāo)語,它的效果是平靜的,安穩(wěn)的,但不知不覺中準(zhǔn)確的傳遞了信息。2、 慎重選擇排版樣式如果選擇了與主頁形象大相徑庭的版式,那么有可能在一瞬間失去訪問者。例如,本頁中的三組圖樣是兩兩內(nèi)容相同的主頁,但是產(chǎn)生的印象卻是截然不同的。這個差別就是排版樣式的作用。當(dāng)希望得到更多信息的人看到左圖時,恐怕要失望而回了;而想見到輕松畫面的人看到右圖,也會希望落空。無論多么優(yōu)
14、秀的內(nèi)容,若選錯了版式,都會使整體努力落空。B、利用圖片傳遞信息1、 圖片具有強(qiáng)烈的信息性能在一瞬間讓人了解訪問的主頁是否與印象相同的就是圖片。而其中又以能直接表現(xiàn)標(biāo)題或主頁信息的插圖和照片最有說服力,它能夠使訪問者直接確認(rèn)信息。傳遞信息的視覺要素包括文字、色彩、形狀和版式等等。其中圖像的作用是決定性的。在打開主頁一瞬間,圖像幾乎與標(biāo)題文字同時映入眼簾,觀眾對主頁的印象也就被確定下來。2、看圖的一瞬間,信息就被確定下來尋找最合適的主題:下面介紹的cat world的照片,單看起來貓的照片效果很一般,但是當(dāng)它被放在畫面中心的時候,就不可思議的變得栩栩如生,光彩照人,這就是標(biāo)題與內(nèi)容的互動造成的效
15、果。如果選擇了與標(biāo)題相配的主題,整個主頁就生動起來。C、利用配色傳遞信息1、 色調(diào)與色相決定整體印象配色決定整體印象。在配色中最基本的要素是色調(diào)和色相請參看下圖的飯店主頁,比較一下配色效果。綠色庭院的美麗和安靜展現(xiàn)了飯店環(huán)境的高雅格調(diào)。主頁中最引人注目的是上端的9幅插圖,使用了華麗多彩的表現(xiàn)手法。這種配色的特征就是“明色調(diào)”和“全色相型”。利用這種組合,充分表現(xiàn)出隨意、自由的情趣。如果選錯了色調(diào)或選錯了色相,這種樂趣就無法表現(xiàn)出來了。2、 錯誤的色調(diào)選擇會破壞一切色調(diào)對主頁具有絕對性影響?;疑{(diào)配色產(chǎn)生素雅的印象;鮮艷的色調(diào)配色產(chǎn)生健康活潑的印象。無論色相如何改變,這種基本印象是不會改變的。選
16、擇了與主頁內(nèi)容不相和諧的色調(diào),會傳遞錯誤的信息,造成混亂。輔助條件3表示歡迎態(tài)度進(jìn)入西餐廳時,如果沒有人來招呼,客人就會默默離開。主頁的設(shè)計也是一樣。對初次來訪的觀眾,要立即表示歡迎態(tài)度,用這種感情來填補(bǔ)觀眾由于不知道網(wǎng)頁的內(nèi)容而產(chǎn)生的瞬間的迷惑。另一方面,歡迎的形式本身也是多種多樣的,既有那種大聲喊著“歡迎歡迎”的熱烈場面,也有那種不言不語、只是微笑的溫情的表示。但如果在區(qū)政府或是蛋糕房的門口大聲喊“歡迎光臨”就會讓人摸不著頭腦了,所以要選擇與想傳達(dá)的內(nèi)容相稱的歡迎樣式。用圖片表示歡迎態(tài)度(花束和可愛的卡通人物是歡迎的象征)歡迎過度,適得其反由于與主頁的類型不符,過于強(qiáng)烈的歡迎反而起到負(fù)面效
17、果。為了表示歡迎使用大量的圖片,而減少標(biāo)題和信息文字是本末倒置的行為。主頁的必要條件是標(biāo)題的明了、歡迎空間中的信息確認(rèn)以及目錄信息查找的方便,并不一定要有歡迎的表示。在以商業(yè)信息為中心的檢索型主頁中出現(xiàn)歡迎標(biāo)記反而會有負(fù)面的效果。A、通過色彩、形狀和語言來表現(xiàn)1、 明色調(diào)表現(xiàn)歡迎的情緒如果要用顏色來傳遞歡迎心情的話,就要有效的使用色相和色調(diào)的屬性。鮮艷的紅色給人以活力;柔和的色調(diào)讓人平靜;明色調(diào)則使人心情愉悅。2、吉祥圖案是歡迎態(tài)度的證明龍、鳳、鶴、龜?shù)燃閳D案表現(xiàn)了喜慶的氣氛,讓人聯(lián)想起新年、豐收、長壽的形象;現(xiàn)代的花環(huán)、桃心等是眾人皆知的符號,便于傳達(dá)歡迎的態(tài)度。用色彩和形象來表現(xiàn),明亮的
18、顏色,快樂的形象傳遞了歡迎態(tài)度。選用表示節(jié)日氣氛的形象,在新春和生日慶祝時登場的喜慶形象也能表現(xiàn)歡迎態(tài)度。心形符號、馴鹿、星座、緞帶等圖形能讓觀者的情緒變得平和。3、 語言表示歡迎語言的視覺說服力比較低,與圖像和色彩相比效果有限,但它可以傳達(dá)確切的意思,所以適合用于需要保持身份、不愿進(jìn)行視覺冒險的政府部門和研究機(jī)構(gòu)的主頁。4、 計數(shù)器同樣是歡迎的象征統(tǒng)計訪問人數(shù)的計數(shù)器,同樣是一種表示歡迎的形式。計數(shù)器上的數(shù)字不僅是單純的數(shù)據(jù),還傳遞了這樣一個信息:這個主頁是重視訪問者的。III、目錄信息空間必要條件4整理目錄信息首頁所承載的文字信息有以下幾類內(nèi)容。無論網(wǎng)頁的主題是什么,首頁終歸是菜單或表格之
19、類的內(nèi)容一覽表。為了便于查詢,應(yīng)該采用最為通用的表現(xiàn)形式。1、 選擇形式,要重視聯(lián)想與習(xí)慣人們在交流信息的過程中不知不覺養(yǎng)成了某些固定習(xí)慣。例如在文件夾背后貼索引、在重點語句下添加下劃線等,如果忽略這一切而去制作主頁菜單,就會給查詢造成障礙。參考大量的主頁,找到與自己的信息相適合并利于查詢的形式是很重要的。2、 選擇與內(nèi)容相稱的形式內(nèi)容是主頁的生命,所以應(yīng)該盡最多登載一些新信息,但問題在于整理方法。我們希望能引導(dǎo)看到標(biāo)題之后的訪問者,將他們從混亂和迷惑中帶出,直接接觸真正的信息。因此,菜單和表格設(shè)置的清晰程度是非常重要的。張弛有致的分組將使網(wǎng)頁變得更加親切易懂。首頁的表示形式1、 叢中型到簡易
20、型的多種形式在首頁中,主頁的所有信息通過菜單展示出來?;拘畔⒂瞄T牌型或索引型表示比較合適,而每天更新的新聞用簡單的下劃線來表示能給人以最新的熱門消息的印象。這里介紹l1種表現(xiàn)形式,但不要受其局限。2、 視覺要素的種類與菜單相關(guān)的視覺要素有照片、插圖、繪畫性的圖標(biāo)等等。另外,各種記號和下劃線也能增強(qiáng)視覺性。3、 將個人數(shù)據(jù)輸入表格在訂購商品、占卜等類型的網(wǎng)頁中,訪問者輸入自己的數(shù)據(jù)信息的形式可分為選擇型和鍵入型兩種。4、 其他表現(xiàn)形式到現(xiàn)在為止介紹的菜單和表格都是構(gòu)成主頁的核心要素。這些網(wǎng)頁除了招牌兼做門牌的情況以外,還要盡可能去掉可以省略的要素。熟練運(yùn)用這些要素,就可以增強(qiáng)歡迎氣氛,做出更易
21、于查看的網(wǎng)頁。利用留白和劃線進(jìn)行分組1、 分組在檢索中心的主頁上,應(yīng)該盡可能多地安排文字信息。但是,內(nèi)容過多又會顯得十分雜亂,造成查詢困難。因此,在信息的安排整理上要格外注意。為了使大量的信息便于查詢,采用分組(群化)的手段十分有效。讓我們用通過利用空白和劃線以及上色塊進(jìn)行分組吧。2、 用空白進(jìn)行分組最基本的分組方法就是制造空白??瞻诇p少,字群就變成同一組;空白增加,就變成了若干組。然后再與劃線一起運(yùn)用,就能創(chuàng)造出更有效的分組。利用色塊進(jìn)行分組1、 版面空間不夠時用色塊分組最合適用空白和畫線進(jìn)行分組時,如同其字面意義:有“空白空間"是必要條件。但是用色塊進(jìn)行區(qū)分就不必占用空間,它在完
22、全沒有空白的版面上,也可以達(dá)到分組的效果。將留白和色塊一起使用進(jìn)行分組,效果最佳。色塊產(chǎn)生的印象:色塊對于分組十分有效,同時其自身也傳達(dá)出某種信息。有節(jié)制的色調(diào)給人的印象也是有節(jié)制的,而華麗的色調(diào)則生成華麗的印象。使用色塊進(jìn)行分組時,對網(wǎng)頁整體的色彩印象也要有所規(guī)劃。色調(diào)的選擇方法:分組用的色塊大致分為兩種色調(diào):對色彩有所控制,不改變整體的色調(diào)配色效果強(qiáng)烈,傳達(dá)出積極的信息。其中產(chǎn)生典雅感和穩(wěn)重感,產(chǎn)生活力標(biāo)題的大小與行距1、 標(biāo)題的大小樣本的正文是在蘋果機(jī)上使用IE時的標(biāo)準(zhǔn)字體Osaka,所有字的大小都是一樣的。與正文相配合的標(biāo)題應(yīng)該多大多粗才好呢?在漂亮的樣本中尋找吧。2、 選擇合適的行間
23、距如果沒有特別的指定,行間距一般是125,即將正文設(shè)為100,兩行字之間的空白是25。下面的樣本行間距為125、130,后面的以10遞增。選擇讓人感覺舒服并且利于閱讀的合適行距。IV、畫面整體必要條件5傳達(dá)信任感信息內(nèi)容相同,但為什么有些頁面讓人無法信服呢?原因就在于設(shè)計的完成度。主頁給人的信任性雖然取決于信息的質(zhì)量和數(shù)量,但同時它也被設(shè)計的成功與否左右著。造型的完成度增強(qiáng)時,產(chǎn)生信任感;降低時,則會喪失信任感。追求高度的造型性時,向設(shè)計師尋求幫助是個好辦法。但實際上即使沒有經(jīng)過特殊訓(xùn)練的人,只要遵守基本原則,也可以保證一定的水準(zhǔn)。這要比完全依賴設(shè)計師、拘泥于造型性而忽略必要條件,更能得到良好
24、的綜合效果。漂亮的排版遵循的原則:下圖是以排版樣式中的檢索型(參照P.56)為基礎(chǔ),采用留白,降低文字的跳躍率(參照P90)制成的。利用明確表示了商業(yè)信息;利用表現(xiàn)出高雅的格調(diào)。因此可知,漂亮的排版不是糊里糊涂就產(chǎn)生的,是嚴(yán)格遵循一定的原理和原則而被設(shè)計出來的。漂亮的照片提升信任感1、 照片的質(zhì)量產(chǎn)生信任程度的差別快照誰都能拍。照相機(jī)和膠卷的方便使用使生手也能拍出生動的、給人以深刻印象的照片。但我們不能原封不動使用這些不經(jīng)意之中拍下來的照片。如果隨意登載了下圖所示的有缺陷的照片,就會造成主頁整體信任感的喪失。因此,在選用照片之前,一定要做充分的檢查。2、 合適的采光拍出精彩的照片即使是初學(xué)者,
25、如果遵守基本原則,也能夠拍出讓人喜愛的照片。而這個原則就是,絕對不要使用帶有下表所示缺陷的照片。拍出優(yōu)秀照片的關(guān)鍵是采光。從斜前方射來的光線,即順光狀態(tài)是最合適的。初學(xué)者應(yīng)該避免正面光和逆光狀態(tài)。通過配色和版式產(chǎn)生信任感1、 人的眼睛十分敏銳即使不是設(shè)計專家,也能一眼看出主頁的排版不平衡,從而對它失去信任,因為不安定的畫面?zhèn)鬟_(dá)了不安定的情緒。打破整齊的版式能產(chǎn)生動感,增強(qiáng)隨意性的樂趣。但是過度的破壞平衡,反而會使排版變得粗糙而混亂。因此要注意:不統(tǒng)一的排版會導(dǎo)致可信度的急劇下降。在打破版式平衡的基礎(chǔ)上如果配色不當(dāng),就會變成俗氣的網(wǎng)頁,引起觀者的不快。輔助條件6加強(qiáng)說服力有兩種方法可以提高網(wǎng)頁的
26、說服力:一種是增強(qiáng)故事性,另一種是提高造型性的緊張感?!肮适滦浴本褪遣鍒D照片的信息性。它使得網(wǎng)頁即使不運(yùn)用強(qiáng)烈的色彩也能增強(qiáng)說服力;即使是靜止的畫面,也能讓人印象深刻。另外,將主題放在動物和人身上時說服力最強(qiáng),故事性也最強(qiáng)。例如,藍(lán)色的天空上飄著白云。在云上加上風(fēng)吹的圖畫,就能增強(qiáng)信息性,使觀者對后面的景像和意義產(chǎn)生種種聯(lián)想。這就是故事性的效果。1、 通過造型的緊張感加深印象用巨大的文字、強(qiáng)烈的色彩創(chuàng)作出來的畫面能夠提高說服力。造型的緊張感提高了,也可以說是網(wǎng)頁變得更加顯眼、有影響力了。但是,由于主頁性質(zhì)不同,所以造型的說服力也不見得是越強(qiáng)越好。與其草率地運(yùn)用,以至于損害信任感,還不如有所節(jié)制
27、的靈活選擇。2、 過強(qiáng)的說服力會產(chǎn)生負(fù)面影響對于格調(diào)高雅的主頁來說,說服力過強(qiáng)反而會起到負(fù)面效果。例如,將靜逸的美術(shù)館網(wǎng)頁上添加漫畫人物的插圖,親近感和活力感會增強(qiáng),而寧靜感會降低:反之,對于想避免冷淡和生硬、傳達(dá)活力感的企業(yè)網(wǎng)站來說,那樣的插圖會更有效。我們并不是總要追求強(qiáng)大的說服力,而是要選擇與目標(biāo)信息相適應(yīng)的強(qiáng)度。第二部分 排版樣式在第1部分中,我們明確了主頁的六個條件,即一個優(yōu)秀的主頁應(yīng)該具備何種條件。下面將進(jìn)入到正式的排版工作當(dāng)中。排版工作的順序從A、B中選出與目標(biāo)形象最吻合的類型和樣式,大方向就確定下來。已選定的骨架為基礎(chǔ),按照C、D、E,然后是第3、4部分的順序逐步添加內(nèi)容。A信
28、息量的5種類型目標(biāo)信息量,是5個階段中的哪個B排版的8種樣式選擇最適合目標(biāo)主頁的排版樣式C空白空間(版面率)的確定留出大量空白的主頁顯得非常典雅D選擇文字的型號字體、粗細(xì)、大小E提高造型的完整度隔開輔助造型,端正形狀,制作動態(tài)第3部 圖像、照片的作用第4部 配色的效果A信息量的5種類型選擇出這5個階段中的任何一種類型,主頁風(fēng)格的大方向就被確定下來。分析這5種類型的特點,研究目標(biāo)主頁屬于哪一種類型:目標(biāo)樣式是在和之間呢,還是在和之間,在這個階段要明確下來。第一步很重要如果在這里做出了正確的選擇,那么后面作業(yè)中的困擾將被降到最低限度;如果在這個階段尚處于模棱兩可的狀態(tài),就匆匆進(jìn)入下一個階段,混亂就
29、會大大增強(qiáng),等到發(fā)現(xiàn)時,主頁已經(jīng)與設(shè)想的目標(biāo)大相徑庭了。隨后的版式選擇、配色計劃和插圖選擇也要被這里的類型左右著。檢索型1、以文字信息為主體,圖片少于5,這種檢索型是只由文字信息構(gòu)成的類型。圖片極少,有按鈕和圖標(biāo)就可以了。最大限度的登載了文字信息,如果想要突出內(nèi)容,并使之便于查詢,使用這種獨(dú)特的樣式是十分奏效的。它類似于報紙上熱門消息的組織結(jié)構(gòu)。2、將表示歡迎的信號控制在最低限度給人以商業(yè)性、不浪費(fèi)空間、清晰明了的印象是這種類型的特征。將歡迎態(tài)度的表示控制在最低限度,強(qiáng)調(diào)出理性和商業(yè)性。不僅把圖畫縮得很小,在配色方面也十分講究。以白底為主體的亮麗色調(diào)有效地傳達(dá)了冷靜的印象。3、白表現(xiàn)自由感和高
30、貴感將空白減少、文字信息增多,會增強(qiáng)新聞性。相反的,增加空白會產(chǎn)生寬裕感和自由感??瞻琢恳步凶霭婷媛?。我們?nèi)粘=佑|的印刷品中,報紙的版面率是最高的。與之相反,詩集和隨筆集等書籍的版面率是比較低的。通過版面率去控制印象。準(zhǔn)檢索型1、 略微增強(qiáng)歡迎態(tài)度的準(zhǔn)檢索型與前一頁相比,稍微增加了一些圖形要素,構(gòu)成了文字與圖像比例為2:l的排版類型。通過增加歡迎空間可以增強(qiáng)網(wǎng)頁的開放感,給人以輕松、自由選擇的印象。另一方面,它的檢索性與相比也沒有太大的變化,是最容易獲得平衡的類型。2、色彩和圖片的增加是主頁氣氛更開放這個階段適合使用多種顏色。廣泛運(yùn)用色彩,能夠創(chuàng)作出歡樂的畫面。在白底上不僅使用藍(lán)色和黑色等禁欲
31、主義印象的顏色,還廣泛使用多種其他顏色,旨在不破壞信息豐富的同時,提高樂趣。在圖像的運(yùn)用上,不僅限于圖標(biāo),同時也可以使用更加自由的插圖和照片等形式。均衡型1、 最平衡的55歡迎空間與目錄信息各占一半,與、型相比顯得更加開放。、型專業(yè)性較強(qiáng),局外人進(jìn)入比較困難,而這種類型則可以讓人輕松愉快的加入進(jìn)來,它既有文字信息又有相對更強(qiáng)的視覺性,是便于應(yīng)用的類型。2、 與任何排版樣式都可以進(jìn)行自由的組合第種類型在保持主頁的信息量同時,還有足夠的自由空間來選擇排版和配色。它可以與排版樣式中的8種版式中的任何一種進(jìn)行組合,是自由靈活的類型。印象主體型1、 以圖片為主體,傳達(dá)了優(yōu)雅、自由的氣氛將圖片作為主體而減
32、少文字信息,能產(chǎn)生畫面的寬裕感,而具有格調(diào)。由于減少了商業(yè)性強(qiáng)的文字信息,從而遠(yuǎn)離常性和實用性,產(chǎn)生安靜、自我的感覺。給人以高級商品和典雅、沉靜具有高格調(diào)的企業(yè)印象。2、 表現(xiàn)只有朋友的世界將文字信息減少也就是遠(yuǎn)離商業(yè)性形象,適合于充滿友好氣息的空間。這種場合的配色以同系色為基調(diào),有節(jié)制的使用對比色,色調(diào)起伏較小。目錄省略型1、文字信息最少的樣式幾乎沒有文字信息,最大限度的表現(xiàn)網(wǎng)頁印象的樣式。把前一頁的類型發(fā)展到極至,就成為這種類型。要將除標(biāo)題之外的文字情報限制在12行內(nèi)。空白以及圖像的空間成為主體,畫面的視覺性最強(qiáng),由圖畫、顏色和空白發(fā)出的信息此時變得十分重要。2、造型性是表現(xiàn)優(yōu)美效果的關(guān)鍵
33、這是文字信息幾乎為0的特殊類型,如同電視電影中沒有聲音只有畫面的場面。像晚霞映照著山脈,這是一個既沒有臺詞又沒有聲音的寂靜空間。因此,在這種場合下,畫面的品質(zhì)極為重要。如果是有臺詞的畫面,即使完成度低一點也能忍受;而對于這種類型來說,那就成為了致命傷,所以專家的幫助不可或缺。B排版的8種樣式主頁的排版樣式主要有以下列舉的8種,它們與前面介紹的5種信息類型也密切相關(guān)。例如,檢索型、與左右對齊式比較相配;若與散開式或?qū)ΨQ式組合起來就不太合適,這是由于信息量大的檢索型與自由度高的散開式和對稱式不相稱的緣故。樣式?jīng)Q定頁面印象的主體骨架8種樣式各自創(chuàng)建出不同的網(wǎng)頁風(fēng)格,因為排版樣式不僅僅是一個形式,還同
34、時具有信息性。即使信息內(nèi)容完全相同,采用左右對齊式來表現(xiàn)和采用對稱式來表現(xiàn),也會產(chǎn)生完全不同的印象。在這8種樣式中選擇的同時,頁面印象的主體骨架也被決定下來。左右對齊式1、 沒有浪費(fèi)的空間,表現(xiàn)商業(yè)性形象從整體上來看,這種樣式將訪問者的注意力向四方形的中部收攏集中,它能夠充分利用每一寸空間。如果主頁以這種形式構(gòu)成,商業(yè)性基調(diào)將被延續(xù)下去,這種滿載著文字信息、沒有浪費(fèi)空間的熱門印象,是最適合傳遞商業(yè)性信息的樣式。但同時,以這種組合方式為基調(diào)的頁面很難傳遞趣味性強(qiáng)和富有詩意的信息。排版的基本樣式這些樣式是排版方式中最為典型的。報紙、書和雜志幾乎都是以左右對齊為基準(zhǔn)來排版的。全景式1、 用趣味性吸引
35、觀看者分散排列的多張圖片,看起來就像在瞭望臺上看到的全景畫。小圖片被均一間隔地排列著的樣式就是全景式。因為無論視線從哪個角度都可以進(jìn)入頁面,所以產(chǎn)生了開放的輕松氣氛。全景式中圖片的位置是重點全景式展示與滾軸式展示平鋪與分架陳列全景與卷軸的差別,就如同書店和超市的差別一樣。全景式展示類似于將商品并排放在臺子上,很容易取出的展示方法(平鋪式);卷軸式類似于在架子上滿滿放著一堆商品(分架陳列)。入口附近用全景式陳列,觀者進(jìn)店之后,再從容地用卷軸式提供信息。全景式的展示讓人產(chǎn)生輕松參與的情緒。衛(wèi)星式1、 以太陽為中心的衛(wèi)星環(huán)繞型這種類型的特征就是中間有一個太陽,太陽的面積不一定越大越好,在其周圍留出空
36、白也可以強(qiáng)調(diào)中心性。另一方面,各個衛(wèi)星以全景式展開,讓訪問者沉浸在可以自由參與的開放感之中。作為核心的太陽帶來堅定不移的安定感和衛(wèi)星帶來的開放感并存,傳遞出家庭的印象。圍著太陽均勻散開的衛(wèi)星照片組合式1、新世界以全景式自由的展現(xiàn)出來一張照片通過組合,獲得了新的意義。單獨(dú)看來無趣的照片,在組合之后卻產(chǎn)生了新的情趣,顯現(xiàn)出全景式的效果。多幅照片與全景式共同創(chuàng)造出一種自發(fā)的、來去自由的輕松氣氛。少量的文字信息也可以具有輕松自由感這種樣式是全景式的變形,具有開放感。即使選用了文字信息極少的目錄省略型,也不會產(chǎn)生冷漠感,而是保持適當(dāng)?shù)妮p松和自由。這是全景式的效果。將同樣大小的照片組合起來圖像蒙太奇包圍式
37、1、限定范圍的效果將頁面四周用色塊或圖案圍起來,便產(chǎn)生了一個被限定的世界,它是一個受“墻壁"保護(hù)的、朋友之間的、可以放心的世界。如果那里的“墻壁"結(jié)實而有力,那就表示這個范圍是一個拒絕他人侵入的特別的“領(lǐng)地”,如果用溫柔的色調(diào)圍起來,就表現(xiàn)出那是一個柔和的世界。邊框的種類邊框的類型也可以表現(xiàn)包圍的效果體現(xiàn)商業(yè)信息本來商業(yè)信息的公開性比較強(qiáng),并不適合這種包圍式。但是采取相反的方式把它框起來,就會產(chǎn)生意想不到的效果。散開式1、山水畫般的自由和優(yōu)雅散開式表現(xiàn)出不受限制的優(yōu)雅與自由。以日本的石庭作為例子,石頭的排列乍看之下沒什么規(guī)律,但實際上以院子中的一點作為源頭,像水流從小溪不斷
38、的流向大海一樣來合理的配置石頭和樹木。這不是法國和意大利庭院的那種規(guī)則的排列,而是自由的再現(xiàn)自然配置方法。各個國家主頁設(shè)計上的區(qū)別歐式散開式:美國、歐洲見到的散開式主頁與日本相比,給人印象更加端正整齊。它嚴(yán)格遵守左右平衡關(guān)系,又不破壞左右對稱性,對留白比例的控制比日本式更強(qiáng)。中式散開式:配色采用很華麗的色調(diào)。在日本,選擇散開型多以尋求自由感、典雅感為目的;而在中國,則更重視艷麗感。與日本型的畫面相比,不是將背景原封不動的留白,而是加上較淺的花紋。這一點比較引人注目。與日本型中禁欲主義的配色和空間使用方法相比,中國的畫面更加鮮艷且?guī)в性V說性。單側(cè)齊行式1、理性與自由共存的版面設(shè)計以左右對齊式為基
39、調(diào),將右側(cè)散開,只將左側(cè)對齊,就成這種樣式結(jié)構(gòu)。在追求理智與自由感適當(dāng)?shù)钠胶鈭龊希@種樣式最為有效。不留取一定的空間,右邊的流動效果就無法表現(xiàn),結(jié)果就是生成空白較多的典雅主頁,這最適合于在暗示格調(diào)的同時,突出傳達(dá)自由的氣氛。優(yōu)雅的單側(cè)齊行式并不適合信息豐富的主題印象在登載大量文字信息和圖片信息的場合,這種類型并不合適。刊登的信息太多時,會像左右對齊式一般壓迫空白空間。一面坡式所特有的美麗自由感也會隨之消失。廣播電視局主頁上自由與開放的兩個方向同樣是廣播電視臺的主頁,由于受眾群的不同,排版樣式也有很大的不同。對稱式1、以中心線為基準(zhǔn),左右對稱放置圖片和文字時,先在畫面中央引一條垂線;然后以此為軸
40、進(jìn)行左右對稱的配置,這就是對稱式。人的身體、汽車、照相機(jī)等等,很多形狀都是對稱構(gòu)成的,對稱性也被稱為最終的穩(wěn)定型。頁面版式即將失去平衡時,在左右對稱的位置上放置一張有分量的照片或標(biāo)志,平衡就恢復(fù)了,而且還保持了整體效果。2、格調(diào)高雅的安定型華麗或休閑的圖片在進(jìn)行對稱配置后,就會產(chǎn)生一種可信賴的、讓人放心的感覺。如同宇治平等院一樣,寺院內(nèi)的大建筑物以對稱式進(jìn)行排列,從而產(chǎn)生了與寺院相稱的格調(diào),這也是對稱式帶來的效果。另一方面,同樣是傳統(tǒng)型的建筑物,桂離宮就采用了的散開式進(jìn)行配置。較之于高雅的格調(diào),它更表現(xiàn)出與別墅相稱的自由氣氛。對稱式是與散開式正好相反的樣式。3、充分留白想要產(chǎn)生對稱的效果,空白
41、空間是必不可少的??瞻滋?,對稱型就不能清楚漂亮地顯現(xiàn)出來。如果空白全被文字和圖片添滿的話,對稱式的典雅感就會減弱??瞻资歉哐诺膶ΨQ樣式中不可或缺的因素。另一方面,減少對稱式中的空白,在造成高貴、典雅感欠缺的同時,卻維持了高格調(diào)和安定感。在頁面即將失去平衡感的時候,這樣做是有效的。C空白空間(版面率)的確定增加空白空間,畫面顯得高雅;減少空白空間,增加文字和圖片的數(shù)空間,畫面就越活躍。無論何種類型和樣式,只要改變了空白空間,原來的印象就會變成相反的印象??瞻卓臻g也可以用版面率來表示。版面率就是為了配置文字而假想的范圍:版面率越大空白越少,反之空白越多。什么是版面率?在活版印刷中,為了配置文字而
42、設(shè)定的范圍就叫做版面。像移植到版面里一樣配置活字,然后印刷,框子消失了只有文字被印了下來。版面越大,紙面的空白越小;相反,則空白越大。也就是說,空白量和版面率在結(jié)果上的效果是相同的。1、商業(yè)信息空白較少,讓人感覺比較熱門表現(xiàn)以熱門而引人注目的商業(yè)信息,要盡量減少空白空間。平常的印刷品中,空白空間最少的就是報紙。每天早上,連最微小的空白都不放過,滿載著文字和圖片被送到我們手中。主頁中與報紙最接近的就是中檢索型的商業(yè)信息。檢索型空白量少比較合適。如果加大空白,就會像下圖那樣失去熱門的印象,同時還會降低可信度??瞻状笮∨c排版樣式組合的例子根據(jù)信息的內(nèi)容,可以在5種信息量類型和8種排版樣式中選擇,然后
43、再配置上合適的空白空間。這種關(guān)系如同下表所示:趣味性強(qiáng)的信息與較大的空白空間搭配比較合適。D選擇文字的號型平時使用的文字各有歷史,滿載著信息。如果不注意字型與印象的關(guān)系,隨意地使用,就會帶來巨大的負(fù)面效應(yīng)。例如,中國飯店的招牌上如果選用哥特體書寫的話,就無法吸引顧客進(jìn)入。因為哥特體帶有的理智信息而與中國飯店的印象不相符。宋體中庸、黑體理性平時經(jīng)常見到的字體中,最有代表性的就是宋體與黑體。標(biāo)題使用宋體給人穩(wěn)健、傳統(tǒng)的印象;使用黑體給人以合理、理智的印象。宋體由書法體發(fā)展而來,最便于閱讀。另一方面,黑體的橫豎線條一樣粗,合理而沒有浪費(fèi)空間,傳遞了理智的印象。宋體·羅馬體是傳統(tǒng)的、平衡性強(qiáng)
44、的字體。粗宋體飽滿而具有穩(wěn)定感,變細(xì)的話就會十分優(yōu)美。字母表文字中相當(dāng)于宋體的字體叫做羅馬體。黑體·世紀(jì)體它的橫豎線條粗細(xì)相同,結(jié)構(gòu)非常合理。將線的開頭和結(jié)尾變圓,就成為圓黑體,可以緩和冷漠、堅硬的感覺,傳遞溫柔的印象。字體傳達(dá)的印象文字的粗細(xì)1、細(xì)的優(yōu)美,粗的有力量將標(biāo)題文字變細(xì),就會顯得十分優(yōu)美。宋體也好、黑體也罷,哪一種字體變細(xì)都會產(chǎn)生優(yōu)美的意味。將文字變粗,效果增強(qiáng)。大而細(xì)的宋體與城市的印象最為吻合;反之,粗字則傳遞了強(qiáng)而有力的印象。2、細(xì)字不適合做報紙標(biāo)題報紙的大標(biāo)題要用粗字來表示,如果用細(xì)字,看起來就像無聊的、沒有什么價值的新聞。粗字熱情而細(xì)字冷靜,因此,熱門的新聞與細(xì)字
45、不相稱。粗字給人有精神、有力量的印象,最適合于強(qiáng)調(diào)戲劇性信息與富有活力感的主頁。正文不要應(yīng)用粗細(xì)變化粗細(xì)效果對于正文中的小字是一樣的。但是如果極端運(yùn)用粗細(xì)變化,就會造成可讀性的降低。調(diào)整字體粗細(xì)要把握好度。特別應(yīng)注意的是,主頁的設(shè)計未必能夠同制作者所指定的設(shè)計完全相同,考慮到這個差距的存在性,還是使用標(biāo)準(zhǔn)式樣比較穩(wěn)妥。文字的大小(跳躍率)什么是跳躍率?正文和最大的文字標(biāo)題之比叫做跳躍率。(排版基礎(chǔ)講座視覺設(shè)計研究所)報紙活字也叫倍數(shù)活字。以正文作為1倍,標(biāo)題的大小用它的倍數(shù)來表示。第一面的大標(biāo)題用大約78倍,號外新聞級別的則超過了10倍。體育新聞的標(biāo)題經(jīng)常使用10倍以上來構(gòu)成。像這個例子一樣,
46、跳躍率的高低既表現(xiàn)了報道的重要等級,也是表現(xiàn)了熱門的程度。1、文字的大小決定了頁面形象標(biāo)題的大小控制了畫面的形象。放大標(biāo)題會給人有力量、活躍、自信的印象;縮小則表現(xiàn)出纖細(xì)和縝密的印象。另外,文字大小的對比也會左右印象。標(biāo)題文字的大小與正文之比叫做跳動率。跳動率越大,畫面越活躍;反之,越穩(wěn)重2、 粗細(xì)印象優(yōu)先將標(biāo)題的文字變大,粗細(xì)效果會加倍。例如,大而粗的文字最有精神,大而細(xì)的文字都市性印象最強(qiáng)。另一方面,將文字變小,粗細(xì)效果會減弱。雖然細(xì)而小的文字有優(yōu)美的感覺,但如果使用細(xì)而大的文字,效果會更加明顯??傊?,文字越大,越能強(qiáng)化粗細(xì)的印象。E提高造型的完整度隔開輔助造型對大小l兩張圖片進(jìn)行排版時,
47、將小張放置在遠(yuǎn)離主要圖片的地方,這樣主角就會變得突出有力,引人注目,遠(yuǎn)離的配角也會栩栩如生,畫面就產(chǎn)生了動感。擴(kuò)大空間,動感增強(qiáng)將兩張圖片從左右方向分開,空間就被拓展開來;從對角線上分開,動態(tài)空間就會沿對角線方向擴(kuò)展。隨著圖片的分開,空間得到了擴(kuò)展,產(chǎn)生了強(qiáng)烈的動態(tài),從而給畫面帶來了生氣,一個活的主頁就誕生了。水平方向是安靜的、對角線方向是有生氣的端正形狀,制作動態(tài)1、 通過對齊、同化處理來端正形狀沒有計劃的插入許多圖片,會導(dǎo)致畫面的混亂。為了端正畫面,圖片的整理是必要的。在上下左右的任一邊上設(shè)置一條參考線,然后以其為基準(zhǔn)線進(jìn)行對齊,形狀就端正了。將輪廓復(fù)雜的形狀放在畫線的框子里,再在大小上與
48、其他內(nèi)容進(jìn)行同化,混亂的局面就被控制住了。2、 對比越強(qiáng),動感越強(qiáng)在形狀上,存在著大與小、左與右、圓與尖等對比關(guān)系。若想將混亂的局面整理清楚,就要弱化對比、進(jìn)行同化;反之,若想取得富有生氣的畫面,就要強(qiáng)化對比。對比會產(chǎn)生緊張感,從而使整體變得有生氣。第二章 網(wǎng)頁藝術(shù)設(shè)計中圖像的運(yùn)用第一部分 插圖、照片的作用美麗的圖片震顫心靈,容易被忽視的設(shè)計要素大體上可以分為兩部分。1、 故事性圖片(照片、插圖)帶來的效果2、 造型性排版樣式、形狀、色彩、文字等帶來的效果選擇得當(dāng)?shù)膱D片能讓故事潛移默化、刻骨銘心地打動觀者。并且,選用的照片和插圖的水準(zhǔn)越高,故事性效果的發(fā)揮就越充分;反之,如果插圖和照片很少,其
49、故事性和信任度就會降低,打動心靈的效果也隨即消失。故事性和造型的完成度是整體合一的關(guān)系。什么是圖片的故事性?所謂的故事性,就是圖片所傳遞的情緒、意思和內(nèi)容。例如,觀者看到布玩具熊一只手高舉著的畫面,無論是插圖也好、照片也罷,無論是紅色的熊還是白色的熊,都會覺得這是可愛的歡迎象征。圖片自身所帶有的故事性超越了照片或插圖的顏色和筆法等造型性,直接傳達(dá)信息給我們。A圖片的作用圖片的故事性具有壓倒性的說服力,能夠牢牢吸引觀者的視線,它具備配色和版式效果所不具有的寧靜的、決定性的力量。這一頁中去掉圖片后,再看看它的效果。這樣,在今后的主頁制作中,你就可以理解圖片為什么那樣重要了。沒有圖片,就難以讓觀者投
50、入感情圖片直接表現(xiàn)了主題,并且憑借故事性,使觀者產(chǎn)生共鳴。缺少了圖片而只有色彩和文字的主頁,給人的印象是一個沒有信息性的空虛畫面。去掉圖片,它所引導(dǎo)的感情通道也會隨之關(guān)閉,這就需要觀看的人自己費(fèi)很大力量投入到畫面中去。1、 直接表現(xiàn)內(nèi)容時,圖片是最好的選擇圖像直接傳達(dá)內(nèi)容僅僅通過觀看圖片,就能了解網(wǎng)頁的主題。圖像是最親切最有力量的表現(xiàn)形式。而閱讀標(biāo)題和正文之前,如果能對內(nèi)容有一個大概的了解,訪問者就可以放心地深入到正文之中了。圖像引起共鳴看到了版畫風(fēng)格的面包房景像,訪問者的腦海中大概會浮現(xiàn)出剛剛烤出來的面包的樣子,一邊想著“真不錯",一邊將目光移向正文。訪問者在閱讀內(nèi)容之前已經(jīng)與網(wǎng)頁
51、的內(nèi)容產(chǎn)生了共鳴,這種差異是巨大的,也是十分重要的。探尋主題的背景將與商品和服務(wù)直接相關(guān)的畫面,用能給人留下美好印象的形態(tài)表示出來,是十分重要的。僅僅畫出蘋果和摩托車遠(yuǎn)遠(yuǎn)不夠,只有當(dāng)訪問者能從完美的視角看到重型摩托車的力量造型和蘋果引人喜愛的樣子時,才能引起共鳴。此外,圖片的造型水準(zhǔn)越低,說服力就越弱;造型水準(zhǔn)越高,與觀者產(chǎn)生共鳴的能力就越強(qiáng)。2、 故事性深入人心具象的畫面再現(xiàn)故事無論何時,在我們的記憶深處都會殘留著一些畫面。當(dāng)插圖和照片背后的故事與我們腦海中的記憶產(chǎn)生共鳴時,那幅圖片就在記憶中燃燒起來。故事性不同于抽象的色彩和形狀,它依照具體的情景,能夠更直接地刻在我們的記憶之中。這是因為與
52、自己的某種興趣或從前的記憶有共鳴的主題能夠喚醒心中的故事。故事的強(qiáng)化是從方向性開始的單純描繪具體形狀不能強(qiáng)化故事性。只有當(dāng)畫中形象朝某個方向傾斜或二者之間發(fā)生關(guān)系時,故事性才會加強(qiáng)。例如,畫面上僅有海豚和人的照片并沒有什么很強(qiáng)的故事性,但如果海豚和人友好的面對面,故事就展現(xiàn)出來。狗從對面走來的相片雖然有其自身的故事性,但如果狗擺個姿勢或者朝向光源,故事性就變得更強(qiáng)。3、 說服力的強(qiáng)弱人物的瞳孔具有最強(qiáng)的說服力看照片和插圖的時候,我們有時會被強(qiáng)烈地吸引住,并且印象深刻。這是主題自身散發(fā)出的引力的緣故。例如,同時看到花束和人物的時候,人的目光首先會投向人物,他的表情也會深刻的留在記憶中?;ê腿宋锏?/p>
53、不同在于說服力的不同。說服力最強(qiáng)的是人、人的表情,而在表情之中又以瞳孔為最強(qiáng)。風(fēng)景、建筑物的說服力較低主題與人的瞳孔距離越遠(yuǎn),說服力越低。天空和大海之類的風(fēng)景距離最遠(yuǎn),說服力最低。同樣的咖啡杯,與放在架子上的咖啡杯相比,拿在人手里的、離人稍稍近一點的咖啡杯的說服力就強(qiáng)一些。同樣的人物,如果面朝后或者面朝側(cè)面,目光的強(qiáng)度就會消失,說服力也就降低;而從正面朝著你、看著你的人物說服力就增強(qiáng)。走進(jìn)一步提高說服力同一個建筑物,如果離得近了,心情也會更為貼近。作為風(fēng)景中的一部分建筑物,走近了,就可以看見門口的臺階和招牌,連人的腳步聲也能聽見了。對于一個物品進(jìn)行長時間觀察可以做到客觀,而近距離的觀察則可以使
54、人產(chǎn)生共鳴。就人物來講,道理也一樣。工作著的人從后面看來,同桌子、椅子和顯示器一樣,也是靜物的一部分;反之,從正面看的話,說服力就會一下子變強(qiáng);如果再走近一步看的話,說服力將會是最大的。人物·動物 各種主題中說服力最高的是人的視線和動物的視線身邊的物品 和人的生活關(guān)系越密切,說服力越強(qiáng)樹花·植物 植物是人性化的隱蔽的、靜態(tài)的存在。它在溫和地歡迎著你風(fēng)景·建筑 將建筑物作為遠(yuǎn)景進(jìn)行觀察,那么建筑物就和風(fēng)景成為一體,說服力也就減弱了我們并不是總在追求說服力強(qiáng)的主題。與主頁相稱的強(qiáng)弱程度是最重要的。不必要的強(qiáng)度只會使主頁的信賴程度受到損害。例如,想要表現(xiàn)高雅格調(diào)的大學(xué)和
55、銀行時,使用說服力弱的風(fēng)景、建筑等就足夠了。近距離的臉和強(qiáng)烈的視線說服力過強(qiáng),反而會讓人敬而遠(yuǎn)之。B照片的輪廓畫面上標(biāo)準(zhǔn)的照片是四邊形的,它也叫做“角版”。根據(jù)主題的形狀自由變化的照片類型叫剪切版",將周邊部分進(jìn)行淡化處理的叫“模糊版"。三種版式不僅在類型上有所區(qū)別,在視覺效果上也存在著很大差異。由于它們對觀看者的影響非同小可,所以要在理解其含義的基礎(chǔ)上正確使用。角版和模糊版相對如果每天早上送來的報紙上的照片都是模糊版,那將會造成一種奇妙的氛圍。模糊版表現(xiàn)出朦朧與優(yōu)雅,如下圖中的比較圖例所示,并不適合新聞的嚴(yán)謹(jǐn)性。熱門的新聞與不浪費(fèi)空間的角版相協(xié)調(diào)。角版的形狀橫平豎直,與其
56、它相片和文字可以很好進(jìn)行組合。角版是客觀的、模糊版是情緒化的同一人物,同一風(fēng)景,用角版來表現(xiàn)和用模糊版來表現(xiàn),造成的印象全然不同。角版有客觀和中庸的印象,與新聞比較相配。另一方面,模糊版?zhèn)鬟_(dá)出的情緒和情調(diào),與趣味性或偏好性較強(qiáng)的信息最為吻合。剪下版是非正式的,傳達(dá)了輕松愉快的印象。1、角版、剪切版、模糊版C插圖的效果插圖與照片或文字相比,更能直接地傳達(dá)信息。插圖中人物拿的是什么、為什么選用這幅圖片等問題與觀者并沒有什么關(guān)系,但在觀看插圖的一瞬間,喜歡或是不喜歡、繼續(xù)前進(jìn)還是返回這些決定就做出了。是否繼續(xù)仔細(xì)欣賞照片和文字,是由插圖的優(yōu)劣決定的。1、 強(qiáng)有力的使者2、 溫暖而親切插圖具有溫暖的效
57、果用照片表現(xiàn)的畫面客觀性強(qiáng)卻欠缺說服力,但是不會像插圖一樣,有可能遭到強(qiáng)烈的厭惡而導(dǎo)致失敗。另一方面,插圖的手繪性使得它能夠表現(xiàn)溫暖和親切的氛圍。而且,細(xì)致描繪的插圖在保持與照片相同的客觀性的同時,還能制造一種懇切的氣氛。3、 低品位會導(dǎo)致信賴感的喪失低品位會帶來負(fù)面效果雖然插圖的說服力最強(qiáng),但是一旦運(yùn)用不當(dāng),其產(chǎn)生的破壞力也是相當(dāng)大的。如果插圖的品位很低,那么無論在排版和文章上怎么下工夫,也很難重新獲得觀者的信賴。很遺憾的是,現(xiàn)在的主頁上出現(xiàn)低品位插圖的情況非常頻繁,這嚴(yán)重?fù)p害了觀看者的信任度。一般我們認(rèn)為,插圖的好壞對于外行來說是很難判斷的。但實際上,如果客觀的站在訪問者的角度上觀察,任何人都能夠判斷插圖的優(yōu)劣。在沒有成見的情況下讓不同的人進(jìn)行判
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 瑜伽行業(yè)私教課程合同
- 房屋代理銷售協(xié)議
- 夫妻共同擔(dān)保簽字借款合同
- 外立面裝修施工合同
- 汽車零部件生產(chǎn)加工合作協(xié)議
- 數(shù)字文化創(chuàng)意產(chǎn)業(yè)投資合同
- 產(chǎn)品研發(fā)合作框架協(xié)議
- 國家建造師聘用協(xié)議書
- 機(jī)關(guān)事業(yè)單位編外人員勞動合同書
- 協(xié)議離婚制度存在的問題及完善
- 藥品不良反應(yīng)及不良反應(yīng)報告課件
- 俄羅斯水資源現(xiàn)狀分析
- FSC認(rèn)證培訓(xùn)材料
- 非法捕撈水產(chǎn)品罪
- Germany introduction2-德國國家介紹2
- 新概念第一冊單詞匯總帶音標(biāo)EXCEL版
- 作用于血液及造血器官的藥 作用于血液系統(tǒng)藥物
- 急危重癥患者靜脈通路的建立與管理月教學(xué)課件
- 火力發(fā)電廠總經(jīng)理崗位規(guī)范
- 春節(jié)節(jié)后施工復(fù)工安全培訓(xùn)
- JJG 644-2003振動位移傳感器
評論
0/150
提交評論