網頁設計【視覺篇】推薦-文檔資料

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

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

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

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

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

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

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

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

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

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

11、過代碼直接生成圖形。Jpg-圖標背景默認白色，文件大?。?.06kbGif-圖標背景全透明，文件大?。?.68kbjpg格式（左）gif格式（右）如在Illustrator軟件中設計一個200px*200px西瓜的圖標，將圖形保存后為Svg格式。Svg儲存格式（上）圖像（左）代碼（右6.2.3 圖像的肌理圖像的肌理 肌理，又稱質感，由于物體的材料不同，表面的排列、組織、構造等不同，因而產生粗糙感、光滑、軟硬感。不同的質感和肌理，會使人產生不同的心理感受。6.3.1 色彩的模式色彩的模式6.3 色彩設計師最常用的色彩模式有Cmyk，Rgb這兩種。 CMYK是青色（Cyan），洋紅（Magenta

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

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

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

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

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

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