(完整版)網(wǎng)頁(yè)設(shè)計(jì)【視覺(jué)篇】--1

1、標(biāo)題:字體: 微軟雅黑粗體字號(hào): 32-36pt顏色: 主題藍(lán)色副標(biāo)題:字體: 微軟雅黑字號(hào): 24pt顏色: 主題灰色網(wǎng)頁(yè)設(shè)計(jì)從界面布局到視覺(jué)表現(xiàn)視覺(jué)表現(xiàn)篇視聽(tīng)元素網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)要點(diǎn)網(wǎng)頁(yè)視覺(jué)風(fēng)格6. 視聽(tīng)元素6.1 文字6.2 圖像6.3 色彩6.4 多媒體6.5 動(dòng)效6.6 案例天貓商城店鋪界面 設(shè)計(jì) 同操作系統(tǒng)都有不同的字體系統(tǒng)，而瀏覽器是用本地系統(tǒng)字庫(kù)顯示頁(yè)面內(nèi)容的，大多數(shù)瀏覽者的系統(tǒng)里只裝有幾種常的字體類型，因此設(shè)計(jì)的特殊字體在瀏覽者的系統(tǒng)里并不一定能看到預(yù)期設(shè)計(jì)效果。視覺(jué)篇6.1.1 字體的選擇6.1 文字在平面設(shè)計(jì)中常以字體被修飾與是否將字體分為襯線字體與非無(wú)襯線字體，襯線字體就是

2、中文里的宋體，英文的Times New Roma，其特點(diǎn)是在字體邊角會(huì)多出一些修飾，可以清晰的分辨出字母和文字，分辨筆劃的起始和終止，適合大段文字正文的閱讀。無(wú)襯線字體則是中文里的黑體、英文的Aril，這種文字看起來(lái)很干凈整齊，同等字號(hào)的字體，無(wú)襯線體視覺(jué)感受更大，因此適合大標(biāo)題顯示襯線字體（左）與非無(wú)襯線字體（右）6.1.2 文字的可讀性 瀏覽器有默認(rèn)的字體設(shè)置對(duì)字體的顯示進(jìn)行了規(guī)范， 但這并不意味著字體就擁有較佳的可讀性。影響文字可讀性有字體樣式、間距這兩大因素。字體樣式間距包括文字的字距、行距等。 字體樣式包括字體的大小，顏色，字體是常規(guī)、還是傾斜或加粗等。 目前，在桌面端網(wǎng)頁(yè)界面中正文

3、大小一般為12、13px，最小不小于11px，小標(biāo)題為14px,大標(biāo)題為16px，最大字體不要超過(guò)18px。由于奇數(shù)字號(hào)顯示在較早版本的瀏覽器中會(huì)出現(xiàn)鋸齒狀，所以經(jīng)常采用偶數(shù)字號(hào)。12px18px16px圖片文字的樣式主要包括常規(guī)、粗體、斜體等。正文中的文字宜采用常規(guī)樣式，標(biāo)題宜采用加粗或斜體樣式。合理的運(yùn)用文字樣式，將更有利于文字的視覺(jué)傳達(dá)，更有利于瀏覽者的閱讀。字距與行距的處理能直接體現(xiàn)設(shè)計(jì)作品的風(fēng)格與品位，也能夠影響讀者的視覺(jué)和心理感受。 行距可以說(shuō)是讓字有了呼吸空間。行距的常規(guī)比例為10:12，即用字10px，則行距12px。一般來(lái)說(shuō)，歐文視情況取1.2-1.5 倍行距，而中文一般公認(rèn)

4、是取1.5 倍行距為宜,適當(dāng)?shù)男芯鄷?huì)形成一條明顯的水平空白條，以引導(dǎo)瀏覽者的目光，而行距過(guò)寬則會(huì)使一行文字失去較好的延續(xù)性。6.1.3 文字編排的藝術(shù)性 如果你需要用一種特殊的字體來(lái)體現(xiàn)你的風(fēng)格，那么特殊字體或藝術(shù)字體最好以圖片的方式置入網(wǎng)頁(yè)。Kim the movi官網(wǎng)字體的地方就是用圖片來(lái)代替的，以保證所有人看到的頁(yè)面是同一效果。但這無(wú)形中增大了網(wǎng)頁(yè)的體積，這樣的圖片多了會(huì)延緩網(wǎng)頁(yè)打開(kāi)速度。6.2.1 圖片的選擇6.2 圖片 不同類別的網(wǎng)站對(duì)圖片的需求各不相同，這主要體現(xiàn)在對(duì)圖片類型的選擇和圖形在界面中的比例大小上。按照?qǐng)D片的獲取方式，其類型大致分為兩類：攝影類與矢量類。 攝影類圖片來(lái)自攝

5、影，圖片能夠直觀地表現(xiàn)主題，側(cè)重于如實(shí)地表現(xiàn)產(chǎn)品本身。因此，電子商務(wù)網(wǎng)站尤其親睞高清的攝影類圖片。 矢量類圖片為圖形軟件繪制，圖片風(fēng)格多變，尺寸大小靈活，具有很強(qiáng)的裝飾性。許多抽象圖形、圖表、圖標(biāo)都屬于矢量類圖片。如mailbakery網(wǎng)站，它使用了大量精致的卡通矢量圖來(lái)宣傳它們定制化郵件的服務(wù)。當(dāng)鼠標(biāo)單擊并切換第一屏下方不同的導(dǎo)航圖標(biāo)時(shí)，圖片區(qū)域就被替換成相應(yīng)的圖片內(nèi)容，令用戶容易理解、過(guò)目難忘。 現(xiàn)如今無(wú)論是攝影圖片還是矢量圖片，使用大圖作為網(wǎng)頁(yè)背景越來(lái)越受歡迎，有的甚至全屏圖片。如Martina Sperl家居網(wǎng)站首頁(yè)將整個(gè)背景都鋪滿了大圖，全局導(dǎo)航固定在界面右側(cè)，其目的是讓用戶完全沉浸

6、在美好的家居生活中的. 雖然適當(dāng)使用攝影圖片來(lái)做網(wǎng)站背景可以提升網(wǎng)頁(yè)的視覺(jué)效果，但圖片加載還是多少會(huì)影響網(wǎng)站速度，因此這種布局較適用于結(jié)構(gòu)簡(jiǎn)單的品牌企業(yè)網(wǎng)站、時(shí)尚類網(wǎng)站、專題網(wǎng)站。6.2.2 格式與優(yōu)化 網(wǎng)站中的圖片的格式類型按放大后是否能清晰顯示的維度可分為位圖格式與矢量圖格式兩種。 位圖格式是網(wǎng)頁(yè)設(shè)計(jì)中最常用的圖片格式類型，圖片有自己固定的尺寸大小，放大后不能清晰顯示。如果將一個(gè)網(wǎng)頁(yè)“另存為”，會(huì)看到文件夾中保存大量的Jpg、Png、Gif各種圖片格式。各類圖片格式JpgPngGif Jpg是一種有損壓縮格式，能夠?qū)D像壓縮在很小的儲(chǔ)存空間 ,以 24 位顏色存儲(chǔ)單個(gè)光柵圖像，支持224（

7、約1670萬(wàn)）種色彩，非常適合作為儲(chǔ)存像素色彩豐富的圖片、例如照片等等，這些圖片即使有些微的失真也不容易輕易的察覺(jué)。Jpg 并不適合用來(lái)儲(chǔ)存線條圖、圖標(biāo)或文字等等有清晰邊緣的圖片，各類瀏覽器均支持。jpg格式圖片JpgPngGif Gif 使用無(wú)損壓縮格式，但卻限制了色彩表現(xiàn)能力、能夠有效地節(jié)省檔案尺寸。Gif 只擁有 8 位的顏色深度信息，也就是 2 的 8 次方， 256 色。當(dāng)圖片中的色彩在 256 色以內(nèi)時(shí)，使用 Gif 可以得到相當(dāng)好的輸出質(zhì)量、同時(shí)兼顧了文件大小。因此 Gif 非常適合用來(lái)表現(xiàn)扁平化圖標(biāo)、 線條插畫、文字等部分的輸出。Gif還支持全透明靜態(tài)圖片以及動(dòng)畫圖檔格式，能兼

8、容所有瀏覽器。gif格式的扁平圖標(biāo)先對(duì)比一個(gè)450px*390px的照片圖片切圖輸出為Jpg、Gif兩種格，兩張圖的清晰程度相當(dāng)，但Gif格式中的漸變色呈顆粒狀，文件大小為92.4kb，Jpg格式漸變色過(guò)渡自然，文件大小僅為26.4kb。顯然Jpg格式更適合儲(chǔ)存色彩豐富具有漸變色的照片圖像。Gif-照片色彩鮮艷，漸變色顆粒狀文件大?。?2.4kbJpg-照片色彩鮮艷，漸變色細(xì)膩文件大小：26.4kbJpgPngGif Png 分為 Png-8 以及 Png-24 兩種格式。兩者后面的數(shù)字則是代表這種Png格式最多可以索引和存儲(chǔ)的顏色值?！?”代表2的8次方也就是 256色，Png-8與Gif圖

9、片顯示的特性十分接近。而“24”則代表2的24次方大概有1600多萬(wàn)色，也就是即使遇到色彩豐富的漸變色Png-24也能清晰顯示。JpgPngGif在透明度上Png-8 與 Gif 一樣，支持圖片的完全透明與完全不透明；而Png-24格式支持圖片全透明及半透明顯示。這里的透明圖片類似于ps源文件中的一個(gè)圖層，圖像以外的空間不顯示。全透明與半透明的區(qū)別在于，全透明的alpha值為0，放置網(wǎng)頁(yè)上為一個(gè)完整、不透底的圖；而半透明的alpha值可以任意設(shè)置，如同一個(gè)水印。 雖然Png-8和Png-24同樣支持全透明圖片，但存儲(chǔ)的效果卻大不一樣。JpgPngGifpng 格式圖格式最高支持色彩通道透明支持

10、瀏覽器支持適合的圖片類型Jpg約1670萬(wàn)色支持不透明支持寫實(shí)的攝影圖像或是顏色層次非常豐富的圖像Gif256色支持不透明、全透明支持圖像上顏色較少PngPng-8256色支持不透明、全透明支持圖像上顏色較少Png-24約1670萬(wàn)色支持不透明、全透明、半透明僅高級(jí)瀏覽器支持支持所有靜態(tài)圖形類型三種靜態(tài)的位圖格式屬性特點(diǎn)對(duì)比如下： 其中矢量圖格式的有Svg（Scalable Vector Graphics），其特點(diǎn)一是文件體積小，二是能夠被大量的壓縮，圖片可無(wú)限放大而不失真，能夠?qū)崿F(xiàn)互動(dòng)和濾鏡效果，三是此格式既支持設(shè)計(jì)師在設(shè)計(jì)軟件中設(shè)計(jì)后保存，還支持程序員通過(guò)代碼直接生成圖形。Jpg-圖標(biāo)背景

11、默認(rèn)白色，文件大?。?.06kbGif-圖標(biāo)背景全透明，文件大?。?.68kbjpg格式（左）gif格式（右）如在Illustrator軟件中設(shè)計(jì)一個(gè)200px*200px西瓜的圖標(biāo)，將圖形保存后為Svg格式。Svg儲(chǔ)存格式（上）圖像（左）代碼（右6.2.3 圖像的肌理 肌理，又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。不同的質(zhì)感和肌理，會(huì)使人產(chǎn)生不同的心理感受。6.3.1 色彩的模式6.3 色彩設(shè)計(jì)師最常用的色彩模式有Cmyk，Rgb這兩種。 CMYK是青色（Cyan），洋紅（Magenta）黃色（Yellow），黑色（Black）的縮寫。CMY

12、K色彩是一種依靠反光的色彩模式，它需要由外界光源照射在物體上再反射在我們的眼中，是一種基于印刷的色彩模式。RGB分別是紅(red)，綠（green），藍(lán)（blue）的英文縮寫。RGB是基于發(fā)光體的色彩模式，比如電腦屏幕，電視機(jī)，太陽(yáng)光等。RGB色彩模式給圖像中每一個(gè)RGB分量分配一個(gè)0255范圍 內(nèi)的強(qiáng)度值。 在網(wǎng)頁(yè)上要指定一種顏色，就要使用RGB模式來(lái)確定，方法是分別指定R、G、B三種色彩的強(qiáng)度，最低的強(qiáng)度數(shù)值為 0，最高強(qiáng)度數(shù)值為255，并通常都以16進(jìn)制數(shù)值表示。因此255對(duì)應(yīng)于十六進(jìn)制就是FF，并把三個(gè)數(shù)值依次并列起來(lái) ，以#開(kāi)頭。如R：255，G：255，B：255，其對(duì)應(yīng)的十六進(jìn)制

13、色就是“#ffffff”,也就是白色。6.3.2 色彩的情感 不同的顏色有不同的色彩情感，能傳遞出不同的視覺(jué)印象，大多數(shù)網(wǎng)站都有自己的主色調(diào)，同樣的主色搭配不同比例的輔助色也會(huì)出現(xiàn)不同的心理感受。 紅色是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)，憤怒，熱情，活力的感覺(jué)。紅色在很多文化中代表的是停止的訊號(hào)，用于警告或禁止一些動(dòng)作，很多停止的圖標(biāo)用的是紅色。 橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時(shí)尚的效果。 黃色是所有色相中最能發(fā)光的顏色，給人輕快，透明，輝煌，充滿希望的色彩印象。此外，黃色也是一個(gè)可見(jiàn)度高的色彩，一些警告健康安全和設(shè)備危險(xiǎn)的信號(hào)也選用黃色。 綠色自然中最多的顏色，

14、綠色能夠喚起一種人類對(duì)于自然的本能意識(shí)。綠色代表著通行、準(zhǔn)許通過(guò)的意思，因此很多常用于開(kāi)始按鈕和下載按鈕，還有成功提示頁(yè)面。 藍(lán)色是最具涼爽，清新，專業(yè)的色彩。藍(lán)色天生冷靜，能夠給人以安全感，但是它同樣有著優(yōu)雅和活潑的一面，在很多領(lǐng)域都能用得上它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象天空的色彩:) 紫色是由溫暖的紅色和冷靜的藍(lán)色化合而成，被認(rèn)為是一種優(yōu)雅高檔的色彩，常用于表現(xiàn)商品的奢華和高貴。紫色同時(shí)也是很多藝術(shù)家都喜歡的色彩。紫色智慧想象神秘高雅。6.3.3 色彩組合 色彩對(duì)情感有著巨大的沖擊，色彩的搭配無(wú)窮無(wú)盡，可以玩多彩風(fēng)格，也可以極簡(jiǎn)配色。按照色彩的多少來(lái)分類，大致分為無(wú)色系配色

15、、單色配色、2-3色配色、多色配色三種類型。非彩色的搭配單色配色2-3色配色多種色彩配色 黑白是最基本和最簡(jiǎn)單的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是萬(wàn)能色，可以和任何彩色搭配，也可以幫助兩種對(duì)立的色彩和諧過(guò)渡。如果你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對(duì)不會(huì)太差。velvet網(wǎng)無(wú)色系這個(gè)作品展示頁(yè)是一個(gè)典型的單色設(shè)計(jì)，抽象的圖形使得它看起來(lái)不那么接地氣，而這種獨(dú)特的設(shè)計(jì)美學(xué)可能更容易被那些經(jīng)過(guò)專業(yè)訓(xùn)練的用戶所欣賞。這個(gè)網(wǎng)站是相當(dāng)值得探索也研究的。非彩色的搭配單色配色2-3色配色多種色彩配色 單色配色是指一種顏色與無(wú)色系（黑白灰）搭配，在色彩上進(jìn)行不同的明暗漸變，或是貫穿全站

16、的單一色彩。非彩色的搭配單色配色2-3色配色多種色彩配色 一種主色、一種輔助色，在此基礎(chǔ)上進(jìn)行明度、飽和度變化，構(gòu)成配色方案。主色所占頁(yè)面的面積大、處于視覺(jué)中心位置，而輔助色常常選用主色的互補(bǔ)色或鄰近色。這種或沖突或和諧的配色方案是一種前衛(wèi)又時(shí)尚的網(wǎng)頁(yè)色彩流行趨勢(shì)。還有點(diǎn)綴色一般用飽和度和明度亮的顏色。非彩色的搭配單色配色2-3色配色多種色彩配色（1）選取一個(gè)色系是能統(tǒng)一多種色彩的首要條件。（2）多種色彩對(duì)比適宜還可以通過(guò)降低色彩本身的純度及控制色彩的面積比例來(lái)達(dá)到悅目的效果。而Softwaremill官網(wǎng)同樣用了多個(gè)明快的色彩，但在色彩所占的比例卻十分講究，而且最終統(tǒng)一在了一個(gè)白色的大背景下

17、，時(shí)尚清新。6.4.1 視頻 由于視頻是最強(qiáng)大的可視化工具，能刺激人類的視覺(jué)聽(tīng)覺(jué)多個(gè)感官，因此將網(wǎng)頁(yè)背景設(shè)置為視頻動(dòng)畫的網(wǎng)站也是相當(dāng)受用戶親睞。6.4 多媒體6.4.2 音頻 音頻在網(wǎng)頁(yè)中常與視頻、動(dòng)效搭配使用，雖不是必不可少，卻是一種有效的提示功能，有時(shí)它能讓網(wǎng)站變得更有趣、更討巧的方式如在線新華字典網(wǎng)，用戶查詢完一個(gè)漢字后，可以通過(guò)點(diǎn)擊音頻按鈕學(xué)習(xí)標(biāo)準(zhǔn)的漢字發(fā)音。再如某些個(gè)人博客，插入音樂(lè)彰顯出自己的個(gè)性，但是此時(shí)的音樂(lè)需要注意其播放的靈活性，及音效本身的風(fēng)格是否會(huì)打擾到用戶閱讀網(wǎng)頁(yè)的內(nèi)容信息，若使用不當(dāng)就會(huì)變得畫蛇添足 人的眼睛善于捕捉動(dòng)態(tài)的圖形，因此動(dòng)效在網(wǎng)頁(yè)的信息展示及交互中往往是點(diǎn)睛之筆。從技術(shù)的角度分類可分為gif,flash與程序?qū)崿F(xiàn)的動(dòng)畫。6.5 動(dòng)效6.5.1 gif動(dòng)圖 gif動(dòng)圖在網(wǎng)頁(yè)中不簡(jiǎn)單的小動(dòng)畫，如動(dòng)態(tài)圖標(biāo)、動(dòng)態(tài)表情等。大多數(shù)網(wǎng)站可以通過(guò)單擊右鍵“另存為”而保存其gif動(dòng)圖。如moosend網(wǎng)中多個(gè)圖表信息就是采用的gif動(dòng)畫，所占空間小，還可以直接保存在本地電腦上。6.5.2 flash動(dòng)畫