網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)

1、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)第一章 網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)概論一、網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展趨勢(shì)網(wǎng)絡(luò)已經(jīng)不斷演進(jìn)并成為現(xiàn)代社會(huì)不可缺少的一部分，盡管網(wǎng)頁(yè)設(shè)計(jì)會(huì)以人們意想不到的方式發(fā)生變化，可是我們有理由相信，人們對(duì)網(wǎng)頁(yè)的視覺(jué)追求永無(wú)止境，這正是推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)向前發(fā)展的主要因素。從發(fā)展趨勢(shì)來(lái)看，網(wǎng)頁(yè)設(shè)計(jì)會(huì)更加注重網(wǎng)頁(yè)的創(chuàng)意和個(gè)性化。1、網(wǎng)頁(yè)創(chuàng)意網(wǎng)頁(yè)設(shè)計(jì)中的創(chuàng)意主要體現(xiàn)在設(shè)計(jì)觀念、設(shè)計(jì)方法、設(shè)計(jì)元素等方面。創(chuàng)意是通過(guò)形象轉(zhuǎn)換、元素轉(zhuǎn)換、空間轉(zhuǎn)換等方法構(gòu)造新的視覺(jué)形式，并由此產(chǎn)生不同的意境。2、網(wǎng)頁(yè)的圖形網(wǎng)頁(yè)中的圖形創(chuàng)意分抽象類和具象類兩種。抽象類圖形是通過(guò)點(diǎn)、線、面等視覺(jué)元素在一定的版面空間范圍內(nèi)有間隔地反復(fù)組合形成圖形。它以連續(xù)、漸變

2、、大小、長(zhǎng)短、明暗、高低等變化手法來(lái)構(gòu)成。同一視覺(jué)元素的反復(fù)出現(xiàn)，可構(gòu)成視覺(jué)認(rèn)知中虛實(shí)、強(qiáng)弱的對(duì)比，形成輕、重、緩、急的趨勢(shì)，從而使人感覺(jué)到節(jié)奏的存在。3、個(gè)性化網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)特別需要具有個(gè)性，不能忍受雷同。設(shè)計(jì)風(fēng)格的形成不是偶然的，它是知識(shí)和智慧的必然結(jié)晶，也是設(shè)計(jì)本身的需要。設(shè)計(jì)風(fēng)格的形成離不開(kāi)設(shè)計(jì)元素、設(shè)計(jì)方法、設(shè)計(jì)個(gè)性。每一次設(shè)計(jì)的新“變化”都源于設(shè)計(jì)師對(duì)設(shè)計(jì)元素與設(shè)計(jì)方法的新發(fā)現(xiàn)或新理解。網(wǎng)頁(yè)個(gè)性化已成為當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)的新標(biāo)準(zhǔn)。在網(wǎng)頁(yè)設(shè)計(jì)中倡導(dǎo)網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，有利于網(wǎng)頁(yè)的差異識(shí)別。優(yōu)秀主頁(yè)具備的六個(gè)條件滿足6個(gè)條件就會(huì)給人留下好印象讓人賞心悅目的優(yōu)秀主頁(yè)要具備6個(gè)條件。滿足這些條件并不困難

3、，任何人都能做到。具備了這些條件，就能做出令人滿意的優(yōu)秀主頁(yè)。其中，4個(gè)是必要條什，2個(gè)是附加條件。4個(gè)必要條件使人產(chǎn)生信賴感以下4個(gè)條件是最基本的必要條件。雖然我們認(rèn)為每一個(gè)條件都必不可少，但在實(shí)際應(yīng)用中，所有條件都完備的主頁(yè)是很少見(jiàn)的。然而在這4個(gè)條件中，缺少任何一個(gè)都會(huì)使訪問(wèn)者對(duì)網(wǎng)頁(yè)的印象一落千丈，使得初次訪問(wèn)者不愿再次光臨。條件1明示標(biāo)題對(duì)于初次訪問(wèn)網(wǎng)站的讀者來(lái)說(shuō)，首要目的就是確認(rèn)標(biāo)題。那些晦澀難懂的標(biāo)題會(huì)使難得光臨的訪問(wèn)者感到不知所措。雖然我們以美觀和與眾不同為設(shè)計(jì)日標(biāo)，但如果吸引不了訪問(wèn)者，這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)和建設(shè)也是沒(méi)有意義的。過(guò)于個(gè)性化的表現(xiàn)，會(huì)使網(wǎng)站內(nèi)容的公開(kāi)性受到質(zhì)疑。條件2明

4、示信息讓訪問(wèn)者第一眼就明了表達(dá)的內(nèi)容的網(wǎng)頁(yè)才是最優(yōu)秀的。如果訪問(wèn)者對(duì)信息的種類、是趣味性的網(wǎng)頁(yè)還是商業(yè)性的，以及行業(yè)類型等問(wèn)題能夠一目了然的話，他才能安心地繼續(xù)訪問(wèn)，對(duì)網(wǎng)頁(yè)的好感也會(huì)逐步增強(qiáng)。所以我們運(yùn)用排版樣式、圖像、文字的造型以及配色類型等元素來(lái)準(zhǔn)確傳遞信息。條件4整理目錄信息對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，最重要的就是信息內(nèi)容。信息的品質(zhì)與數(shù)量決定了人們對(duì)這個(gè)網(wǎng)頁(yè)的評(píng)價(jià)高低。但首先要做到的是，怎樣將讀者順利地引向信息內(nèi)容。明確劃分信息群，不讓讀者產(chǎn)生迷惑，使之迅速找到所需要的信息，是目錄設(shè)計(jì)最重要的任務(wù)。目錄的整理決定了網(wǎng)頁(yè)的可讀性。條件5傳達(dá)信任感4個(gè)必要條件之中，最難掌握的就是條件。但如果我們站在訪問(wèn)

5、者的立場(chǎng)上，就很容易理解它了。舉個(gè)例子：如果配色強(qiáng)烈的航空公司主頁(yè)上排列著許多模糊不清的百貨公司的照片，它自然不會(huì)擁有許多觀眾。因?yàn)楫嬅娴脑煨托蕴蜁?huì)使整個(gè)主頁(yè)失去信任感。2個(gè)附加條件增強(qiáng)效果在4個(gè)必要條件之外，還有2個(gè)附加條件。表現(xiàn)歡迎態(tài)度：傳達(dá)歡迎的心情，給人感覺(jué)良好。加強(qiáng)說(shuō)服力：給訪問(wèn)者留下深刻、強(qiáng)烈的印象。加上這兩個(gè)條件，就能設(shè)計(jì)出更有競(jìng)爭(zhēng)力的網(wǎng)頁(yè)，但請(qǐng)注意，這兩個(gè)條件不是絕對(duì)的。必要條件占優(yōu)先地位有時(shí)過(guò)于強(qiáng)調(diào)附加條件，反而使必要條件失去作用。例如，為了強(qiáng)化說(shuō)服力而使用強(qiáng)烈的配色，雖然加深了印象，卻削弱了標(biāo)題和信息性，對(duì)條件和條件產(chǎn)生了負(fù)面作用。第一部分 首頁(yè)的三個(gè)構(gòu)成空間畫面空間空間

6、的作用1、標(biāo)題空間 明示標(biāo)題（標(biāo)題如同商店引人注目的招牌，要清楚，明確的表示出來(lái)，讓訪問(wèn)者毫不猶豫、放心大膽的進(jìn)入）2、歡迎空間 明示信息、表現(xiàn)歡迎態(tài)度（是被標(biāo)題吸引進(jìn)來(lái)的人在進(jìn)入目錄信息之前歇歇腳、休息一下的地方，相當(dāng)于網(wǎng)頁(yè)的玄關(guān)。在確認(rèn)主頁(yè)內(nèi)容的同時(shí)，希望能夠傳達(dá)歡迎態(tài)度。）3、目錄信息空間 整理目錄信息（訪問(wèn)者希望能夠總攬主頁(yè)的全部信息，所以對(duì)大量信息的整理歸納、發(fā)掘共同點(diǎn)等為使網(wǎng)頁(yè)更加引人入勝而下的工夫都是十分必要的。當(dāng)然，最重要的是要讓訪問(wèn)者感覺(jué)到這是你為他著想而做的整理。）4、畫面整體 傳達(dá)信任感、加強(qiáng)說(shuō)服力檢索型首頁(yè)這是典型的關(guān)于國(guó)際新聞的新聞檢索型頁(yè)面。剛勁有力的標(biāo)題傳達(dá)出強(qiáng)烈

7、的可信度。舒服的對(duì)稱式這是與上圖相對(duì)的印象主體型主頁(yè)。對(duì)目錄信息進(jìn)行控制的同時(shí)擴(kuò)大歡迎空間，傳遞出歡樂(lè)和親切的感覺(jué)。I、標(biāo)題空間（必要條件1明示標(biāo)題）標(biāo)題就是商店的招牌和住宅的門牌。如同門牌的位置要固定一樣，標(biāo)題也有一定的位置。為了使初次訪問(wèn)者不會(huì)產(chǎn)生迷惑，它通常位于頁(yè)面的上端或中央。寫在哪、怎么寫以及對(duì)題目本身的探討暫且不論，為了使訪問(wèn)者安心，標(biāo)題一定要清楚明確地表示出來(lái)。1、標(biāo)題應(yīng)有的強(qiáng)度與其他文字相比，標(biāo)題的字號(hào)大一些、粗一點(diǎn)為宜。再加上鮮艷的色彩，標(biāo)題就具有了適當(dāng)?shù)膹?qiáng)度，畫面整體的安定感也隨之產(chǎn)生，訪問(wèn)者也能夠放心查看了。2、與網(wǎng)頁(yè)風(fēng)格相和諧的標(biāo)題優(yōu)秀的設(shè)計(jì)使人第一眼就關(guān)注到標(biāo)題。但是

8、如果過(guò)度放大標(biāo)題也是一種失敗，應(yīng)該選擇與主頁(yè)風(fēng)格相和諧的字號(hào)、粗細(xì)及配色。A、大小、粗細(xì)要與標(biāo)題相稱1、 越大、越粗、越有力量若要明確的表示標(biāo)題，就要將標(biāo)題文字放大、加粗，使其更醒目。在大小相同的情況下，加粗文字也能產(chǎn)生強(qiáng)化效果。作出幾種大小、粗細(xì)不同的樣例，看看哪一種文字最有吸引力，以找到完美的型號(hào)。2、 檢查一下標(biāo)題字號(hào)是否太小小巧的字體顯得格凋高雅，所以在以創(chuàng)建高品位網(wǎng)站為目標(biāo)的主頁(yè)設(shè)計(jì)過(guò)程中，標(biāo)題常常有縮小的傾向。字體縮小的程度是否合適，還需重新驗(yàn)證標(biāo)題大小是否與最初的想法一致，再次確認(rèn)不會(huì)使初次訪問(wèn)者產(chǎn)生困惑。3、 大小合適是最重要的標(biāo)題對(duì)頁(yè)面整體的平衡效果非常重要。無(wú)視周圍內(nèi)容而將

9、標(biāo)題一味放大，就會(huì)顯得庸俗；頁(yè)面周圍空間全部用白色填充的話，就會(huì)給人一種信息量少的印象；在希望突出格調(diào)的頁(yè)面上，字型過(guò)大，就會(huì)顯得過(guò)于活躍而內(nèi)斂不足。所以應(yīng)該選擇與頁(yè)面風(fēng)格最相匹配的字號(hào)。即使是同樣大小的字，粗細(xì)的變化也會(huì)在很大程度上改變印象。B、通過(guò)高色價(jià)明示標(biāo)題1、 鮮艷的色彩能夠強(qiáng)化標(biāo)題需要強(qiáng)化標(biāo)題的時(shí)候，鮮艷的色彩不可或缺。同樣大小、粗細(xì)的文字，若換成鮮艷的顏色，強(qiáng)度馬上就會(huì)增加。當(dāng)基于特定風(fēng)格的要求而不得不將文字縮小時(shí)，鮮艷的彩色能夠有效的保持文字的強(qiáng)度，使標(biāo)題得到強(qiáng)化，效果清晰，引人注目。2、 強(qiáng)調(diào)主體性將標(biāo)題加上鮮艷的顏色，視線就會(huì)集中在那里。正如舞臺(tái)上突出主角能夠使觀眾感到安心

10、一樣，將標(biāo)題作為主體進(jìn)行適當(dāng)?shù)膹?qiáng)化，能夠保持頁(yè)面的穩(wěn)定感；反之，如果輔助部分，如按鈕或下劃線的顏色過(guò)于鮮艷，以至強(qiáng)過(guò)標(biāo)題部分，就會(huì)使整體畫面顯的松散混亂。3、 所謂高色階，是指鮮艷和耀眼的顏色色彩越鮮艷、純度越高，色階就越高。相對(duì)的，與白色及黑色越接近純度越低色階也越低。另一方面，如果幾種低純度顏色之間的對(duì)比較強(qiáng)烈，色階也會(huì)提高。例如黑和白的組合，雖然兩方純度都為0，但由于明度差最大，色階也高。C、通過(guò)寬闊的領(lǐng)地襯托標(biāo)題1、 寬闊的領(lǐng)地起到強(qiáng)化標(biāo)題的作用標(biāo)題周圍如果有大面積空白，標(biāo)題的印象就會(huì)顯得更加強(qiáng)烈。將文字和圖像等視覺(jué)要素從標(biāo)題周圍移開(kāi)，代之以空白，這塊地方就叫做標(biāo)題的領(lǐng)地。在標(biāo)題的大小

11、和配色都不變的情況下，僅僅通過(guò)擴(kuò)展領(lǐng)地，也能達(dá)到強(qiáng)化標(biāo)題印象的作用。2、 通過(guò)擴(kuò)展領(lǐng)地來(lái)強(qiáng)化弱效的標(biāo)題標(biāo)題的領(lǐng)地是指將標(biāo)題周圍的圖像和文字移遠(yuǎn)而得到的空白部分?？瞻椎牟糠譃闃?biāo)題的支配空間，也就是我們所說(shuō)的領(lǐng)地。領(lǐng)地越廣闊，標(biāo)題越醒目，主體性也就越強(qiáng)。表現(xiàn)都市、女性形象時(shí)，不便于使用效果強(qiáng)烈和色彩鮮艷的文字，這個(gè)時(shí)候就要開(kāi)拓足夠的領(lǐng)地，使小而弱的標(biāo)題文字也能具有強(qiáng)烈且醒目的效果。用廣闊的領(lǐng)地傳遞優(yōu)雅風(fēng)格的同時(shí)，小字也與標(biāo)題相搭配。II、歡迎空間必要條件2明示信息標(biāo)題與目錄信息之間的部分是歡迎空間。這個(gè)空間是訪問(wèn)者被標(biāo)題吸引進(jìn)來(lái)后，看到目錄信息前喘口氣的休息場(chǎng)所。以餐廳為例，這里就是客人開(kāi)門進(jìn)來(lái)之

12、后、被帶到餐桌之前等候的地方。歡迎空間的兩個(gè)作用：1、標(biāo)明信息進(jìn)入歡迎空間的人，會(huì)查明這里是否有與標(biāo)題相同的信息。訪問(wèn)者會(huì)在歡迎空間再次確認(rèn)自己先前從標(biāo)題中得到的主頁(yè)的大體印象。如果與預(yù)想的相反，訪問(wèn)者就會(huì)變得不安而急于返回了。歡迎空間是再次確認(rèn)信息和獲得安心感的地方。2、表達(dá)歡迎的態(tài)度歡迎空間是在信息再確認(rèn)的同時(shí)，進(jìn)入目錄信息前，能夠得到放松的地方。這里應(yīng)該是歡迎訪問(wèn)者，使他們感覺(jué)良好、心情愉快的地方。表達(dá)歡迎的方法多種多樣，選擇一個(gè)與主頁(yè)特性相符的類型是最重要的。另一方面，在以檢索為主體的頁(yè)面中，有限度的表現(xiàn)歡迎是較為合適的。A、利用排版樣式傳遞信息1、 排版樣式是不說(shuō)話的口信即使圖像與信

13、息內(nèi)容完全相同，排版樣式的改變也會(huì)創(chuàng)造出兩個(gè)完全不同的主頁(yè)。如下圖，版式采取對(duì)稱型或是檢索型所傳遞出來(lái)的信息是完全不同的：采用對(duì)稱樣式進(jìn)行排版，頁(yè)面格調(diào)高雅；采用檢索型的左右對(duì)齊樣式則給人帶來(lái)信息豐富、熱門的印象。版式對(duì)主頁(yè)的影響不同于圖片或標(biāo)語(yǔ)，它的效果是平靜的，安穩(wěn)的，但不知不覺(jué)中準(zhǔn)確的傳遞了信息。2、 慎重選擇排版樣式如果選擇了與主頁(yè)形象大相徑庭的版式，那么有可能在一瞬間失去訪問(wèn)者。例如，本頁(yè)中的三組圖樣是兩兩內(nèi)容相同的主頁(yè)，但是產(chǎn)生的印象卻是截然不同的。這個(gè)差別就是排版樣式的作用。當(dāng)希望得到更多信息的人看到左圖時(shí)，恐怕要失望而回了；而想見(jiàn)到輕松畫面的人看到右圖，也會(huì)希望落空。無(wú)論多么優(yōu)

14、秀的內(nèi)容，若選錯(cuò)了版式，都會(huì)使整體努力落空。B、利用圖片傳遞信息1、 圖片具有強(qiáng)烈的信息性能在一瞬間讓人了解訪問(wèn)的主頁(yè)是否與印象相同的就是圖片。而其中又以能直接表現(xiàn)標(biāo)題或主頁(yè)信息的插圖和照片最有說(shuō)服力，它能夠使訪問(wèn)者直接確認(rèn)信息。傳遞信息的視覺(jué)要素包括文字、色彩、形狀和版式等等。其中圖像的作用是決定性的。在打開(kāi)主頁(yè)一瞬間，圖像幾乎與標(biāo)題文字同時(shí)映入眼簾，觀眾對(duì)主頁(yè)的印象也就被確定下來(lái)。2、看圖的一瞬間，信息就被確定下來(lái)尋找最合適的主題：下面介紹的cat world的照片，單看起來(lái)貓的照片效果很一般，但是當(dāng)它被放在畫面中心的時(shí)候，就不可思議的變得栩栩如生，光彩照人，這就是標(biāo)題與內(nèi)容的互動(dòng)造成的效

15、果。如果選擇了與標(biāo)題相配的主題，整個(gè)主頁(yè)就生動(dòng)起來(lái)。C、利用配色傳遞信息1、 色調(diào)與色相決定整體印象配色決定整體印象。在配色中最基本的要素是色調(diào)和色相請(qǐng)參看下圖的飯店主頁(yè)，比較一下配色效果。綠色庭院的美麗和安靜展現(xiàn)了飯店環(huán)境的高雅格調(diào)。主頁(yè)中最引人注目的是上端的9幅插圖，使用了華麗多彩的表現(xiàn)手法。這種配色的特征就是“明色調(diào)”和“全色相型”。利用這種組合，充分表現(xiàn)出隨意、自由的情趣。如果選錯(cuò)了色調(diào)或選錯(cuò)了色相，這種樂(lè)趣就無(wú)法表現(xiàn)出來(lái)了。2、 錯(cuò)誤的色調(diào)選擇會(huì)破壞一切色調(diào)對(duì)主頁(yè)具有絕對(duì)性影響?；疑{(diào)配色產(chǎn)生素雅的印象；鮮艷的色調(diào)配色產(chǎn)生健康活潑的印象。無(wú)論色相如何改變，這種基本印象是不會(huì)改變的。選

16、擇了與主頁(yè)內(nèi)容不相和諧的色調(diào)，會(huì)傳遞錯(cuò)誤的信息，造成混亂。輔助條件3表示歡迎態(tài)度進(jìn)入西餐廳時(shí)，如果沒(méi)有人來(lái)招呼，客人就會(huì)默默離開(kāi)。主頁(yè)的設(shè)計(jì)也是一樣。對(duì)初次來(lái)訪的觀眾，要立即表示歡迎態(tài)度，用這種感情來(lái)填補(bǔ)觀眾由于不知道網(wǎng)頁(yè)的內(nèi)容而產(chǎn)生的瞬間的迷惑。另一方面，歡迎的形式本身也是多種多樣的，既有那種大聲喊著“歡迎歡迎”的熱烈場(chǎng)面，也有那種不言不語(yǔ)、只是微笑的溫情的表示。但如果在區(qū)政府或是蛋糕房的門口大聲喊“歡迎光臨”就會(huì)讓人摸不著頭腦了，所以要選擇與想傳達(dá)的內(nèi)容相稱的歡迎樣式。用圖片表示歡迎態(tài)度（花束和可愛(ài)的卡通人物是歡迎的象征）歡迎過(guò)度，適得其反由于與主頁(yè)的類型不符，過(guò)于強(qiáng)烈的歡迎反而起到負(fù)面效

17、果。為了表示歡迎使用大量的圖片，而減少標(biāo)題和信息文字是本末倒置的行為。主頁(yè)的必要條件是標(biāo)題的明了、歡迎空間中的信息確認(rèn)以及目錄信息查找的方便，并不一定要有歡迎的表示。在以商業(yè)信息為中心的檢索型主頁(yè)中出現(xiàn)歡迎標(biāo)記反而會(huì)有負(fù)面的效果。A、通過(guò)色彩、形狀和語(yǔ)言來(lái)表現(xiàn)1、 明色調(diào)表現(xiàn)歡迎的情緒如果要用顏色來(lái)傳遞歡迎心情的話，就要有效的使用色相和色調(diào)的屬性。鮮艷的紅色給人以活力；柔和的色調(diào)讓人平靜；明色調(diào)則使人心情愉悅。2、吉祥圖案是歡迎態(tài)度的證明龍、鳳、鶴、龜?shù)燃閳D案表現(xiàn)了喜慶的氣氛，讓人聯(lián)想起新年、豐收、長(zhǎng)壽的形象；現(xiàn)代的花環(huán)、桃心等是眾人皆知的符號(hào)，便于傳達(dá)歡迎的態(tài)度。用色彩和形象來(lái)表現(xiàn)，明亮的

18、顏色，快樂(lè)的形象傳遞了歡迎態(tài)度。選用表示節(jié)日氣氛的形象，在新春和生日慶祝時(shí)登場(chǎng)的喜慶形象也能表現(xiàn)歡迎態(tài)度。心形符號(hào)、馴鹿、星座、緞帶等圖形能讓觀者的情緒變得平和。3、 語(yǔ)言表示歡迎語(yǔ)言的視覺(jué)說(shuō)服力比較低，與圖像和色彩相比效果有限，但它可以傳達(dá)確切的意思，所以適合用于需要保持身份、不愿進(jìn)行視覺(jué)冒險(xiǎn)的政府部門和研究機(jī)構(gòu)的主頁(yè)。4、 計(jì)數(shù)器同樣是歡迎的象征統(tǒng)計(jì)訪問(wèn)人數(shù)的計(jì)數(shù)器，同樣是一種表示歡迎的形式。計(jì)數(shù)器上的數(shù)字不僅是單純的數(shù)據(jù)，還傳遞了這樣一個(gè)信息：這個(gè)主頁(yè)是重視訪問(wèn)者的。III、目錄信息空間必要條件4整理目錄信息首頁(yè)所承載的文字信息有以下幾類內(nèi)容。無(wú)論網(wǎng)頁(yè)的主題是什么，首頁(yè)終歸是菜單或表格之

19、類的內(nèi)容一覽表。為了便于查詢，應(yīng)該采用最為通用的表現(xiàn)形式。1、 選擇形式，要重視聯(lián)想與習(xí)慣人們?cè)诮涣餍畔⒌倪^(guò)程中不知不覺(jué)養(yǎng)成了某些固定習(xí)慣。例如在文件夾背后貼索引、在重點(diǎn)語(yǔ)句下添加下劃線等，如果忽略這一切而去制作主頁(yè)菜單，就會(huì)給查詢?cè)斐烧系K。參考大量的主頁(yè)，找到與自己的信息相適合并利于查詢的形式是很重要的。2、 選擇與內(nèi)容相稱的形式內(nèi)容是主頁(yè)的生命，所以應(yīng)該盡最多登載一些新信息，但問(wèn)題在于整理方法。我們希望能引導(dǎo)看到標(biāo)題之后的訪問(wèn)者，將他們從混亂和迷惑中帶出，直接接觸真正的信息。因此，菜單和表格設(shè)置的清晰程度是非常重要的。張弛有致的分組將使網(wǎng)頁(yè)變得更加親切易懂。首頁(yè)的表示形式1、 叢中型到簡(jiǎn)易

20、型的多種形式在首頁(yè)中，主頁(yè)的所有信息通過(guò)菜單展示出來(lái)?；拘畔⒂瞄T牌型或索引型表示比較合適，而每天更新的新聞?dòng)煤?jiǎn)單的下劃線來(lái)表示能給人以最新的熱門消息的印象。這里介紹l1種表現(xiàn)形式，但不要受其局限。2、 視覺(jué)要素的種類與菜單相關(guān)的視覺(jué)要素有照片、插圖、繪畫性的圖標(biāo)等等。另外，各種記號(hào)和下劃線也能增強(qiáng)視覺(jué)性。3、 將個(gè)人數(shù)據(jù)輸入表格在訂購(gòu)商品、占卜等類型的網(wǎng)頁(yè)中，訪問(wèn)者輸入自己的數(shù)據(jù)信息的形式可分為選擇型和鍵入型兩種。4、 其他表現(xiàn)形式到現(xiàn)在為止介紹的菜單和表格都是構(gòu)成主頁(yè)的核心要素。這些網(wǎng)頁(yè)除了招牌兼做門牌的情況以外，還要盡可能去掉可以省略的要素。熟練運(yùn)用這些要素，就可以增強(qiáng)歡迎氣氛，做出更易

21、于查看的網(wǎng)頁(yè)。利用留白和劃線進(jìn)行分組1、 分組在檢索中心的主頁(yè)上，應(yīng)該盡可能多地安排文字信息。但是，內(nèi)容過(guò)多又會(huì)顯得十分雜亂，造成查詢困難。因此，在信息的安排整理上要格外注意。為了使大量的信息便于查詢，采用分組(群化)的手段十分有效。讓我們用通過(guò)利用空白和劃線以及上色塊進(jìn)行分組吧。2、 用空白進(jìn)行分組最基本的分組方法就是制造空白?？瞻诇p少，字群就變成同一組；空白增加，就變成了若干組。然后再與劃線一起運(yùn)用，就能創(chuàng)造出更有效的分組。利用色塊進(jìn)行分組1、 版面空間不夠時(shí)用色塊分組最合適用空白和畫線進(jìn)行分組時(shí)，如同其字面意義：有“空白空間"是必要條件。但是用色塊進(jìn)行區(qū)分就不必占用空間，它在完

22、全沒(méi)有空白的版面上，也可以達(dá)到分組的效果。將留白和色塊一起使用進(jìn)行分組，效果最佳。色塊產(chǎn)生的印象：色塊對(duì)于分組十分有效，同時(shí)其自身也傳達(dá)出某種信息。有節(jié)制的色調(diào)給人的印象也是有節(jié)制的，而華麗的色調(diào)則生成華麗的印象。使用色塊進(jìn)行分組時(shí)，對(duì)網(wǎng)頁(yè)整體的色彩印象也要有所規(guī)劃。色調(diào)的選擇方法：分組用的色塊大致分為兩種色調(diào)：對(duì)色彩有所控制，不改變整體的色調(diào)配色效果強(qiáng)烈，傳達(dá)出積極的信息。其中產(chǎn)生典雅感和穩(wěn)重感，產(chǎn)生活力標(biāo)題的大小與行距1、 標(biāo)題的大小樣本的正文是在蘋果機(jī)上使用IE時(shí)的標(biāo)準(zhǔn)字體Osaka，所有字的大小都是一樣的。與正文相配合的標(biāo)題應(yīng)該多大多粗才好呢?在漂亮的樣本中尋找吧。2、 選擇合適的行間

23、距如果沒(méi)有特別的指定，行間距一般是125，即將正文設(shè)為100，兩行字之間的空白是25。下面的樣本行間距為125、130，后面的以10遞增。選擇讓人感覺(jué)舒服并且利于閱讀的合適行距。IV、畫面整體必要條件5傳達(dá)信任感信息內(nèi)容相同，但為什么有些頁(yè)面讓人無(wú)法信服呢?原因就在于設(shè)計(jì)的完成度。主頁(yè)給人的信任性雖然取決于信息的質(zhì)量和數(shù)量，但同時(shí)它也被設(shè)計(jì)的成功與否左右著。造型的完成度增強(qiáng)時(shí)，產(chǎn)生信任感；降低時(shí)，則會(huì)喪失信任感。追求高度的造型性時(shí)，向設(shè)計(jì)師尋求幫助是個(gè)好辦法。但實(shí)際上即使沒(méi)有經(jīng)過(guò)特殊訓(xùn)練的人，只要遵守基本原則，也可以保證一定的水準(zhǔn)。這要比完全依賴設(shè)計(jì)師、拘泥于造型性而忽略必要條件，更能得到良好

24、的綜合效果。漂亮的排版遵循的原則：下圖是以排版樣式中的檢索型(參照P.56)為基礎(chǔ)，采用留白，降低文字的跳躍率(參照P90)制成的。利用明確表示了商業(yè)信息；利用表現(xiàn)出高雅的格調(diào)。因此可知，漂亮的排版不是糊里糊涂就產(chǎn)生的，是嚴(yán)格遵循一定的原理和原則而被設(shè)計(jì)出來(lái)的。漂亮的照片提升信任感1、 照片的質(zhì)量產(chǎn)生信任程度的差別快照誰(shuí)都能拍。照相機(jī)和膠卷的方便使用使生手也能拍出生動(dòng)的、給人以深刻印象的照片。但我們不能原封不動(dòng)使用這些不經(jīng)意之中拍下來(lái)的照片。如果隨意登載了下圖所示的有缺陷的照片，就會(huì)造成主頁(yè)整體信任感的喪失。因此，在選用照片之前，一定要做充分的檢查。2、 合適的采光拍出精彩的照片即使是初學(xué)者，

25、如果遵守基本原則，也能夠拍出讓人喜愛(ài)的照片。而這個(gè)原則就是，絕對(duì)不要使用帶有下表所示缺陷的照片。拍出優(yōu)秀照片的關(guān)鍵是采光。從斜前方射來(lái)的光線，即順光狀態(tài)是最合適的。初學(xué)者應(yīng)該避免正面光和逆光狀態(tài)。通過(guò)配色和版式產(chǎn)生信任感1、 人的眼睛十分敏銳即使不是設(shè)計(jì)專家，也能一眼看出主頁(yè)的排版不平衡，從而對(duì)它失去信任，因?yàn)椴话捕ǖ漠嬅鎮(zhèn)鬟_(dá)了不安定的情緒。打破整齊的版式能產(chǎn)生動(dòng)感，增強(qiáng)隨意性的樂(lè)趣。但是過(guò)度的破壞平衡，反而會(huì)使排版變得粗糙而混亂。因此要注意：不統(tǒng)一的排版會(huì)導(dǎo)致可信度的急劇下降。在打破版式平衡的基礎(chǔ)上如果配色不當(dāng)，就會(huì)變成俗氣的網(wǎng)頁(yè)，引起觀者的不快。輔助條件6加強(qiáng)說(shuō)服力有兩種方法可以提高網(wǎng)頁(yè)的

26、說(shuō)服力：一種是增強(qiáng)故事性，另一種是提高造型性的緊張感。“故事性”就是插圖照片的信息性。它使得網(wǎng)頁(yè)即使不運(yùn)用強(qiáng)烈的色彩也能增強(qiáng)說(shuō)服力；即使是靜止的畫面，也能讓人印象深刻。另外，將主題放在動(dòng)物和人身上時(shí)說(shuō)服力最強(qiáng)，故事性也最強(qiáng)。例如，藍(lán)色的天空上飄著白云。在云上加上風(fēng)吹的圖畫，就能增強(qiáng)信息性，使觀者對(duì)后面的景像和意義產(chǎn)生種種聯(lián)想。這就是故事性的效果。1、 通過(guò)造型的緊張感加深印象用巨大的文字、強(qiáng)烈的色彩創(chuàng)作出來(lái)的畫面能夠提高說(shuō)服力。造型的緊張感提高了，也可以說(shuō)是網(wǎng)頁(yè)變得更加顯眼、有影響力了。但是，由于主頁(yè)性質(zhì)不同，所以造型的說(shuō)服力也不見(jiàn)得是越強(qiáng)越好。與其草率地運(yùn)用，以至于損害信任感，還不如有所節(jié)制

27、的靈活選擇。2、 過(guò)強(qiáng)的說(shuō)服力會(huì)產(chǎn)生負(fù)面影響對(duì)于格調(diào)高雅的主頁(yè)來(lái)說(shuō)，說(shuō)服力過(guò)強(qiáng)反而會(huì)起到負(fù)面效果。例如，將靜逸的美術(shù)館網(wǎng)頁(yè)上添加漫畫人物的插圖，親近感和活力感會(huì)增強(qiáng)，而寧?kù)o感會(huì)降低：反之，對(duì)于想避免冷淡和生硬、傳達(dá)活力感的企業(yè)網(wǎng)站來(lái)說(shuō)，那樣的插圖會(huì)更有效。我們并不是總要追求強(qiáng)大的說(shuō)服力，而是要選擇與目標(biāo)信息相適應(yīng)的強(qiáng)度。第二部分 排版樣式在第1部分中，我們明確了主頁(yè)的六個(gè)條件，即一個(gè)優(yōu)秀的主頁(yè)應(yīng)該具備何種條件。下面將進(jìn)入到正式的排版工作當(dāng)中。排版工作的順序從A、B中選出與目標(biāo)形象最吻合的類型和樣式，大方向就確定下來(lái)。已選定的骨架為基礎(chǔ)，按照C、D、E，然后是第3、4部分的順序逐步添加內(nèi)容。A信

28、息量的5種類型目標(biāo)信息量，是5個(gè)階段中的哪個(gè)B排版的8種樣式選擇最適合目標(biāo)主頁(yè)的排版樣式C空白空間（版面率）的確定留出大量空白的主頁(yè)顯得非常典雅D選擇文字的型號(hào)字體、粗細(xì)、大小E提高造型的完整度隔開(kāi)輔助造型，端正形狀，制作動(dòng)態(tài)第3部 圖像、照片的作用第4部 配色的效果A信息量的5種類型選擇出這5個(gè)階段中的任何一種類型，主頁(yè)風(fēng)格的大方向就被確定下來(lái)。分析這5種類型的特點(diǎn)，研究目標(biāo)主頁(yè)屬于哪一種類型：目標(biāo)樣式是在和之間呢，還是在和之間，在這個(gè)階段要明確下來(lái)。第一步很重要如果在這里做出了正確的選擇，那么后面作業(yè)中的困擾將被降到最低限度；如果在這個(gè)階段尚處于模棱兩可的狀態(tài)，就匆匆進(jìn)入下一個(gè)階段，混亂就

29、會(huì)大大增強(qiáng)，等到發(fā)現(xiàn)時(shí)，主頁(yè)已經(jīng)與設(shè)想的目標(biāo)大相徑庭了。隨后的版式選擇、配色計(jì)劃和插圖選擇也要被這里的類型左右著。檢索型1、以文字信息為主體，圖片少于5，這種檢索型是只由文字信息構(gòu)成的類型。圖片極少，有按鈕和圖標(biāo)就可以了。最大限度的登載了文字信息，如果想要突出內(nèi)容，并使之便于查詢，使用這種獨(dú)特的樣式是十分奏效的。它類似于報(bào)紙上熱門消息的組織結(jié)構(gòu)。2、將表示歡迎的信號(hào)控制在最低限度給人以商業(yè)性、不浪費(fèi)空間、清晰明了的印象是這種類型的特征。將歡迎態(tài)度的表示控制在最低限度，強(qiáng)調(diào)出理性和商業(yè)性。不僅把圖畫縮得很小，在配色方面也十分講究。以白底為主體的亮麗色調(diào)有效地傳達(dá)了冷靜的印象。3、白表現(xiàn)自由感和高

30、貴感將空白減少、文字信息增多，會(huì)增強(qiáng)新聞性。相反的，增加空白會(huì)產(chǎn)生寬裕感和自由感?？瞻琢恳步凶霭婷媛?。我們?nèi)粘＝佑|的印刷品中，報(bào)紙的版面率是最高的。與之相反，詩(shī)集和隨筆集等書籍的版面率是比較低的。通過(guò)版面率去控制印象。準(zhǔn)檢索型1、 略微增強(qiáng)歡迎態(tài)度的準(zhǔn)檢索型與前一頁(yè)相比，稍微增加了一些圖形要素，構(gòu)成了文字與圖像比例為2：l的排版類型。通過(guò)增加歡迎空間可以增強(qiáng)網(wǎng)頁(yè)的開(kāi)放感，給人以輕松、自由選擇的印象。另一方面，它的檢索性與相比也沒(méi)有太大的變化，是最容易獲得平衡的類型。2、色彩和圖片的增加是主頁(yè)氣氛更開(kāi)放這個(gè)階段適合使用多種顏色。廣泛運(yùn)用色彩，能夠創(chuàng)作出歡樂(lè)的畫面。在白底上不僅使用藍(lán)色和黑色等禁欲

31、主義印象的顏色，還廣泛使用多種其他顏色，旨在不破壞信息豐富的同時(shí)，提高樂(lè)趣。在圖像的運(yùn)用上，不僅限于圖標(biāo)，同時(shí)也可以使用更加自由的插圖和照片等形式。均衡型1、 最平衡的55歡迎空間與目錄信息各占一半，與、型相比顯得更加開(kāi)放。、型專業(yè)性較強(qiáng)，局外人進(jìn)入比較困難，而這種類型則可以讓人輕松愉快的加入進(jìn)來(lái)，它既有文字信息又有相對(duì)更強(qiáng)的視覺(jué)性，是便于應(yīng)用的類型。2、 與任何排版樣式都可以進(jìn)行自由的組合第種類型在保持主頁(yè)的信息量同時(shí)，還有足夠的自由空間來(lái)選擇排版和配色。它可以與排版樣式中的8種版式中的任何一種進(jìn)行組合，是自由靈活的類型。印象主體型1、 以圖片為主體，傳達(dá)了優(yōu)雅、自由的氣氛將圖片作為主體而減

32、少文字信息，能產(chǎn)生畫面的寬裕感，而具有格調(diào)。由于減少了商業(yè)性強(qiáng)的文字信息，從而遠(yuǎn)離常性和實(shí)用性，產(chǎn)生安靜、自我的感覺(jué)。給人以高級(jí)商品和典雅、沉靜具有高格調(diào)的企業(yè)印象。2、 表現(xiàn)只有朋友的世界將文字信息減少也就是遠(yuǎn)離商業(yè)性形象，適合于充滿友好氣息的空間。這種場(chǎng)合的配色以同系色為基調(diào)，有節(jié)制的使用對(duì)比色，色調(diào)起伏較小。目錄省略型1、文字信息最少的樣式幾乎沒(méi)有文字信息，最大限度的表現(xiàn)網(wǎng)頁(yè)印象的樣式。把前一頁(yè)的類型發(fā)展到極至，就成為這種類型。要將除標(biāo)題之外的文字情報(bào)限制在12行內(nèi)?？瞻滓约皥D像的空間成為主體，畫面的視覺(jué)性最強(qiáng)，由圖畫、顏色和空白發(fā)出的信息此時(shí)變得十分重要。2、造型性是表現(xiàn)優(yōu)美效果的關(guān)鍵

33、這是文字信息幾乎為0的特殊類型，如同電視電影中沒(méi)有聲音只有畫面的場(chǎng)面。像晚霞映照著山脈，這是一個(gè)既沒(méi)有臺(tái)詞又沒(méi)有聲音的寂靜空間。因此，在這種場(chǎng)合下，畫面的品質(zhì)極為重要。如果是有臺(tái)詞的畫面，即使完成度低一點(diǎn)也能忍受；而對(duì)于這種類型來(lái)說(shuō)，那就成為了致命傷，所以專家的幫助不可或缺。B排版的8種樣式主頁(yè)的排版樣式主要有以下列舉的8種，它們與前面介紹的5種信息類型也密切相關(guān)。例如，檢索型、與左右對(duì)齊式比較相配；若與散開(kāi)式或?qū)ΨQ式組合起來(lái)就不太合適，這是由于信息量大的檢索型與自由度高的散開(kāi)式和對(duì)稱式不相稱的緣故。樣式?jīng)Q定頁(yè)面印象的主體骨架8種樣式各自創(chuàng)建出不同的網(wǎng)頁(yè)風(fēng)格，因?yàn)榕虐鏄邮讲粌H僅是一個(gè)形式，還同

34、時(shí)具有信息性。即使信息內(nèi)容完全相同，采用左右對(duì)齊式來(lái)表現(xiàn)和采用對(duì)稱式來(lái)表現(xiàn)，也會(huì)產(chǎn)生完全不同的印象。在這8種樣式中選擇的同時(shí)，頁(yè)面印象的主體骨架也被決定下來(lái)。左右對(duì)齊式1、 沒(méi)有浪費(fèi)的空間，表現(xiàn)商業(yè)性形象從整體上來(lái)看，這種樣式將訪問(wèn)者的注意力向四方形的中部收攏集中，它能夠充分利用每一寸空間。如果主頁(yè)以這種形式構(gòu)成，商業(yè)性基調(diào)將被延續(xù)下去，這種滿載著文字信息、沒(méi)有浪費(fèi)空間的熱門印象，是最適合傳遞商業(yè)性信息的樣式。但同時(shí)，以這種組合方式為基調(diào)的頁(yè)面很難傳遞趣味性強(qiáng)和富有詩(shī)意的信息。排版的基本樣式這些樣式是排版方式中最為典型的。報(bào)紙、書和雜志幾乎都是以左右對(duì)齊為基準(zhǔn)來(lái)排版的。全景式1、 用趣味性吸引

35、觀看者分散排列的多張圖片，看起來(lái)就像在瞭望臺(tái)上看到的全景畫。小圖片被均一間隔地排列著的樣式就是全景式。因?yàn)闊o(wú)論視線從哪個(gè)角度都可以進(jìn)入頁(yè)面，所以產(chǎn)生了開(kāi)放的輕松氣氛。全景式中圖片的位置是重點(diǎn)全景式展示與滾軸式展示平鋪與分架陳列全景與卷軸的差別，就如同書店和超市的差別一樣。全景式展示類似于將商品并排放在臺(tái)子上，很容易取出的展示方法(平鋪式)；卷軸式類似于在架子上滿滿放著一堆商品(分架陳列)。入口附近用全景式陳列，觀者進(jìn)店之后，再?gòu)娜莸赜镁磔S式提供信息。全景式的展示讓人產(chǎn)生輕松參與的情緒。衛(wèi)星式1、 以太陽(yáng)為中心的衛(wèi)星環(huán)繞型這種類型的特征就是中間有一個(gè)太陽(yáng)，太陽(yáng)的面積不一定越大越好，在其周圍留出空

36、白也可以強(qiáng)調(diào)中心性。另一方面，各個(gè)衛(wèi)星以全景式展開(kāi)，讓訪問(wèn)者沉浸在可以自由參與的開(kāi)放感之中。作為核心的太陽(yáng)帶來(lái)堅(jiān)定不移的安定感和衛(wèi)星帶來(lái)的開(kāi)放感并存，傳遞出家庭的印象。圍著太陽(yáng)均勻散開(kāi)的衛(wèi)星照片組合式1、新世界以全景式自由的展現(xiàn)出來(lái)一張照片通過(guò)組合，獲得了新的意義。單獨(dú)看來(lái)無(wú)趣的照片，在組合之后卻產(chǎn)生了新的情趣，顯現(xiàn)出全景式的效果。多幅照片與全景式共同創(chuàng)造出一種自發(fā)的、來(lái)去自由的輕松氣氛。少量的文字信息也可以具有輕松自由感這種樣式是全景式的變形，具有開(kāi)放感。即使選用了文字信息極少的目錄省略型，也不會(huì)產(chǎn)生冷漠感，而是保持適當(dāng)?shù)妮p松和自由。這是全景式的效果。將同樣大小的照片組合起來(lái)圖像蒙太奇包圍式

37、1、限定范圍的效果將頁(yè)面四周用色塊或圖案圍起來(lái)，便產(chǎn)生了一個(gè)被限定的世界，它是一個(gè)受“墻壁"保護(hù)的、朋友之間的、可以放心的世界。如果那里的“墻壁"結(jié)實(shí)而有力，那就表示這個(gè)范圍是一個(gè)拒絕他人侵入的特別的“領(lǐng)地”，如果用溫柔的色調(diào)圍起來(lái)，就表現(xiàn)出那是一個(gè)柔和的世界。邊框的種類邊框的類型也可以表現(xiàn)包圍的效果體現(xiàn)商業(yè)信息本來(lái)商業(yè)信息的公開(kāi)性比較強(qiáng)，并不適合這種包圍式。但是采取相反的方式把它框起來(lái)，就會(huì)產(chǎn)生意想不到的效果。散開(kāi)式1、山水畫般的自由和優(yōu)雅散開(kāi)式表現(xiàn)出不受限制的優(yōu)雅與自由。以日本的石庭作為例子，石頭的排列乍看之下沒(méi)什么規(guī)律，但實(shí)際上以院子中的一點(diǎn)作為源頭，像水流從小溪不斷

38、的流向大海一樣來(lái)合理的配置石頭和樹木。這不是法國(guó)和意大利庭院的那種規(guī)則的排列，而是自由的再現(xiàn)自然配置方法。各個(gè)國(guó)家主頁(yè)設(shè)計(jì)上的區(qū)別歐式散開(kāi)式：美國(guó)、歐洲見(jiàn)到的散開(kāi)式主頁(yè)與日本相比，給人印象更加端正整齊。它嚴(yán)格遵守左右平衡關(guān)系，又不破壞左右對(duì)稱性，對(duì)留白比例的控制比日本式更強(qiáng)。中式散開(kāi)式：配色采用很華麗的色調(diào)。在日本，選擇散開(kāi)型多以尋求自由感、典雅感為目的；而在中國(guó)，則更重視艷麗感。與日本型的畫面相比，不是將背景原封不動(dòng)的留白，而是加上較淺的花紋。這一點(diǎn)比較引人注目。與日本型中禁欲主義的配色和空間使用方法相比，中國(guó)的畫面更加鮮艷且?guī)в性V說(shuō)性。單側(cè)齊行式1、理性與自由共存的版面設(shè)計(jì)以左右對(duì)齊式為基

39、調(diào)，將右側(cè)散開(kāi)，只將左側(cè)對(duì)齊，就成這種樣式結(jié)構(gòu)。在追求理智與自由感適當(dāng)?shù)钠胶鈭?chǎng)合，這種樣式最為有效。不留取一定的空間，右邊的流動(dòng)效果就無(wú)法表現(xiàn)，結(jié)果就是生成空白較多的典雅主頁(yè)，這最適合于在暗示格調(diào)的同時(shí)，突出傳達(dá)自由的氣氛。優(yōu)雅的單側(cè)齊行式并不適合信息豐富的主題印象在登載大量文字信息和圖片信息的場(chǎng)合，這種類型并不合適。刊登的信息太多時(shí)，會(huì)像左右對(duì)齊式一般壓迫空白空間。一面坡式所特有的美麗自由感也會(huì)隨之消失。廣播電視局主頁(yè)上自由與開(kāi)放的兩個(gè)方向同樣是廣播電視臺(tái)的主頁(yè)，由于受眾群的不同，排版樣式也有很大的不同。對(duì)稱式1、以中心線為基準(zhǔn)，左右對(duì)稱放置圖片和文字時(shí)，先在畫面中央引一條垂線；然后以此為軸

40、進(jìn)行左右對(duì)稱的配置，這就是對(duì)稱式。人的身體、汽車、照相機(jī)等等，很多形狀都是對(duì)稱構(gòu)成的，對(duì)稱性也被稱為最終的穩(wěn)定型。頁(yè)面版式即將失去平衡時(shí)，在左右對(duì)稱的位置上放置一張有分量的照片或標(biāo)志，平衡就恢復(fù)了，而且還保持了整體效果。2、格調(diào)高雅的安定型華麗或休閑的圖片在進(jìn)行對(duì)稱配置后，就會(huì)產(chǎn)生一種可信賴的、讓人放心的感覺(jué)。如同宇治平等院一樣，寺院內(nèi)的大建筑物以對(duì)稱式進(jìn)行排列，從而產(chǎn)生了與寺院相稱的格調(diào)，這也是對(duì)稱式帶來(lái)的效果。另一方面，同樣是傳統(tǒng)型的建筑物，桂離宮就采用了的散開(kāi)式進(jìn)行配置。較之于高雅的格調(diào)，它更表現(xiàn)出與別墅相稱的自由氣氛。對(duì)稱式是與散開(kāi)式正好相反的樣式。3、充分留白想要產(chǎn)生對(duì)稱的效果，空白

41、空間是必不可少的?？瞻滋伲瑢?duì)稱型就不能清楚漂亮地顯現(xiàn)出來(lái)。如果空白全被文字和圖片添滿的話，對(duì)稱式的典雅感就會(huì)減弱。空白是高雅的對(duì)稱樣式中不可或缺的因素。另一方面，減少對(duì)稱式中的空白，在造成高貴、典雅感欠缺的同時(shí)，卻維持了高格調(diào)和安定感。在頁(yè)面即將失去平衡感的時(shí)候，這樣做是有效的。C空白空間（版面率）的確定增加空白空間，畫面顯得高雅；減少空白空間，增加文字和圖片的數(shù)空間，畫面就越活躍。無(wú)論何種類型和樣式，只要改變了空白空間，原來(lái)的印象就會(huì)變成相反的印象?？瞻卓臻g也可以用版面率來(lái)表示。版面率就是為了配置文字而假想的范圍：版面率越大空白越少，反之空白越多。什么是版面率？在活版印刷中，為了配置文字而

42、設(shè)定的范圍就叫做版面。像移植到版面里一樣配置活字，然后印刷，框子消失了只有文字被印了下來(lái)。版面越大，紙面的空白越?。幌喾?，則空白越大。也就是說(shuō)，空白量和版面率在結(jié)果上的效果是相同的。1、商業(yè)信息空白較少，讓人感覺(jué)比較熱門表現(xiàn)以熱門而引人注目的商業(yè)信息，要盡量減少空白空間。平常的印刷品中，空白空間最少的就是報(bào)紙。每天早上，連最微小的空白都不放過(guò)，滿載著文字和圖片被送到我們手中。主頁(yè)中與報(bào)紙最接近的就是中檢索型的商業(yè)信息。檢索型空白量少比較合適。如果加大空白，就會(huì)像下圖那樣失去熱門的印象，同時(shí)還會(huì)降低可信度?？瞻状笮∨c排版樣式組合的例子根據(jù)信息的內(nèi)容，可以在5種信息量類型和8種排版樣式中選擇，然后

43、再配置上合適的空白空間。這種關(guān)系如同下表所示：趣味性強(qiáng)的信息與較大的空白空間搭配比較合適。D選擇文字的號(hào)型平時(shí)使用的文字各有歷史，滿載著信息。如果不注意字型與印象的關(guān)系，隨意地使用，就會(huì)帶來(lái)巨大的負(fù)面效應(yīng)。例如，中國(guó)飯店的招牌上如果選用哥特體書寫的話，就無(wú)法吸引顧客進(jìn)入。因?yàn)楦缣伢w帶有的理智信息而與中國(guó)飯店的印象不相符。宋體中庸、黑體理性平時(shí)經(jīng)常見(jiàn)到的字體中，最有代表性的就是宋體與黑體。標(biāo)題使用宋體給人穩(wěn)健、傳統(tǒng)的印象；使用黑體給人以合理、理智的印象。宋體由書法體發(fā)展而來(lái)，最便于閱讀。另一方面，黑體的橫豎線條一樣粗，合理而沒(méi)有浪費(fèi)空間，傳遞了理智的印象。宋體·羅馬體是傳統(tǒng)的、平衡性強(qiáng)

44、的字體。粗宋體飽滿而具有穩(wěn)定感，變細(xì)的話就會(huì)十分優(yōu)美。字母表文字中相當(dāng)于宋體的字體叫做羅馬體。黑體·世紀(jì)體它的橫豎線條粗細(xì)相同，結(jié)構(gòu)非常合理。將線的開(kāi)頭和結(jié)尾變圓，就成為圓黑體，可以緩和冷漠、堅(jiān)硬的感覺(jué)，傳遞溫柔的印象。字體傳達(dá)的印象文字的粗細(xì)1、細(xì)的優(yōu)美，粗的有力量將標(biāo)題文字變細(xì)，就會(huì)顯得十分優(yōu)美。宋體也好、黑體也罷，哪一種字體變細(xì)都會(huì)產(chǎn)生優(yōu)美的意味。將文字變粗，效果增強(qiáng)。大而細(xì)的宋體與城市的印象最為吻合；反之，粗字則傳遞了強(qiáng)而有力的印象。2、細(xì)字不適合做報(bào)紙標(biāo)題報(bào)紙的大標(biāo)題要用粗字來(lái)表示，如果用細(xì)字，看起來(lái)就像無(wú)聊的、沒(méi)有什么價(jià)值的新聞。粗字熱情而細(xì)字冷靜，因此，熱門的新聞與細(xì)字

45、不相稱。粗字給人有精神、有力量的印象，最適合于強(qiáng)調(diào)戲劇性信息與富有活力感的主頁(yè)。正文不要應(yīng)用粗細(xì)變化粗細(xì)效果對(duì)于正文中的小字是一樣的。但是如果極端運(yùn)用粗細(xì)變化，就會(huì)造成可讀性的降低。調(diào)整字體粗細(xì)要把握好度。特別應(yīng)注意的是，主頁(yè)的設(shè)計(jì)未必能夠同制作者所指定的設(shè)計(jì)完全相同，考慮到這個(gè)差距的存在性，還是使用標(biāo)準(zhǔn)式樣比較穩(wěn)妥。文字的大?。ㄌS率）什么是跳躍率？正文和最大的文字標(biāo)題之比叫做跳躍率。(排版基礎(chǔ)講座視覺(jué)設(shè)計(jì)研究所)報(bào)紙活字也叫倍數(shù)活字。以正文作為1倍，標(biāo)題的大小用它的倍數(shù)來(lái)表示。第一面的大標(biāo)題用大約78倍，號(hào)外新聞級(jí)別的則超過(guò)了10倍。體育新聞的標(biāo)題經(jīng)常使用10倍以上來(lái)構(gòu)成。像這個(gè)例子一樣，

46、跳躍率的高低既表現(xiàn)了報(bào)道的重要等級(jí)，也是表現(xiàn)了熱門的程度。1、文字的大小決定了頁(yè)面形象標(biāo)題的大小控制了畫面的形象。放大標(biāo)題會(huì)給人有力量、活躍、自信的印象；縮小則表現(xiàn)出纖細(xì)和縝密的印象。另外，文字大小的對(duì)比也會(huì)左右印象。標(biāo)題文字的大小與正文之比叫做跳動(dòng)率。跳動(dòng)率越大，畫面越活躍；反之，越穩(wěn)重2、 粗細(xì)印象優(yōu)先將標(biāo)題的文字變大，粗細(xì)效果會(huì)加倍。例如，大而粗的文字最有精神，大而細(xì)的文字都市性印象最強(qiáng)。另一方面，將文字變小，粗細(xì)效果會(huì)減弱。雖然細(xì)而小的文字有優(yōu)美的感覺(jué)，但如果使用細(xì)而大的文字，效果會(huì)更加明顯。總之，文字越大，越能強(qiáng)化粗細(xì)的印象。E提高造型的完整度隔開(kāi)輔助造型對(duì)大小l兩張圖片進(jìn)行排版時(shí)，

47、將小張放置在遠(yuǎn)離主要圖片的地方，這樣主角就會(huì)變得突出有力，引人注目，遠(yuǎn)離的配角也會(huì)栩栩如生，畫面就產(chǎn)生了動(dòng)感。擴(kuò)大空間，動(dòng)感增強(qiáng)將兩張圖片從左右方向分開(kāi)，空間就被拓展開(kāi)來(lái)；從對(duì)角線上分開(kāi)，動(dòng)態(tài)空間就會(huì)沿對(duì)角線方向擴(kuò)展。隨著圖片的分開(kāi)，空間得到了擴(kuò)展，產(chǎn)生了強(qiáng)烈的動(dòng)態(tài)，從而給畫面帶來(lái)了生氣，一個(gè)活的主頁(yè)就誕生了。水平方向是安靜的、對(duì)角線方向是有生氣的端正形狀，制作動(dòng)態(tài)1、 通過(guò)對(duì)齊、同化處理來(lái)端正形狀沒(méi)有計(jì)劃的插入許多圖片，會(huì)導(dǎo)致畫面的混亂。為了端正畫面，圖片的整理是必要的。在上下左右的任一邊上設(shè)置一條參考線，然后以其為基準(zhǔn)線進(jìn)行對(duì)齊，形狀就端正了。將輪廓復(fù)雜的形狀放在畫線的框子里，再在大小上與

48、其他內(nèi)容進(jìn)行同化，混亂的局面就被控制住了。2、 對(duì)比越強(qiáng)，動(dòng)感越強(qiáng)在形狀上，存在著大與小、左與右、圓與尖等對(duì)比關(guān)系。若想將混亂的局面整理清楚，就要弱化對(duì)比、進(jìn)行同化；反之，若想取得富有生氣的畫面，就要強(qiáng)化對(duì)比。對(duì)比會(huì)產(chǎn)生緊張感，從而使整體變得有生氣。第二章 網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中圖像的運(yùn)用第一部分 插圖、照片的作用美麗的圖片震顫心靈，容易被忽視的設(shè)計(jì)要素大體上可以分為兩部分。1、 故事性圖片（照片、插圖）帶來(lái)的效果2、 造型性排版樣式、形狀、色彩、文字等帶來(lái)的效果選擇得當(dāng)?shù)膱D片能讓故事潛移默化、刻骨銘心地打動(dòng)觀者。并且，選用的照片和插圖的水準(zhǔn)越高，故事性效果的發(fā)揮就越充分；反之，如果插圖和照片很少，其

49、故事性和信任度就會(huì)降低，打動(dòng)心靈的效果也隨即消失。故事性和造型的完成度是整體合一的關(guān)系。什么是圖片的故事性?所謂的故事性，就是圖片所傳遞的情緒、意思和內(nèi)容。例如，觀者看到布玩具熊一只手高舉著的畫面，無(wú)論是插圖也好、照片也罷，無(wú)論是紅色的熊還是白色的熊，都會(huì)覺(jué)得這是可愛(ài)的歡迎象征。圖片自身所帶有的故事性超越了照片或插圖的顏色和筆法等造型性，直接傳達(dá)信息給我們。A圖片的作用圖片的故事性具有壓倒性的說(shuō)服力，能夠牢牢吸引觀者的視線，它具備配色和版式效果所不具有的寧?kù)o的、決定性的力量。這一頁(yè)中去掉圖片后，再看看它的效果。這樣，在今后的主頁(yè)制作中，你就可以理解圖片為什么那樣重要了。沒(méi)有圖片，就難以讓觀者投

50、入感情圖片直接表現(xiàn)了主題，并且憑借故事性，使觀者產(chǎn)生共鳴。缺少了圖片而只有色彩和文字的主頁(yè)，給人的印象是一個(gè)沒(méi)有信息性的空虛畫面。去掉圖片，它所引導(dǎo)的感情通道也會(huì)隨之關(guān)閉，這就需要觀看的人自己費(fèi)很大力量投入到畫面中去。1、 直接表現(xiàn)內(nèi)容時(shí)，圖片是最好的選擇圖像直接傳達(dá)內(nèi)容僅僅通過(guò)觀看圖片，就能了解網(wǎng)頁(yè)的主題。圖像是最親切最有力量的表現(xiàn)形式。而閱讀標(biāo)題和正文之前，如果能對(duì)內(nèi)容有一個(gè)大概的了解，訪問(wèn)者就可以放心地深入到正文之中了。圖像引起共鳴看到了版畫風(fēng)格的面包房景像，訪問(wèn)者的腦海中大概會(huì)浮現(xiàn)出剛剛烤出來(lái)的面包的樣子，一邊想著“真不錯(cuò)"，一邊將目光移向正文。訪問(wèn)者在閱讀內(nèi)容之前已經(jīng)與網(wǎng)頁(yè)

51、的內(nèi)容產(chǎn)生了共鳴，這種差異是巨大的，也是十分重要的。探尋主題的背景將與商品和服務(wù)直接相關(guān)的畫面，用能給人留下美好印象的形態(tài)表示出來(lái)，是十分重要的。僅僅畫出蘋果和摩托車遠(yuǎn)遠(yuǎn)不夠，只有當(dāng)訪問(wèn)者能從完美的視角看到重型摩托車的力量造型和蘋果引人喜愛(ài)的樣子時(shí)，才能引起共鳴。此外，圖片的造型水準(zhǔn)越低，說(shuō)服力就越弱；造型水準(zhǔn)越高，與觀者產(chǎn)生共鳴的能力就越強(qiáng)。2、 故事性深入人心具象的畫面再現(xiàn)故事無(wú)論何時(shí)，在我們的記憶深處都會(huì)殘留著一些畫面。當(dāng)插圖和照片背后的故事與我們腦海中的記憶產(chǎn)生共鳴時(shí)，那幅圖片就在記憶中燃燒起來(lái)。故事性不同于抽象的色彩和形狀，它依照具體的情景，能夠更直接地刻在我們的記憶之中。這是因?yàn)榕c

52、自己的某種興趣或從前的記憶有共鳴的主題能夠喚醒心中的故事。故事的強(qiáng)化是從方向性開(kāi)始的單純描繪具體形狀不能強(qiáng)化故事性。只有當(dāng)畫中形象朝某個(gè)方向傾斜或二者之間發(fā)生關(guān)系時(shí)，故事性才會(huì)加強(qiáng)。例如，畫面上僅有海豚和人的照片并沒(méi)有什么很強(qiáng)的故事性，但如果海豚和人友好的面對(duì)面，故事就展現(xiàn)出來(lái)。狗從對(duì)面走來(lái)的相片雖然有其自身的故事性，但如果狗擺個(gè)姿勢(shì)或者朝向光源，故事性就變得更強(qiáng)。3、 說(shuō)服力的強(qiáng)弱人物的瞳孔具有最強(qiáng)的說(shuō)服力看照片和插圖的時(shí)候，我們有時(shí)會(huì)被強(qiáng)烈地吸引住，并且印象深刻。這是主題自身散發(fā)出的引力的緣故。例如，同時(shí)看到花束和人物的時(shí)候，人的目光首先會(huì)投向人物，他的表情也會(huì)深刻的留在記憶中?；ê腿宋锏?/p>

53、不同在于說(shuō)服力的不同。說(shuō)服力最強(qiáng)的是人、人的表情，而在表情之中又以瞳孔為最強(qiáng)。風(fēng)景、建筑物的說(shuō)服力較低主題與人的瞳孔距離越遠(yuǎn)，說(shuō)服力越低。天空和大海之類的風(fēng)景距離最遠(yuǎn)，說(shuō)服力最低。同樣的咖啡杯，與放在架子上的咖啡杯相比，拿在人手里的、離人稍稍近一點(diǎn)的咖啡杯的說(shuō)服力就強(qiáng)一些。同樣的人物，如果面朝后或者面朝側(cè)面，目光的強(qiáng)度就會(huì)消失，說(shuō)服力也就降低；而從正面朝著你、看著你的人物說(shuō)服力就增強(qiáng)。走進(jìn)一步提高說(shuō)服力同一個(gè)建筑物，如果離得近了，心情也會(huì)更為貼近。作為風(fēng)景中的一部分建筑物，走近了，就可以看見(jiàn)門口的臺(tái)階和招牌，連人的腳步聲也能聽(tīng)見(jiàn)了。對(duì)于一個(gè)物品進(jìn)行長(zhǎng)時(shí)間觀察可以做到客觀，而近距離的觀察則可以使

54、人產(chǎn)生共鳴。就人物來(lái)講，道理也一樣。工作著的人從后面看來(lái)，同桌子、椅子和顯示器一樣，也是靜物的一部分；反之，從正面看的話，說(shuō)服力就會(huì)一下子變強(qiáng)；如果再走近一步看的話，說(shuō)服力將會(huì)是最大的。人物·動(dòng)物 各種主題中說(shuō)服力最高的是人的視線和動(dòng)物的視線身邊的物品 和人的生活關(guān)系越密切，說(shuō)服力越強(qiáng)樹花·植物 植物是人性化的隱蔽的、靜態(tài)的存在。它在溫和地歡迎著你風(fēng)景·建筑 將建筑物作為遠(yuǎn)景進(jìn)行觀察，那么建筑物就和風(fēng)景成為一體，說(shuō)服力也就減弱了我們并不是總在追求說(shuō)服力強(qiáng)的主題。與主頁(yè)相稱的強(qiáng)弱程度是最重要的。不必要的強(qiáng)度只會(huì)使主頁(yè)的信賴程度受到損害。例如，想要表現(xiàn)高雅格調(diào)的大學(xué)和

55、銀行時(shí)，使用說(shuō)服力弱的風(fēng)景、建筑等就足夠了。近距離的臉和強(qiáng)烈的視線說(shuō)服力過(guò)強(qiáng)，反而會(huì)讓人敬而遠(yuǎn)之。B照片的輪廓畫面上標(biāo)準(zhǔn)的照片是四邊形的，它也叫做“角版”。根據(jù)主題的形狀自由變化的照片類型叫剪切版"，將周邊部分進(jìn)行淡化處理的叫“模糊版"。三種版式不僅在類型上有所區(qū)別，在視覺(jué)效果上也存在著很大差異。由于它們對(duì)觀看者的影響非同小可，所以要在理解其含義的基礎(chǔ)上正確使用。角版和模糊版相對(duì)如果每天早上送來(lái)的報(bào)紙上的照片都是模糊版，那將會(huì)造成一種奇妙的氛圍。模糊版表現(xiàn)出朦朧與優(yōu)雅，如下圖中的比較圖例所示，并不適合新聞的嚴(yán)謹(jǐn)性。熱門的新聞與不浪費(fèi)空間的角版相協(xié)調(diào)。角版的形狀橫平豎直，與其

56、它相片和文字可以很好進(jìn)行組合。角版是客觀的、模糊版是情緒化的同一人物，同一風(fēng)景，用角版來(lái)表現(xiàn)和用模糊版來(lái)表現(xiàn)，造成的印象全然不同。角版有客觀和中庸的印象，與新聞比較相配。另一方面，模糊版?zhèn)鬟_(dá)出的情緒和情調(diào)，與趣味性或偏好性較強(qiáng)的信息最為吻合。剪下版是非正式的，傳達(dá)了輕松愉快的印象。1、角版、剪切版、模糊版C插圖的效果插圖與照片或文字相比，更能直接地傳達(dá)信息。插圖中人物拿的是什么、為什么選用這幅圖片等問(wèn)題與觀者并沒(méi)有什么關(guān)系，但在觀看插圖的一瞬間，喜歡或是不喜歡、繼續(xù)前進(jìn)還是返回這些決定就做出了。是否繼續(xù)仔細(xì)欣賞照片和文字，是由插圖的優(yōu)劣決定的。1、 強(qiáng)有力的使者2、 溫暖而親切插圖具有溫暖的效

57、果用照片表現(xiàn)的畫面客觀性強(qiáng)卻欠缺說(shuō)服力，但是不會(huì)像插圖一樣，有可能遭到強(qiáng)烈的厭惡而導(dǎo)致失敗。另一方面，插圖的手繪性使得它能夠表現(xiàn)溫暖和親切的氛圍。而且，細(xì)致描繪的插圖在保持與照片相同的客觀性的同時(shí)，還能制造一種懇切的氣氛。3、 低品位會(huì)導(dǎo)致信賴感的喪失低品位會(huì)帶來(lái)負(fù)面效果雖然插圖的說(shuō)服力最強(qiáng)，但是一旦運(yùn)用不當(dāng)，其產(chǎn)生的破壞力也是相當(dāng)大的。如果插圖的品位很低，那么無(wú)論在排版和文章上怎么下工夫，也很難重新獲得觀者的信賴。很遺憾的是，現(xiàn)在的主頁(yè)上出現(xiàn)低品位插圖的情況非常頻繁，這嚴(yán)重?fù)p害了觀看者的信任度。一般我們認(rèn)為，插圖的好壞對(duì)于外行來(lái)說(shuō)是很難判斷的。但實(shí)際上，如果客觀的站在訪問(wèn)者的角度上觀察，任何人都能夠判斷插圖的優(yōu)劣。在沒(méi)有成見(jiàn)的情況下讓不同的人進(jìn)行判