網(wǎng)頁(yè)美工-網(wǎng)頁(yè)色彩與布局設(shè)計(jì)-第4章-網(wǎng)頁(yè)要素的色彩設(shè)計(jì)課件

ColoringDesignofWebElements第四章網(wǎng)頁(yè)要素

的色彩設(shè)計(jì)文字的色彩設(shè)計(jì)The

ColorDesignofTheText1網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO2Banner的色彩設(shè)計(jì)The

ColorDesignofBanner3導(dǎo)航欄菜單設(shè)計(jì)NavigationBar

ColorDesign4目錄CONTENTS小標(biāo)題設(shè)計(jì)LittleHeadingDesign52文字的色彩設(shè)計(jì)文字與背景的色彩搭配文字與圖片的色彩搭配1PART3文字的色彩設(shè)計(jì)The

ColorDesignofTheText4.1.文字的色彩設(shè)計(jì)

在網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)者可以為文字、文字鏈接、已訪問(wèn)鏈接和當(dāng)前活動(dòng)鏈接選用各種顏色。

顏色的運(yùn)用除了能夠起到強(qiáng)調(diào)整體文字中特殊部分的作用之外，對(duì)于整個(gè)文案的情感表達(dá)也會(huì)產(chǎn)生影響。44.1.1文字與背景的色彩搭配

在上面我們?cè)v到背景色的應(yīng)用，在這里還有一個(gè)影響背景色色彩的主要因素，那就是網(wǎng)頁(yè)中的文字應(yīng)用。在設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的背景色時(shí)，必然要考慮到背景色的用色與前景文字色彩的搭配問(wèn)題。圖4-1背景色與文字的搭配文字的色彩設(shè)計(jì)The

ColorDesignofTheText54.1.1文字與背景的色彩搭配

在網(wǎng)頁(yè)設(shè)計(jì)中，文字可以根據(jù)網(wǎng)頁(yè)的不同類(lèi)型、不同功能、不同人群進(jìn)行創(chuàng)意設(shè)計(jì)，夸張文字的造型，對(duì)文字進(jìn)行變形等等都屬于對(duì)文字的創(chuàng)意設(shè)計(jì)。圖4-2文字創(chuàng)意設(shè)計(jì)(1)文字的色彩設(shè)計(jì)The

ColorDesignofTheText64.1.1文字與背景的色彩搭配

文字使用明亮的紅色，可以放大文字，使文字在網(wǎng)頁(yè)中占有一定的比例，再加上文字的陰影效果，更好地突出文字和網(wǎng)頁(yè)主題，表現(xiàn)網(wǎng)頁(yè)的風(fēng)格特點(diǎn)。圖4-3文字創(chuàng)意設(shè)計(jì)(2)文字的色彩設(shè)計(jì)The

ColorDesignofTheText74.1.1文字與背景的色彩搭配

如果網(wǎng)站的配色主題凝重、嚴(yán)肅，則不宜使用彩色的文字。黑色、白色或灰色的文字可能更適合畫(huà)面氣氛，如圖4-4所示。

如圖4-5所示AGATHA網(wǎng)站主頁(yè)，對(duì)比效果特別強(qiáng)烈，畫(huà)面中的綠色調(diào)顏色與畫(huà)面中的動(dòng)畫(huà)起到突出強(qiáng)調(diào)、吸引讀者的作用。圖4-4AGATHA網(wǎng)站鏈接頁(yè)文字的色彩設(shè)計(jì)The

ColorDesignofTheText圖4-5AGATHA網(wǎng)站主頁(yè)84.1.2.文字與圖片的色彩搭配

①文字周?chē)谋尘氨M量單純化，如圖4-6所示，背景幾乎采用了單色。

②圖片與文字對(duì)比盡量明顯，易于識(shí)別，

通常情況下，淺色圖片配深色文字，深色背景配淺色文字，如圖4-7所示，深淺對(duì)比明顯。

③文字與背景圖片對(duì)比較弱不易識(shí)別時(shí)，

或圖像元素較為復(fù)雜時(shí)，可采用其他色彩襯托文字的方式強(qiáng)化與圖片的對(duì)比，如圖4-8、圖4-9所示。圖4-6背景簡(jiǎn)潔圖4-7深淺搭配圖4-8黑色背景襯托文字圖4-9色塊背景襯托文字文字的色彩設(shè)計(jì)The

ColorDesignofTheText94.1.2.文字與圖片的色彩搭配

①當(dāng)遇到的圖片背景無(wú)論是復(fù)雜的，或是比較簡(jiǎn)潔的，在為圖片搭配文字時(shí)，除了主體圖像外，要盡可能將背景圖片處理成簡(jiǎn)潔、單純的形式，避免喧賓奪主，從而保證文字的表現(xiàn)力。圖4-10folietto網(wǎng)站圖4-10folietto網(wǎng)站文字的色彩設(shè)計(jì)The

ColorDesignofTheText104.1.2.文字與圖片的色彩搭配

②如果圖片的背景比較復(fù)雜，又不可以進(jìn)行較大改動(dòng)時(shí)，要盡量把文字的字號(hào)加大，同時(shí)要放在與自身色彩對(duì)比較強(qiáng)的位置上，使文字易于識(shí)別，如圖4-11所示。圖4-11balboapark網(wǎng)站文字的色彩設(shè)計(jì)The

ColorDesignofTheText114.1.2.文字與圖片的色彩搭配

③還可以用多種色彩顯示文字，以適應(yīng)背景圖片，提高對(duì)比度。既可以用白色和黑色顯示文字，也可以用其他色彩顯示文字，但要與背景圖區(qū)分開(kāi)來(lái)，還要注意頂部通欄圖片上的文字與圖片的對(duì)比關(guān)系，如圖4-12所示。圖4-12lunaparksydney網(wǎng)站文字的色彩設(shè)計(jì)The

ColorDesignofTheText12網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)LOGO制作要素網(wǎng)絡(luò)LOGO的形式2PART網(wǎng)絡(luò)LOGO的色彩形式13網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO4.2.1LOGO制作要素

LOGO的應(yīng)用一直是CIS導(dǎo)入的基礎(chǔ)和最直接的表現(xiàn)形式，其重要性是不言而喻的，通過(guò)對(duì)標(biāo)識(shí)的識(shí)別、區(qū)別、引發(fā)聯(lián)想、增強(qiáng)記憶，促進(jìn)被標(biāo)識(shí)體與其對(duì)象的溝通與交流，從而樹(shù)立并保持對(duì)被標(biāo)識(shí)體的認(rèn)知、認(rèn)同，達(dá)到高效、提高認(rèn)知度、美譽(yù)度的效果。144.2.1LOGO制作要素

1.識(shí)別性

關(guān)于識(shí)別性要求必須容易識(shí)別，易記憶。這就要做到無(wú)論是從色彩還是構(gòu)圖上一定要講究簡(jiǎn)單。

2.特異性

所謂特異性就是要與其他的LOGO有區(qū)別，要有自己的特性，以區(qū)別于其它LOGO。如圖4-13至4-18所示蘋(píng)果LOGO的變化。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO154.2.1LOGO制作要素網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO圖4-16蘋(píng)果LOGO的變化（4）圖4-17蘋(píng)果LOGO的變化（5）

圖4-18蘋(píng)果LOGO的變化（6）圖4-13蘋(píng)果LOGO的變化（1）圖4-14蘋(píng)果LOGO的變化（2）

圖4-15蘋(píng)果LOGO的變化（3）164.2.1LOGO制作要素

3.內(nèi)涵性

設(shè)計(jì)LOGO一定要有它自身的含義，這就要求LOGO必須有自己的象征意義。如圖4-19湧祥珠寶LOGO左側(cè)是抽象的羊頭，右側(cè)是抽象的魚(yú)尾，取吉祥如意、年年有魚(yú)之意，正面看又是一塊翡翠的掛墜形象，又像傳統(tǒng)如意的頭部紋理，充分體現(xiàn)了行業(yè)特征。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO圖4-19湧祥珠寶LOGO174.2.1LOGO制作要素

4.法律意識(shí)

關(guān)于LOGO的法律意識(shí)一定要注意敏感的字樣、形狀和語(yǔ)言。

5.整體形象規(guī)劃（結(jié)構(gòu)性）

LOGO不同的結(jié)構(gòu)會(huì)給人不同的心理意識(shí)，就像水平線給人的感覺(jué)是平緩、穩(wěn)重、延續(xù)和平靜，豎線給人的感覺(jué)是高、直率、輕和浮躁感，點(diǎn)給人的感覺(jué)是擴(kuò)張或收縮，容易引起人的注意等。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO184.2.2網(wǎng)絡(luò)LOGO形式

網(wǎng)絡(luò)LOGO的設(shè)計(jì)中，大量的采用合成文字的設(shè)計(jì)方式，如YAHOO，AMAZON等的文字LOGO和國(guó)內(nèi)幾乎所有ISP，這一方面是由于網(wǎng)頁(yè)寸屏寸金的制約，要求LOGO的尺寸要盡可能的小；另一方面最主要的是網(wǎng)絡(luò)的特性，決定了僅靠對(duì)LOGO產(chǎn)生短暫清晰的記憶，通過(guò)低成本大量反復(fù)瀏覽，即可產(chǎn)生對(duì)LOGO的印象記憶。通?？梢苑譃橐韵聨最?lèi)：網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO194.2.2網(wǎng)絡(luò)LOGO形式

1.以字符為主的LOGO

這類(lèi)LOGO比較常見(jiàn)，其特點(diǎn)是簡(jiǎn)潔大方、識(shí)別性較高。如圖4-20所示Sony中國(guó)的網(wǎng)站，其LOGO的構(gòu)成以字符為主，置于網(wǎng)頁(yè)的左上角，清晰可見(jiàn)。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO圖4-20Sony中國(guó)的網(wǎng)站20

2.字符與圖形結(jié)合的LOGO

字符與圖形二者結(jié)合會(huì)產(chǎn)生一種強(qiáng)烈的現(xiàn)代感和視覺(jué)沖擊力，容易給瀏覽者留下深刻的記憶。如圖4-21所示福特汽車(chē)中國(guó)網(wǎng)站，在字符基礎(chǔ)上增加了圓形輔助圖形，形成了一種求全、求滿、求圓的心理特征。圖4-22所示同樣形式的LOGO，則放置在居中位置，幾條弧線與LOGO相呼應(yīng)，醒目而大方。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO4.2.2網(wǎng)絡(luò)LOGO形式21網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO4.2.2網(wǎng)絡(luò)LOGO形式圖4-22Montere網(wǎng)站圖4-21Ford汽車(chē)中國(guó)網(wǎng)站22

以圖形為主的LOGO大多以卡通形象作為標(biāo)志，易于識(shí)別，印象深刻，使用此類(lèi)標(biāo)志的網(wǎng)站一般在內(nèi)容上會(huì)與LOGO的卡通形象相吻合，如圖4-23所示，這是一個(gè)運(yùn)用FLASH動(dòng)畫(huà)的網(wǎng)站，網(wǎng)站標(biāo)志與網(wǎng)頁(yè)內(nèi)容相吻合，動(dòng)畫(huà)的運(yùn)用使畫(huà)面充滿動(dòng)感。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO4.2.3以圖形為主的LOGO圖4-23BadMonkeyStudios網(wǎng)站23①符合國(guó)際標(biāo)準(zhǔn)②精美、獨(dú)特。③與網(wǎng)站的整體風(fēng)格相融。④能夠體現(xiàn)網(wǎng)站的類(lèi)型、內(nèi)容和風(fēng)格。⑤在最小的空間盡可能的表達(dá)出整個(gè)網(wǎng)站。網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO4.2.3以圖形為主的LOGO

如圖4-24、圖4-25所示，不用類(lèi)型的網(wǎng)頁(yè)中，LOGO的設(shè)計(jì)也不同，在造型和配色方面都有著較大的差別。24LOGO常用的顏色為三原色（紅、黃、藍(lán)），這三種顏色純度比較高，比較的亮麗，更容易吸引用戶(hù)的眼球。網(wǎng)頁(yè)中的LOGO有多個(gè)色彩運(yùn)用的技巧，其中包括：網(wǎng)頁(yè)LOGO的色彩設(shè)計(jì)The

ColorDesignofWebLOGO4.2.3網(wǎng)絡(luò)LOGO的色彩運(yùn)用

①基色要相對(duì)穩(wěn)定；

②強(qiáng)調(diào)色彩的形式感，比如重色塊、線條的組合等等；

③強(qiáng)調(diào)色彩的記憶感和感情規(guī)律，比如黃色代表富麗、明快，橙紅給人溫暖、熱烈感，藍(lán)色、紫色、綠色使人涼爽、沉靜，茶色、熟褐色令人聯(lián)想到濃郁的香味；

④合理使用色彩的對(duì)比關(guān)系，色彩的對(duì)比能產(chǎn)生強(qiáng)烈的視覺(jué)效果，而色彩的調(diào)和則構(gòu)成空間層次；

⑤重視色彩的注目性。因此，在設(shè)計(jì)一個(gè)網(wǎng)頁(yè)中LOGO用色時(shí)，要考慮到以上的配色技巧，設(shè)計(jì)出具有獨(dú)特魅力的LOGO。25色彩的構(gòu)成原理述ThePrincipleofColorComposition

如圖4-26所示的是國(guó)外一個(gè)社交性的網(wǎng)頁(yè)，網(wǎng)頁(yè)中的LOGO運(yùn)用三原色紅、黃、藍(lán)三個(gè)色塊，由這三個(gè)色塊組成一個(gè)三角形，寓意著網(wǎng)頁(yè)的真實(shí)性、可信性，三原色也體現(xiàn)了LOGO色彩運(yùn)用技巧之一的基色要相對(duì)穩(wěn)定。

如圖4-27所示的是國(guó)外個(gè)人工作室的網(wǎng)頁(yè)，網(wǎng)頁(yè)中的LOGO設(shè)計(jì)充分運(yùn)用色彩形式感的技巧，運(yùn)用黑色的色塊和線條來(lái)構(gòu)成整個(gè)LOGO，具有創(chuàng)意。圖4-26基色穩(wěn)定的LOGO設(shè)計(jì)圖4-27色彩形式感的LOGO設(shè)計(jì)4.2.3網(wǎng)絡(luò)LOGO的色彩運(yùn)用26色彩的構(gòu)成原理述ThePrincipleofColorComposition4.2.3網(wǎng)絡(luò)LOGO的色彩運(yùn)用圖4-282016年里約奧運(yùn)會(huì)的谷歌網(wǎng)頁(yè)LOGO圖4-30色彩注目的LOGO設(shè)計(jì)圖4-29對(duì)比色彩的LOGO設(shè)計(jì)27Banner的色彩設(shè)計(jì)Banner的作用Banner的形式3PARTBanner的設(shè)計(jì)方法28Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.1.Banner的作用

Banner，中文意思為旗幟或網(wǎng)幅，是一種可以由文本、圖像和動(dòng)畫(huà)相結(jié)合而成的網(wǎng)頁(yè)欄目。Banner的主要作用是顯示網(wǎng)站的各種廣告，包括網(wǎng)站自身產(chǎn)品的廣告和與其他企業(yè)合作放置的廣告，同時(shí)又可美化網(wǎng)站。如圖4-31所示Aekyung網(wǎng)站，圖4-32所示Ahmaibao網(wǎng)站。圖4-31Aekyung網(wǎng)站294.3.1.Banner的作用圖4-32Ahmaibao網(wǎng)站Banner的色彩設(shè)計(jì)The

ColorDesignofBanner30圖4-34Alesya網(wǎng)站Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.2.Banner的形式圖3-33Residenza網(wǎng)站通常情況下，Banner的外形都是規(guī)則的矩形，特別是在眾多商業(yè)網(wǎng)站中，通常都會(huì)遵循標(biāo)準(zhǔn)定義Banner的尺寸，方便用戶(hù)設(shè)計(jì)統(tǒng)一的Banner，應(yīng)用在所有網(wǎng)站上，如圖4-33Residenza網(wǎng)站。31

Banner，是指頁(yè)面當(dāng)中的橫幅廣告，一個(gè)表現(xiàn)商家廣告內(nèi)容的圖片，放置在廣告商的網(wǎng)頁(yè)界面上，是互聯(lián)網(wǎng)廣告中最基本的廣告形式，其尺寸是728*90像素，或320*50像素等等，如圖4-35所示。Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.2.Banner的形式圖4-35banner尺寸示意圖圖4-36網(wǎng)頁(yè)中的banner32

網(wǎng)頁(yè)中的Banner有多種設(shè)計(jì)方法，其中包括正三角形、倒三角形、對(duì)角線和擴(kuò)散式等途徑來(lái)設(shè)計(jì)BANNER。

圖4-37banner的正三角形運(yùn)用Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.3.Banner的設(shè)計(jì)方法

1.正三角形構(gòu)圖形式

該手法可以使BANNER展示立體感強(qiáng)烈，重點(diǎn)突出，構(gòu)圖穩(wěn)定自然，空間感強(qiáng)，此類(lèi)構(gòu)圖方式給人安全感和可靠感。如圖4-37所示的網(wǎng)頁(yè)中，BANNER與LOGO的位置排列正好組成一個(gè)正三角形，表現(xiàn)網(wǎng)頁(yè)的可信度和真實(shí)性，給用戶(hù)一種穩(wěn)定自然的視覺(jué)效果。33

2.倒三角形構(gòu)圖形式

該手法突出強(qiáng)烈空間立體感的同時(shí)，構(gòu)圖活潑且具有動(dòng)感，通過(guò)不穩(wěn)定的構(gòu)圖方式，激發(fā)創(chuàng)意感，給人運(yùn)動(dòng)的感覺(jué)。如圖4-38所示的網(wǎng)頁(yè)中，BANNER中的字符和圖片利用倒三角形構(gòu)圖形式，使得網(wǎng)頁(yè)充滿律動(dòng)形。圖4-38banner的倒三角形運(yùn)用Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.3.Banner的設(shè)計(jì)方法34

3.對(duì)角線構(gòu)圖形式

該手法能夠改變常規(guī)的排版方式，適合組合展示，比重相對(duì)平衡，構(gòu)圖上活潑且穩(wěn)定，且有較強(qiáng)的視覺(jué)沖擊力，特別適合運(yùn)動(dòng)型展示。如圖4-39所示的網(wǎng)頁(yè)中，BANNER的設(shè)計(jì)體現(xiàn)對(duì)角線構(gòu)圖的運(yùn)用，使得網(wǎng)頁(yè)具有創(chuàng)新性。圖4-39banner的對(duì)角線構(gòu)圖運(yùn)用Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.3.Banner的設(shè)計(jì)方法35

4.擴(kuò)散式構(gòu)圖形式

該手法通過(guò)運(yùn)用射線、光暈等輔助圖形對(duì)圖片主體進(jìn)行突出，構(gòu)圖活潑有重點(diǎn)，次序感強(qiáng)，利用透視的方式圍繞口號(hào)進(jìn)行表達(dá)，給人以深刻的視覺(jué)印象。如圖4-40所示的網(wǎng)頁(yè)中，BANNER中運(yùn)用燈光的擴(kuò)散效果使得網(wǎng)頁(yè)層次分明，吸引用戶(hù)眼球。圖4-40banner的擴(kuò)散式構(gòu)圖運(yùn)用Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.3.Banner的設(shè)計(jì)方法36

重點(diǎn)要注意的是，Banner的色彩不要過(guò)于醒目。有些網(wǎng)頁(yè)廣告的設(shè)計(jì)要求使用比較夸張的色彩來(lái)吸引用戶(hù)眼球，希望由此提升Banner的關(guān)注度。圖4-41麥當(dāng)勞網(wǎng)頁(yè)的banner設(shè)計(jì)Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.4.Banner的色彩設(shè)計(jì)37

如圖4-42所示星巴克的官方網(wǎng)頁(yè)，其中主頁(yè)的Banner運(yùn)用星巴克傳統(tǒng)的黑色作為背景，利用光暈來(lái)引導(dǎo)用戶(hù)的視覺(jué)中心，并且運(yùn)用與綠色相對(duì)立的紅色，吸引用戶(hù)的視線，背景中的文字采用白色，在黑色背景的襯托之下，使得用戶(hù)的最終視點(diǎn)停留在文字之上，更好的了解網(wǎng)頁(yè)中信息。圖4-42星巴克網(wǎng)頁(yè)的banner設(shè)計(jì)Banner的色彩設(shè)計(jì)The

ColorDesignofBanner4.3.4.Banner的色彩設(shè)計(jì)38導(dǎo)航菜單欄4PART39

導(dǎo)航欄是索引網(wǎng)站內(nèi)容、幫助用戶(hù)快速訪問(wèn)所需內(nèi)容的輔助工具。根據(jù)網(wǎng)站內(nèi)容，一個(gè)網(wǎng)頁(yè)可以設(shè)置多個(gè)導(dǎo)航欄，還可以設(shè)置多級(jí)的導(dǎo)航欄以顯示更多的導(dǎo)航內(nèi)容。

導(dǎo)航欄內(nèi)容包含的是實(shí)現(xiàn)網(wǎng)站功能的按鈕或鏈接，其項(xiàng)目的數(shù)量不宜過(guò)多。設(shè)計(jì)合理的導(dǎo)航欄可以有效地提高用戶(hù)訪問(wèn)網(wǎng)站的效率。導(dǎo)航欄菜單設(shè)計(jì)NavigationBar

ColorDesign4.4.導(dǎo)航欄菜單設(shè)計(jì)40

1.響應(yīng)式導(dǎo)航欄菜單色彩運(yùn)用解析

響應(yīng)式設(shè)計(jì)是當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)的流行趨勢(shì)，針對(duì)不同的設(shè)備，提供不同的布局解決方案。響應(yīng)式設(shè)計(jì)的難點(diǎn)是導(dǎo)航欄菜單在設(shè)計(jì)之前，要謀劃好導(dǎo)航欄菜單在手機(jī)、平板、桌面上的布局。

圖4-44所示，網(wǎng)頁(yè)的導(dǎo)航欄菜單利用明快、鮮亮的色彩，加強(qiáng)了自身的視覺(jué)效果，一下子抓住用戶(hù)的眼球，讓人忍不住瀏覽此網(wǎng)頁(yè)的信息。

如圖4-45所示的網(wǎng)頁(yè)中，巧妙地將導(dǎo)航欄放在網(wǎng)頁(yè)的中間位置，利用不同色彩的小色塊進(jìn)行組合排列，再利用白色的文字加以區(qū)分，更為巧妙的是當(dāng)鼠標(biāo)滑過(guò)文字下面的小色塊時(shí)，會(huì)出現(xiàn)比之前更加鮮明的色彩，很好體現(xiàn)了響應(yīng)式設(shè)計(jì)的同時(shí)，展現(xiàn)出網(wǎng)頁(yè)與用戶(hù)的交互性。導(dǎo)航欄菜單設(shè)計(jì)NavigationBar

ColorDesign4.4.導(dǎo)航欄菜單設(shè)計(jì)41導(dǎo)航欄菜單設(shè)計(jì)NavigationBar

ColorDesign4.4.導(dǎo)航欄菜單設(shè)計(jì)圖4-45導(dǎo)航欄的響應(yīng)式設(shè)計(jì)(2)圖4-44導(dǎo)航欄的響應(yīng)式設(shè)計(jì)(1)42導(dǎo)航欄菜單設(shè)計(jì)NavigationBar

ColorDesign圖4-46全屏導(dǎo)航欄設(shè)計(jì)(1)

4.4.導(dǎo)航欄菜單設(shè)計(jì)2.全屏式導(dǎo)航欄菜單色彩運(yùn)用解析

當(dāng)導(dǎo)航是整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的核心的時(shí)候，頁(yè)面會(huì)是怎么樣的？

只要合理地策劃整合，全屏導(dǎo)航其實(shí)是一種非常有效的技術(shù)，

用戶(hù)可以更加便捷地切換到不同的頁(yè)面，內(nèi)容成為更加觸手可及的東西。

如圖4-46所示、圖4-47所示的網(wǎng)頁(yè)中有若干個(gè)導(dǎo)航欄，便于用戶(hù)更徹底地探索這個(gè)網(wǎng)站，同時(shí)也強(qiáng)化了品牌識(shí)別。圖4-47全屏導(dǎo)航欄設(shè)計(jì)(2)43導(dǎo)航欄菜單設(shè)計(jì)NavigationBar

ColorDesign4.4.導(dǎo)航欄菜單設(shè)計(jì)圖4-49垂直導(dǎo)航欄設(shè)計(jì)(2)3.垂直式導(dǎo)航欄菜單色彩運(yùn)用解析

最流行的兩種這類(lèi)排版，一種是使用漢堡菜單的隱藏式的導(dǎo)航菜單，另外一種使用的是固定的側(cè)邊欄來(lái)承載菜單，它在色彩運(yùn)用上一般使用與網(wǎng)頁(yè)色調(diào)相柔和、協(xié)調(diào)的顏色，既能起到很好的交互作用，又不喧賓奪主。圖4-48垂直導(dǎo)航欄設(shè)計(jì)(1)44小標(biāo)題設(shè)計(jì)5PART小標(biāo)題的字體設(shè)計(jì)原則小標(biāo)題的色彩設(shè)計(jì)45小標(biāo)題設(shè)計(jì)LittleHeadingDesign4.5小標(biāo)題設(shè)計(jì).

小標(biāo)題是對(duì)一個(gè)網(wǎng)頁(yè)的局部概括，一般來(lái)說(shuō)，網(wǎng)頁(yè)界面上的一些小標(biāo)題就是對(duì)網(wǎng)頁(yè)的概括和總結(jié)。因此小標(biāo)題在網(wǎng)頁(yè)設(shè)計(jì)中起了畫(huà)龍點(diǎn)睛的作用，獲取瞬間的打動(dòng)用戶(hù)的效果，經(jīng)常是運(yùn)用文學(xué)的手法，以生動(dòng)精彩的短句和一些形象夸張的手法來(lái)吸引用戶(hù)的興趣。不僅要爭(zhēng)取用戶(hù)的注意力，還要爭(zhēng)取到用戶(hù)的心理。46小標(biāo)題設(shè)計(jì)LittleHeadingDesign4.5.1小標(biāo)題的字體設(shè)計(jì)原則.

1.使用細(xì)字體時(shí)，要注意保持字體與背景的對(duì)照關(guān)系，以保證可讀性和清晰性；

2.使用細(xì)字體時(shí)，要合理調(diào)整字體大小，太小的字體不引人注目，

大一點(diǎn)的字體更容易閱讀；

3.還要考慮到不同字體之間的互相作用，以求達(dá)成較好的視覺(jué)效果，保持一致性。

如圖4-50所示的網(wǎng)頁(yè)中，對(duì)小標(biāo)題的三條運(yùn)用原則利用的十分充分。

對(duì)于小標(biāo)題的設(shè)計(jì)原則有以下三個(gè)方面47小標(biāo)題設(shè)計(jì)LittleHeadingDesign4.5.2小標(biāo)題的色彩設(shè)計(jì)

1.背景與小標(biāo)題的色彩關(guān)系

如圖4-51所示，在此網(wǎng)頁(yè)中，利用棕色調(diào)為主的水彩圖片作為背景，體現(xiàn)出色調(diào)可愛(ài)豐富的兒童風(fēng)格。在小標(biāo)題的用色方面也緊靠?jī)和L(fēng)格，利用色彩比較明快、鮮艷的顏色，在展現(xiàn)網(wǎng)頁(yè)風(fēng)格的基礎(chǔ)上，同時(shí)又抓住用戶(hù)的眼球，一舉兩得。圖4-51兒童風(fēng)格網(wǎng)頁(yè)的小標(biāo)題設(shè)計(jì)48小標(biāo)題設(shè)計(jì)LittleHeadingDesign4.5.2小標(biāo)題的色彩設(shè)計(jì)圖4-53美食網(wǎng)頁(yè)中的小標(biāo)題設(shè)計(jì)圖4-52汽車(chē)網(wǎng)頁(yè)的小標(biāo)題設(shè)計(jì)49小標(biāo)題設(shè)計(jì)LittleHeadingDesign4.5.2小標(biāo)題的色彩設(shè)計(jì)

2.大標(biāo)題與小標(biāo)題色彩關(guān)系

一般來(lái)說(shuō)，網(wǎng)頁(yè)