網站版式設計課件

網站版式設計一.網站的視覺路徑

1.視覺路徑一般是：從上到下，從左到右。2.網站中方塊：(1)方塊感越強越能給用戶方向感。(2)方塊越少越好。(3)盡量用留白做視覺區(qū)分。4.主次關系：對用戶引導的關鍵就在于怎么處理主次關系。說白了就是對比，從視覺的角度上看：形狀的大小，顏色，擺放的位置都會影響信息的重要與否。

比如yahoo中間新聞欄的設計，大圖帶大標題是第一要點，小圖帶字是第二要點，純文本第三，節(jié)奏感、主次關系非常強。5.常見問題：(1)視覺設計師不懂代碼，前端設計師在視覺方面又不專業(yè)。常常是實現(xiàn)出來的產品跟視覺設計出來的圖片有所偏差。建議視覺設計師跟進調整。(2)廣告圖片破壞視覺效果。如果網站足夠牛的話，可以讓廣告方遵循視覺規(guī)范。如果不行的話，起碼設計師還能決定廣告的尺寸，位置等等。新浪、騰訊、淘寶的首頁改版。單純從視覺設計的角度上看，騰訊非常清爽，很用心。2.滿版型：

頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網頁設計中的運用越來越多。3.分割型：

把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜。可以調整圖片和文案所占的面積，來調節(jié)對比的強弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產生自然和諧的效果。4.中軸型：

沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。6.傾斜型：

頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強烈的動感，引人注目7.對稱型：

對稱的頁面給人穩(wěn)定、嚴謹、莊重、理性的感受。

8.焦點型：

焦點型的網頁版式通過對視線的誘導，使頁面具有強烈的視覺效果。（1）中心以對比強烈的圖片或文字置于頁面的視覺中心。

（2）向心視覺元素引導瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。

（3）離心視覺元素引導瀏覽者視線向外輻射，則形成一個離心的網頁版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運用時應注意避免凌亂。10.自由型：

自由型的頁面具有活潑、輕快的風格。三.網站制作中的比例：美的比例是網頁設計成功的基礎，好頁面的首部、菜單、頁面和底部的合理安排和選擇，首先取決于良好的比例！公認為最美的比例是黃金比(黃金分割)－－1:1.618。還有一種美的比例標準產生于德國，我們稱之為德國標準比例。1:1.141。四.網站設計風格：風格是抽象的。是指站點的整體形象給瀏覽者的綜合感受。舉個例子：我們覺得網易是平易近人的，迪斯尼是生動活潑的，IBM是專業(yè)嚴肅的。這些都是網站給人們留下的不同感受。

五.網頁色彩的搭配：1．用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

六.顏色誤區(qū)：1．不要將所有顏色都用到，盡量控制在三~五種色彩以內。

2．背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。七.視覺流程版式類型：1.視覺運動規(guī)律：(1)一條垂直線在頁面上，會引導視線作上下的視覺流動。(2)水平線會引導視線向左右的視覺流動。(3)斜線比垂直線、水平線有更強的視覺訴求力。(4)矩形的視線流動是向四方發(fā)射的。2.視覺流程概念：是視線在觀賞物上的移動過程，是二維或三維空間中的運動。3.視覺流程：(1)視覺流程的籌劃：視覺流程是網頁版式設計的重要內容，可以說，視覺流程運用的好壞，是設計者技巧成熟與否的表現(xiàn)。頁面中不同的視域，注目程度不同，給人心理上的感受也不同。作為個性化的視覺元素，拼貼剪紙式的文字分別占據(jù)了三個點，吸引視線在它們之間流動瀏覽者的眼睛首先看到的是頁面的左上角(2)視覺流程類型：分為直線視覺流程和曲線視覺流程兩類。視覺流程明確，形成清晰易讀的頁面設計自由的視覺流程形成生動活潑的頁面設計(3)焦點視覺流程：是指視覺心理的焦點。每個頁面中都有一個視覺焦點，這是需要重點處理的對象。焦點是否突出，和頁面版式編排、圖文的位置、色彩的運用有關，同時也與對“焦點”著力描寫有關。在視覺心理作用下，焦點視覺流程的運用使主題更為鮮明、強烈。按照主從關系的順序，使放大的主題形象成為視覺焦點，以此來表達主題思想。運用圖片大小的對比引起視覺的流動將文案作整體編排，突出主題形象。對主題圖片的遮擋，引發(fā)瀏覽者一探究竟的興趣在主題形象四周增加空白量，使之成為視覺焦點。留白使頁面簡約大方，更加突出了主題通過在主體產品周圍留白吸引視線這是一個典型的運用焦點視覺流程的例子頁面中的方形圖無疑首先吸引了瀏覽者的視線具有獨特個性風格的首頁設計,視覺流程清晰八.顏色應用1.色彩的易見性在白紙上黃字不醒目，而寫黑字醒目——明度對比強，易見度高；明度對比弱，易見度低。另外，光線弱。易見度低；光線過強，有眩目感，易見度也差；色彩面積大，易見度高；色彩面積小，易見度低。如果當兩組光源與形相同時，形是否能看清楚，則取決于形色與背景色的明度，色相、純度上的對比關系。其中明度對比最強的對比作用最大，對比強的清楚，弱的模糊。例如：黑色底可見度強弱次序是白——黃——黃橙——黃綠——橙。白色底可見度強弱次序是黑——紅——紫——紫紅——藍藍色底可見度強弱次序是白——黃——黃橙——橙黃色底可見度強弱次序是黑——紅——藍——藍紫——綠2.色彩的對比種類色彩對比：在一定條件下，人對同一色彩有不向的感受。色彩單一給人一種印象。在不同的環(huán)境下，多色彩給人另一種印象。色彩之間這種相互作用的關系稱“色彩對比”。明度對比、純度對比、冷暖對比、面積對比3.色彩的感情色彩的冷暖色彩的輕重色彩的華麗咸與樸素感色彩與四季色彩與味覺色彩與形狀4.聯(lián)想:(1)具體的聯(lián)想紅色：聯(lián)想到火、血、太陽……橙色：可聯(lián)想到燈光、柑桔、秋葉……黃色：可聯(lián)想光、檸檬、迎春花……綠色：可聯(lián)想到草地、樹葉、禾苗……藍色：可聯(lián)想到天空、水……紫色：可聯(lián)想到丁香花、葡萄、茄子……黑色，可聯(lián)想到夜晚、墨；炭、……白色：可聯(lián)想到白云、白糖、面粉、雪……灰色：可聯(lián)想到烏云、草木灰、樹皮……(2)抽象的聯(lián)想紅色：可聯(lián)想到熱情，危險、活力……橙色：可聯(lián)想到溫暖、歡喜、嫉妒……黃色：可聯(lián)想到光明、希望、快活、平凡……綠色：可聯(lián)想到和平、安全、生長、新鮮……藍色：可聯(lián)想到平靜、悠久、理智、深遠……紫色：可聯(lián)想到優(yōu)雅、高貴、重、神秘……黑色：可聯(lián)想到嚴肅、剛健、恐怖、死亡……白色：可聯(lián)想到純潔、圣、清凈、光明……灰色：可聯(lián)想到平凡、失意、謙遜……這些色彩的聯(lián)想多次反復，幾乎固定了它們專有的表情，于是該色就變成了該事物的象征。5.色相的心理分析(1)紅色紅色的純度高，注目性高，刺激作用大，人們稱之為“火與血”的色彩，能增高血壓加速血液循環(huán)，對于人的心理產生巨大的鼓舞作用。(2)橙色橙色的刺激作用雖然沒有紅色大，但它的視認性注目性也很高，即有紅色的熱情又有黃色的光明，活潑的性格，是人們普遍喜愛的色彩。(3)黃色黃色是最為光亮的色彩，在有彩色的純色中明度最高，給人以光明、迅速、活潑、輕快的感覺。它的明視度很高，注目性高，比較溫和。(4)黃綠色是黃色和綠色的中間色，由于在日常生活中黃綠色并不突出，所以易被人們所忽視，有很多色彩心理的研究把黃綠與綠色合并。(5)綠色綠色的心理概念：綠色為植物的色彩，明視度不高，刺激性不大，對生理作用和心理作用都極為溫和，因此入對綠色的嗜好范圍很大，給人以寧靜、休息、精神不易疲勞。(6)藍綠色藍綠色的明視度及注目性，基本與綠色相同，只是比綠色顯得更冷靜、涼濕，其它給人的心理感覺與綠色差不多。(7)藍色藍色的注目性和視認性都不太高，但在自然界如天空、海洋均為藍色，所占面積相當大，藍色給人冷靜、智慧、深遠的感覺。(8)藍紫色藍紫色與黃色的刺激相反，是明度很低的色彩，所以純度效果顯不出力量，注目性較差，明視度必須靠背景的襯托。給人以收縮、后退的膊覺。(9)紫色紫色因與夜空、陰影相聯(lián)系，所以富有神秘感。紫色易引起心理上的憂郁和不安，但紫色又給人以高貴、莊嚴之感，所以婦女對紫色的嗜好性很高。(10)紫紅色紫紅色指紫味的紅色，視認性和注目性冷暖程度介于紅色和紫色之間，此色的嗜好率很高。據(jù)說對憂郁癥、低血壓的人有治療作用。(11)白色白色為不含純度的色，除因明度高而感覺冷外基本為中性色，明視度及注目性都相當高，由于白色為全色相，能滿足視覺的生理要求，與其它色彩混合均能取得很好的效果。(12)黑色黑色為全色相，也是沒有純度的色，與白色相比給人以暖的感覺，黑色在心理L是一個很特殊的色，它本身無刺激性，但是與其它色配合能增加刺激，黑色是消極色．所以單獨時嗜好率低，可是與其它色彩配合均能取得很好的效果。(13)灰色灰色為全色相，也是沒有純度的中性色，完全是一種被動性的色，由于視覺最適應看配色的總和為中性灰色，所以灰色是最為值得重視的色，它的視認性、注目性都很低。所以很少單獨使用，但灰色很順從，與其它色彩配合可取得很好的效果。人物設定與場景一.人物設定以人物為主的動畫形象設計1.人物的基本比例2.人體的基本結構頭頸肩腰腹臀四肢3.人體的基本運動規(guī)律(1)大致了解身體各個部位的內部結