網(wǎng)頁設(shè)計(jì)【視覺篇】推薦-文檔資料

1、網(wǎng)頁設(shè)計(jì)從界面布局到視覺表現(xiàn)視覺表現(xiàn)篇視覺表現(xiàn)篇視聽元素視聽元素網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺風(fēng)格網(wǎng)頁視覺風(fēng)格6. 視聽元素6.1 文字6.2 圖像6.3 色彩6.4 多媒體6.5 動(dòng)效6.6 案例天貓商城店鋪界面 設(shè)計(jì) 同操作系統(tǒng)都有不同的字體系統(tǒng)，而瀏覽器是用本地系統(tǒng)字庫顯示頁面內(nèi)容的，大多數(shù)瀏覽者的系統(tǒng)里只裝有幾種常的字體類型，因此設(shè)計(jì)的特殊字體在瀏覽者的系統(tǒng)里并不一定能看到預(yù)期設(shè)計(jì)效果。視覺篇6.1.1 字體的選擇字體的選擇6.1 文字在平面設(shè)計(jì)中常以字體被修飾與是否將字體分為襯線字體與非無襯線字體，襯線字體就是中文里的宋體，英文的Times New Roma，其特點(diǎn)是在字體

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

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

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

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

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

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

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

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

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

11、過代碼直接生成圖形。Jpg-圖標(biāo)背景默認(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

12、）黃色（Yellow），黑色（Black）的縮寫。CMYK色彩是一種依靠反光的色彩模式，它需要由外界光源照射在物體上再反射在我們的眼中，是一種基于印刷的色彩模式。RGB分別是紅(red)，綠（green），藍(lán)（blue）的英文縮寫。RGB是基于發(fā)光體的色彩模式，比如電腦屏幕，電視機(jī)，太陽光等。RGB色彩模式給圖像中每一個(gè)RGB分量分配一個(gè)0255范圍 內(nèi)的強(qiáng)度值。 在網(wǎng)頁上要指定一種顏色，就要使用RGB模式來確定，方法是分別指定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ù)值依次并列起來 ，以#開頭

13、。如R：255，G：255，B：255，其對(duì)應(yīng)的十六進(jìn)制色就是“#ffffff”,也就是白色。6.3.2 色彩的情感色彩的情感 不同的顏色有不同的色彩情感，能傳遞出不同的視覺印象，大多數(shù)網(wǎng)站都有自己的主色調(diào)，同樣的主色搭配不同比例的輔助色也會(huì)出現(xiàn)不同的心理感受。 紅色是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)，憤怒，熱情，活力的感覺。紅色在很多文化中代表的是停止的訊號(hào)，用于警告或禁止一些動(dòng)作，很多停止的圖標(biāo)用的是紅色。 橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時(shí)尚的效果。馨，時(shí)尚的效果。 黃色是所有色相中最能發(fā)光的顏色，給人輕快，透明

14、，輝煌，充滿希望的色彩印象。此外，黃色也是一個(gè)可見度高的色彩，一些警告健康安全和設(shè)備危險(xiǎn)的信號(hào)也選用黃色。 綠色自然中最多的顏色，綠色能夠喚起一種人類對(duì)于自然的本能意識(shí)。綠色代表著通行、準(zhǔn)許通過的意思，因此很多常用于開始按鈕和下載按鈕，還有成功提示頁面。 藍(lán)色是最具涼爽，清新，專業(yè)的色彩。藍(lán)色天生冷靜，能夠給人以安全感，但是它同樣有著優(yōu)雅和活潑的一面，在很多領(lǐng)域都能用得上它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象天空的色彩:) 紫色是由溫暖的紅色和冷靜的藍(lán)色化合而成，被認(rèn)為是一種優(yōu)雅高檔的色彩，常用于表現(xiàn)商品的奢華和高貴。紫色同時(shí)也是很多藝術(shù)家都喜歡的色彩。紫色智慧想象神秘高雅。6.3.3

15、 色彩組合色彩組合 色彩對(duì)情感有著巨大的沖擊，色彩的搭配無窮無盡，可以玩多彩風(fēng)格，也可以極簡配色。按照色彩的多少來分類，大致分為無色系配色、單色配色、2-3色配色、多色配色三種類型。非彩色的搭配單色配色2-3色配色多種色彩配色 黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是萬能色，可以和任何彩色搭配，也可以幫助兩種對(duì)立的色彩和諧過渡。如果你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對(duì)不會(huì)太差。velvet網(wǎng)無色系這個(gè)作品展示頁是一個(gè)典型的單色設(shè)計(jì)，抽象的圖形使得它看起來不那么接地氣，而這種獨(dú)特的設(shè)計(jì)美學(xué)可能更容易被那些經(jīng)過專業(yè)訓(xùn)練的用戶所欣賞。這個(gè)網(wǎng)站是相當(dāng)值得探索也

16、研究的。非彩色的搭配單色配色2-3色配色多種色彩配色 單色配色是指一種顏色與無色系（黑白灰）搭配，在色彩上進(jìn)行不同的明暗漸變，或是貫穿全站的單一色彩。非彩色的搭配單色配色2-3色配色多種色彩配色 一種主色、一種輔助色，在此基礎(chǔ)上進(jìn)行明度、飽和度變化，構(gòu)成配色方案。主色所占頁面的面積大、處于視覺中心位置，而輔助色常常選用主色的互補(bǔ)色或鄰近色。這種或沖突或和諧的配色方案是一種前衛(wèi)又時(shí)尚的網(wǎng)頁色彩流行趨勢。還有點(diǎn)綴色一般用飽和度和明度亮的顏色。非彩色的搭配單色配色2-3色配色多種色彩配色（1）選取一個(gè)色系是能統(tǒng)一多種色彩的首要條件。（2）多種色彩對(duì)比適宜還可以通過降低色彩本身的純度及控制色彩的面積比

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