第4章-標志導航廣告設計課件

第4章標志、導航、廣告設計

教學目標：標志、導航、廣告是網(wǎng)站的基本元素，是吸引訪客訪問站點的重要因素。本章對網(wǎng)站的標志、導航、廣告三個元素的作用以及制作方法進行闡述，便于學員從基本到深入的學習。通過這樣的學習，學員能夠掌握標志、導航、廣告這三元素的設計思路，在今后的網(wǎng)頁界面設計中有一個好的基礎。

教學要求:掌握標志設計的作用與功能以及制作方法；掌握導航的設計方法；掌握網(wǎng)絡廣告設計類型及標準。9/21/20231北大出版社第4章標志、導航、廣告設計教學目標：標志4.1標志、導航、廣告設計概述

標志LOGO是企業(yè)的形象代表，也是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)；導航則是網(wǎng)站的方向標，便于訪客能夠明確瀏覽網(wǎng)站的主要內(nèi)容；網(wǎng)絡廣告總是能在第一時間吸引訪客的眼球，從而點擊它。因此一個網(wǎng)站的標志、導航、廣告的設計好壞將直接影響訪客的注意力。本節(jié)就這三方面的作用及設計方法上進行介紹。

9/21/20232北大出版社4.1標志、導航、廣告設計概述標志L

4.1.1標志設計

1）網(wǎng)站標志的基本內(nèi)涵2）網(wǎng)站標志的作用3）網(wǎng)站標志設計的標準規(guī)范1.標志設計的基本要求2.標志的制作1）分析階段2）標志的要素挖掘3）設計標志4）合成及修正階段9/21/20233北大出版社4.1.1標志設計1）網(wǎng)站標志的基本內(nèi)涵1.4.1.2導航設計

1）按照維度功能劃分2）按照直觀的形式劃分1.導航的多樣性2.導航與網(wǎng)站風格統(tǒng)一

1）處理好主從導航的關系2）控制導航的縱深度3）協(xié)調(diào)導航和網(wǎng)站的風格4）導航的文字描述要準確9/21/20234北大出版社4.1.2導航設計1）按照維度功能劃分1.導

4.1.3網(wǎng)絡廣告

1）網(wǎng)絡廣告優(yōu)勢2）網(wǎng)絡廣告的形式1.網(wǎng)絡廣告2.廣告條

1）分析準備階段2）選擇廣告條的規(guī)格3）制作階段9/21/20235北大出版社4.1.3網(wǎng)絡廣告1）網(wǎng)絡廣告優(yōu)勢1.網(wǎng)絡廣4.1.4本章案例簡介

本章中將通過3個案例，來講解網(wǎng)頁的標志、導航、廣告設計的方法及技巧?！耙沧x書網(wǎng)站的標志LOGO”案例主要講解的是運用網(wǎng)頁標志的元素組合來制作標志的方法；“也讀書網(wǎng)站的導航”案例主要講解的是利用導航的風格選擇來制作導航的方法；“公司網(wǎng)站的橫幅及廣告條”運用廣告條的各要素組合來制作橫幅及廣告條的方法。9/21/20236北大出版社4.1.4本章案例簡介8/1/20236北大出版社4.2實訓九:設計網(wǎng)站標志-“也讀書”網(wǎng)站的標志LOGO

案例說明：本節(jié)為“也讀書”網(wǎng)站的標志設計案例，該標志LOGO采用形象手法。該標志的最大特點就是通過中間的人物形象代表著知識，而外圍的三個人物形成手牽手的意境，與網(wǎng)站的主旨（有書的世界，有你。有書的故事，有世界）吻合。顏色采用綠色，給人一種清新，自然的感覺。效果圖如下:9/21/20237北大出版社4.2實訓九:設計網(wǎng)站標志-“也讀書”網(wǎng)站的標志LOGO提示：導航效果圖的制作工具可以用corelDRAW、firework等圖形圖像處理軟件。通常使用corelDRAW來設計網(wǎng)站的標志效果圖，而網(wǎng)站LOGO的排版一般采用firework軟件。

知識拓展:

（1）表象性的標志（2）象征性的標志（3）寓意性的標志（4）標識性的標志（5）卡通化的標志（6）幾何形構成的標志9/21/20238北大出版社提示：導航效果圖的制作工具可以用corelDRAW本節(jié)知識點:

網(wǎng)站標志是用于傳遞網(wǎng)站的定位和經(jīng)營理念，也是為了便于人們識別。一個具有視覺沖擊力標志設計，會直接影響到訪問者對網(wǎng)站的判斷。9/21/20239北大出版社本節(jié)知識點:網(wǎng)站標志是用于傳遞網(wǎng)站的定位和經(jīng)營理念，4.3實訓十:設計網(wǎng)站導航-“也讀書”網(wǎng)站的導航設計

案例說明：本節(jié)為“也讀書”網(wǎng)站的導航設計案例。運用橫向導航結構和FLASH動畫設計“也讀書”網(wǎng)站的導航效果圖，內(nèi)容包含網(wǎng)站的主導航、次導航等部分，要求動畫流暢，結構清晰，欄目鮮明。

效果圖如下:9/21/202310北大出版社4.3實訓十:設計網(wǎng)站導航-“也讀書”網(wǎng)站的導航設計案知識拓展:提示：導航效果圖的制作工具可以用firework、photoshop等圖形圖像處理軟件以及flash動畫處理軟件。通常使用firework、photoshop來設計導航平面圖，使用flash給導航加上動畫效果。（1）最常用的導航菜單（2）垂直的導航菜單（3）“圖標+文字說明”的導航結構（4）手工繪畫風格的導航（5）無規(guī)則的導航結構9/21/202311北大出版社知識拓展:提示：導航效果圖的制作工具可以用firework、本節(jié)知識點:導航是網(wǎng)頁設計中的重要元素。一個良好的網(wǎng)頁導航系統(tǒng)不僅能夠把導航設計的漂亮，同時更重要的是要能夠引導訪客瀏覽網(wǎng)站中的更多頁面，讓訪客能夠輕松找到他們想要觀看的內(nèi)容。

9/21/202312北大出版社本節(jié)知識點:導航是網(wǎng)頁設計中的重要元素。一個4.4實訓十一:設計網(wǎng)站橫幅(BANNER)–設計公司網(wǎng)站的橫幅和廣告條

案例說明：本節(jié)為Mortgage&Loans公司網(wǎng)站的橫幅和廣告條設計案例，包括一個靜態(tài)的網(wǎng)站橫幅和一個FLASH的動畫廣告條。在設計中充分運用文字和圖像的合理結合，加上動畫效果的呈現(xiàn)，給人形象直觀的感受。效果圖如下:

9/21/202313北大出版社4.4實訓十一:設計網(wǎng)站橫幅(BANNER)–設計公司網(wǎng)知識拓展:提示：網(wǎng)站橫幅（BANNER）的制作工具可以用firework、photoshop等圖形圖像處理軟件以及flash動畫處理軟件。通常使用firework、photoshop來設計網(wǎng)站的靜態(tài)橫幅，使用flash動畫軟件制作廣告條。

（1）文字鏈接廣告（2）按鈕廣告（3）懸浮廣告（4）全屏廣告（5）通欄廣告（6）網(wǎng)絡流媒體廣告9/21/202314北大出版社知識拓展:提示：網(wǎng)站橫幅（BANNER）的制作工具可以用fi本節(jié)知識點:在設計廣告條時要了解網(wǎng)絡廣告的優(yōu)勢，以及設計的標準。網(wǎng)絡廣告的目標就是通過信息展示使消費者產(chǎn)生對產(chǎn)品的認識、情感、態(tài)度和行為的變化。在設計策略上，首先廣告標題要明確、凸顯，廣告標題是一句吸引消費者的帶有概括性、觀念性和主導性的語言。其次，發(fā)展網(wǎng)絡廣告的互動性，這類的廣告信息能夠提升訪問者對廣告本身的興趣。設計時，為了突出網(wǎng)絡廣告，可以使用與登載廣告的網(wǎng)頁完全不同的設計方法和風格?？梢允褂门c網(wǎng)頁相對的顏色或風格，把廣告條的重點放置在該網(wǎng)頁所集中體現(xiàn)的內(nèi)容相對的位置上，或者使用與網(wǎng)頁文字不同的字體來制作網(wǎng)絡廣告。9/21/202315北大出版社本節(jié)知識點:在設計廣告條時要了解網(wǎng)絡廣告的4.5本章小結本章主要對網(wǎng)站的主要幾個元素(標志、導航、廣告)的介紹，包括標志設計要求及制作流程，導航的多樣性及導航的風格，網(wǎng)絡廣告的類型及廣告條的制作。標志設計主要介紹網(wǎng)站標志的基本內(nèi)涵、作用、標準規(guī)范和網(wǎng)絡廣告條的制作步驟，導航設計主要介紹導航的樣式、導航的風格特點，廣告設計主要介紹比較流行的10種網(wǎng)絡廣告類型、廣告條的制作步驟。舉了三個典型的案例。通過這些介紹，讀者只要多加練習，然后結合實際融會貫通，設計出高水準的網(wǎng)站標志、導航及廣告。9/21/202316北大出版社4.5本章小結本章主要對網(wǎng)站的主要幾4.6習題1.選擇：（1）下面哪個是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)（）A.文字B.標志C.導航D.廣告（2）下面哪個不是網(wǎng)站常見的標志大小規(guī)格（）A.88*31B.120*60C.120*90D.1024*768（3）一個站點里頭有太多的信息，能夠指引訪客到達網(wǎng)站各個角落的網(wǎng)頁元素是（）A.標志B.廣告C.導航D.以上都不是（4）下列哪個是網(wǎng)站導航設計有關的因素（）A.文字B.圖標C.色彩D.以上都是9/21/202317北大出版社4.6習題8/1/202317北大出版社（5）導航的哪個因素有利于訪客提前對所要訪問的內(nèi)容有一個大概的了解（）A.可愛圖標B.文字描述C.鮮艷色彩D.漸變導航（6）下列哪個項目不屬于導航按照直觀形式劃分（）A.橫排導航B.多維導航C.圖片式導航D.隱藏式導航（7）下列哪種廣告是出現(xiàn)在網(wǎng)頁頁面兩側，顯得特別突出，廣告幅度大（）A.浮動廣告B.按鈕廣告C.對聯(lián)廣告D.彈出窗口廣告（8）下列哪一個不是網(wǎng)絡廣告標題的語言特征（）A.隨意性B.主導性C.觀念性D.概括性9/21/202318北大出版社（5）導航的哪個因素有利于訪客提前對所要訪問的內(nèi)容8/1/22.填空（1）標志的設計創(chuàng)意主要來自網(wǎng)站的______和______。（2）_____對標志的認知直接影響標志設計的尺度。（3）按照維度劃分，導航可以分為功能可以分為______、______和______。（4）導航是______和______的優(yōu)勢組合。（5）網(wǎng)站，(100-1)%的內(nèi)容是______。（6）_____是一種最簡單直接的網(wǎng)上廣告，只需將超鏈接加入相關文字便可。（7）制作廣告條的步驟有______、______和______。（8）網(wǎng)絡廣告的形式多樣,包括______、______和______。9/21/202319北大出版社2.填空8/1/202319北大出版社3.實踐題（1）設計一個個人網(wǎng)站的標志。（2）幾何形構成的標志主要是用點、線、面、方、圓、多邊形或三維空間等幾何圖形進行編排設計。運用幾何圖形構造原理設計一個跟影視