網(wǎng)頁(yè)界面設(shè)計(jì)與制作第1章-網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)理論課件

第1章網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)理論第1章

課堂學(xué)習(xí)目標(biāo)：

熟悉界面與界面設(shè)計(jì)的概念

了解網(wǎng)頁(yè)界面設(shè)計(jì)發(fā)展的概況

掌握網(wǎng)頁(yè)界面的構(gòu)成要素與特點(diǎn)

掌握網(wǎng)頁(yè)界面設(shè)計(jì)的基本原則

掌握網(wǎng)頁(yè)界面的主要形式課堂學(xué)習(xí)目標(biāo)：網(wǎng)頁(yè)界面設(shè)計(jì)在信息傳播科技中的應(yīng)用1.4網(wǎng)頁(yè)界面設(shè)計(jì)概述1.1網(wǎng)頁(yè)界面的構(gòu)成要素及特征1.2網(wǎng)頁(yè)界面設(shè)計(jì)的特征1.3網(wǎng)頁(yè)界面設(shè)計(jì)在信息傳播科技中的應(yīng)用1.4網(wǎng)頁(yè)界面設(shè)計(jì)概述1.

1.1網(wǎng)頁(yè)界面設(shè)計(jì)概述

1.1.1界面與界面設(shè)計(jì)·

界面是一種由色彩、文字、圖像、符號(hào)等視覺(jué)元素以及多媒體元素為主構(gòu)成的，傳達(dá)特定信息的，以方便人機(jī)交流為目的的中間媒體。1.1網(wǎng)頁(yè)界面設(shè)計(jì)概述1.1.1界面·

界面設(shè)計(jì)作為設(shè)計(jì)學(xué)科的一個(gè)分支，具有很高的實(shí)用價(jià)值?！?/p>

它以科學(xué)技術(shù)和藝術(shù)的結(jié)合為基礎(chǔ)，以外觀表現(xiàn)形式為主要手段，謀求產(chǎn)品的功能美與形式美，并體現(xiàn)產(chǎn)品的時(shí)代感，以?xún)?yōu)良的設(shè)計(jì)努力滿(mǎn)足使用者的心理需求。·界面設(shè)計(jì)作為設(shè)計(jì)學(xué)科的一個(gè)分支，具有很高的實(shí)用價(jià)值·

從定義中可以看出，界面是協(xié)調(diào)人機(jī)關(guān)系的重要環(huán)節(jié)?！?/p>

它的應(yīng)用范圍十分廣泛，在日常工作和生活中可謂隨處可見(jiàn)?！亩x中可以看出，界面是協(xié)調(diào)人機(jī)關(guān)系的重要環(huán)節(jié)?！?/p>

比如家用電器的操作控制界面、機(jī)械儀表的顯示界面、計(jì)算機(jī)程序的使用界面等，如圖1-1所示?！?/p>

雖然應(yīng)用領(lǐng)域很廣，但它們都具有基本相同的特征?！け热缂矣秒娖鞯牟僮骺刂平缑?、機(jī)械儀表的顯示界面、計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)與制作第1章-網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)理論課件·

網(wǎng)頁(yè)界面設(shè)計(jì)“websiteInterface”只是UI設(shè)計(jì)中的一個(gè)分支，通俗地講，就是當(dāng)用戶(hù)訪問(wèn)網(wǎng)站時(shí)所看見(jiàn)的畫(huà)面?！?/p>

網(wǎng)頁(yè)界面由網(wǎng)頁(yè)瀏覽器、網(wǎng)頁(yè)導(dǎo)航要素、網(wǎng)頁(yè)內(nèi)容三方面構(gòu)成，網(wǎng)頁(yè)界面設(shè)計(jì)主要是除瀏覽器以外，其他各個(gè)部分的設(shè)計(jì)。·網(wǎng)頁(yè)界面設(shè)計(jì)“websiteInterface”

1.1.2界面設(shè)計(jì)在我國(guó)的現(xiàn)狀

1.1.3網(wǎng)頁(yè)界面設(shè)計(jì)的發(fā)展1.1.2界面設(shè)計(jì)在我國(guó)的現(xiàn)狀1.2網(wǎng)頁(yè)界面的構(gòu)成要素及特征

1.2.1網(wǎng)頁(yè)界面的構(gòu)成要素

1．文字·

文字是網(wǎng)頁(yè)界面的主體，是用以傳達(dá)信息的主要元素。1.2網(wǎng)頁(yè)界面的構(gòu)成要素及特征1.2.1·

雖然利用網(wǎng)絡(luò)多媒體的影音效果也可以達(dá)到同樣的目的，但網(wǎng)頁(yè)中文字的優(yōu)勢(shì)很難被取代。·

這首先是由于以文字傳達(dá)信息符合常人的接受習(xí)慣，其次因?yàn)槲淖炙嫉拇鎯?chǔ)空間極?。?個(gè)漢字只占用2個(gè)字節(jié)），利于瀏覽及下載?！るm然利用網(wǎng)絡(luò)多媒體的影音效果也可以達(dá)到同樣的目的，2．圖形圖像·

圖形圖像在網(wǎng)頁(yè)界面中有著十分重要的作用。·

在網(wǎng)上瀏覽時(shí)，瀏覽者常常會(huì)因?yàn)榭吹揭环忠俗⒛康膱D形而引發(fā)興趣去了解相關(guān)內(nèi)容。2．圖形圖像·圖形圖像在網(wǎng)頁(yè)界面中有著十分重要·

在很多網(wǎng)頁(yè)中，圖形占據(jù)著整個(gè)頁(yè)面的重要位置，有的甚至占據(jù)了整個(gè)頁(yè)面?！?/p>

在視覺(jué)順序上，圖形往往能首先吸引人們的注意力，這是由于圖形給人的視覺(jué)印象要比文字強(qiáng)烈得多?！ぴ诤芏嗑W(wǎng)頁(yè)中，圖形占據(jù)著整個(gè)頁(yè)面的重要位置，有的甚·

幾乎所有的網(wǎng)頁(yè)都用到了圖形，善用圖形，可以生動(dòng)、形象、直觀地表達(dá)網(wǎng)頁(yè)的主題，增強(qiáng)網(wǎng)頁(yè)的宣傳力、號(hào)召力和感染力，吸引瀏覽者的注意，引起瀏覽者的興趣?！缀跛械木W(wǎng)頁(yè)都用到了圖形，善用圖形，可以生動(dòng)、形3．頁(yè)面版式·

頁(yè)面版式也稱(chēng)頁(yè)面的構(gòu)圖?！?/p>

版式設(shè)計(jì)是網(wǎng)頁(yè)界面設(shè)計(jì)的重要組成部分。3．頁(yè)面版式·頁(yè)面版式也稱(chēng)頁(yè)面的構(gòu)圖?！?/p>

它是指將文字、圖形等視覺(jué)元素進(jìn)行組合配置，使頁(yè)面整體的視覺(jué)效果美觀而易讀，便于閱讀理解，實(shí)現(xiàn)信息傳達(dá)的最佳效果?！に侵笇⑽淖?、圖形等視覺(jué)元素進(jìn)行組合配置，使頁(yè)面整·

許多設(shè)計(jì)成功的網(wǎng)頁(yè)能夠吸引瀏覽者，往往并非僅僅依賴(lài)于幾張引人注目的圖片或噱頭式的標(biāo)題，而是靠成功的版式設(shè)計(jì)?！ぴS多設(shè)計(jì)成功的網(wǎng)頁(yè)能夠吸引瀏覽者，往往并非僅僅依賴(lài)·

好的版式首先能以清晰的視覺(jué)導(dǎo)向使瀏覽者對(duì)網(wǎng)頁(yè)內(nèi)容一目了然，其次又以巧妙的圖文配置使瀏覽者獲得悅目的視覺(jué)效果。·好的版式首先能以清晰的視覺(jué)導(dǎo)向使瀏覽者對(duì)網(wǎng)頁(yè)內(nèi)容一4．色彩

·

色彩在網(wǎng)頁(yè)界面設(shè)計(jì)中起著重要作用。4．色彩

·色彩在網(wǎng)頁(yè)界面設(shè)計(jì)中起著重要作用?！?/p>

首先，彩色網(wǎng)頁(yè)較單色網(wǎng)頁(yè)更具吸引力；其次，彩色網(wǎng)頁(yè)可通過(guò)色彩傳達(dá)信息，是增強(qiáng)可理解性和易識(shí)別性的有效手段；第三，色彩本身具有象征作用，通過(guò)帶有主題傾向的色彩語(yǔ)言，可以更加有效地與瀏覽者進(jìn)行情感溝通；第四，彩色網(wǎng)頁(yè)具有悅目、裝飾性強(qiáng)的特點(diǎn)，使瀏覽者愿花更長(zhǎng)的時(shí)間注目于此并了解相關(guān)信息?！な紫龋噬W(wǎng)頁(yè)較單色網(wǎng)頁(yè)更具吸引力；其次，彩色網(wǎng)頁(yè)5．多媒體·

將多媒體元素引入網(wǎng)頁(yè)界面，可以在很大程度上增強(qiáng)對(duì)瀏覽者的吸引力?！?/p>

從網(wǎng)頁(yè)界面的發(fā)展來(lái)看，由純文字界面到圖文并重，再到引入新的多媒體元素，這是一個(gè)必然的過(guò)程。5．多媒體·將多媒體元素引入網(wǎng)頁(yè)界面，可以在很·

瀏覽者希望在網(wǎng)上看到更具創(chuàng)造性、更具吸引力和更具情趣的網(wǎng)頁(yè)?！?/p>

多媒體元素正是實(shí)現(xiàn)這一目標(biāo)的重要手段。·

網(wǎng)頁(yè)界面中所涉及到的多媒體元素主要是音頻、視頻和動(dòng)畫(huà)等?！g覽者希望在網(wǎng)上看到更具創(chuàng)造性、更具吸引力和更具情6．技術(shù)·

了解了網(wǎng)頁(yè)界面的主要構(gòu)成元素之后，在進(jìn)行網(wǎng)頁(yè)界面設(shè)計(jì)時(shí)還應(yīng)注意到一些技術(shù)性元素?！?/p>

嚴(yán)格說(shuō)來(lái)，這些元素并非網(wǎng)頁(yè)界面的構(gòu)成元素，但它們決定了瀏覽者的實(shí)際觀看效果。6．技術(shù)·了解了網(wǎng)頁(yè)界面的主要構(gòu)成元素之后，在1.2.2網(wǎng)頁(yè)界面的特性

1．主體的經(jīng)濟(jì)性

2．手段的先進(jìn)性

3．對(duì)象的廣泛性

4．內(nèi)容的豐富性

5．形式的多樣性

6．操作的交互性1.2.2網(wǎng)頁(yè)界面的特性1．主體的經(jīng)濟(jì)性1.3網(wǎng)頁(yè)界面設(shè)計(jì)的特征

1.3.1設(shè)計(jì)以功能為主·

網(wǎng)頁(yè)界面設(shè)計(jì)的功能性主要體現(xiàn)在以下兩個(gè)方面：

（1）信息傳遞功能（2）審美功能1.3網(wǎng)頁(yè)界面設(shè)計(jì)的特征1.3.11.3.2形象明確，易于接受·

人通過(guò)視覺(jué)、聽(tīng)覺(jué)等信息接收渠道來(lái)觸發(fā)心理活動(dòng)?！?/p>

在網(wǎng)頁(yè)界面中，主要是對(duì)視覺(jué)形象產(chǎn)生視覺(jué)反應(yīng)，進(jìn)而發(fā)生心理活動(dòng)，而逐步完成興趣一聯(lián)想一認(rèn)知這一信息接受過(guò)程。1.3.2形象明確，易于接受·人通過(guò)視覺(jué)、聽(tīng)覺(jué)等·

網(wǎng)頁(yè)界面設(shè)計(jì)正是依照這一信息接受的規(guī)律，借助界面中各種視覺(jué)形象，引導(dǎo)瀏覽者的興趣向一定的方向集中而產(chǎn)生聯(lián)想?！?/p>

例如，人們會(huì)從長(zhǎng)城、故宮等形象聯(lián)想到中華民族傳統(tǒng)文化的博大精深，會(huì)從林立的高樓大廈、便利的交通設(shè)施等形象聯(lián)想到日益發(fā)展的現(xiàn)代化城市建設(shè)?！ぞW(wǎng)頁(yè)界面設(shè)計(jì)正是依照這一信息接受的規(guī)律，借助界面中·

種種形象都會(huì)引發(fā)人們的聯(lián)想，喚起人們對(duì)生活的體驗(yàn)、追憶以及對(duì)原有信息的重新組織、回憶，從而有利于對(duì)新信息的接受。·

因此，對(duì)網(wǎng)頁(yè)界面中視覺(jué)形象的構(gòu)思要以注意明確、易于接受的原則來(lái)設(shè)計(jì)?！しN種形象都會(huì)引發(fā)人們的聯(lián)想，喚起人們對(duì)生活的體驗(yàn)、1.3.3形式簡(jiǎn)潔·

形式簡(jiǎn)潔是網(wǎng)頁(yè)界面應(yīng)具有的外在特征。·

這主要基于以下兩個(gè)方面的要求。1.3.3形式簡(jiǎn)潔·形式簡(jiǎn)潔是網(wǎng)頁(yè)界面應(yīng)具有的外在

（1）加強(qiáng)網(wǎng)頁(yè)界面的視覺(jué)沖擊力，迅速傳遞信息的要求（2）形式美的要求（1）加強(qiáng)網(wǎng)頁(yè)界面的視覺(jué)沖擊力，迅速傳遞信息的要求1.4網(wǎng)頁(yè)界面設(shè)計(jì)在信息傳播科技中的應(yīng)用

1.4.1網(wǎng)頁(yè)界面設(shè)計(jì)與信息傳播·

人類(lèi)藝術(shù)形態(tài)與信息傳播技術(shù)之間存在著干絲萬(wàn)縷的關(guān)系?！?/p>

在歷史上，曾經(jīng)有過(guò)以實(shí)物傳播、語(yǔ)言傳播、文字傳播為主導(dǎo)的時(shí)代。1.4網(wǎng)頁(yè)界面設(shè)計(jì)在信息傳播科技中的應(yīng)用·

目前，電子傳播特別是網(wǎng)絡(luò)傳播后來(lái)居上，日甚一日地改變著人們的生活方式和生產(chǎn)方式?！?/p>

與此相適應(yīng)，人類(lèi)藝術(shù)也正在轉(zhuǎn)變自身的形態(tài)，網(wǎng)頁(yè)界面設(shè)計(jì)成為信息傳播與藝術(shù)形態(tài)之間關(guān)系研究的重要環(huán)節(jié)與課題。·目前，電子傳播特別是網(wǎng)絡(luò)傳播后來(lái)居上，日甚一日地改·

我們?cè)谶@里堅(jiān)持強(qiáng)調(diào)信息傳播是網(wǎng)頁(yè)界面設(shè)計(jì)的首要考慮因素，并不是出于主觀的臆想或標(biāo)新立異的追求，而是出于對(duì)當(dāng)今高科技和信息社會(huì)發(fā)展?fàn)顩r的正視以及對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)現(xiàn)狀及未來(lái)趨勢(shì)的正視?！の覀?cè)谶@里堅(jiān)持強(qiáng)調(diào)信息傳播是網(wǎng)頁(yè)界面設(shè)計(jì)的首要考慮·

事實(shí)上，網(wǎng)頁(yè)界面設(shè)計(jì)正在日益緊密結(jié)合日新月異的社會(huì)生活態(tài)勢(shì)，使自已本質(zhì)上具有的信息傳播功能在越來(lái)越廣的范圍中有效地發(fā)揮出來(lái)，而這種功能的重要性也越來(lái)越被人們所重視，這主要體現(xiàn)在以下幾個(gè)方面?！な聦?shí)上，網(wǎng)頁(yè)界面設(shè)計(jì)正在日益緊密結(jié)合日新月異的社會(huì)1.4.2網(wǎng)頁(yè)界面的主要形式

1．信息查詢(xún)類(lèi)·

從網(wǎng)頁(yè)界面出現(xiàn)的最初狀態(tài)直到20世紀(jì)90年代中期，信息查詢(xún)一直是互聯(lián)網(wǎng)上最重要的組成部分。1.4.2網(wǎng)頁(yè)界面的主要形式1．信息查·

即使是在現(xiàn)在網(wǎng)絡(luò)內(nèi)容極大豐富的時(shí)期，信息查詢(xún)依然是網(wǎng)絡(luò)中必不可少的部分?！?/p>

一般而言，以信息查詢(xún)?yōu)橹饕獌?nèi)容的網(wǎng)頁(yè)界面更注重從技術(shù)上方便瀏覽者的信息檢索功能的實(shí)現(xiàn)，最具代表性的就是各種搜索引擎，如雅虎（Yahoo）（如圖1-25所示）、百度（Baidu）、搜狐（Sohu）等?！ぜ词故窃诂F(xiàn)在網(wǎng)絡(luò)內(nèi)容極大豐富的時(shí)期，信息查詢(xún)依然是·

這種類(lèi)型的網(wǎng)頁(yè)界面設(shè)計(jì)以實(shí)用功能為主，注重視覺(jué)元素的均衡排布，較少裝飾性的元素，通常以簡(jiǎn)潔、清晰為其主要特點(diǎn)?！み@種類(lèi)型的網(wǎng)頁(yè)界面設(shè)計(jì)以實(shí)用功能為主，注重視覺(jué)元素2．大眾媒體類(lèi)·

互聯(lián)網(wǎng)作為信息傳播的一種手段，具有許多傳統(tǒng)媒體所不具備的優(yōu)勢(shì)，這使其迅速成為一種新興的大眾媒體，并躋身于主流媒體的行列。2．大眾媒體類(lèi)·互聯(lián)網(wǎng)作為信息傳播的一種手段，·

從目前網(wǎng)絡(luò)普及的程度來(lái)看，雖然電視、報(bào)刊仍是一般大眾收看新聞信息的主要來(lái)源，但遇到突發(fā)性新聞事件或熱點(diǎn)事件時(shí)，網(wǎng)絡(luò)則成為信息傳播的重要渠道?！?/p>

并且隨著網(wǎng)絡(luò)管理的日益規(guī)范化，網(wǎng)絡(luò)信息的可信賴(lài)程度也已被公眾承認(rèn)和接受。·從目前網(wǎng)絡(luò)普及的程度來(lái)看，雖然電視、報(bào)刊仍是一般大·

以信息傳媒形式出現(xiàn)的網(wǎng)站越來(lái)越多地引起公眾的關(guān)注，最具代表性的就屬各大門(mén)戶(hù)網(wǎng)站（ICP）的新聞版塊，如圖1-26所示?！?/p>

還有就是傳統(tǒng)媒體在網(wǎng)絡(luò)空間的拓展——報(bào)刊雜志的電子版，如圖1-27所示。·以信息傳媒形式出現(xiàn)的網(wǎng)站越來(lái)越多地引起公眾的關(guān)注，·

這種類(lèi)型的網(wǎng)頁(yè)界面設(shè)計(jì)各具特色，有的簡(jiǎn)潔明快，有的注重視覺(jué)形式的表現(xiàn)，不一而足，根據(jù)各自?xún)?nèi)容而定?！み@種類(lèi)型的網(wǎng)頁(yè)界面設(shè)計(jì)各具特色，有的簡(jiǎn)潔明快，有的3．宣傳窗口類(lèi)·

由于網(wǎng)絡(luò)信息傳播具有受眾廣、時(shí)效性強(qiáng)、投入少等優(yōu)勢(shì)，網(wǎng)絡(luò)成為商業(yè)企業(yè)青睞的宣傳自身的窗口，網(wǎng)絡(luò)廣告也日益為人們所接受，并逐步成為廣告發(fā)布的重要方式?！?/p>

隨著網(wǎng)絡(luò)的普及，個(gè)人網(wǎng)站也成為這個(gè)巨大舞臺(tái)上的重要組成部分。3．宣傳窗口類(lèi)·由于網(wǎng)絡(luò)信息傳播具有受眾廣、時(shí)效·

宣傳窗口類(lèi)型的網(wǎng)頁(yè)界面具有內(nèi)容專(zhuān)一，形式多樣的特點(diǎn)?！?/p>

尤其是企業(yè)的網(wǎng)頁(yè)界面，往往還具有企業(yè)形象傳達(dá)的作用，可以看作CI設(shè)計(jì)的延伸，因此格外受到重視，如圖1-28、圖1-29所示網(wǎng)頁(yè)，從企業(yè)特有形象入手，設(shè)計(jì)或時(shí)尚新穎，或嚴(yán)謹(jǐn)簡(jiǎn)約，充分表現(xiàn)企業(yè)文化特征?！ば麄鞔翱陬?lèi)型的網(wǎng)頁(yè)界面具有內(nèi)容專(zhuān)一，形式多樣的特點(diǎn)4．電子商務(wù)類(lèi)·

電子商務(wù)是近年來(lái)發(fā)展極其迅速的一種以網(wǎng)絡(luò)為媒介的商業(yè)服務(wù)。·

電子商務(wù)的出現(xiàn)使單向的信息傳送變成了雙向的交互服務(wù)，從真正意義上實(shí)現(xiàn)了網(wǎng)絡(luò)的交互性。4．電子商務(wù)類(lèi)·電子商務(wù)是近年來(lái)發(fā)展極其迅速的一·

對(duì)于這種類(lèi)型的網(wǎng)頁(yè)界面而言，使瀏覽者在訪問(wèn)時(shí)進(jìn)行愉快的商品交易是設(shè)計(jì)的重點(diǎn)，要求既要具備人們樂(lè)于接受的交互性，又要有吸引瀏覽者注意力的頁(yè)面形式，如圖1-30所示。·對(duì)于這種類(lèi)型的網(wǎng)頁(yè)界面而言，使瀏覽者在訪問(wèn)時(shí)進(jìn)行愉·

提示：所謂電子商務(wù)是利用計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)和遠(yuǎn)程通信技術(shù)，實(shí)現(xiàn)整個(gè)商務(wù)（買(mǎi)賣(mài)）過(guò)程中的電子化、數(shù)字化和網(wǎng)絡(luò)化?！?/p>

人們不再是面對(duì)面的、看著實(shí)實(shí)在在的貨物，靠紙介質(zhì)單據(jù)（包括現(xiàn)金）進(jìn)行買(mǎi)賣(mài)交易?！ぬ崾荆核^電子商務(wù)是利用計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)和遠(yuǎn)程·

而是通過(guò)網(wǎng)絡(luò)，通過(guò)網(wǎng)上琳瑯滿(mǎn)目的商品信息、完善的物流配送系統(tǒng)和方便安全的資金結(jié)算系統(tǒng)進(jìn)行交易（買(mǎi)賣(mài)）。·而是通過(guò)網(wǎng)絡(luò)，通過(guò)網(wǎng)上琳瑯滿(mǎn)目的商品信息、完善的物5．交流平臺(tái)類(lèi)

·

網(wǎng)絡(luò)吸引人的一個(gè)重要特點(diǎn)就是每個(gè)人都有自己的發(fā)言權(quán)，可以就任何話題發(fā)表自己的意見(jiàn)?！?/p>

各種論