電子教案中文版標準教材

第一章第1章網頁設計概述第一章

網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎，依照設計目的和要求，自覺地對網頁的構成元素進行藝術規劃的創造性思維活動，創造出藝術化、人性化的瀏覽界面。1.1網頁界面構成

網頁是由瀏覽器打開的文檔，因此可以將其看作瀏覽器的一個組成部分。網頁的界面只包含內置元素，而不包含窗體元素。以內容來劃分，一般的網頁界面包括網站Logo、導航欄、Banner、內容欄和版尾五部分。1.1.1網站LOGO

網站Logo是整個網站對外唯一的標識和標志，是網站商標和品牌的圖形表現。第一章

Logo的內容通常包括特定的圖形和文本，其中，圖形往往與網站的具體內容或開發網站的企業文化緊密結合，以體現網站的特色；而文本主要起到加深用戶印象的作用，也可以體現網站的價值觀、宣傳口號。LOGO的設計靈活性較大，每個設計師都會有自己的獨特構思。通常可以分為以下幾類：1.以字符為主：

這類LOGO比較常見，其特點是簡潔大方、識別性較高。2.字符與圖形結合：

字符與圖形二者結合會產生一種強烈的現代感和視覺沖擊力，容易給瀏覽者留下深刻的記憶。3.以圖形為主：

以圖形為主的LOGO大多以卡通形象作為標志，易于識別，印象深刻，使用此類標志的網站一般在內容上會與LOGO的卡通形象相吻合。第一章知識鏈接：為了便于Internet上傳播信息，一個統一的Logo國際標準是必要的。實際上已經有了這樣的一整套標準。其中關于網站的Logo，目前有三種規格：①88*31這是互聯網上最普遍的Logo規格.②120*60這種規格用于一般大小的Logo。③120*90這種規格用于大型Logo。當然200*70這種規格Logo也已經出現。第一章

1.1.2導航欄

導航欄是索引網站內容、幫助用戶快速訪問所需內容的輔助工具。導航欄內容包含的是實現網站功能的按鈕或連接，其項目的數量不宜過多。設計合理的導航欄可以有效地提高用戶訪問網站的效率。1.響應式導航欄:

響應式設計是當前網頁設計的流行趨勢，如圖所示響應式導航欄。其網站設計的理念是：頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。頁面能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備.即頁面應該有能力去自動響應用戶的設備環境。因此導航欄菜單在設計之前，要謀劃好導航欄菜單在手機、平板、桌面上的布局。

在導航欄的設計中，還可以采用Flash或jQuery腳本等實現動畫元素吸引用戶訪問。2.全屏式導航欄:全屏式網站頁面的設計，指的就是頁面內容幾乎占據了整個顯示器屏幕，這樣的風格樣式也被很多人接受和使用，如圖所示全屏式導航欄。全屏式網站頁面的設計，多半以圖片為主，而且留白也比較多、比較大，在感官上能夠給人很大的視覺沖擊力。第一章

3.垂直式導航欄:

打破常規設計的手法有很多，其中之一就是將導航菜單設計成縱向的。垂直的導航設計并不是簡單的將橫向變為縱向，而是需要結合內容重新思考整個網站的布局和空間的使用。這種排版最流行的有兩種，一種是隱藏式導航菜單，另外一種使用的是固定的側邊欄來承載菜單。它在色彩運用上一般使用與網頁色調相柔和、協調的顏色，既能起到很好的交互作用，又不喧賓奪主。第二種菜單的有趣之處在于，它為網站設計提供了一種新的視覺設計可能性。同時，這種導航在小屏幕上可以做成懸停隱藏式菜單欄（圖懸停隱藏式菜單欄），需要的時候點擊顯示，它在色彩的運用上沒有太多的限制，使用鮮明或柔和的色彩均可，但在設計時注意導航欄的色彩設計必須與網頁整體色彩相協調。第一章1.1.3Banner

Banner，中文意思為旗幟或網幅，是一種可以由文本、圖像和動畫相結合而成的網頁欄目。Banner的主要作用是顯示網站的各種廣告，包括網站自身產品的廣告和與其他企業合作放置的廣告，如圖所示。

在網頁中預留標準Banner大小的位置，可以降低網站廣告用戶的Banner設計成本，使Banner廣告位的出租更加便捷。

國際廣告局的“標準與管理委員會”聯合廣告支持信息和娛樂聯合會等國際組織，推出了一系列網絡廣告宣傳物的標準尺寸，被稱作“IAC/CASIE”標準，共包括7種標準的Banner尺寸。

在眾多商業網站中，通常都會遵循以上標準定義Banner的尺寸，方便用戶設計統一的Banner，應用在所有網站上。然而，在一些不依靠廣告位出租贏利的網站中，Banner的大小則比較自由。網頁設計者完全可以根據網站內容以及頁面美觀的需要隨時調整Banner的大小。第一章

1.1.4內容欄

內容欄是網頁內容的主體，通常可以由一個或多個子欄組成，包含網頁提供的所有信息和服務項目。內容欄的內容既可以是圖像，也可以是文本，或圖像和文本結合的各種內容，如圖1-3所示。在設計內容欄時，用戶可以先獨立地設計多個子欄，然后再將這些子欄拼接在一起，形成整體的效果。同時，還可以對子欄進行優化排列，提高用戶體驗。1.1.5版尾

正文頁面設計完成后也不要忘記頁面底下的頁腳設計，設計者應從整體的角度考慮頁面的全面性，避免頭重腳輕。設計者往往容易忽視頁腳，但頁腳放置的基本都是聯系信息、鏈接網站、版權聲明等重要內容，所以簡潔、明了又富有創意性是整個頁面完整、美觀的重要因素。第一章設計時應注意以下幾點：1.有良好的視覺層次：

訪客閱讀文章時需要的不是一屏到底，而是段落分明的層次感，先是標題，然后正文、頁腳、諸如此類，因此建立一個優秀的列表樣式能幫用戶提高聚焦性和可讀性,如圖所示。2.合理留白：

留白在頁腳設計中同樣重要，因為涉及到布局，留白能分割出不同的區塊，起到繪制不同區域的效果。當然，留白不是僅存白色空間，只要是無內容填充的部分都可以稱為留白。如圖所示。第一章3.把頁腳和內容分離開：

大多數頁腳都是以深色背景為主的，有些是直接用插畫做背景。無論哪個，要確定的是頁腳看起來是和內容分離開的，這樣才不會混亂，保證了視覺上的層次性。如圖1-6所示。知識鏈接：

在網頁界面構成中還有一個不可忽視的元素就是“按鈕”。當前在頁面里要強調的鏈接自然會以按鈕的形式表現，尤其所謂重量級按鈕是促成觀者完成頁面功能的一個很重要的部分，所以對于其本身來講，應該具有“勾引眼球”的效果。對于一個可以起到“勾引”作用的按鈕，建議從下面幾個方面來思考。第一章1.按鈕本身的用色：

本身的顏色應該區別于它周邊的環境色。好的按鈕的設計顏色一定是與眾不同，通常它要更亮而且有高對比度的顏色，如圖所示，色彩鮮明的按鈕設計效果。2.按鈕的位置：

設置按鈕位置時需要仔細考究，基本原則是要容易找到，如：產品旁邊、野兔、導航的頂部右側，特別重要的按鈕應該處在畫面的中心位置，如圖所示，按鈕位置設計于產品旁；而圖1-9所示，則將按鈕設計于畫面中心。第一章3.按鈕上的文字：

在按鈕上使用什么文字傳遞給用戶非常重要。需要言簡意賅，直接明了，如：注冊、下載、創建、免費試玩、增值服務等，甚至有時候用“點擊進入”，但需要注意的是千萬不要讓瀏覽者去思考，越簡單、越直接越好，同樣不能誤導或欺騙用戶，如圖所示，簡潔明了的按鈕文字。4.按鈕的尺寸：

通常來講，一個頁面當中按鈕的大小也決定了其本身的重要級別，但并不是越大越好，尺寸應該適中，因為按鈕大到一定程度，會讓人覺得那不像按鈕，潛意識的認為那是一塊區域，導致沒有點擊欲望。如圖所示，大小適中且清晰可辨的按鈕，極具奢侈感。第一章5.讓其充分通透：

按鈕不能和網頁中的其他元素擠在一起。它需要充足的外邊距才能更加突出，也需要更多的內邊距才能讓文字更容易閱讀，如圖所示。6.注意鼠標滑過的效果:有些時候，對于一些重要的按鈕，可以適當加一些鼠標滑過的效果，會有力的增強按鈕的點擊感，給用戶帶來良好的用戶體驗，起到畫龍點睛的作用。但要注意的是，這種效果不太適合按鈕集中的地方。如果每個都增加高亮的鼠標滑過的效果，則會造成視覺過于雜亂，影響用戶瀏覽的舒適度，所以要強調的是“恰當”地添加鼠標滑過的效果。如圖所示。第一章7.游戲按鈕視覺表現：

在眾多的游戲官網中，可以看到各式各樣的游戲按鈕，相對于一般商務型按鈕來講，游戲性按鈕更加在意的是質感上面的表現，比如金屬、石頭、玻璃、木頭、塑膠等等，通過質感的選擇表現來表達游戲本身的特質。在對游戲按鈕進行設計的時候，能夠盡可能結合游戲的特質，從游戲的定位考慮，再根據要表達的主題，變化性的設計按鈕，優勢強化游戲特點，優勢則比較中性，但最終的效果是突出整體畫面的協調與重點的突出。如圖1-14所示。第一章

網頁設計涉及很多因素，除需要掌握一個主要的網頁編輯軟件外，還需要利用其他軟件來輔助完成網頁視覺元素的制作及網站的發布、維護等工作。如圖形圖像軟件、網頁動畫軟件、文件傳輸軟件和音、視頻編輯軟件等。每類不同的軟件有很多，讀者沒有必要全部掌握，只需熟悉每類中的一個即可。選擇軟件的原則是：選擇主流、兼容性強、適合讀者原來操作習慣的軟件。當然，也要考慮軟件的價格問題。1.網頁編輯軟件

網頁編輯軟件主要有Macromedia公司開發的Dreamweaver軟件、Adobe公司開發的Golive軟件以及Microsoft公司開發的FrontPage軟件。本書教學選用的是Dreamweaver，它是目前應用最廣的網頁制作軟件。2.圖形圖像軟件

圖形圖像軟件用于處理網頁中的圖片和部分動畫，其中像素圖像處理軟件主要有Adobe公司開發的Photoshop、ImageReady軟件和Macromedia公司開發的Fireworks軟件，矢量圖形處理軟件主要有Corel公司的CoreIDRAW軟件、Adobe公司的Illustrator軟件和Macromedia公司的Freehand軟件。1.2網頁藝術設計的相關軟件第一章（1）AdobePhotoshop和ImageReadyPhotoshop是數字專業圖像編輯領域內使用最普及的軟件，它提供高效的圖像編輯、處理以及文件處理功能，與其他軟件的兼容性強，支持各種主流圖像格式。例如Photoshop自帶的ImageReady則主要用于網頁圖像的制作和優化，它與Photoshop界面統一、無縫集成。Photoshop用戶可以很輕松地使用ImageReady制作網頁圖片，如圖1-15所示。⑵Fireworks

Fireworks是專業的網頁圖片編輯工具，它與Dreamweaver軟件的融合度很高，可以制作專門針對網頁優化的各種元素或效果，如導航條、切片、GIF動畫等。⑶AdobeIllustratorAdobeIllustrator是一個矢量繪圖軟件，在MicrosoftWindows平臺和AppleMacintosh平臺上都能良好地運行。它允許創建復雜的藝術作品、技術圖解、圖形和頁面設計圖樣、多媒體以及Web。Illustrator有強大的圖形處理功能，提供了廣泛的強大繪圖和著色工具，支持所有主要的圖形圖像格式。第一章⑷CorelDRAW

CorelDRAW也是一款專業的矢量繪圖軟件，功能豐富全面、接口開放性好。自帶許多工具，可以將位圖圖形轉化為矢量圖形，在圖片編輯方面增加了許多新的特性、新的學習工具，在插畫和頁面布局方面也進行了加強。CorelDRAW主要在MicrosoftWindows運用。⑸HTML

HTML也稱作超文本標記語言，標準通用標記語言下的一個應用。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。網頁的本質就是HTML，通過結合使用其他的Web技術（如：腳本語言、CGI、組件等），可以創造出功能強大的網頁。因而，HTML是Web編程的基礎，也就是說萬維網是建立在超文本基礎之上的。

第一章3.網頁動畫軟件

網頁動畫主要有Flash動畫和GIF動畫，Flash動畫可以通過Macromedia公司的Flash軟件或第三方的Flash動畫軟件制作，GIF動畫可用網頁圖形圖像軟件如ImageReady、Fireworks等制作，也可用專門的GIF動畫軟件制作。⑴FlashFlash是一款功能強大的動畫制作軟件，利用它能夠制作出具有一流動畫效果的Flash影片，如圖1-22所示。Flash是交互式矢量圖和Web動畫的標準，網頁設計師使用Flash能創建漂亮的、可改變尺寸的、靈活的導航界面、技術說明以及其他奇特的效果，甚至單獨開發制作純動畫網站。⑵KoolMovesFlashEditorKoolMoves是一個網站動畫制作軟件，它能夠制作Flash動畫以及其他與動畫相關的素材。該軟件還能夠制作GIF動畫、制作文字特效、導入矢量剪貼畫、附加WAV音頻文件以及為文字按鈕和幀增加動作等。⑶GIFMovieGearGIFMovieGear是一款GIF動畫制作軟件，其編輯功能較強，無需再用其他的圖形軟件輔助。它可以處理背景透明化，而且操作簡便，通過最佳化處理壓縮圖片的容量。其次，它除了可以把制作好的圖片存成GIF的動畫圖外，還可支持PSD、JPEG、AVI、BMP、GIF與AVI格式輸出。第一章4.文件傳輸軟件

制作完成的網頁文件，只有上傳到服務器上才能被其他人看見，這就需要用文件傳輸軟件來進行文件的上傳與下載。除Dreamweaver自帶的上傳、下載功能外，還可以使用更為方便的FTP軟件來進行文件傳輸。目前常用的FTP軟件有：CuteFTP、LeapFTP和FlashFTP等。例如，CuteFTP軟件最大的好處是使用簡單、傳輸穩定、功能也很完整，同時它還支持續傳的功能。CuteFTP的界面與資源管理器的界面很類似，支持以拖曳的方式上傳，非常直觀和方便。

1.3.1開始按鈕1.按鈕完成效果圖如下圖所示，詳細步驟見P12。1.3按鈕案例制作第一章2.所用知識點：

本設計主要用到了Photoshop軟件中的以下幾個命令：畫筆工具/漸變工具/魔棒工具/選擇工具1.3.2透明效果按鈕1.按鈕完成效果圖如下圖所示，詳細步驟見P15。2.所用知識點：

本設計主要用到了Photoshop軟件中的以下幾個命令：圓角矩形工具/漸變工具/矩形工具/選擇工具1.1.3圓形提示按鈕制作按鈕一般有三種狀態，正常（normal），鼠標懸浮（hover），按下（active）三種。一般是用顏色或者明度的變化來區分。下面可以看到正常狀態和鼠標按下兩種狀態的按鈕。它們之間是利用明度上的細微變化來區分。這個按鈕的制作特點是由多個圖層組合的，細節變化主要靠漸變顏色的調節來實現。

第一章1.正常狀態下按鈕效果圖如下圖所示，詳細步驟見P18。2.鼠標按下狀態的按鈕效果圖如下圖所示，詳細步驟見P20。3.所用知識點：

本設計主要用到了Photoshop軟件中的以下幾個命令：圓角矩形工具/漸變工具/矩形工具/自定形狀工具/

第一章1.3.4圓形播放按鈕制作1.圓形播放效果圖如右圖所示，詳細步驟見P22。2.所用知識點：

本設計主要用到了Photoshop軟件中的以下幾個命令：漸變工具/橢圓工具/形狀工具/實踐與提高1.網頁界面包括哪幾部分？請詳細說明各自的作用。2.網站LOGO的設計尺寸有幾種？3.簡單分析在設計按鈕時應注意哪些元素。4.利用所掌握的軟件知識，臨摹下圖所示的按鈕效果。5.嘗試為某個游戲主頁設計幾個按鈕。第二章第2章網頁版式設計第一章

網頁版式是視覺傳達的重要手段。網頁的排版布局在網頁設計中起到決定成敗的作用。網頁版式應遵循審美原則來進行設計，合理的利用視覺元素，將會令網頁充滿生氣，事半功倍。雖然網頁種類繁多，但將其分類后可尋找一定的設計規律。網頁設計的任務，是設計者要表現的主題并實現指定的功能，讓人們從網頁的瀏覽中更好地找到需要的東西。網頁既是信息發布的重要媒體，又要讓讀者通過版面的閱讀產生無限的遐想與共鳴，如圖2-1所示。因此，版式設計是網頁設計的第一步，是網頁成敗之關鍵基礎所在。第二章

網頁版式設計的原則就是讓瀏覽者既方便接受傳達的信息，又能享受到美感。版面設計目的是要求信息條理清晰、布局合理有序、界面美觀悅目，更好地突出主題，達到最佳訴求效果。1.主題鮮明突出

一個成功的網頁版式設計，應有助于增強受眾對網頁的注意，增進閱讀者對內容的理解。因此，要使版面獲得良好的誘導力，鮮明地突出訴求主題，可以通過對版面的空間層次、主從關系、視覺秩序以及邏輯條理性的把握與運用來達到目的的，如圖所示。2.1網頁版式設計應遵循的原則第二章2.版面技術得當

網頁排版方式千變萬化，但是布局方式通常都遵循著幾種常見的規則。在諸多布局方式當中(在此以F式布局為例)，如右圖所示。F式布局可用性較強，且適用范圍較廣。F式布局源于NNGroup的一項眼動研究項目，他們跟蹤了超過200名用戶瀏覽各種網頁時的眼動軌跡，發現用戶的眼球快速瀏覽網頁時，尤其是在快速瀏覽文字內容的時候，眼球的運動軌跡類似字母F。NNGroup的眼動跟蹤研究證明了這一點，如右圖所示，紅色的部分是用戶感興趣的區域，黃色的區域次之，不感興趣的則為藍色的區域，灰色的區域是用戶直接忽略不作停留的部分。F式布局能創造出更加富有層次感的設計，這樣的設計更容易為用戶瀏覽和獲取信息。對于世界范圍內絕大多數的國家和地區而言，F式布局是非常符合閱讀習慣的，這種規則使得它可以廣泛運用在UI和網頁設計上。諸如新聞和博客這種重文本內容的網站是適合F式布局的，它主要適用于文本的閱讀。第二章3.版面裝飾恰當對網頁設計來講，裝飾應該追尋簡潔化，功能與裝飾的結合才是一個優秀的網頁設計作品。“簡潔就是美”，是單純化成為現代設計美的重要因素。過于復雜的裝飾是對主題的重大考驗。網頁上的很多功能都是通過超級連接的按鈕和圖片來完成的。如圖所示，主頁上的許多符號就是起到按鈕的作用。4.網頁版面的視覺沖擊力讓一個網頁在眾多的網站中獨樹一幟，讓人們對它過目不忘的通常辦法就是制造焦點與沖突。任何一件好的平面作品，一定是有焦點的。對于焦點的認識不應局限于一個“點”，它可以是一塊吸引視線所投射的區域，也可以分為實焦點和虛焦點。通過虛焦點的存在，使大眾目光更為精準的聚焦在實焦點之上。例如：色彩是一個網頁給人的最初印象，它對網頁的可讀性、視覺舒適性都會產生極大的影響，如圖2-6所示。第二章在下列的對比屬性中，它們之間形成的對比越大，沖突越大。①空間：充滿—空置、積極活躍—消極被動、前進—后退、近—遠、二維—三維、封閉—開放。②形式：簡單—復雜、美—丑、抽象—具象、清晰—模糊、幾何形式—有機形式、直線—曲線、對稱—非對稱、完整—破碎。③結構：井井有條—混亂無序、排列成序—隨意放置、襯線字體—無襯線字體、機械—手工。④紋理：細—粗、平滑—粗糙、反光—啞光、滑—黏、銳—鈍⑤位置：頂部—底部、高—低、右—左、上—下、前—后、有節奏—隨意、單獨—分組、接近—遠離、中心—邊緣、整齊排列—互不關聯、內—外⑥方向：垂直—水平、垂直線—對角線、向前—向后、穩定—活動、內聚—分散、順時針方向—逆時針方向、凹形—凸形、正體字—斜體字⑦尺寸：大—小、長—短、窄—寬、擴大—收縮、深—淺⑧顏色：黑色—彩色、亮—暗、暖色—冷色、明度—暗度、天然—人造、飽和（深色）—無色（素色）⑨密度：透明—晦暗、稠密—稀薄、液體—固體⑩重力：輕—重、穩定—不穩定第二章

網頁版式設計作為信息交流的媒介，其基本要素是文字和圖像，運用圖像、字體和色彩等視覺元素，達到信息傳達和審美的目的。這些元素之間的組合構成方式的合理性，是準確傳遞信息和視覺審美規律的基本要求。2.2.1網頁的標題設計

在網頁的版式設計中，好的標題設計可令人賞心悅目，能形成網頁的整體風格。在標題構想時，需注意：網頁的標題字數要適中；網頁標題要概括網頁內容；網頁標題要包含豐富的關鍵詞。

一個好的標題應有哪些內容？標題可以包括各種有意義的布局元素，例如：

①品牌標識的基本要素：標識，品牌刻字，口號或公司聲明，企業吉祥物，公司或其領導者的照片，企業色彩等。

②復制塊設置提供的產品或服務的主題。

③鏈接到網站內容的基本類別。

④鏈接到最重要的社交網絡。

⑤基本聯系信息（電話號碼，電子郵件等）。

⑥多語言界面的語言切換器。

⑦檢索。

⑧訂閱字段。

⑨與產品交互的鏈接，如試用版，從AppStore下載。2.2網頁版式設計的基本內容第二章

這并不意味著所有提到的元素都應該包含在一個網頁標題中，吸引用戶注意力越多，集中精力就越重要。

標題所在的欄目一般位于網頁的上方，并且左右貫穿整個網頁；標題的背景可以使用動態或靜態的圖片，這是由網頁的交互式特性所決定的，如右圖所示三種迥然不同的標題欄對比效果。第二章2.2.2文字的編排

文字在排版設計中，不僅僅局限于信息傳達意義上的概念，更是一種高尚的藝術表現形式。文字已提升到啟迪性和宣傳性，并引領人們的審美時尚的新視角。文字是所有版面的核心，也是視覺傳達最直接的方式，僅運用經過精心處理的文字材料，即可以制作出效果很好的版面，因此說文字是網頁最重要的元素。1.字號、字體

通常情況下，最適合于網頁正文顯示的字體大小為12磅左右，現在很多的綜合性站點，由于在一個頁面中需要安排的內容較多，通常采用9磅的字號。

在同一頁面中，字體種類少，版面雅致，有穩定感；字體種類多，則版面活躍，豐富多彩，但關鍵是如何根據頁面內容來掌握這個比例關系。如圖所示，整個頁面采用一種字體的表現形式，絲毫沒有感覺單一與枯燥。但在確有必要使用特殊字體的地方，可以將文字制成圖像，然后插入頁面中，如圖所示頁面左側文字圖像化的處理正是如此。第二章2.字距與行距

一般的行距在常規的比例應為：用字8點，行距則為10點，即8：10。但對于一些特殊的版面來說，字距與行距的加寬或縮緊，更能體現主題的內涵。現代國際上流行將文字分開排列的方式，感覺疏朗清新、現代感強。因此，字距與行距不是絕對的，應根據實際情況而定。3.文字的強調（1）行首的強調將正文的第一個字或字母放大并作裝飾性處理，嵌入段落的開頭，這在傳統媒體版式設計中稱之為“下墜式”。此技巧的發明溯源于歐洲中世紀的文稿抄寫員。由于它有吸引視線、裝飾和活躍版面的作用，所以被應用于網頁的文字編排中。其下墜幅度應跨越一個完整字行的上下幅度。至于放大多少，則依據所處網頁環境而定。（2）引文的強調在進行網頁文字編排時，常常會碰到提綱挈領性的文字，即引文。引文概括一個段落、一個章節或全文大意，因此在編排上應給予特殊的頁面位置和空間來強調。引文的編排方式多種多樣，如將引文嵌入正文的左右側、上方、下方或中心位置等，并且可以在字體或字號上與正文相區別而產生變化。4.網頁版面的視覺沖擊力讓一個網頁在眾多的網站中獨樹一幟，讓人們對它過目不忘的通常辦法就是制造焦點與沖突。任何一件好的平面作品，一定是有焦點的。對于焦點的認識不應局限于一個“點”，它可以是一塊吸引視線所投射的區域，也可以分為實焦點和虛焦點。通過虛焦點的存在，使大眾目光更為精準的聚焦在實焦點之上。例如：色彩是一個網頁給人的最初印象，它對網頁的可讀性、視覺舒適性都會產生極大的影響，如圖2-6所示。第二章⑶個別文字的強調如果將個別文字作為頁面的訴求重點，則可以通過加粗、加框、加下劃線、加指示性符號、傾斜字體等手段有意識地強化文字的視覺效果，使其在頁面整體中顯得出眾而奪目。另外，改變某些文字的顏色，也可以使這部分文字得到強調。這些方法實際上都是運用了對比的法則，如圖所示。第二章在網頁的版式設計中只應用文字也不適合人們長期閱讀，所以網頁在版式上都是文字和圖片相互搭配。圖文結合主要有兩種表現形式，一是文字配圖形的形式，這里的圖形是網頁的主體，文字是輔助存在的，如圖所示。

對于一些新聞類的網站，圖有時不能表明一件事情的始末，所以要用文字配合說明。二是圖形配文字的形式。在這里要把握圖形和文字的關系，根據不同類別的網站靈活搭配，如圖所示。2.2.3圖文的結合第二章2.2.4頁面的節奏韻律

節奏是從音樂中派生出來的一個很感性的詞匯，它需要根據設計的風格和受眾感情綜合起來體會。一個娛樂類或音樂類的網站，給人的節奏是輕松歡暢的；一個新聞類的網站，給人的節奏就應該是快速律動的；一個軍事類的網站，給人的節奏就是嚴肅莊重的等。如圖所示，應根據其內容選擇設計風格，若在版式設計上只追求節奏韻律會適得其反。第二章

網頁設計如果僅從網頁版式構成分類而言，主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。1.骨骼型

網頁中的骨骼型版式是一種規范的、理性的設計形式，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等，如圖2-13所示。

一般以豎向分欄為多，這種版式給人以和諧、理性的美。幾種分欄方式結合使用，顯得網頁既理性、條理、又活潑而富有彈性。2.3網頁版式構成分類第二章2.滿版型

頁面以圖像充滿整版，如圖2-14、圖2-15所示。頁面主要以圖像為訴求點，將少量文字壓制于圖像之上，視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。美中不足的是，限于當前網絡寬帶對大幅圖像的傳輸速度較慢，這種版式多見于強調藝術性或個性的網頁設計中。3.分割型分割型版式設計，是把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成明顯的對比：有圖片的部分感性而具活力，文案部分則理性而平靜，如圖2-16所示。設計實踐中，可以通過調整圖片和文案所占的面積，來調節對比的強弱。

第二章4.中軸型

中軸型版式，是沿著頁面的視覺中軸將圖片或文字作水平或垂直方向的排列，如圖所示。水平排列的頁面，給人穩定、平靜、含蓄的感覺。垂直排列的頁面，給人以舒暢的感覺。5.曲線型曲線型版式，是圖片或文字在頁面上作曲線的編排構成。如圖所示，這種編排方式能產生韻律感與節奏感。

第二章6.傾斜型

傾斜型版式，是頁面主題形象或多幅圖片、文字作傾斜編排。它能造成頁面強烈的動感，引人注目。如圖所示，利用傾斜式的圖片突出產品。7.對稱型對稱型的頁面版式，給人以穩定、嚴謹、莊重、理性的感受，如圖所示。對稱，分為絕對對稱和相對對稱兩種類型。一般采用相對對稱的手法，以避免版式呆板。四角型也是對稱型的一種，是在頁面四角安排相應的視覺元素。第二章8.焦點型

焦點型的網頁版式，通過對視線的誘導，使頁面具有強烈的視覺效果，如圖所示。焦點型分三種情況。

①中心：以對比強烈的圖片或文字置于頁面的視覺中心。

②向心：視覺元素引導瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩定的，是一種傳統的手法。

③離心：視覺元素引導瀏覽者視線向外輻射，則形成一個離心的網頁版式。離心版式是外向的、活潑的，更具現代感，運用時應注意避免凌亂。

第二章9.三角型

這種版式是網頁視覺元素呈三角形排列。正三角形（金字塔型）最具穩定性，倒三角形則產生動感。側三角型構成一種均衡版式，既安定又有動感，如圖所示。10.自由型自由型的頁面具有活潑、輕快的風格，如圖所示。

第二章

如圖所示，這是一個用Photoshop來制作的網頁界面設計效果。在傳統三三式構圖上發展變化而來的。整個頁面使用了無彩色系的黑色，淺灰為主色調，顯得簡潔條理、理性冷靜。

制作步驟：

1.布局部分

2.logo部分

3.導航欄制作

4.頁腳部分2.4網頁界面設計案例制作第三章第3章網頁創意與規劃設計第一章

網頁是信息傳播的媒體，但又不同于傳統媒體，有自己的特殊性。網頁具有交互性、多維性、整合性、不確定性等特點，它與技術的結合更為密切，網頁的超級鏈接功能也使它比傳統媒體更具吸引力。正是因為這些特殊性，網頁的設計與發布也有一個特殊的流程。網站制定的目標可分為長期目標和短期目標，長期目標是一個戰略性的指導方向，而短期目標的實現直接關系到企業的利益，因此短期目標的制定更為關鍵。3.1.1對市場的預測和分析

建立網站前的市場分析通常要了解相關行業的市場是怎樣的，有什么樣的特點，是否適合在互聯網上開展公司的相關業務，還要分析競爭對手的網站內容、功能和作用等，根據公司自身的條件分析公司的概況和市場優勢。當然這些工作可能不需要親自去做，大的公司會有專門的部門去做市場調研，但是，作為設計者必須仔細閱讀委托方提供的這些相關資料，否則設計出的作品可能與實際情況大相徑庭。3.1為網站制定目標第三章

如果已經了解了公司自身的狀況、優勢等信息，接下來就要考慮將要建立行業門戶網站，根據公司的需要和計劃來確定網站的功能是電子商務類型、產品宣傳類型還是其他類型等。1.項目規劃

1）確定網站類型⑴個人主頁：發布個人信息，提供個人服務，展示個性，同別人廣泛地交流，比如共享業余愛好等，如圖所示展示自我的主頁。3.1.2網站的項目規劃與組織第三章⑵電子商務：首先，有利于樹立企業的形象。目前國內很多大企業都非常重視企業形象這種無形資產，建立企業網頁是宣傳自己的重要手段。擁有國際域名和主頁代表了企業的實力、規模和品位。其次，公司可以利用網頁的實時性為客戶提供更好的服務，比如提供產品目錄、實現網上購物、提供技術支持信息、即時解答客戶問題等，同時可以降低開支，減輕客戶支持部門的負擔。再次，在網上發布廣告，其優勢也是一般媒體所不能比擬的。如圖所示海爾集團主頁。第三章⑶電子出版：內容的更新、傳遞的速度都比傳統報刊雜志更快捷，影響更廣泛。圖（局部）在線書籍的更新、售出、推廣深得讀者喜愛。⑷社區服務：可以通過郵件列表、新聞組、聊天室和電子公告牌促進社區人員的信息交流，為背景和地址各不相同的人提供活動的場所。⑸網上教育：遠程教育、終身教育和開放式教育都因此而變為現實。這樣的站點主要靠內容來吸引瀏覽者，而不是華而不實的設計技巧。需要注意，兒童教育站點又有其特設性，設計者必須考慮到孩子們受教育的程度和年齡組。如圖所示，兒童教育網站緊緊圍繞兒童對色彩、圖形的喜愛展開設計，整個頁面明亮、歡快。第三章⑹休閑娛樂：包括影視站點、音樂站點、旅游站點、游戲站點等，都為瀏覽者提供了休閑娛樂的場所。要求設計者能夠提供各種多媒體信息，具有很強的變化能力和靈活的設計思想，如圖所示音樂站點。第三章⑺藝術欣賞：如何把作品的含義表達給瀏覽者，是藝術站點應該考慮的問題。因此，設計者應該與藝術家保持良好的溝通。另外，準確地運用多媒體也是設計好藝術站點的關鍵。如圖所示Arting365創意門戶網站。⑻搜索引擎：大型搜索引擎可以幫助瀏覽者在整個網絡中查找信息。大家比較熟悉的有Google、Yahoo、Infoseek、百度、搜狐、中文雅虎等。小型搜索工具裝在地區或單獨的站點上，可以幫助瀏覽者查找站內的信息。這些強大的功能都需要大型數據庫來支持。⑼綜合服務：在網上很多大型網頁屬于各種類型混合的站點。例如，絕大多數綜合性網頁都提供個人主頁空間、免費電子信箱、休閑娛樂、藝術欣賞、搜索引擎的服務。有的社區站點里還設有二手舊貨市場，巧妙的把社區服務和電子商務結合起來。第三章2）確定建站位置把網站建在哪里，也是個很重要的問題。這涉及網絡的類型，大體分為三種：Internet、Intranet和Extranet。建立在Internet上的站點可以被公眾訪問，它的用戶可以是Internet上的任何一位漫游者。Intranet是內部網絡，主要為大企業或大機構的內部交流服務，它與面向公眾的Internet站點不同，它的訪問是受控制的。Extranet站點是一種介于自由Internet和私有Intranet之間的獨特環境。2．內容組織無論設計一個什么樣的站點，內容的組織都將是最大的挑戰。這包括三個方面的工作：搜集篩選內容、組織內容、編寫腳本。1)搜集、篩選內容⑴搜集篩選將要發布的內容2）組織內容梳理清楚上述問題以后，就可以進行第二步工作了。組織內容這一階段，要求設計者把搜集到的信息，用清晰明確的文字表達出來。設計人員可以運用一些語言技巧，確保瀏覽者能夠準確且迅速地理解網頁所要傳達的意圖。第三章在組織內容時還應注意以下問題。⑴建立可信度：研究表明，瀏覽者普遍認為那些經過專業設計的網站信息更為可靠，而且新的信息比較可信。因此，管理者應仔細刪除排版錯誤，并且經常更新站點上的信息。⑵減少商業味道：瀏覽者討厭那些免費的、自我吹噓的商業信息。⑶采用倒金字塔形式：冗長的內容，會使大多數瀏覽者放棄閱讀的興趣。因此建議將結論放在開頭，首先列出最重要的信息.⑷用超級鏈接縮短長度：由于文章力求簡潔，所以不必向瀏覽者解釋那些不重要的想法。超級鏈接是縮短長文章的有效途徑。⑸去掉不必要的圖形：由于網頁受下載時間的限制，所以不要讓讀者等待下載圖形和大頁面。⑹并不是信息越多越好：真正重要的不是為瀏覽者提供更多信息，而是為他們提供更有用的信息。3）編寫腳本確定內容后，就要編寫腳本。它通常包含這樣幾個方面：首先將內容分類列表，把各個項目分成邏輯組，頁的總體結構（樹形結構），其次確定各頁的主題、包含的內容以及各頁之次結構和隸屬關系最后設計者還要考慮樹形結構之外的交叉鏈接關系。第三章3.1.3.網站建設網站的建設可以按照以下步驟進行。1.設定網站導航、欄目知識鏈接:門戶網站和企業網站的差異很大，無論是網站贏利方式還是具體的視覺設計表現。門戶網站傾向于信息的傳遞，網頁設計通常是干凈利落、簡潔明快，而企業網站傾向于推廣公司形象、宣傳和表現產品，因此對視覺設計的要求更嚴格。2.網頁設計網頁設計涉及色彩和畫面構成等視覺元素，網頁的配色通常和企業標準色保持一致。有些優秀的繪畫作品，是在畫家們強烈的創作欲望驅使下，沒有計劃、沒有尺度，僅僅靠著巨大的熱情和無法抑制的創作渴望，瘋狂地涂抹畫布來完成的。這種方法對網頁設計者來說，可以作為一種有趣的創作方法偶爾一試，但對商業設計來說，缺乏計劃性、準確性、整體性，將是設計師通往成功道路上的兩大障礙。第三章3.測試發布測試發布，包括完整性測試和可用性測試兩部分。完整性測試，確保技術上的正確性。例如，頁面顯示是否無誤，鏈接指向的地址是否正確等。可用性測試，確保頁面內容是瀏覽者所需的，符合最初的設計目標。經測試滿意后，就可以上傳到Web服務器發布了。4.后期維護網站的后期維護包括相關軟件、數據庫的維護、網站內容的更新和調整等。5.網站推廣

那么，如何推廣呢？可以通過兩種途徑：傳統的廣告和Internet宣傳。①利用傳統媒體設計師可以在傳統媒體上作廣告，如廣播、電視、報刊、黃頁電話簿、分發的廣告頁、廣告牌、燈箱、招貼、海報等等。②利用網絡媒體

到各搜索引擎注冊、登記；

參加廣告交換組織；

參與論壇、新聞組的討論；

雇傭專門機構進行宣傳；

通過與其他網頁互換首頁鏈接、在電子刊物上發布廣告等方法推廣站點。第三章6.反饋評估站點推廣工作，并不是網頁設計最后的階段。網頁不同于傳統媒體之處，就在于信息的更新頻率和信息傳播主客雙方的即時互動。獲得用戶反饋的渠道很多，如留言本、論壇、調查表、訪客情況統計、計數器等。如果擁有自己的Web服務器，還可以通過檢查日志文件，了解網頁被訪問的情況。3.1.4改版案例制作，如圖3-7左圖是榮海財富的現有網頁主頁，右圖則是某同學根據榮海財富網上提供的要求，征集設計的首頁改版效果。第三章

該網頁設計著重體現了金融服務行業特點和榮海財富的公司文化，專業、嚴謹、不浮夸，首頁圍繞著三個板塊：理財、借款、加盟進行設計。版式條理清晰，顏色簡潔明快。白色和紅色的搭配干凈利落并且充滿熱情。案例制作主要步驟：1.頁頭部分設計制作2.主導航欄制作3.banner上的導航制作4.頁中部分根據草圖設計制作5.頁腳部分的設計制作3.2網頁設計的創意方法

網站的創意是網站的靈魂所在，好的創意可以讓訪問者印象深刻，過目不忘，使網站充滿魅力，個性鮮明。網頁風格和網站創意有直接的聯系，網站風格要和網站創意相統一，網頁的整體設計風格依靠圖形、色彩、文字等元素來表現，不同性質的行業網站應體現出不同的風格類型。兒童最喜歡明快的色彩、卡通般的圖畫和跳動的節拍，因此兒童網站在風格設計上一定要讀懂兒童的心理，如圖3-8、圖3-9所示。第三章“創意”一詞源于英文的Creationidea，意為“具有創造性的意念”。創意是人類特有的思維活動，創意是設計師靈感的火花，創意是人類智慧凝煉升華的結晶，創意是設計師智慧的釋放。在網頁設計中，創意是產生優秀網頁的先決因素，是成功網頁的靈魂。一個好的網頁應該具備內在的“意”，讓瀏覽者得到精神美的享受。當然，成功的創意是形式與內容、理智與感情、審美與實用的辯證統一。將頁面主題的創意與版式設計相結合是現代網頁設計的發展趨勢。

第三章

3.2.1.創意是網頁的靈魂很難想象一個毫無創意的網站能讓你長時間停留下去，只有充滿趣味、想象力的網站才能吸引更多的訪問者，創意就像是網頁的靈魂，可以讓網站變得生動起來。如圖所示，將中國傳統的紅棉襖與汽車結合在一起，展現春節的喜慶氣氛。雖然是汽車的招貼廣告，但是這種創意的思想同樣對網頁創意有幫助。而右圖上（主頁）、右圖下（連接頁）則是采用動畫的形式結合卡通形象吸引用戶的，頁面生動有趣。

第三章3.2.2網頁創意方法創意和創造性思維有著直接的聯系，創意是一個創造未知事物的思維過程，創意的獲得雖然很復雜，但也有一定的方法和規律可循，總的來說，方法是比較多的，現在，筆者列出幾種常見的方法，供各位讀者參考。⑴聯想法聯想是藝術形式中最常用的表現手法。在審美的過程中通過豐富的聯想，能突破時空的界限，擴大藝術形象的容量，加深畫面的意境。人具有聯想的思維心理活動特征，它來自于認知和經驗的積累。通過聯想，人們在審美對象上看到自己或與自己有關的經驗，美感顯得特別強烈，從而使審美對象與產品中引發了美感共鳴，其感情的強度總是激烈的、豐富的、合乎審美規律的心理現象。如圖所示，頁面背景是寬廣的沙灘、湛藍的海域，充滿無限的遐想，而頁面上的每個按鈕幾乎都與背景或多或少的有些聯系。

第三章⑵對比法

對比是一種趨向于對立沖突的藝術美中最突出的表現手法。在網頁設計形式中加入不和諧的元素，把網頁作品中所描繪的事物的性質和特點放在鮮明的對照和直接對比中來表現，借此彼顯，互比互襯，從對比所呈現的差別中，達到集中、簡潔、曲折變化的表現。通過這種手法更鮮明地強調或提示網頁的特征，給瀏覽者以深刻的視覺感受。對比包括明暗對比（左圖）、大小對比（右圖）、粗細對比、主從對比等等。第三章⑶夸張法夸張是創作的基本原則，借助想象，使用夸張的手法能更鮮明地強調或揭示事物的實質，強化作品的藝術效果，是很常用的表現手法，但有一點需要注意，夸張要具有合理性。如圖所示。⑷趣味、幽默法趣味指網頁作品中巧妙地再現喜劇性特征，創造出一種充滿情趣、能引人發笑而又耐人尋味的意境，引起欣賞者會心一笑。幽默法是指抓住生活現象中局部性的東西，通過人們的性格、外貌和舉止的某些可笑的特征表現出來。如圖所示。

第三章⑸比喻法比喻法是指在設計過程中選擇兩個各不相同，而在某些方面又有些相似性的事物，“以此物喻彼物”，比喻的事物與主題沒有直接的關系，但是某一點上與主題的某些特征有相似之處，因而可以借題發揮，進行延伸轉化，獲得“婉轉曲達”的藝術效果，與其它表現手法相比，比喻手法比較含蓄隱伏，有時難以一目了然，但一旦領會其意，便能給人以意味無盡的感受，如圖所示。⑹巧設懸念法在表現手法上故弄玄虛，布下疑陣，使人對網頁乍看不解題意，造成一種猜疑和緊張的心理狀態，產生夸張的效果，驅動瀏覽者的好奇心和強烈舉動，開啟積極的思維聯想，引起觀眾進一步探明廣告題意之所在的強烈愿望.如圖所示。

第三章⑺以小見大以小見大中的“小”，是網頁中描寫的焦點和視覺興趣中心，它既是網頁創意的濃縮和升華，也是設計者匠心獨具的安排，因而它已不是一般意義的“小”，而是小中寓大，以小勝大的高度提煉的產物，是簡潔的刻意追求。以細節見整體，以管窺豹。如圖3-16

⑻注重情感

藝術的感染力最有直接作用的是感情因素，而以人為本是使藝術加強傳達感情的特征，在表現手法上側重選擇具有感情傾向的內容，以美好的感情來烘托主題，真實而生動地反映這種審美感情就能獲得以情動人，發揮藝術感染人的力量，這是現代網頁設計的文學側重和美的意境與情趣的追求。

第三章⑻注重情感

藝術的感染力最有直接作用的是感情因素，而以人為本是使藝術加強傳達感情的特征，在表現手法上側重選擇具有感情傾向的內容，以美好的感情來烘托主題，真實而生動地反映這種審美感情就能獲得以情動人，發揮藝術感染人的力量，這是現代網頁設計的文學側重和美的意境與情趣的追求。

“以情動人”，是藝術創作中奉行的原則，網頁設計也同樣如此。例如，文字的編排就非常富于情感的表現。它表現在文字空間結構、韻律節奏的關系上，體現了各種情感動勢，如輕快、或凝重、或舒緩、或激昂，如左圖所示。

另外，在空間結構上，水平、對稱、并置的結構，表現嚴謹與理性；曲線與散點的結構，表現自由、輕快、熱情與浪漫，如右圖所示。

第三章⑼偶像法這種方法的效果非常好，創意的受關注程度和偶像的知名度有關。這種手法正是針對人們的這種心理特點運用的，它抓住人們對名人偶像仰慕的心理，選擇觀眾心目中崇拜的偶像，配合產品信息傳達給觀眾。如左圖所示。⑽懷舊法這類網頁設計以傳統風格和古舊形式來吸引瀏覽者。古典傳統創意適合應用于以傳統藝術和文化為主題的網站中，將書法、繪畫、建筑、音樂、戲曲等傳統文化中獨具的民族風格，融入到網頁設計的創意中，如右圖所示。

第三章⑾時尚法流行時尚的創意手法是通過鮮明的色彩、單純的形象以及編排上的節奏感，體現出流行的形式特征。設計者可以利用不同類別的視覺元素，給瀏覽者強烈、不安定的視覺刺激感和炫目感。如左圖所示。⑿個性法要想在因特網上無數的網頁中脫穎而出，就要采用個性化的設計語言。要求得個性化，設計者可以有意識地擺脫陳舊與平庸的設計模式，強調個性，是一種標新立異。如右圖所示。第三章

⒀綜合法

綜合設計中廣泛應用的方法，從各個元素的適宜性處理中體現出設計師的創作意圖，追求和諧的美感。在分析各個構成要素的基礎上加以組合，使整個界面整體形式表現出創造性的新成果，如圖所示。

總之，在網頁設計中，創意是決定設計的傾向、意境、深度的關鍵。網頁設計是一種有目的性的創作，依據這個目的去設計，就是創意的出發點和設計的要旨。通常，人們把突如其來的領悟叫做“靈感”。它是由人的記憶力、想象力、創造思維力巧妙結合而迸發的智慧之花。

第三章3.3小福屋網頁案例制作“小福屋”網頁是馬圓圓對VI設計課的作業——小福屋VI手冊（圖3-22）的延伸設計創作的一個商業網站。由于VI的設計經歷了準備階段、成立VI設計小組、理解消化MI，確定貫穿VI的基本形式、收集相關資訊，以利比較四個階段，因此對“小福屋”經營理念、市場的信息反饋等方面工作已經完成，因此以下工作主要是網站的界面設計。

第三章3.3小福屋網頁案例制作

第三章3.3小福屋網頁案例制作

實踐與提高1.為自己的主頁組織必要的文字信息并編寫腳本。2.根據腳本內容，利用所學軟件對自己的主頁做初步的規劃。3.簡述網頁創意的方法并闡述自己網頁的設計思路。4.依據設計思路，嘗試完成自己主而的導航欄設計。第四章第4章網頁配色第一章

網頁設計作為一門新興學科，其色彩風格的審美情趣必然帶有鮮明的時代特征。隨著時代的變遷，適應新時代的設計思想也隨著變化，優秀的設計師應緊跟時代潮流，敏銳地觸摸到色彩的審美變化和對色彩感情的影響，從而確立網頁獨具個性的色彩風格。色彩是人們常見的事物，但是仔細的問起來又是很難講明白的一件事情。因為色彩既是一門藝術，也是一門科學。4.1.1.何為色彩

色彩并不是物體本身固有的，物體的顏色是物體本身吸收和反射光波的結果。色彩與光有著極為密切的聯系，同時又影響到人們的直覺。4.1認識色彩第四章物體表面色彩的形成取決于三個方面：光源的照射、物體本身反射一定的色光、環境與空間對物體色彩的影響。光源色：由各種光源發出的光，光波的長短、強弱、比例性質的不同形成了不同的色光，稱為光源色。物體色：物體色本身不發光，它是光源色經過物體的吸收反射，反映到視覺中的光色感覺，通常把這些本身不發光的色彩統稱為物體色。4.1.2.色彩三要素

色彩的三要素也稱之為色彩三屬性，是指任何一種色彩同時含有的三種屬性，即色相、明度和純度.1.色相(Hue)

又叫色名（Hue，簡稱為Ｈ；或譯為色相）是區分色彩的名稱，也就是色彩的名字，就如同人的姓名一般，用來辨別不同的人。除了黑白灰以外的色彩都有色相的屬性。2.明度(Value)

明度（Value簡稱Ｖ）指顏色的亮度。光線強時，感覺比較亮，光線弱時感覺比較暗，色彩的明暗強度就是所謂的明度，明度高是指色彩較明亮，而相對的明度低，就是色彩較灰暗。第四章3.純度(Chroma)又叫彩度（Chroma，簡稱Ｃ）是指色彩的純度，通常以某彩色的純度所占的比例，來分辨彩度的高低，純色比例高為彩度高，純色比例低為彩度低，在色彩鮮艷狀況下，通常很容易感覺高彩度，但有時不易作出正確的判斷，因為容易受到明度得影響，譬如人們最容易誤會的是，黑白灰是屬於無彩度的，他們只有明度。4.1.3色彩對比

兩種以上的色彩，以空間或時間關系相比較，表現出明顯的差別，并產生比較作用，被稱為色彩對比。

1.色相對比即因色相之間的差別形成對比。當主色相確定后，必須考慮其他色彩與主色相是什么關系，要表現什么內容及效果等，這樣才能增強其表現力。2.明度對比因明度之間的差別形成的對比。（檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度）。第四章將相同的色彩，放在黑色和白色上，比較色彩的感覺，會發現黑色上的色彩感覺比較亮，放在白色上的色彩感覺比較暗，明暗的對比效果非常強烈明顯。如右圖所示黑白底色上的文字與色條線條對比；如圖下所示，就是運用明度對比的網頁。第四章3.純度對比一種顏色與另一種更鮮艷的顏色相比時，會感覺不太鮮明，但與不鮮艷的顏色相比時，則顯得鮮明，這種色彩的對比便稱為純度對比。如左圖所示，中間的色塊比左邊色塊純度高同時又比右邊色塊純度低。如右圖所示，運用純度對比的網頁效果。

4.補色對比將紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補色對比。如圖所示，運用補色對比的網頁效果。

第四章

5.冷暖對比

由于色彩感覺的冷暖差別而形成的色彩對比，稱為冷暖對比。（紅、橙、黃使人感覺溫暖；藍、藍綠、藍紫使人感覺寒冷；綠與紫介于其間），另外，色彩的冷暖對比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。如圖所示，運用冷暖對比的網頁效果。

第四章

4.1.4色調的變化色調傾向大致可歸納成鮮色調、灰色調、淺色調、深色調、中色調等。1．鮮色調在確定色相對比的角度、距離后，尤其是中差（90度）以上的對比時，必須與無彩色的黑、白、灰及金、銀等光澤色相配，在高純度、強對比的各色相之間起到間隔、緩沖、調節的作用，以達到既鮮艷又真實、既變化又統一的積極效果。感覺生動、華麗、興奮、自由、積極、健康等（左圖）。2．灰色調在確定色相對比的角度、距離后，于各色相之中調入不同程度、不等數量的灰色，使大面積的總體色彩向低純度方向發展，為了加強這種灰色調傾向，最好與無彩色特別是灰色組配使用。感覺高雅、大方、沉著、古樸、柔弱等（右圖）。

第四章

3．深色調在確定色相對比的角度、距離時，首先考慮多選用些低明度色相，如藍、紫、藍綠、藍紫、紅紫等，然后在各色相之中調入不等數量的黑色或深色，同時為了加強這種深色傾向，最好與無彩色中的黑色組配使用，感覺老練、充實、古雅、樸實、強硬、穩重、男性化等（上圖）。4．淺色調在確定色相對比的角度、距離時，首先考慮多選用些高明度色相，如黃、桔、桔黃、黃綠等，然后在各色相之中調入不等數量的白色或淺灰色，同時為了加強這種粉色調傾向，最好與無彩色中的白色組配使用（下圖）第四章

5．中色調

中色調是一種使用最普遍、數量最眾多的配色傾向，在確定色相對比的角度、距離后，于各色相中都加入一定數量黑、白、灰色，使大面積的總體色彩呈現不太淺也不太深，不太鮮也不太灰的中間狀態。感覺隨和、樸實、大方、穩定等（上圖）。

在優化或變化整體色調時，最主要的是先確立基調色的面積占優勢。一幅多色組合的作品，大面積、多數量使用鮮色，勢必成為鮮調。大面積、多數量使用灰色，勢必成為灰調，其他色調依此類推。這種優勢在整體的變化中能使色調產生明顯的統一感，但是，如果只有基調色而沒有鮮色調就會感到單調、乏味。如果設置了小面積對比強烈的點綴色、強調色、醒目色，由于其不同色感和色質的作用，會使整個色彩氣氛豐富，活躍起來。但是整體與對比是矛盾的統一體，如果對比、變化過多或面積過大，易破壞整體，失去統一效果而顯得雜亂。

第四章

4.2網頁配色常見問題1.缺乏主色調

在網上經常可以看到這樣的網站，網頁上的元素色相眾多，一個標題就是一種顏色，每一個框、線的顏色都不同，令人眼花繚亂。雖然畫面色彩繁多，好像很豐富的樣子，但過多的色相給人一種復雜混亂的視覺效果，使訪問者無法明確地識別重點內容，甚至起到反作用。

一般來說，色調明確的網頁更受訪問者的歡迎，因為這樣的網頁主次分明，易于找到重點，能有效減少視覺負擔。

左圖所示是韓國POSCO公司的官方網站，也是韓國網站版式設計比較有代表性的一個網頁。頁面左邊是網站的LOGO，右邊是導航欄。POSCO公司是從事汽車產業生產方面的公司，所以頁面中間選擇的是汽車前蓋及車燈部分的一個特寫，暗紅色的車身，也是整個網頁上的一處亮點。網站整體選擇了灰色為主色調，深淺不同的灰色對整個網頁的區域進行了劃分，左側利用插圖和文字介紹公司的產品；中間部分是告示欄；最右邊是關于公司生產線的一個介紹及其相關的動畫，均為可點擊的子目錄。整個網頁版式設計條理清楚，色彩運用簡單卻不呆板，能體現出工業產品的特點。

第四章右圖這是韓國HAUZEN公司的網站，它是一家以家電制造為主的公司。藍色的主色調，是與家電品最為吻合的色彩。頁面做了一分為二的設計，上半部分展示的是本公司的洗衣機，可以強調了洗衣機的LOGO部分，頁面頂端依然是公司LOGO和導航欄。下半部分主要是文字性的子目錄，包括告示新聞、公司其他產品以及公司廣告，均為可點擊的子目錄。以頂端導航相呼應的，頁面底端也設計了導航欄。

第四章

2.文字能見度低

人眼識別色彩的能力有一定的限度，由于色的同化作用，色與色之間對比強者易分辨，弱者難分辨，色彩學上稱為易見度。

確保選擇的字體在較小的屏幕上依舊清晰可辨，應選擇粗細均勻且大小適中的字體（左圖）。設計師進行網頁文字設計時應避免選擇過于繁復的字體，如右圖的維瓦爾第字體將難以在小屏幕上閱讀。

第四章

在高明度色彩的背景上，低明度的文字易于識別，如果背景和文字明度接近，就容易出現難以識別的問題，如左圖所示字體顏色與文字相近，并不利于瀏覽者更好的閱讀；而右圖中字的顏色則根據背景色的變化調整字的顏色，突出字體，更加清晰。

3.增加視覺負擔在瀏覽網頁時，當然不希望對自己的視力有損害，因此，網頁配色要盡量少用視疲勞度高的色調。一般來說，高明度、高純度的顏色刺激強度高，疲勞度也大。如左圖所示的藍顏色只是用來點綴畫面，視覺絲毫沒有感覺到有負擔，而右圖同樣是黑色背景，則采用2種高亮度的色彩作為點綴，大大激發了瀏覽者的探究的欲望。第四章4.3網頁配色原則

色彩是頁面設計中重要的設計元素之一。優秀的色彩搭配不僅可以吸引用戶的注意力，同時還可以為頁面的設計添彩，統一設計風格，從視覺上就給用戶帶去良好的體驗。

不同的色彩具有不同的情感。心理學研究表明，暖色可以引起瞳孔放大，心臟脈搏跳動加快，心情興奮；冷色可以引起眼睛的淡漠感覺，心臟、脈搏跳動平穩，心情沉靜，有收縮、寒冷的感覺；中間色（介于暖色與冷色之間）處于興奮和冷靜之間，眼睛不過于疲勞，給人以柔和、寧靜與舒適的感覺，如左圖與眾不同的色彩界面與右圖冷暖色區分清晰，不同的顏色會給瀏覽者不同的心理感受。第四章4.3.1三色搭配原則

三色搭配原則是指一個設計作品中，顏色應保持在三種之內。同樣，對于界面設計中的主要色彩最好不要超過三種（通常擁有獨立色值的算一個），可以表達出主題即可。因為太多的顏色會讓頁面變得雜亂無章，干擾到主要信息。1.主色

主色是決定畫面的風格趨向的色彩，通常情況下，主色約占75%。主色并不一定只能有一個顏色，它還可以是一種色調，最好選擇同色系或鄰近色中的1~3個，要保持協調。通常情況下，主色調主要是由界面中整體或中心圖像所形成的中等面積的色塊，它在界面的空間中具有重要的作用，通常形成界面的視覺中心。通常認為飽和度高的顏色一般為主色；深顏色一般為主色；面積大的一般為主色；視覺中心所呈現的一般為主色。第四章

2.輔助色

主色調與輔助色共同構成界面的標準色彩，起到烘托主色調、支持主色調以及融合主色調的作用。輔助色在整體的畫面中應該起到平衡主色調的視覺效果和減輕用戶所產生的視覺疲勞，起到一定視覺分散，使畫面豐富，更具細節的作用，輔助色約占20%。輔助色也不一定只能有一個顏色，也可以多色相輔助。同類色作為輔助色，畫面較柔和，整體顯得和諧統一，如上圖所示。鄰近色作為輔助色，會產生高度和色相對比，畫面較豐富，如中圖所示；對比色或是互補色作為輔助色，畫面色彩層次豐富，主色更鮮明，如下圖所示；也可以充分利用背景色，正確運用背景色會讓畫面更有特色。另外也可使用輔助圖，輔助畫面、裝飾畫面，但點綴圖案通常為1~2種，否則容易花哨或者分散主題。第四章

3.點睛色

點睛色或點綴圖主要用于引導閱讀，裝飾畫面，營造獨特的畫面風格，約占5%。為了營造出生動的頁面氛圍，點睛色應該選擇較鮮艷的顏色，在少數情況下，為了特別營造低調柔和的整體氛圍，則點綴色還是可以選用與背景色接近的顏色，如左圖點睛色與背景強烈反差與右圖點綴色與背景相近二者對比效果。第四章

1.色彩心理暗示

研究表明，色彩心理受個人認知影響。社會因素中，如性別也對顏色如何被感知有一定影響作用。進一步研究表明，不僅是顏色自身含義的影響，也是關于在使用中如何讓用戶恰當的感知到用在品牌上的顏色含義。因此色彩及心理學是相互關聯的，但它們又是如何作用于網頁界面設計之上呢？

首先看一下色彩在心理暗示的意義：

⑴黃色：過度耀眼會讓人討厭，有警示的寓意（交通法規中常用），但兒童非常喜歡這個顏色；

②橘色：溫暖而不危險，與能量有關（飲料、運動、健身），兒童也同樣喜歡這個顏色；

⑶紅色：提示操作、興奮、沖動、血腥，象征激情和理想的時尚／化妝品牌，交友網站和食物使用較多（如麥當勞、肯德基）

⑷紫色：代表奢華、典雅、溫柔、女性，只有在暗色系的紫色才有一些恐怖灰暗的聯想；

⑸黑色：代表上等的、漂亮的、傳統的、團體的、企業的、優秀、卓越等

⑹綠色：代表自然、能提升幸福感、健康產品、道德活動、新理念、新觀點；

⑺藍色：代表智力理性，深藍色與奢侈品有關聯，淺藍與清新的產品和想法有關，藍色有利于抑制食欲，所以幾乎食品都不用藍色系做廣告；

⑻粉色：用來吸引女性用戶的注意力，一般對喜愛甜食的人比較有刺激效果；

⑼白色：代表純凈、涼爽、冷靜和現代；

第四章

2.色彩的大小位置

主要標準色使用大面積色塊，大塊的色彩在烘托氣氛與主題方面較為穩定，而小塊的色彩則常用于點綴，起到豐富畫面的作用。另外，色彩的搭配需要統一顏色，在不同的頁面框架中盡可能統一顏色，從而給用戶一種非常統一的印象，讓用戶一目了然，記憶深刻。

3.在相似中找呼應色彩

想要讓界面變得更有節奏感，可以運用相似色去進行色彩呼應。首先需要定義色彩的基調，找到最主要的色彩。如果在設計中采用單一顏色進行設計，使用大小關系區分功能的主次關系，雖然視覺上較為平衡但顯得比較單調；然后在主要功能上使用補色對比，以此讓用戶聚焦在主要功能上。切記不要采用過多色彩，否則會使得界面沒有秩序感，給用戶帶來一種混亂感。

在色彩搭配問題上，不僅僅是聚焦用戶的注意力，還要講究顏色的呼應性，同類色彩就會彼此呼應，從而使得聚焦點聚集在主要的點上，如圖所示。第四章

4.4界面設計配色技巧界面中的色彩運用可以體現出界面的風格和所展現的主題，具有引導作用。同時，可以表達出網站的情感和意圖，向用戶說明此網站的意義和存在價值。還可以體現出網站的針對人群，更加快捷、方便為大眾所用。1.使用鄰近色

這里所說的鄰近色，就是在色環中向鄰近和靠近的顏色，可以是兩兩相靠的顏色，也可以是相隔幾個色