優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析課件

網(wǎng)絡(luò)營銷部門內(nèi)訓(xùn)----鄭華偉優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析（一）網(wǎng)頁設(shè)計(jì)中的分割法則1網(wǎng)絡(luò)營銷部門內(nèi)訓(xùn)優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析（一）網(wǎng)頁設(shè)網(wǎng)頁設(shè)計(jì)又沒有規(guī)律為什么我們的網(wǎng)頁就是差一點(diǎn)點(diǎn)感覺？為什么我們做了多年都是那樣的水準(zhǔn)，而他人在短短時(shí)間內(nèi)就能成長到一定高度，其原因就是因?yàn)橐恍┰O(shè)計(jì)師在長期不斷學(xué)習(xí)、思考、動(dòng)手過程中，領(lǐng)悟到了法則的存在。本文也許會(huì)幫到你，也許能夠帶你對網(wǎng)頁設(shè)計(jì)有一個(gè)更深層的認(rèn)識，也許能為你提供一個(gè)有理有據(jù)，在客戶面前裝B的不二法則。那么我們下面首先看一些案例2網(wǎng)頁設(shè)計(jì)又沒有規(guī)律為什么我們的網(wǎng)頁就是差一點(diǎn)點(diǎn)感覺？為什么我案例一從這張圖中你看到了什么？3案例一從這張圖中你看到了什么？3案例一分析從上圖中，我們可以看出，作者在做這個(gè)網(wǎng)頁的時(shí)候是何等的嚴(yán)謹(jǐn)，在他的頁面中，連圖兩邊的白色部分把網(wǎng)頁分割為8個(gè)模塊，原網(wǎng)頁的寬度是1600PX，即每一塊的寬度為200PX，在這個(gè)過程中，中間部分（1200寬度中）采用了6分法則。4案例一分析從上圖中，我們可以看出，作者在做這個(gè)網(wǎng)頁的時(shí)候是何那么什么是六分法則？讓我們重頭開始，來還原網(wǎng)頁設(shè)計(jì)中最本質(zhì)的東西，其實(shí)這個(gè)網(wǎng)頁并不復(fù)雜。我們先去除網(wǎng)頁要傳達(dá)的信息他原始的骨架就是如此了。因?yàn)?是一個(gè)很神奇的數(shù)字，他可以被3、2整除，我們網(wǎng)頁的展示區(qū)域一般是1200、960PX，在這個(gè)基礎(chǔ)上除以6，就有了多種選擇，我們可以把版塊分為200、400、600,1200PX，又可以劃分為160、320、480、960PX，分別對應(yīng)的布局是6、3、2、15那么什么是六分法則？讓我們重頭開始，來還原網(wǎng)頁設(shè)計(jì)中最本質(zhì)的同時(shí)我們在這個(gè)網(wǎng)頁中學(xué)到的還不止如此左圖中，你會(huì)發(fā)現(xiàn)，網(wǎng)頁中元素的位置是如此居中，對稱，看圖你就可以知道為什么這個(gè)元素要在這個(gè)位置，而不是偏左或者偏右。很多童鞋，其實(shí)就是缺乏的這種嚴(yán)謹(jǐn)6同時(shí)我們在這個(gè)網(wǎng)頁中學(xué)到的還不止如此左圖中，你會(huì)發(fā)現(xiàn)，網(wǎng)頁中還有這個(gè)你可以感受一下這個(gè)網(wǎng)頁的banner是不是右邊格子一樣嚴(yán)謹(jǐn)7還有這個(gè)你可以感受一下這個(gè)網(wǎng)頁的banner是不是右邊格子一當(dāng)我第一次看到這個(gè)網(wǎng)站就被他的規(guī)則震撼住了他精確到每個(gè)元素間的距離正好都是10的整倍數(shù)，首屏banner高度570，logo長度190，乘以3，正好就是570.底部more標(biāo)簽與底欄的距離是90,。而底欄文字高度嚴(yán)格縮小在90像素以內(nèi)，同時(shí)與上下之間的間距保持在40像素。從這里我們可以看出：要做好一個(gè)網(wǎng)頁，其網(wǎng)頁中每一個(gè)元素，他們的位置、大小，一定需要有關(guān)聯(lián)的。8當(dāng)我第一次看到這個(gè)網(wǎng)站他精確到每個(gè)元素間的距離正好都是10的小切糕全屏響應(yīng)式網(wǎng)頁中的很多元素，除了可以有等比、等高、等寬之類的聯(lián)系外，其實(shí)還可以有倍數(shù)之間的關(guān)系小切糕全屏響應(yīng)式俗稱瀑布流設(shè)計(jì)，是根據(jù)屏幕寬度進(jìn)行計(jì)算，通常在設(shè)計(jì)中會(huì)有一個(gè)基礎(chǔ)最小切糕，然后以1倍、2倍、3倍、4倍進(jìn)行拓展，并計(jì)算出最合適完整的組合9小切糕全屏響應(yīng)式網(wǎng)頁中的很多元素，除了可以有等比、等高、等寬實(shí)際運(yùn)用從上到下，每一個(gè)模塊，每一個(gè)版塊的網(wǎng)頁元素，他們相對稱的分割在各個(gè)版塊當(dāng)中，絕不越線。同時(shí)模特服裝圖片，在寬度不變的情況下，它的高度分別是1倍、2倍、3倍、4倍，產(chǎn)生若有似無的聯(lián)系。這就是六分法則，它讓你的網(wǎng)頁具備普通網(wǎng)頁不具備的整體感。同樣的法則，我們看以下兩個(gè)頁面，拋棄了傳統(tǒng)的柵格法則，取而代之的是，把劃分網(wǎng)頁的分割線變成了6條。10實(shí)際運(yùn)用從上到下，每一個(gè)模塊，每一個(gè)版塊的網(wǎng)頁元素，他們相對1111最后的最后那么電腦前的你懂了么？有了它，我們的設(shè)計(jì)才變得有理可據(jù)，在客戶面前也能更具備說服力。掌握這個(gè)方法的你，一定可以做得更好!12最后的最后那么電腦前的你懂了么？12網(wǎng)頁中的配色問題一、需要配色的是你的畫布，而不是你的圖片一個(gè)在網(wǎng)頁設(shè)計(jì)中最根本的原則是，無論你花了多少時(shí)間創(chuàng)造了一個(gè)輝煌的設(shè)計(jì)，其最終的作用是發(fā)揮出內(nèi)容的核心位置。你的配色方案永遠(yuǎn)不應(yīng)該比它呈現(xiàn)的內(nèi)容的更加“響亮”。你的設(shè)計(jì)應(yīng)該是在后臺(tái)，目的是幫助突出網(wǎng)站的內(nèi)容。13網(wǎng)頁中的配色問題一、需要配色的是你的畫布，而不是你的圖片13淺灰色的畫布突出了圖像，而明亮的畫布反而不能突出你的內(nèi)容。用Photoshop等軟件設(shè)計(jì)網(wǎng)站的時(shí)候，創(chuàng)建設(shè)計(jì)的過程往往是相互獨(dú)立的。有些設(shè)計(jì)單個(gè)看起來很不錯(cuò)，也能被你的客戶所接受，但是當(dāng)它真正被設(shè)計(jì)成網(wǎng)頁的時(shí)候不適當(dāng)?shù)呐渖鶗?huì)分散訪客的注意力。事實(shí)上，網(wǎng)頁設(shè)計(jì)的過程是和內(nèi)容緊密相連的，很多制作高品質(zhì)的網(wǎng)頁看上去空空蕩蕩，幾乎沒有內(nèi)容。14淺灰色的畫布突出了圖像，而明亮的畫布反而不能突出你的內(nèi)容。1二、選擇簡單的灰色

作為你網(wǎng)站的基調(diào)你可以為你的網(wǎng)站基調(diào)選擇無數(shù)種顏色，不過我建議你采用最簡單的顏色，比如白色/淺灰色與深灰色的搭配文字背景。你可以看看任何熱門的網(wǎng)站、模版、主題，白色或淺灰色與深灰色搭配成了大多數(shù)的選擇，這當(dāng)然也是有充分理由的。這樣的搭配對訪客而言提高了你內(nèi)容的可讀性，并且把你的圖片突出在最前方。15二、選擇簡單的灰色你可以為你的網(wǎng)站基調(diào)選擇無數(shù)種顏色，不過我一般來說，你的文字最好避免使用墨黑色，深灰色一般更容易閱讀。

對于你的背景色，全白色（#FFFFFFF）是可以搭配任何文本的最安全的顏色。如果你想選用其他的背景顏色，我們建議采用#FFFFFF到#CCCCCC

當(dāng)然，這些顏色的選擇都不是固定死的。16一般來說，你的文字最好避免使用墨黑色，深灰色一般更容易閱讀。三、盡量不要使用顏色選擇器右上角的顏色顏色選擇器的右上角是一塊肥沃的土地。在右上角的顏色可以執(zhí)行出驚人的效果，而且非常誘人，但通常想用好需要大量的經(jīng)驗(yàn)。如果沒有這種經(jīng)驗(yàn)，他們可能會(huì)導(dǎo)致事故的發(fā)生，所以最好以削弱你的顏色，最好都保持比較淡化的色彩。為了說明這一點(diǎn)，看如果我只是改變了我們設(shè)計(jì)的色調(diào)，到目前為止，會(huì)發(fā)生什么。17三、盡量不要使用顏色選擇器右上角的顏色顏色選擇器的右上角是一看上去還是聽舒服的對吧？但是如果你把顏色調(diào)整為選擇器右上角的顏色，我們再來看看效果如何：18看上去還是聽舒服的對吧？但是如果你把顏色調(diào)整為選擇器右上角的分分鐘亮瞎了訪客的雙眼！如果你想確保你不燒焦你的訪客的視網(wǎng)膜，遵循留出顏色選擇器的右上角的格子的一半原則。19分分鐘亮瞎了訪客的雙眼！如果你想確保你不燒焦你的訪客的視網(wǎng)膜案列20案列20ThankYou!21ThankYou!21網(wǎng)絡(luò)營銷部門內(nèi)訓(xùn)----鄭華偉優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析（一）網(wǎng)頁設(shè)計(jì)中的分割法則22網(wǎng)絡(luò)營銷部門內(nèi)訓(xùn)優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析（一）網(wǎng)頁設(shè)網(wǎng)頁設(shè)計(jì)又沒有規(guī)律為什么我們的網(wǎng)頁就是差一點(diǎn)點(diǎn)感覺？為什么我們做了多年都是那樣的水準(zhǔn)，而他人在短短時(shí)間內(nèi)就能成長到一定高度，其原因就是因?yàn)橐恍┰O(shè)計(jì)師在長期不斷學(xué)習(xí)、思考、動(dòng)手過程中，領(lǐng)悟到了法則的存在。本文也許會(huì)幫到你，也許能夠帶你對網(wǎng)頁設(shè)計(jì)有一個(gè)更深層的認(rèn)識，也許能為你提供一個(gè)有理有據(jù)，在客戶面前裝B的不二法則。那么我們下面首先看一些案例23網(wǎng)頁設(shè)計(jì)又沒有規(guī)律為什么我們的網(wǎng)頁就是差一點(diǎn)點(diǎn)感覺？為什么我案例一從這張圖中你看到了什么？24案例一從這張圖中你看到了什么？3案例一分析從上圖中，我們可以看出，作者在做這個(gè)網(wǎng)頁的時(shí)候是何等的嚴(yán)謹(jǐn)，在他的頁面中，連圖兩邊的白色部分把網(wǎng)頁分割為8個(gè)模塊，原網(wǎng)頁的寬度是1600PX，即每一塊的寬度為200PX，在這個(gè)過程中，中間部分（1200寬度中）采用了6分法則。25案例一分析從上圖中，我們可以看出，作者在做這個(gè)網(wǎng)頁的時(shí)候是何那么什么是六分法則？讓我們重頭開始，來還原網(wǎng)頁設(shè)計(jì)中最本質(zhì)的東西，其實(shí)這個(gè)網(wǎng)頁并不復(fù)雜。我們先去除網(wǎng)頁要傳達(dá)的信息他原始的骨架就是如此了。因?yàn)?是一個(gè)很神奇的數(shù)字，他可以被3、2整除，我們網(wǎng)頁的展示區(qū)域一般是1200、960PX，在這個(gè)基礎(chǔ)上除以6，就有了多種選擇，我們可以把版塊分為200、400、600,1200PX，又可以劃分為160、320、480、960PX，分別對應(yīng)的布局是6、3、2、126那么什么是六分法則？讓我們重頭開始，來還原網(wǎng)頁設(shè)計(jì)中最本質(zhì)的同時(shí)我們在這個(gè)網(wǎng)頁中學(xué)到的還不止如此左圖中，你會(huì)發(fā)現(xiàn)，網(wǎng)頁中元素的位置是如此居中，對稱，看圖你就可以知道為什么這個(gè)元素要在這個(gè)位置，而不是偏左或者偏右。很多童鞋，其實(shí)就是缺乏的這種嚴(yán)謹(jǐn)27同時(shí)我們在這個(gè)網(wǎng)頁中學(xué)到的還不止如此左圖中，你會(huì)發(fā)現(xiàn)，網(wǎng)頁中還有這個(gè)你可以感受一下這個(gè)網(wǎng)頁的banner是不是右邊格子一樣嚴(yán)謹(jǐn)28還有這個(gè)你可以感受一下這個(gè)網(wǎng)頁的banner是不是右邊格子一當(dāng)我第一次看到這個(gè)網(wǎng)站就被他的規(guī)則震撼住了他精確到每個(gè)元素間的距離正好都是10的整倍數(shù)，首屏banner高度570，logo長度190，乘以3，正好就是570.底部more標(biāo)簽與底欄的距離是90,。而底欄文字高度嚴(yán)格縮小在90像素以內(nèi)，同時(shí)與上下之間的間距保持在40像素。從這里我們可以看出：要做好一個(gè)網(wǎng)頁，其網(wǎng)頁中每一個(gè)元素，他們的位置、大小，一定需要有關(guān)聯(lián)的。29當(dāng)我第一次看到這個(gè)網(wǎng)站他精確到每個(gè)元素間的距離正好都是10的小切糕全屏響應(yīng)式網(wǎng)頁中的很多元素，除了可以有等比、等高、等寬之類的聯(lián)系外，其實(shí)還可以有倍數(shù)之間的關(guān)系小切糕全屏響應(yīng)式俗稱瀑布流設(shè)計(jì)，是根據(jù)屏幕寬度進(jìn)行計(jì)算，通常在設(shè)計(jì)中會(huì)有一個(gè)基礎(chǔ)最小切糕，然后以1倍、2倍、3倍、4倍進(jìn)行拓展，并計(jì)算出最合適完整的組合30小切糕全屏響應(yīng)式網(wǎng)頁中的很多元素，除了可以有等比、等高、等寬實(shí)際運(yùn)用從上到下，每一個(gè)模塊，每一個(gè)版塊的網(wǎng)頁元素，他們相對稱的分割在各個(gè)版塊當(dāng)中，絕不越線。同時(shí)模特服裝圖片，在寬度不變的情況下，它的高度分別是1倍、2倍、3倍、4倍，產(chǎn)生若有似無的聯(lián)系。這就是六分法則，它讓你的網(wǎng)頁具備普通網(wǎng)頁不具備的整體感。同樣的法則，我們看以下兩個(gè)頁面，拋棄了傳統(tǒng)的柵格法則，取而代之的是，把劃分網(wǎng)頁的分割線變成了6條。31實(shí)際運(yùn)用從上到下，每一個(gè)模塊，每一個(gè)版塊的網(wǎng)頁元素，他們相對3211最后的最后那么電腦前的你懂了么？有了它，我們的設(shè)計(jì)才變得有理可據(jù)，在客戶面前也能更具備說服力。掌握這個(gè)方法的你，一定可以做得更好!33最后的最后那么電腦前的你懂了么？12網(wǎng)頁中的配色問題一、需要配色的是你的畫布，而不是你的圖片一個(gè)在網(wǎng)頁設(shè)計(jì)中最根本的原則是，無論你花了多少時(shí)間創(chuàng)造了一個(gè)輝煌的設(shè)計(jì)，其最終的作用是發(fā)揮出內(nèi)容的核心位置。你的配色方案永遠(yuǎn)不應(yīng)該比它呈現(xiàn)的內(nèi)容的更加“響亮”。你的設(shè)計(jì)應(yīng)該是在后臺(tái)，目的是幫助突出網(wǎng)站的內(nèi)容。34網(wǎng)頁中的配色問題一、需要配色的是你的畫布，而不是你的圖片13淺灰色的畫布突出了圖像，而明亮的畫布反而不能突出你的內(nèi)容。用Photoshop等軟件設(shè)計(jì)網(wǎng)站的時(shí)候，創(chuàng)建設(shè)計(jì)的過程往往是相互獨(dú)立的。有些設(shè)計(jì)單個(gè)看起來很不錯(cuò)，也能被你的客戶所接受，但是當(dāng)它真正被設(shè)計(jì)成網(wǎng)頁的時(shí)候不適當(dāng)?shù)呐渖鶗?huì)分散訪客的注意力。事實(shí)上，網(wǎng)頁設(shè)計(jì)的過程是和內(nèi)容緊密相連的，很多制作高品質(zhì)的網(wǎng)頁看上去空空蕩蕩，幾乎沒有內(nèi)容。35淺灰色的畫布突出了圖像，而明亮的畫布反而不能突出你的內(nèi)容。1二、選擇簡單的灰色

作為你網(wǎng)站的基調(diào)你可以為你的網(wǎng)站基調(diào)選擇無數(shù)種顏色，不過我建議你采用最簡單的顏色，比如白色/淺灰色與深灰色的搭配文字背景。你可以看看任何熱門的網(wǎng)站、模版、主題，白色或淺灰色與深灰色搭配成了大多數(shù)的選擇，這當(dāng)然也是有充分理由的。這樣的搭配對訪客而言提高了你內(nèi)容的可讀性，并且把你的圖片突出在最前方