網頁界面設計與制作第4章-網頁界面中的圖形圖像設課件

第4章網頁界面中的圖形圖像設計

課堂學習目標：

了解圖形圖像在網頁界面設計中的作用

熟悉圖形圖像設計的造型元素

掌握圖形圖像的創(chuàng)意技法

掌握圖形圖像的創(chuàng)意及設計的表現技巧

掌握圖形圖像的創(chuàng)意及設計的造型手法·

圖形圖像是一種視覺語言形式，與文字不同?！?/p>

圖形圖像設計可以理解為有關“圖”的設計，它將設計思想賦予形態(tài)，傳達了特定的信息，集中體現了網頁界面的整體風格，在網頁界面設計中展示著其特有的視覺魅力，是設計師展現其創(chuàng)造力的舞臺?！?/p>

因此，利用好圖形圖像，也是網頁界面設計的關鍵。圖形圖像設計的表現技法4.4圖形圖像在網頁界面設計中的作用4.1圖形圖像設計的造型元素4.2圖形圖像設計的創(chuàng)意技法4.3案例——F設計工作室首頁界面設計4.5課后思考與練習4.64.1圖形圖像在網頁界面設計中的作用

1．傳達性·

圖形圖像從屬于網頁界面這一傳播媒體的方式，擔負著傳達信息的作用?！?/p>

傳達信息是網頁界面的首要目的，也是圖形圖像所肩負的最基本的實用功能，形式上的完美必須符合主題思想內容?！?/p>

網頁界面在信息的傳達者和接收者之間搭起了一座橋梁，雖然圖形圖像所傳達的信息和設計表現的方式都受這一傳播媒體的制約（如圖像大小和用色多少），但是，圖形圖像所具有的直觀性、準確性可以讓接收者更快、更準地理解信息，因而與文字、聲音、視頻傳播方式一起，構成了網頁界面特有的信息傳達系統(tǒng)。2．藝術性·

圖形圖像的藝術性是由圖形、圖像、色彩等通過點、線、面的組合與排列，并采用夸張、比喻、象征的手法來體現視覺效果的?！?/p>

藝術性將網頁界面藝術化，同時提高了傳達信息的功能?！?/p>

這是因為，圖形圖像最終是依賴于形態(tài)來傳達意念的，而人們對于形態(tài)的接受是有選擇的，這依賴于人們的審美需求?！?/p>

形態(tài)本身的審美因素，會直接影響視覺的傳達效果，具有視覺美感的形態(tài)能夠促使人們愉快地接受所傳達的信息，容易在心理上引起共鳴?！?/p>

因此，圖形圖像設計追求美的形式感，激發(fā)出人們的審美情感，對網頁界面的傳達效果有著極為重要的輔助意義。3．表現性·

圖形圖像的表現性實際上是突出設計的個性化，給人以獨特的視覺體驗，特別是在提倡設計多元化、個性化發(fā)展的今天，圖形圖像設計可以增加網頁界面的視覺沖擊力，有助于體現網頁整體的設計創(chuàng)意。·

網頁界面的整體風格要靠圖形圖像、文字、色彩、版式、動畫來表現，而圖形圖像是體現這一風格的最直接代表?！?/p>

在圖形圖像設計的過程中敢于思考、敢于獨樹一幟、敢于別出心裁，才能增加網頁的記憶度，最終達到出奇制勝的傳達效果。4．趣味性·

這主要是指一種形式上的情趣感?！?/p>

如果網頁界面本身的內容不是很豐富，圖形圖像則可以讓網頁活躍起來，通過圖形圖像在視覺上產生趣味性，即在構思中調動了藝術手段；如果網頁界面的內容本身已很充實，僅靠文字表述，不免顯得平實、單薄，甚至有枯燥的感覺，而圖形圖像所帶來的趣味性，能使傳達的信息如虎添翼、神采飛揚，使網頁煥發(fā)出活力，達到吸引人、打動人的目的。5．超地域、超時空性·

圖形圖像與人們用來交流的文字語言和聲音語言不同，它是一種視覺語言，它消除了不同地域和文化的民族間的語言障礙和思想的隔閡，它所代表的是一種全球性語匯，如同“藝術無國界”一樣，它用自己特殊的方式傳達信息、溝通情感?！?/p>

這一點對網頁界面設計尤為重要，因為網頁界面是全球性的，當人們在網頁上沒有找到自已所熟悉的語言版本，但通過圖形圖像大致理解了自己需要的信息時，就在心理上產生共鳴，從而拉近了信息的傳達者和接收者之間的距離，消除了陌生感。4.2

圖形圖像設計的造型元素

4.2.1基本造型元素·

不管網頁界面中圖形圖像的內容、形式如何復雜多變，作為視覺形式的語言，構成圖形圖像的最基本的造型元素是點、線、面?！?/p>

點、線、面的變化與組合，形成了一個個生動的圖形圖像。1．點

·

在幾何學中，點是表示位置的幾何元素?！?/p>

在視覺形態(tài)中，點還具有形狀、方向、大小等屬性?！?/p>

點的概念是相對的，是與周圍的視覺元素相比較而言的。·

例如，地球在宇宙中可以被看作點，人在廣場中可以被看作點，細胞在人體中同樣可以被看作點?！?/p>

點具有視覺集中的屬性。·

點的概念是相對的，是與周圍的視覺元素相比較而言的?！?/p>

例如，地球在宇宙中可以被看作點，人在廣場中可以被看作點，細胞在人體中同樣可以被看作點?！?/p>

當畫面中僅有一個點時，人們的視線自然而然集中到這一點上；當有兩個大小相同的點時，人們的視線會在兩點間游移，產生“線”的感覺?！?/p>

當有多個點時，人們的視線會自動將這些點連起來，產生虛擬形的意象，就像人們觀察星座時，自動用直線連接星星，產生人們熟悉的形象一樣；當這些點大小不同時，人們在視覺上會首先注意大的點，然后逐漸向較小點移動，最后停留在最小的點上，視線由最小的點離開畫面，如圖4-2所示?！?/p>

除了圓形以外，點還可以是方形、三角形、星形、自由形等很多形狀?！?/p>

在視覺上，只要相對地小，就有點的效果。2．線

·

幾何學中，點是零次元?！?/p>

線是一次元，具有方向性?！?/p>

自然形態(tài)中，線的意象體現為具有方向性延伸的事物，如曲折的河流、筆直的公路、環(huán)繞的跑道、挺拔的白楊樹等?！?/p>

視覺形態(tài)中的線除了方向性，還具有位置、長度、寬度、形狀和性格。·

在圖形圖像中，運用不同性格的線造型和不同的線性組合作為視覺元素，可以大大豐富網頁界面的視覺效果。（1）線造型的性格·

線分為直線和曲線?！?/p>

直線分為垂直線、水平線、斜線；曲線分為幾何曲線和自由曲線?！?/p>

不同類型的線具有不同的特征，適合于不同類型的圖形圖像?！?/p>

直線具有固定的方向性，給人以單純、明確、莊嚴的感覺，具有男性感?！?/p>

其中，粗直線鈍重、強力，細直線敏銳、略帶神經質?！翊怪本€：令人產生嚴肅、威嚴、蓬勃向上、崇高的感覺，分割左右、連接上下，如圖4-6所示。●水平線：令人產生開闊、平靜、安定、均衡的感覺，分割上下、連接左右，如圖4-7所示。●斜線：具有活動、動蕩和不安定感，富于變化，有活力，如圖4-8所示?！?/p>

曲線具有不固定的方向，常給人以柔軟、流暢、溫和的印象，具有女性特征?！駧缀吻€：比較明確、規(guī)整，具有速度感、彈性、充實感，既有直線的簡單明快又有曲線的柔軟運動，如圖4-9所示?！褡杂汕€：既可以是自由、奔放、舒展、流動、緊湊、優(yōu)雅的形態(tài)（如圖4-10所示），也可以是軟弱無力、雜亂、缺乏韻律的形態(tài)。（2）線的排列組合·

既然線具有方向性、流動性、延續(xù)性，因此可以運用平面構成中的重復、近似、漸變、對比、密集（如向心、擴散）等構成手法，將線進行不同方式的排列組合，這將產生很多具有奇妙效果的視覺形態(tài)。·

如圖4-11所示，將兩組具有疏密變化的曲線安置在汽車的車尾，如同汽車多了兩只翅膀，不禁讓人產生很多豐富的聯想。3．面·

面是二次元空間所構成的形，它既可以看作是點的密集，也可以看作是線的平行排列。·

與點、線相比，面的份量更大，因而在視覺表現上更為強烈、實在?！?/p>

在自然形態(tài)中，面在所處的環(huán)境中均占據一定的面積，如一塊田地、一潭湖水、一葉小舟等?！?/p>

在視覺形態(tài)中，面除了有大小，還具有位置、形狀、擺放角度等特征?！?/p>

面分為幾何形和自由形兩大類。

（1）幾何形：·

比較簡潔、明快、有序，偏于理性。·

方形、圓形、三角形均屬于幾何形。（2）自由形：·

比較灑脫、隨意，偏于感性?！?/p>

很多人、物去底以后自然成為自由形，如圖4-16所示。·

由于沒有思維上的定式，自由形給人以新鮮、靈妙之感，如圖4-17所示。·

以上所說的點、線、面3種視覺元素，在圖形圖像中往往是共同起作用的。·

設計師應平衡好它們之間的關系，將點、線、面進行綜合、靈活地運用，以創(chuàng)造出豐富、充實、充滿活力的圖形圖像。4.2.2擴展造型元素·

擴展造型元素是在基本造型元素的基礎上發(fā)展的，它進一步分析了形成圖形圖像不同視覺效果的影響因素：空間、運動、質感。1．空間·

立體空間是三維的。·

通常，人們通過立體事物來感知空間的存在?！?/p>

這里所指的空間是圖形圖像通過二維平面形式所表現的虛擬空間，是一種幻覺和假象，是非實質的空間，即空間感。2．運動·

圖形圖像能產生運動的視覺效果，這種運動與動畫中的運動不同，是由靜態(tài)圖讓人感受到的運動，或稱為“動感”?！?/p>

圖形圖像的動勢能引起人們視覺系統(tǒng)的興奮并獲得心理上的滿足，因而人們對動感比較敏感，在視覺藝術領域，人們曾嘗試將時間的因素引入藝術作品中，20世紀初的未來派繪畫（代表作品是杜桑《下樓梯的裸女》）和20世紀中期考爾德的活動雕塑，均為表現運動?！?/p>

圖形圖像可以通過以下3種方式來獲得運動感。

（1）采用疊合的片斷形態(tài)（2）表現形態(tài)的運動軌跡（3）采用運動過程中的形態(tài)或不穩(wěn)定的形態(tài)3．質感·

質感也是影響圖形圖像視覺效果的因素。·

人們對不同物體的表面質地有不同的感受，如粗糙、細膩、光滑、柔軟、堅硬等?！?/p>

塑造不同的視覺機理有助于傳達不同的質感語言，有助于強化圖形圖像的設計意念。4.3圖形圖像設計的創(chuàng)意技法

4.3.1想象與聯想·

圖形圖像設計是一種創(chuàng)造新形象的過程，這一過程首先需要一個在原有感性形象的基礎上創(chuàng)造新形象的心理歷程，也就是想象?！?/p>

想象是創(chuàng)意的基石，雖然創(chuàng)造力的根本來源于敏銳的觀察力，對自然事物、現象的認知和關心，以及自身所蘊含的豐富感情，但若沒有大膽的想象，創(chuàng)造力就無從談起?！?/p>

這種創(chuàng)造的想象是一種思維上的創(chuàng)造和再造形象的過程，它與一般的想象不同，創(chuàng)造的想象能將散漫的形象融成結果，而一般的想象是凌亂而無結果的?！?/p>

創(chuàng)造的想象力廣泛應用在需要創(chuàng)造力的領域，中國古代的文學家、藝術家、詩人大都運用創(chuàng)造性的想象，為世人留下了流傳千古的藝術作品。·

科學家的研究和藝術一樣，也需要創(chuàng)造性的想象力，正如一位偉人所說：“想象力比知識更重要?！薄?/p>

聯想是從甲事物到乙事物的相關性思考，是人腦進行的一種創(chuàng)造性的思維活動，它綜合了認知能力、記憶能力、理解能力和想象能力?！?/p>

客觀世界的萬事萬物是普遍聯系的。·

具有各種不同聯系的事物反映在大腦中，形成各種不同的聯想：在空間或時間上相接近的事物形成接近聯想，有相似特點的事物形成類似聯想；有對立關系的事物形成對比聯想；有因果關系的事物形成因果聯想。·

在設計上最常用、最容易產生效果的是類似聯想。4.3.2夸張與幽默·

夸張是語言文學上的一種修辭手法?！?/p>

李自的詩句“飛流直下三千尺，疑是銀河落九天”，正是采用夸張的寫法描繪出廬山瀑布的宏大氣勢。·

在進行圖形圖像創(chuàng)意時，我們也可以借助這一文學上的表現手法，以現實生活中的事物為基礎，運用豐富的想象，抓住它們的特點加以夸大和強調，張顯它們的個性，由此創(chuàng)造奇特有趣的形象?！?/p>

夸張的手法能更鮮明地強調或揭示事物的實質，增強畫面的視覺效果。·

夸張后的形象往往帶有幽默風趣，幽默是生活和藝術中的一種喜劇因素，詼諧、有趣，而又不乏深刻的意義?！?/p>

人們在忍俊不禁的一剎那，會得到一種精神上的快感和滿足?！?/p>

我們抓住人或事物的某些特征，運用喜劇性的手法，造成一種耐人尋味、引人發(fā)笑的幽默意境，必能讓觀者為之動心。4.3.3情感的魅力·

情感是人喜、怒、哀、樂的心理表現，它總是伴隨著人們對客觀事物的體驗和感受?！?/p>

當客觀事物能夠滿足人們情感上的需要，具有很強的可感性時，人們就會為之動情?！?/p>

一首詩、一篇文章、一幅畫、一首樂曲，盡管是虛幻的、非現實的藝術作品，但它們只要與人們的心靈產生共鳴，就能喚起人們對美的感悟和理解?！?/p>

情境、物境、意境三者結合是激發(fā)創(chuàng)作者心境的源泉。·

藝術家創(chuàng)作“物”時往往采用移情的手法來表達情感。·

王國維在《人間詞話》中說：“境非獨謂景物也，喜怒哀樂亦人心中之一境界，故能寫真景物、真感情者，謂之境界?！?/p>

也就是說，將情附于景物上，情景交融，人們才能為之感動。·

那句婦孺皆知的“春蠶到死絲方盡，蠟炬成灰淚始干”正是讓春蠶和蠟燭飽含了人間的情感，才會如此打動人心。4.3.4改變視覺慣性·

人對于熟悉事物的視覺特征有固定的知覺，我們稱之為視覺的恒常性?！?/p>

當這種事物的正常結構和視覺習慣被強行改變，人們在心理上會產生強烈的刺激，由好奇而引起注意。·

利用人的這一心理特點，我們可以從改變視覺慣性出發(fā)去進行圖形圖像的創(chuàng)意，使人們本來很熟悉的事物一經改變，立刻耳目一新，形成新的視覺沖擊點?！?/p>

這種改變包括形象的大小、形狀、所在方位、色彩等。4.3.5借鑒傳統(tǒng)文化·

“傳統(tǒng)”雖然在時間上代表歷史，但在觀念上并不代表陳舊?！?/p>

傳統(tǒng)的東西讓歷史得以延續(xù)，讓文化保持差異性，從而讓人的內心產生歸屬感?！?/p>

一個人在異鄉(xiāng)聽到家鄉(xiāng)話，看到家鄉(xiāng)的地方戲曲，必定為之感動?！?/p>

一個民族也一樣，當她優(yōu)秀的傳統(tǒng)文化展示在世人面前時，必定會打動千千萬萬同胞?！?/p>

人們在進行圖形圖像的創(chuàng)意思維時，圍繞它的主題，結合傳統(tǒng)文化的內容和表現形式，創(chuàng)意構思可能會更有文化內涵，視覺效果也會更加靈活多樣。4.3.6文字的變化·

文字是記錄和傳達人類語言的書寫符號，它使人類的語言更加豐富，交流更為方便，它是人類進入文明時代的標志?！?/p>

文字可以分為表形、表意、表音3種類型，不管哪種類型，從構圖角度來看文字的結構都符合圖形的審美法則?！?/p>

古代象形文字本身就具有圖形的美，中國的書法更是對文字的藝術美推崇備至，使書法成為一門獨立的藝術?！?/p>

因此，文字的美，尤其是文字的變化之美，能啟發(fā)人們產生很多圖形圖像的創(chuàng)意?！?/p>

對于文字的變化方式，可以從文字的變形、組合、圖形化幾方面來考慮。1．文字的變形·

除了人們熟知的字體變化以外，通過設計師的巧妙構思，文字還可以變化出無窮無盡的形態(tài)。2．文字的組合·

文字的組合變化應用相當廣泛，將不同字體、大小、色彩、方向的文字有機組合在一起，成為節(jié)奏感強、靈活多變的表達方式。3．文字圖形化·

將圖形圖像的意念賦與文字，文字的部分或全部由圖形圖像來體現，文與圖進一步結合，使文字除具有它本身所傳達的信息，還包含更多的內容。4.3.7直接表達·

直接表達并不是沒有創(chuàng)意，而是將要表達的主題以最直接、最明確的方式體現出來，這就像寫作中開門見山式的點題方法?！?/p>

這種方法讓信息傳達的速度快、效率高，看起來雖然簡單，但圖形圖像的選擇需準確、恰如其分地體現主題，不能給觀者以誤導?！?/p>

直接表達的方法容易實現與觀眾在溝通上的平等、自然。4.4圖形圖像設計的表現技法

4.4.1圖像設計的表現技巧·

圖像的素材來源于現實世界的影像照片，往往有著具體、直觀、親切的視覺效果，它在造型規(guī)律上具有很強的客觀制約性，但并不是說，圖像不需要設計，只要照搬照片就行?！?/p>

影像經過設計師的再加工、再塑造，最終的設計結果可能與原始照片完全不同，或準確、細致地體現了設計創(chuàng)意，或比原來的創(chuàng)意更進一步，產生了意想不到的奇妙效果?！?/p>

也就是說，圖像設計能讓設計意念完完全全地展現出來，它和圖形設計一起，成為實現創(chuàng)意的手段?！?/p>

現在的圖像設計基本上由設計師在電腦上完成，他們大都使用AdobePhotoshop這一圖像處理軟件。·